One Little JS Animation That Made My Day

Vlada Vladimir Makovsky, 2015-08-25

The human brain is limited. If you need to find all differences in two pictures it takes a very long time. An animation is very effective way to show the differences in data over the time. Long story short, press the button below:

This bubble graph shows an average price of properties in London in a particular year and a postcode area. X-axis shows an average property price, Y-axis Yoy % growth and size of the circle shows the number of properties sold in a particular area. By making an animated transition between the years, you immediately spot the difference over the time.

Now you may understand my joy. Because making such animation is nowadays quite easy. Google charts allow graph animation by using 'animation' option. So all you need is to have a fast backend which responds timely to your requests.

You can play around with the script on jsfiddle. If you want to see more options (there are over 1M of combinations, the data table has 20M rows) try our live dashboard. Enjoy!

Comments Section

blog comments powered by Disqus