Draw data

[00:00 - 08:33] Okay, so here comes the fun part. Now we get to draw our data. So if we go back to our JavaScript code, so we remember back to our timeline, for a timeline we had one line SVG element and it went through all of our data points. For the scatter plot we created one circle for each of our data points and this histogram is going to be still different where we want one rectangle for every bucket of data points. So we want to grab our bins and create a new rectangle for each of these buckets and we can see for an individual bin we have both a rectangle and a text element that shows the number of items within that bin. So because we have two elements that we're going to need to create for each of these bins, let's actually create a group for the bins. Although first let's just create a group for all of our bins just to keep things organized. So let's call this bins group and let's send this to our bounds. So bounds append a new group element and now we'll want to create bin groups. Maybe these variable names are a little bit confusing but this is a group that's going to be added for every single item in our bins array and if you remember to our scatter plot lesson we used select all to grab all of a specific element within this whatever the target of our selector is. So even though we don't have any groups in here yet we're going to select all of them just so our d3 selection object know is what we're targeting and then we're going to do our data joins so we're going to join it to our bins array and let's just remind yourself what that looks like again so let's log it out. So this is an array of arrays. Okay great. So after we join it with our bins array we're going to use the dot join new d3 syntax to join it with g elements. So this should create a group for each one of the items within our bins array and next up we can start creating the rectangles for each of these bins but first let's figure out are there any constants that we can declare before we create these bins that we can just reuse instead of computing them for each of the bins. So one thing that we 're going to need while drawing every one of these bins is the amount of padding in between each of these bins as you can see there's a little bit of space here and for this padding it's nice to have a little bit too separate each bin but it shouldn't be too much because otherwise it's going to be harder to compare their heights it's always hard to clear things that are farther away so let's just give them one pixel of padding at least to start and because we've separated this out it'll be really easy to change in the future in case they're feeling a little bit cramped. Alright so now let's create these rectangles. So our bar rects and I like to name my variables even if I'm not going to use the name of them it just is a little bit of documentation for my code so when I go back in here I know exactly what every part is doing so for each of our groups so bin groups we're gonna want to append a rectangle and if you remember from the last time we drew a rectangle they have four attributes to help position them they are x, y, width and height so let's go ahead and figure out what the x value should be for these. So we're gonna take one of those bins and we're gonna use our x scale and then we're gonna use the x0 value of the bin just to position it at the lower bounds of this bin and we're also going to add half of the bar padding and this is so we're distributing that padding between this bin and the one in front of it. Alright so for the y attribute we'll want to know the height of the bin so we're gonna grab that specific bin and we're gonna use our y accessor and our y scale. Pretty easy setup that we have for ourselves here and the other two are width and height so for the width we're gonna subtract the scaled x0 value from the scaled x1 value so we're gonna say how far to the right is the top of the bin the higher bounds and then we're gonna subtract the left side of this bin and one thing that's good to do here well first off we'll want to subtract the bar padding because we're subtracting half of that from the left and half from the right of this bar but the width is still gonna be without the entire padding in between each bar and one thing to note here is that your browser will complain if you have a negative number for the width or the height of really any SVG element so let's do d3.max here and I'll explain what we're doing in a second let's grab 0 and then just pass that in here so what this is doing is saying if this number is negative bump it up to 0 so it's saying the maximum value of 0 or this number so this number is over 0 it's just gonna ignore this 0 but if it's negative bump it up to 0 so we're not having a negative width in our browser won't complain yep all right so the last thing here is we'll want to set the height and for the height we want to subtract the y value from the total height of our bounds so we can just grab this and then we'll want to subtract that from our bounded height so dimensions dot bounded height just go to a new line here just subtract that alright and this is going to be a function because it has to use that data point alright great so we have our bins this is exactly what we're looking for the last thing is let's just make them an ice blue because I find it easier to look at and again we're using fill because these are SVG elements and fill is basically background in SVG terms so let's do a nice cornflower blue alright great so next up we're gonna draw the labels on top of each of these