This course has been updated! We now recommend you take the Introduction to D3.js course.

Check out a free preview of the full Introduction to Data Visualization with d3.js v4 course:
The "Challenge 3: Animating Transitions" Lesson is part of the full, Introduction to Data Visualization with d3.js v4 course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, students use d3.js to animate transition a given data set.

Get Unlimited Access Now

Transcript from the "Challenge 3: Animating Transitions" Lesson

>> Shirley Wu: So what I want to happen is I'm, so this data set is a actual data set, not one I made up.
>> Shirley Wu: That's I think, if I remember correctly, the yield of barley across the years,
>> Shirley Wu: For certain sites across America. I think there's six or seven different geographic sites that grew their barley.

[00:00:29] And then this is the data for their yield across nine years, starting in 1927. And so I've kind of already defined a bunch of things for you, of like the radius, and play with the duration of how long you want your transition to be. But I'm, I've also kinda given you the xScale and yScale.

[00:00:53] We talked briefly about scaleBand before, but we didnt' go into details so feel free to look at the d3 scale API to see how scaleBand works, and let's see. And then let's see. The goal is to have, I have it written down. The x value, the x axis is the different barley sites, and that's why we're using scaleBand because it's a discreet input and you want a discreet output.

[00:01:28] The y is the yield value for each of those sites, and then I want us to animate across all the years. So this is kind of what it will look like. I didn't put in the margin. So this is why it's cut off. And it's basically, again, using set interval, just animating across all of the years and looping through.

[00:01:50] And I think I animate. Feel free to do whatever animations you want. But I think I animate the radius, I think I animate the y position and I think that might be it, but yes.
>> Shirley Wu: And then I might, and then I think the data set is just a whole big csv that just has year, yield, and site.

[00:02:21] So you're going to have to, so this is where I call setInterval and update, and then I specify which year I want to render. And so in update, make sure to just filter out the correct year to animate across.