D3.js came in at this point because writing the code to make complex data-driven documents (how D3 got its name) that linked SVG images with the big data that had become available on the internet was a difficult task. It rose to prominence during the Obama/Romney presidential debates as the New York times published a series of amazing visualizations. Check out some examples here:
- https://archive.nytimes.com/www.nytimes.com/interactive/2012/11/07/us/politics/obamas-diverse-base-of-support.html
- http://archive.nytimes.com/www.nytimes.com/interactive/2012/11/02/us/politics/paths-to-the-white-house.html
- https://archive.nytimes.com/www.nytimes.com/interactive/2012/10/15/us/politics/swing-history.html
- https://www.nytimes.com/elections/2012/electoral-map.html
- https://archive.nytimes.com/www.nytimes.com/interactive/2012/09/06/us/politics/convention-word-counts.html
- https://archive.nytimes.com/www.nytimes.com/interactive/2012/03/07/us/politics/how-candidates-fared-with-different-demographic-groups.html
D3 simplifies some of the most common, as well as some of the most, complex tasks that a developer can run into when creating browser-based visualizations. At its core, D3 easily maps SVG image properties to data values. As the data values change, due to user interactions, so do the images.