Building Custom Data Visualizations

Check out a free preview of the full Building Custom Data Visualizations course:
The "Readability Exercise & Solution" Lesson is part of the full, Building Custom Data Visualizations course featured in this preview video. Here's what you'd learn in this lesson:

In this exercise, Shirley demonstrates how to use the libraries mentioned in the previous video to add axes, and annotations to the movie visualization chart for improved readability.

Get Unlimited Access Now

Transcript from the "Readability Exercise & Solution" Lesson

[00:00:00]
>> Shirley Wu: Okay, so let's try and do this exercise together. Let's add some axis in for the x and y, let's add some annotations. In this case, I think I added annotations for all of the movies who were, I believe, \$200 million above the mean. And let's add some legends for the genre's.

[00:00:21] Okay, let's do this,
>> Shirley Wu: So here is the code we've been working off of. Okay, now, let's add axis, so to do axis have xAxis = d3.axis. And x-axis are at the bottom, so we want axisBottom. Create that, and then we want to pass in the xScale that we defined up above.

[00:00:52] And for a y-axis, let's make that to the left of our visualization, so that would be axisLeft and pass in scale(yScale);. And then, let's create a group element. I'm going to give it a class of x-axis. And then let's create the axis off of that. So call(xAxis);, and create another group .classed('y-axis').

[00:01:34]
>> Shirley Wu: true, and .call the d3.axis we created above. Here I'm wrong, axisLeft, and then I think that's all we need.
>> Shirley Wu: I'm going to switch over really quickly to the other tab and look at that. So we have axis, just not in the right places. And so to get them to the right places, we just need to use SVG transform, and translate it down.

[00:02:11] And then translate the y-axis across a little bit. So let's go back and do that. So where we created the two SVG group elements, let's do an attr('transform',. And in this case we want to translate the x-axis. We want to move it down, so we don't need to translate it by x.

[00:02:34] But we do want to translate it in the y direction down to {height- margin.bottom}. And for the y-axis, we want to translate it over, we want to nudge it to the right a little bit. So we want to use ('transform', 'translate'(. And so that's in the x direction, so we want to nudge it margin.left in the x direction.

[00:03:05] And we don't need to do anything in the y direction. And that should be all the code that it takes to do,
>> Shirley Wu: The axis. Nope, I was wrong. So I had nudged the x-axis down all the way to the bottom of my SVG window. But, in fact, I actually want to put it in here in the middle, where it's actually the mean box office figure.

[00:03:36] So let me redo that, let me translate that, actually. The x-axis, let me translate that to yScale, pass in 0, and then it should be translated to the correct position. I'm going to switch over to double check that. Yep, yay! Now I want to do a tiny bit of adjustments on the axis to make them look a little bit better.

[00:04:06] And so, for example, you might notice that the y-axis is not showing us the most useful of information. And so to change that, all we have to do is say tickFormat. And what that's going to do is for every one of the ticks that it shows, we can tell it to format it in a certain way.

[00:04:29] And so let's make that to be, let's divide it by millions. And also add the mean box office figure back in. So that instead of seeing 0 and then how much above or how much below, we can see the actual absolute box office figures. So let's do that together.

[00:04:56] And so what that would require is, so the d that I get here is just a number. So first of all, I want to add the meanBox back in. And I think If I just say, divide that by 100 million. And then wrap that around into a parsInt to clip off any decimal points.

[00:05:33] And then I'm just going to say that I want to prepend a dollar sign in front of it. And I want to append a M for million. And hopefully that will give me something better looking that fits within the margin. So I'm going to switch over and double check, and I am wrong.

[00:05:55] [LAUGH] I think I want to actually be dividing it by millions instead of 100 million. So that would make much more sense, so let me delete two 0s. Okay, so I'll just say, this now looks a lot better. And now we can see the absolute dollar amount for each of these box office figures.

[00:06:20] And then I'm going to do some more things. I actually don't quite enjoy this vertical line right here. So I'm going to delete that from the SVG. And the fun thing about these d3.axis is they're just made out of SVG elements. So it means that if I inspect it, I can see that that vertical line is just path with a class domain.

[00:06:47] So I can go in and just remove that. So that mean to you that right now. So in here after I've created the y-axis, I can just go in there. This .call will actually return that selection, that axis group selection. So let me just select the domain, and I believe I can just say .remove, and that should magically, hopefully, disappear, perfect.

[00:07:26] And the last thing I want to do with the axis is I want to just get rid of these particular, actually, no I think all of these look good now. I'm pretty happy with the axis, hopefully you are too. And then the other think I want to do is I want to just put annotations for every movie that's over 200 million above the mean box office.

[00:07:56] We'll skip the legend, I think the legend is pretty easy to figure out on your own if you just look at the documentation. But let's just get the annotations in there. So first let's figure out the annotation data.
>> Shirley Wu: So I said that I wanted to filter it by,

[00:08:23]
>> Shirley Wu: If d.boxOffice- the meanBox office is greater than than \$200 million. And there is actually a few,
>> Shirley Wu: Movies that is indeed over the \$200 million over the meanBox. So I just,
>> Shirley Wu: I just console logged it.
>> Shirley Wu: Let me console log in again actually. And there we go, there are seven movies that are above the mean by 200 million or more.

[00:09:26] And it's the Dark Knight and Avatar and like three Star Wars movies. Okay, now that we have the movies that we want to annotate, I want us to quickly take a look at D3 annotation. And what it requires to draw an annotation. So I'm just going to do the most basic of annotations, this one.

[00:09:53] And to do that one, I just need to pass in a note and the title for that note, I need to give it an x/y position, so the x/y position to point to. And an offset x/y position to put that annotation on, so let's do that. And so for each of them, what we need is a note with a title, x/y positions and an offset x/y position to draw kind of the the little pointer at.

[00:10:36] And so I'm going to map through all of the movies that are left. And I'm going to return an object with a note. And I'm going to say that the title of the note is the title of the movie. The x position is the xScale of the date.

[00:10:56] The y position is yScale of the boxOffice- meanBox office. And I just want the offset to be maybe 20 pixels in the x direction. And then no offset in the y direction. And if I did that right, hopefully I did that right.
>> Shirley Wu: This is the data I have, and I think all I have to do is create a D3 annotation passing that data.

[00:11:36] And then I think it will just magically draw those annotations for me. So let's give that a try, makeAnnotations =, I need to create an, so up above I've defined annotation as a package. So, it's a D3 SVG annotation. I'm going to call this function. I'm going to tell it that the type of annotation that I want is an annotation label.

[00:12:03] And then, I think with just this I can pass in the data. And much like with D3.axis, I can just create a SVG group element and then call(makeAnnotation). And if I did this correctly, and make annotations. And if I did this correctly,
>> Speaker 2: Check your path there.
>> Shirley Wu: Sorry what?

[00:12:40]
>> Speaker 2: On 143, I think you need a d.
>> Shirley Wu: Thank you so much. And if I did this correctly, it would show them, no.
>> Shirley Wu: So something else I need, .annotation. So I need to pass in annotations, so I need to say, so this doesn't return a function.

[00:13:04] So .annotations, and then hopefully show us, there we go Look at that. It draws annotations. I just need to give it some, obviously the placement is a little bit off. I just need to tell it to be placed at the end of the pointer, and I think to do that we just open up options, and I think.

[00:13:31] It's, is it this one? Okay, let's go with this one. And for that one it says I want to align to the middle and put the orientation top/bottom. Let's give that a try. So that's a setting I pass into note and so I want a line in the middle and the orientation I want to be top bottom.

[00:13:57] Let's see what happens with that. Nope, I think maybe it's that the orientation is left to right. Let's try that
>> Shirley Wu: Align middle orientation is
>> Shirley Wu: there we go, I finally figured it out. Left right, isn't that what I wrote just now, left right? Align so title and align is middle and orientation is left right.

[00:14:29] Maybe I just need to. There we go. There we go and so just a few lines of settings and a few lines of Creating a group and calling it and we have annotations, and D3 annotatioms makes that super, super easy. And now we have breathability, we can see which years, we can see how much box office figures are, we can see some of the highest peaks.

[00:15:08] If we had more time I would want us to label that This side, that this line in the middle are the mean box office figures. And I want us to label the genres. But I think these are things that we can figure out by ourselves. So I want to move onto the next section.