This course has been updated! We now recommend you take the Introduction to D3.js course.
Transcript from the "Shapes Introduction" Lesson
[00:00:00]
>> Shirley Wu: And thus far we've been using SVG elements. But I didn't wanna inundate you with all of the SVG circles and all of that. So we've been using only rect so far. And a rect is the x is the top left. Y is the y-coordinate of the top left within height.
[00:00:18] There are quite a few other SVG elements that we could be using for our visualizations, one of them being the circle. And for circle, it's essentially just CX and CY are the x and y coordinate of the center of your circle, and then a radius. And those are the things that you need to draw a circle.
[00:00:36] A text element is a little bit more involved. The x and y coordinate, usually we use a text anchor is how we specify your alignment. So text anchor could be, I don't know why SVG had to go and have a whole different set of language, but text anchor the values start is like left align, middle is center align, and end is right align.
[00:01:06] Yeah, horizontal text alignment. And then my personal favorite is the path element. And essentially a path element right now is just like a straight line because I didn't know how to do a squiggle on slides. But it just takes this little attribute called d, which I think somebody was like maybe it stands for definition, or define, but [LAUGH] it's essentially you specify the path to follow.
[00:01:40] So you could be like, I want this path to start at 0,0. So move to 0,0, draw a line to 10, 10. Have a curve that curves to 30, 30, or something like that. And you can draw all kinds of shapes with it. So the core functionality, I won't go into all of the details of how the d attribute of path works because I think that's a whole another few hours in itself until I get used to it.
[00:02:10] But here is all of the main commands that I use quite often. Move to a point, line to a point, curve to a pointy, arc to a point. And I just want to mention that because if you just get yourself really comfortable with SVG paths. So I've linked to this document that kinda describes all of the,
[00:02:39]
>> Shirley Wu: This is what a d attribute looks like, and it's kind of ugly cuz you have to be able to figure out what they're saying. I think that's move to 10, 10 horizontal line to x value 90, vertical line to 90, horizontal and closed path. So it's very involved, but you just get it.
[00:02:59] If you just learn it and you can draw these paths, all these different kinds of paths, arcs. If you get yourself familiarize with this, there are some beautiful, beautiful shapes that you can make. So one of them is this one. So this is my project where I really, really, really got.
[00:03:24] Now I know curves like back of my hand, I can just draw curves, [LAUGH] which is not something that I need to brag about. But for this project, essentially this is move to, and then curve to, I think, this point. And then another curve back to this. And just by creating a few of these shapes and to these kind of petal shapes.
[00:03:53] This is just, I think I'll use our movetos, linetos, and curvetos. You can make these petal shapes that are really cute. And then if you just combine them together and rotate them in certain ways and size them in different ways you can get these flowers. You can curve these and these are basically, this is my project called film flowers.
[00:04:15] And then so I've basically scraped the data off IMDb. And the size is the IMDb rating out of 10, so the bigger it is, the better it is. And then I just want to show you, and the colors are the different genres like comedy and stuff. So, inception is one of my favorites.
[00:04:35] Harry Potter, is one of my favorites. I wanna show you my absolute favorite, really quick. This is my favorite, Batman and Robin.
>> Students: [LAUGH]
>> Shirley Wu: [LAUGH] It's like, and this is also using skills. This is 3.7 out of 10 on IMDb. And so it's just that tiny, and I think the biggest might be, it might be inception maybe?
[00:05:02] With like 8.8, maybe there was another one that's bigger than that or something like that. Yeah, so this is using scales. Another thing that I wanted to mention is it's using PaaS, and it's using SVG Transform, which we've been using a little bit. And for transform, we've been using this thing called translate, which just pushes things down, it pushes x and y.
[00:05:29] But you can also scale things, like literally, you can scale things by 1x, 2x, 0.5x. You can rotate things, you can skew things, I've actually never use skew. But these things, I don't want to go into detail but make sure to check out when you have the time because if you just use these things in combination like, you can just make these kinds of things.
[00:05:55] That are kinda pretty, and people were really amazed by the flowers. And they were like, my god, that looks super intense. And I'm like, no, it was just a few curve commands. I'm like, I just rotated things, and that's it. It took me a day, an afternoon. So if you just understand things things will come very easily.
[00:06:18] And then this is just another example. I think I might have broken it, at some certain point. But, it's just another example to show you. I think these were all just line tos, and I create a tiny little triangle, and I just rotate that a bunch of times.
[00:06:35] And that's all that's happening and people are like, whoa it's so pretty. And I'm like, yeah, and it only took one afternoon, just need to know these paths and transforms and that's all you got to make pretty things.