From the course: D3.js Essential Training for Data Scientists

Unlock the full course today

Join today to access over 22,700 courses taught by industry experts or purchase this course individually.

Transitions

Transitions - D3.js Tutorial

From the course: D3.js Essential Training for Data Scientists

Start my 1-month free trial

Transitions

“

- [Narrator] In the last few sections, we've seen tool tips, pop up, and colors change on hover. In both cases, the changes have been instant. But what if we want to slow them down and show the change in progress? Changing an elements size or color instantly can confuse your user. They might doubt that there had been a change at all. Perhaps the page just jumped. Maybe that bar chart was always that height. Changing an elements size slowly leaves the user in no doubt there is a change happening and it is intentional. It can also look more sophisticated and professional, or it can help you to draw attention to one particular aspect of your graphic. You can use transitions to run a movie or work in an infinite loop. As here, you can even make a polar clock. Transitions change some of aspect of an element over time rather than instantly. Any attribute that can be set in D3 can be changed slowly with a transition. So let's change our Voronoi diagram and make our polygon go blue slowly…

Contents