Introduction to D3.js

SVG Shape Exercise

Shirley Wu

Shirley Wu

Data Sketches
Introduction to D3.js

Check out a free preview of the full Introduction to D3.js course

The "SVG Shape Exercise" Lesson is part of the full, Introduction to D3.js course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to create a flower petal by first sketching it on paper, and then writing down an SVG path.

Preview
Close

Transcript from the "SVG Shape Exercise" Lesson

[00:00:00]
>> And so with this one, I want us to create a flower petal, or I want you to create a flower petal. So not together but individually, create a flower petal of your own. And the tip I have, is try sketching out your idea with pen and paper first, just like how I did it with the iPad.

[00:00:25]
It was just kind of redrawing out kind of the coordinate, little axes, and then labeling, and then drawing out where you think each of those points should be, and then labeling them. I find that that really helps me kind of visualize the shape and then where each of the xy positions should go.

[00:00:48]
S o yeah, try drawing your own flower petal, and then you can try putting them into this petal path string. And this one is extremely important, I'm hoping that we would have someone volunteer their flower petal path that we can put in here. And that will actually propagate through the rest of our notebooks.

[00:01:14]
So then when we draw our final flowers, we'll be able to have your own kind of original, creative flower path in the final film flowers we create. I had done the smiley face exercise a little bit incorrectly, in that, when I was originally creating this notebook, this transform is actually very much intentional.

[00:01:39]
So we're going to bring that back in and sorry for the confusion. Because what I want to do actually, is to have the 00 be the center of this smiley face. So actually we want the x is equal to 0 coordinate to be right in the middle. And the reason for this, is more for the petal, we want to make sure that the tip of the petal is at the 00 position.

[00:02:10]
Much like in this one, for this for this pedal, the 00 is actually right at the tip. And this isn't so important right now, but will become very important once we start building out the flower, because this is the position in which we'll rotate the flower petals. So very important that wherever the kind of the center, where the center of the flower should be, should be your 00.

[00:02:41]
So yeah, so keeping with that, let's kind of edit our smiley frowny face a little bit and instead of what we had before, which I believe was like, I think 2575, sorry, are 25, 25 here. Now I'm imagining kind of the x is equal to 0 line to be kind of going through right at the center of the smiley face.

[00:03:04]
So I have just edited it to be this little i, I've edited to be the x is negative 25, and draw a line down to negative 25. And then this line, instead of being, originally it was 75, x is equal to 75 right here, and I've edited that to be X is equal to 25.

[00:03:27]
And then here I've done the same thing. So this used to be 15 and I've edited that to be negative 35 to come over here. And then this used to be 0, I've pulled it down to this -50. This used to be 85 and this also used to be 85, so I just brought it to 35.

[00:03:47]
And so, I just wanted to make that correction because I knew there was a little bit of confusion about the flower petal exercise, because I had translated it over by 50 and that is very much intentional. So when you are doing the petal pads, please make sure to have the whatever the central point of the flower petal that you want rotate by, please make sure that that's 00.

[00:04:15]
And this is where 00 is at. For this smiley face exercise, I put this back to the translate (50, 0) back in. I've edited the smiley face to center around the x is equal to 0 to be at the center of the face. And then now we're going to do this exercise, this flower petal exercise,

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now