Drawing SVGs With Data 1 Video Lecture Transcript
This transcript was automatically generated by Zoom, so there may be discrepancies between the video and the text.

12:05:23 Hi! Everybody! Welcome back in this video. We're gonna finally see how we can draw some Svgs with data.
12:05:31 So this will be the first of 2 lectures on this.
12:05:34 So the first one we're gonna show you some of like just how to do it.
12:05:38 And then in the next notebook will actually learn a nice, easier way to make it nice.
12:05:43 Pictures, when then we'll come back in 2 lectures from now and finish up drawing Svgs with data.
12:05:49 This series. Okay, so just like with the way we appended paragraphs using data, dot-enter dot append, you can do the same exact thing where all you have to do is select the Svg element and then append it circles or rectangles or a path so in this video
12:06:10 we'll see some examples of pending circles to make scatter charts, and then the next time, with drawing data, part 2, we'll see of how to make bar charts and line charts.
12:06:21 So these must be appended. You cannot append these directly to the body of the document.
12:06:26 They have to be appended to an Svg element, and as we're going to see, we're going to have to be mindful about Svg coordinates, we should also be mindful that when we load data using d 3 dot Csv and D 3 Dott Json all of the data gets loaded
12:06:41 as a string, regardless of whether or not it's a flow or an integer, or a date so let's dive straight into the codes.
12:06:48 We're gonna be working on the scatter plots, dot.
12:06:52 HTML file. And so, for the first thing I think I wanna do is just remind us what the data looks like.
12:06:59 So we're working now with this scatter data. So let's look at what that looks like.
12:07:04 In our console. So we're gonna go ahead, open it, and you're gonna see some pictures.
12:07:11 But we're gonna first look at the console.
12:07:15 Okay, so here is our data, and we have the object. Each rows.
12:07:20 And object that has an x o y, and a radius.
12:07:25 So these are going to give us the positions of different circles.
12:07:30 The center x and Y, and then the radius of the circle.
12:07:32 Okay, so that's where our data looks like. And then here's a reminder.
12:07:36 The data is clearly a string, not an integer or a float.
12:07:41 So we're going to use like I said in the notes we're going to use partse, float, or parse int.
12:07:47 These are Javascript functions that do not need to D.
12:07:50 3, so you would just do pars floats, and we can actually even show this off in the console.
12:07:55 We do parse float, and then, if we put in like a 7.1 what we'd get back is the number 7.1.
12:08:05 Okay, alright. So I thought, what could be useful is, I do have the finish code here already.
12:08:10 But I thought maybe it might be useful to watch me add the circles by hand, and let me go ahead and comment the rest of these out.
12:08:21 Okay. So we've got our data loaded. We saw what it looked like with the console.
12:08:25 So we're doing. We're selecting. I've added 3 Svgs here within 3 distinct divs, which is common.
12:08:34 So when making a plot, in like a blog post or something, you'll often put your Svg.
12:08:39 Within a div, and then select the Svg. So after the enter, we want to append a circle, and then we're going to set the attributes of the center of the circle, using the function.
12:08:58 Return, and remember, parse float of d dot X, and so visual studio does this thing, adding spaces which is probably correct. Syntax.
12:09:08 But I kinda like it crunched a little bit better together, so I like it like this as opposed to when it adds all the extra space you choose.
12:09:17 Whatever you prefer, or if you're working in a in an industry setting, probably you might wanna follow the standards of whatever your working group is.
12:09:25 So, then the next for the why we do function of D, and then return parse, float.
12:09:35 D dot y.
12:09:40 Then we wanna set the radius. So, for now I'm going to set it to be 10.
12:09:48 But maybe it would be better if we use the actual radius.
12:09:51 So let's do that return parse float.
12:09:58 D dot r.
12:10:05 Okay.
12:10:08 Then I'm just going to set the interior of the circle to be white.
12:10:14 The edge of the circle to be black.
12:10:19 And the edge width of the circle to be 2.
12:10:27 Okay.
12:10:32 Alright. So now you can see our first issue here. Alright, all of the circles have been added here.
12:10:42 So why is this happening? Well, it has to do with the way that we are not yet accounting for the Svg coordinates.
12:10:49 So remember the Svg coordinates. Start with the upper left-hand circle is 0 comma 0, and then it increases this way and increases that way.
12:10:59 So if we remember, if we look at our data here, look at the X's and the y's.
12:11:03 There one and 4, 5 and 20. So they range here is from like Z to 20 on the Y, and then from 0 to 5 on the X.
12:11:12 So the first thing we should try doing is scaling the X and the Y just by multiplying them.
12:11:18 And so this, we'll keep the relative distances between the X and the Y points the same, but there'll be some scaled linearly, so they're not all bunched up together, and so one way we can do this is just by multiplying like i've done here.
12:11:35 Multiplying the X and the Y, and then let me copy over the R, so it's the same.
12:11:43 Okay, so this is pretty common. People will well, it's actually not.
12:11:49 We're gonna learn in the next notebook. It's not very common, but you can scale it by hand.
12:11:54 And then in the next notebook will actually show you how to scale it automatically using a D 3 dot.
12:12:00 J, s, function. Okay. So now we have scaled and you can see the difference.
12:12:06 And if anything, it shows because of the increasing radius we may wanna scale even further.
12:12:11 So what if we made this cx times 50? And you see why, times 15.
12:12:20 That's a little bit too much for the Y. What if we just track 10?
12:12:24 There we go all right, and so the scale, the relative scales are the same, so the distance from this to this is this, in ratio from the distance, that the smaller scale but now, like, for instance, it's just like the coordinates that would be if we had an x-axis and y axis the coordinates would
12:12:42 be different. But if we look at the data again, our pairs are like (142) 831-2416, and 5, 20.
12:12:51 So we might be asking ourselves, Well, why are these going down into the right?
12:12:55 Shouldn't they be going up into the right? Well, we also have to account for the orientation of the vertical axis within an S.
12:13:02 Vg. So remember the Svg goes from 0 to 100 and I'm not sure if I had any.
12:13:09 Okay, yeah, that was the only slide. So the Svg goes from 0, not to 100, but goes from 0 upwards as you go down.
12:13:17 So down here would be like 300, and up here is 0.
12:13:21 So we have to account for that.
12:13:24 In our code when we do the Y by doing the height of the Svg.
12:13:30 Which for us is go all the way to our style. 300.
12:13:35 So the height of the Svg. Minus the Y value will change the orientation and then let's go ahead and switch these up to what we decided after we played around with it for a little bit, and then this should be 10, and then let's go ahead and copy and paste our radius function here.
12:13:59 So now, if we get to this last one, they're going up into the right as designed.
12:14:04 So appending. Spg elements is pretty straightforward.
12:14:08 With d 3 day dot J. S. You just make an Sbg.
12:14:11 And then you append to the desired elements onto the Svg.
12:14:16 The thing that we have to be mindful of, though is that the orientation and the scale of the Scg coordinate axes are not always the one that we want to be using.
12:14:26 So we're going to have to change that in this notebook.
12:14:29 We changed it by hand, by multiplying and subtracting, and the next notebook, I believe.
12:14:34 Yes, in the next notebook, or not notebook, but in the next lecture we'll be showing you how to do that automatically, using D 3 scale.
12:14:43 Alright! So that's it for this video, though you've now made a few scatter plots and d 3 dot js, and I hope to see in the next video.