A Beginner's Guide to Visualizations With D3.js

Javascript

By Matt Huntington

In the midst of the 2012 U.S. presidential election, The New York Times published a series of online articles that contained beautiful, interactive, data-driven graphics to illustrate changes in voter behavior over time and the candidates’ paths to winning the election. Created using a JavaScript library called D3 (for Data-Driven Documents), these data visualizations caused a lot of excitement among developers.

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.

But D3 was more than just another JavaScript library. It was the final link in a series of technological advancements that led to these kinds of graphic possibilities:

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: 

Pixels

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:

SVG code and circle

Note the cx="50" cy="50" r="40" code. This is what defines the circle's position and size. Since it is code, data can be used to change these values. After all the major browsers allowed SVG code to be embedded within web pages, developers could use JavaScript to manipulate the images. The difficulty, though, was in converting data values to SVG code. This is the key part that D3 plays.

3. The D3 JavaScript library was created to tie together data and SVG.

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.

D3.js at General Assembly

D3 is an incredibly easy library to use. Because of this, in General Assembly’s full-time Web Development Immersive (WDI) program, on campus and remotely, we often reserve it as an optional topic at the end of the course. WDI focuses on the fundamentals of programming, from front-end essentials like JavaScript, through back-end skills like Ruby on Rails and APIs. After having a thorough understanding of these competencies, learning D3 will come easily.

GA also offers occasional short-form workshops on D3 and other data visualization techniques, so developers and data scientists can begin to discover how to leverage programming to create data-driven stories.

Meet Our Expert

Matt Huntington has worked as a developer for over 15 years and has a full understanding of all aspects of development (server side, client side, and mobile). Matt graduated magna cum laude from Vassar College with a degree in computer science. He teaches the full-time Web Development Immersive Remote course at General Assembly, and has worked for clients including Nike, IBM, Pfizer, MTV, Chanel, Verizon, Goldman Sachs, AARP, and BAM.

“There’s an incredible demand for employees who can code, and it's only going to increase in the future. Not only do jobs in the field pay well, but coding is also incredibly creative, fun, and interesting!”

Matt Huntington, Web Development Immersive Remote Instructor