Data to SVG Shapes Solution

[00:00:00]
>> Shirley Wu: So we're back and actually before we go ahead, I want to address a few things that we talked about during the break. And so the first thing actually is, so this an observable Notebook and how it works is you write either HTML or JavaScript code in one of these cells.

[00:00:21]
And then every time there is a change you can rerun it by pressing this little Play button right here. Or you can just click Shift+Enter in the cell and it will rerun the cell. So that was one of the first things I wanted to cover. The second thing I wanted to say is so a few of you noticed that the paths are basically like Illustrator or the Pen tool in Photoshop.

[00:00:47]
Basically in Illustrator, you can with the Pen tool kind of click on a point, and then draw a line, or draw a curve. And for a curve you have to first make a line and then there's an anchor point that show up. And you drag those anchor points around to make curves.

[00:01:09]
That's basically exactly what's happening with these path elements, except instead of a nice Pen tool that you click and drag and all of that, it's all just numbers. But kind of when in the Pen tool, you click and that's the start of your path. That's the move to command that you might have noticed in here.

[00:01:34]
There are Ls in here that are subtle to see. But the Ls are line 2 commands. I think if you go down to this radio chart, you can kind of see these arcs, these curves. And these are, I believe, arc two commands right here. And each of them, so for move-to's you have to give it an x,y-coordinate and that's separated by this comma.

[00:02:05]
For arcs you have to give it a radius x, a radius y, three zeros and ones, to tell it what to draw and then ending x,y. And so, it's like drawing with Illustrator but without the Pen and just with numbers [LAUGH] and a few letters. And so the point of this was to show you.

[00:02:31]
And then I also heard, actually, it made me really happy cuz I heard people say, so this is doing this. Or if you remove this, and that was really cool. And I was also told that the rectangle was the most straightforward. And I wanted you to see that, too.

[00:02:46]
It's exactly what we were talking about, x,y with height. And also why I wanted to mention that for paths, don't worry about it too much right now. And the reason why I wanted you to see it, I mean, I think it would've been prettier if I took out the decimals [LAUGH].

[00:03:05]
These are generated so that decimals are there. But I wanted to let you see how not pretty it is, and how potentially kind of hard it is to hand-code a bunch of these and be like, this is where D3 comes in.