Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Animations and Interaction Basics

In this lesson, I'm going to show you how to animate your graphs and also how to interact with them.

2.4 Animations and Interaction Basics

Hi, and welcome back to Learn Data Visualization with D3.js. In this final introductory lesson, I want to take a few minutes to talk about animations and interaction with D3. Of course, animations make graphs feel more dynamic. And will show that you care about your creations. So having some moving parts can be quite nice. Of course, if you have dozens of graphs on your page and everything start moving at once, it can be quite an eyesore. So be careful when to add these effects. The basic animations are actually quite easy with D3. They work in a similar fashion as the regular library, and can be applied when setting the data. One important step you have to do when adding transitions is to create some kind of initial state for your elements. Let me show you what I mean. Here I have the example of the first lesson, showing the distribution of letters in the English language. To add a transition, I can simply go to the bottom and add a transition function. And append something like duration, and the values we want to show. In our case, a height and a y value. We can simply copy the attribute calls from above. Right now, nothing is going to happen. Because the initial and desired values are the same. We have to change the initial fill values, which are the ones we set the fuel lines above to be some generic just set. In our case we want to have a height of zero, and a y value that is equal to the bottom of the chart. Remember, SVGs, coordinate system starts at the top left. And we usually deal with bottom left coordinates in our charts. With that done, it animates quite nicely. To add even more, we can add a delay to incrementally introduce each bar. There is a delay function that accomplish what we want. The second argument of the callback is actually the index of the data element. I'm going to add an initial delay of half a second or 500 milliseconds, and then 50 extra for each element in the data set. This gives us a nice wavy appearance effect for our graph. The second topic of this lesson is interaction. Sometimes you want to be able to have the user interact with your graph. For instance, using mouse over effect, or doing something after click. Of course, D3 provides a way to bind dome events to your elements, so your code can interact with them. Let's add an alert that shows some information about the selected letter when your user clicks on the bar. We already have a hover animation via CSS from the previous lesson. So the user knows it's interactive, I'm going to bind the event of .on for the individual bars. In the callback function, we get the data point for this bar as an argument, and can use it for our alert. I'm going to show a text that tells the user which letter they have selected and how often it occurs in the English language. This concludes the introductory section of this course. In the next lesson, we are going to have a look at scales, see you there.

Back to the top