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 rather than instantly.…At its most basic, we just insert the word transition.…

Resume Transcript Auto-Scroll

Author

Released

10/28/2016

Take your visualizations beyond boring charts. D3.js enables you to create spatial maps, tree diagrams, stack charts, and more, all with a web browser and a few lines of code. There's something for everyone in data science: statisticians, scientists, mathematicians, and analysts. D3.js Essential Training for Data Scientists unlocks the keys to this versatile approach. Follow along with data consultant Emma Saunders as she shows how to build beautiful and interactive data visualizations with D3.

Start off with a review of HTML, CSS, and JavaScript—some basic coding skills you need to use the D3 library. Then learn how to make a simple bar chart and create basic shapes and text. Emma also introduces the path function and the power of generators for drawing more complex shapes. Then find out how to pull in JSON, XML, and CSV files to create more complex graphics such as tree and Voronoi diagrams, and manipulate your data for advanced graphics using map, stack, and nest functions. The course wraps up with tips for adding interactivity and picking the right graphic for your data.