Back in 2012, when general elections were held in USA, there was this beautiful visualization called "512 Paths to the White House" on The NewYork Times website by Mike Bostock and Shan Carter. This has been one the most intelligent and awesome visualizations ever made. This visualization was aimed to communicate the possibilities in which Obama or Romney could win the elections. Link to the actual Data visualization
First off, few questions.
Firstly why were they only 512 ways.The NYT took only 9 most competitive states as a base data set. So there were only 2^9 i.e. 512 possibilities. As it can be seen on the graph which clearly states that Obama had 431 ways to win, Romney had 76 ways to win and 5 chances of a tie (431 + 76 + 5 = 512).
The lines are highlighted whenever the mouse is hovered over a chosen region.
"In mathematics, a Voronoi diagram is a way of dividing space into a number of regions. A set of points (called seeds, sites, or generators) is specified beforehand and for each seed there will be a corresponding region consisting of all points closer to that seed than to any other. The regions are called Voronoi cells."
A typical voronoi diagram looks like this.
If we debug the code, we can actually see something called
class=â€œg-voronoiâ€. After adding some css properties to the invisible areas, We can see the areas separated pretty clearly. And from then on its simple, when the mouse pointer is in that area highlight the vortex node and all its parents.
Lets find out the answer for our final question, Is the message understandable/clear. As you can see every thing that NYT wanted to convey is pretty clear. The color highlighting, the legends and the sizes of the nodes also says the story.
To conclude, this is a pretty intelligent visualization, which used some really good math techniques and it communicates every thing in just 970px by 650px space.
Other nice usage of this algorithm http://www.nytimes.com/interactive/2014/02/13/sports/baseball/jeter-long-lived-greatness.html?_r=0
Some Useful links
This is one of the not so good example for data visualization. This is a DataViz posted on the fusion.com to tell a sort about how may city/states agreed or disagreed to give shelter for immigrant kids.
If you just give one glance, You can find many missing or unanswered details in this DataViz.
This information visualization is a bad example, as its very hard to find out what actually the DataViz is trying to communicate. In other words it doesn't tell the story.