By Matt Huntington
Until that point, these kinds of fast, interactive motion graphics based on large data sets hadn't really been seen in websites by the general public. Developers recognized that with D3, they could easily create beautiful, data-driven graphics, in this case in collaboration with data scientists, journalists, and graphic designers.
1. Large amounts of data became ubiquitous, and the speed at which it is transmitted and processed increased exponentially.
Since the mid 2000s, there has been a surge in the amount of data available to developers, the speed at which it can be processed, and the ways in which we conceptualize how to display it. At the heart of this explosion are advances in storage technology that have made it incredibly easy, cheap, and fast to store massive amounts of information. For example, in 2007 a 1GB hard drive cost about $60. Ten years later, the same amount can get you 1TB of storage. That's 1,000 times more data for the same cost. Computer and internet connection speeds have dramatically increased as well.
As a result, the fields of artificial intelligence, big data, and data science have been able to mature in ways that were previously not possible. All of this means that the manner in which we think about, analyze, and visually present large data sets has drastically changed in a relatively short amount of time. In addition, people on their home computers now have the ability to quickly download large data sets — processors are 60 times faster than 10 years ago — and perform calculations to display them in interesting ways.
2. All major web browsers began to support Scalable Vector Graphics (SVG), a technology that draws images from mathematical equations.
Scalable Vector Graphics are the second piece of the puzzle because they allow for the creation of images from mathematical equations and code. A normal image, like a .jpg or a .gif, is made up of a series of colored dots, or pixels, like this:
These are great for creating photos, but it's almost impossible to link an image like this to data in such a way that the code is used to generate the image. Contrast that with the SVG for a circle and its code:
At its core, D3 maps data values to visual values — but as simple as that sounds, it is incredibly powerful. Using D3, a developer no longer needs to worry about the math involved in converting, for example, the number of votes to the height of a rectangle in a bar graph. They could simply give the data to D3, which can analyze it to figure out the minimum and maximum values and tell D3 what the minimum and maximum height of the bars should be. Then D3 can generate all the bars in the graph by itself. D3 takes a lot of work involving tricky math and converts it into a few simple steps.
D3 has much more advanced functionality, too. It can generate common elements of graphs, such as axes and pie-chart segments. It can animate between different visual values, so, for example, complex line graphs smoothly morph as the data changes. There's plenty more functionality, too. People are just beginning to scratch the surface of D3’s capabilities, and it's really an exciting time to get involved with it.