SVG Paths Introduction in D3.js

Paulo Dichone | Android, Java, Flutter Developer and Teacher
A free video tutorial from Paulo Dichone | Android, Java, Flutter Developer and Teacher
Software Engineer - Android, Java, Flutter, Dart and Teacher
4.4 instructor rating • 13 courses • 114,792 students

Learn more from the full course

d3.js - Complete Developer Data Visualization Guide

Bring Data to life with D3.Js Data Visualization Library. Master JavaScript, HTML, CSS and Build Stunning Data Visuals

17:20:01 of on-demand video • Updated February 2020

  • Web Development and D3 JS Data Visualization with Firebase
  • Build Data-Driven Visualizations
  • Learn HTML, CSS and JavaScript
  • Create D3 JS Projects with Firebase Backend
English [Auto] So far we've talked about a lot of different things. Now I would like to go back a little bit so that we can talk about path how to create paths and SPG and of course ultimately how to create paths using D3. So far we've learned how to create a lot of different primitive shapes such as lines rectangles circles and so forth. When we talk about path the path class in SPG we are talking about ways in which we can create customized shapes. So in ACG the straight A's v g code this is how you would create a path. Okay. So at first you may think that this is very complicated right. Because after all you have this tag line there that says path and then we have D. So every time we want to create a path in SPG we put a path tag and then inside of a d attribute to say now we're going to start putting together there a string which will be our path that we want to drop. Okay. So inside we have m 50/50 Rev l hundred hundred and then another l lowercase L twenty five zero Z. This is just gibberish at first look but let's dissect this a little bit. Look at this path code as some sort of like a composition right. We're composing a nice melody or something like that. So let's go and deconstruct what's happening there. So the letter M signifies that is the point at which we will put our pencil or a pen. So imagine that you have a pencil or a pen and you have a white paper. Whenever we say m 50 50 the 50 the first 50 is going to be x axis and the other 50 or the next number is going to be the y value. So we saying now pick up the pencil or the pen and move it to X fifty and Y fifty. Okay. So just imagine you open your pen or your pencil and you have your white paper and you just go to the 50 50 pixels x and y. Okay. That's all we're not doing anything. And then the next thing we have is l well l means let's start drawing. In this case we also add two other numbers. So x and y. So now we're saying you wouldn't say l 100 hundred was saying draw a line to 100 hundred. So from where we start we want to draw a line from where we start where we say m 50/50 right. When to draw the line two x 100 one. And then we drive. So we could have added many other hours notice the difference one is uppercase and the next one is lowercase. Now do lower case is a little bit interesting because lowercase we are saying l in this case lower case move from current position twenty five to the right why is it 25 to the right. Because X is 25 and then zero is indeed the Y. We're not moving the wind direction we are moving from 2 5 pixels 0 units to the right. All right. And of course the last thing we have here is easy. It says now we kind of done. So let's complete this line. Go back to where we started but let's complete the loop or say now let's put all of these into code so that it makes more sense. OK let's do that.