|

Intro to D3: A Data Visualization Primer

A guest blog post by Tom Barker, a software engineer, an engineering manager, a professor and an author who can be reached at @tomjbarker.

While R might be the language most frequently associated with creating data visualizations, if you want to generate your visualizations on the web, at run time (not as static images embedded on the page), using web standards, then you will want to use one of the JavaScript data visualization libraries available.  Of the JavaScript libraries, D3 is the most widely recognized.

fig1

Using D3, we are able to create the above parallel chart and allow real time brushing with mouse events.

D3 stands for Data Driven Documents, and it is a JavaScript library used to create interactive data visualizations.  The seed of the idea that would become D3 started in 2009 as a JavaScript library named Protovis, created by Mike Bostock, Vadim Ogievetsky and Jeff Heer while they were with the Stamford Visualization Group.  But while the philosophy behind Protovis was to provide an interface for creating visualizations, the philosophy behind D3 is to provide an interface to creating SVG shapes that can be used to create data visualizations.

To get started with D3 head to the D3 website, http://d3js.org/, and download the latest version.  We can then include the .js file directly in our page, like so:

<script src="d3.v3.js"></script>

The root namespace is d3, so all of the commands that we issue from D3 will be using the d3 object. The core actions that we need to perform with D3 are drawing objects and binding data.

Draw Objects

To draw objects we need to first select an element, and then update the element.

Updating an element can be changing that element’s styling, adding another element as a child element, removing a child element, adding event handlers, or binding data to that element.

D3 provides the select() function to target specific elements, or the selectAll() function to target all of a specific element type.  We can pass in CSS selectors to select() for specific targeting.

var body = d3.select(“body”);

You can update attributes of the selection with the attr() function.  The attr() function accepts two parameters. The first is the name of the attribute and the second is the value to set the attribute to.  If, for instance, you want to change the background color of the current document, you could just select the body and set the bgcolor attribute.

d3.select("body").attr("bgcolor", "#FFFFFF");

We can also add elements to our selection using the append() function.  The append() function accepts a tag name as the first parameter.  It will create a new element of the type specified and return that new element as the current selection.  To draw shapes to the page we first must draw an SVG parent element.

var svg = d3.select("body").append(“svg”);

Once we have the parent SVG element we can begin drawing shapes:

var r = svg.append("rect")
         .attr("x", 80)
         .attr("y", 20)
         .attr("height", 100)
         .attr("width", 10)
         .attr("stroke", "#000000")
         .attr("fill", "#CCCCCC");

The code above draws a gray rectangle to the page.

fig2

Binding Data

For data visualizations, the most important interaction we have with our SVG shapes is to bind data to them.  This allows us to reflect that data, both in the properties of the shapes, and in how many shapes we draw.

To bind data we simply call the data() method of a selection.  See below to bind an array to the SVG element on our page:

var bars = svg
    .append(“rect”)
    .data([ 84,62,40,109]);

To use this array to determine how many bars we will draw to the page we first use selectAll() to return a reference to all rectangles in the SVG element, even though none exist yet.  Next, we bind our array, and call enter().  The enter() function creates placeholder objects from the bound data.  Finally, we call append to create a rectangle at each placeholder that enter() created.

bars = svg
    .selectAll("rect")
    .data([ 84,62,40,109])
    .enter()
    .append("rect");

To use our bound data to style our rectangles, we can pass anonymous functions into our attr() function calls:

bars
    .attr("width", 15 )
    .attr("height", function(x){return x;})
    .attr("x", function(x){return x * xOffset;})
    .attr("fill", "#AAAAAA")
    .attr("stroke", "#000000");

We can see that we now have four bars being drawn to the page, to correspond with each index in our array, and with height that matches the value in each index of the array:

fig3

Let’s next fix the orientation of our bars.  As you can see in the figure above, the bars are being drawn from the top down, so that they appear to be facing down.  This is because SVG draws and positions shapes from the top left. To get them correctly oriented, where the bars look like they are coming up from the bottom of the chart, let’s add a y attribute to our bars.

The y attribute should be a function that references the data via a function, so the function should subtract the bar height value from the chart height.

bars
    .attr("width", 15 )
    .attr("height", function(x){return x;})
    attr("y", function(x, i){return (300 - x);})
    .attr("x", function(x){return x+ 60;})
    .attr("fill", "#AAAAAA")
    .attr("stroke", "#000000");

You can see the result here:

fig4

Load External Data

Say you want to load data in on the fly instead of hard coding arrays on your page.  D3 provides the d3.xhr() function that wraps the functionality of the XMLHttpRequest object.  To use d3.xhr, pass in a URL to a resource and a callback function to execute it.

Generally, though, you’ll be using the type specific convenience functions that D3 provides such as d3.text, d3.csv, d3.json, d3.xml, and d3.html.

Let’s incorporate external data into the running example we have so far.  If the list of numbers lives in a comma separated file named finalGrade.csv, you could read it using d3.text.  The second parameter to d3.text is an anonymous function, and the contents of the file are passed into the function via a parameter named data.  You move the existing functionality into the anonymous function and reference the array via the data variable:

d3.text("finalGrade.csv", function(data) {
var dataSet = data.split(",");

var svg = d3
    .select("body")
    .append("svg")

bars = svg
    .selectAll("rect")
    .data(dataSet)
    .enter()
    .append("rect");

bars
    .attr("width", 15 )
    .attr("height", function(x){return x;})
    attr("y", function(x, i){return (300 - x);})
    .attr("x", function(x){return x+ 60;})
    .attr("fill", "#AAAAAA")
    .attr("stroke", "#000000");
})

Pros and Cons

When deciding on what JavaScript library to use for data visualizations, consider the ones you can get up and running the fastest, versus those that give you the most control over the visualizations that you create.

In this post I’ve written a fair amount of code for very little in return.  Since D3 foregoes creating a data visualization API in favor of creating an SVG API, it takes much more effort to start to see real results. And we haven’t even talked about transitions, events, data aggregation functions, drawing axes, or creating scales!

As such, you may not use D3 to quickly generate some fast charts for the purposes of prototyping or a quick demo, especially if you aren’t already familiar with D3 and have utility libraries already for D3.  On the other hand, with the low level control over the objects that make up your visualizations, D3 is a great tool to invest in for the long-term to create your own libraries that you can then use to speed up the creation process.

For more details about D3, see the resources below from Safari Books Online.

Not a subscriber? Sign up for a free trial.

Safari Books Online has the content you need

Pro Data Visualization using R and JavaScript by Tom Barker, makes the R language approachable, and promotes the idea of data gathering and analysis. You’ll see how to use R to interrogate and analyze your data, and then use the D3 JavaScript library to format and display that data in an elegant, informative, and interactive way. You will learn how to gather data effectively, and also how to understand the philosophy and implementation of each type of chart, so as to be able to represent the results visually.
Developing a D3.js Edge is aimed at intermediate developers, so to get the most from this book you need to know some JavaScript, and you should have experience creating graphics using D3. Many examples created in the real world with D3, can best be described as “spaghetti code.” So, if you are interested in using D3 in a reusable and modular way, which is of course in line with modern development practices, then this book is for you!
Getting Started with D3 teaches you how to create beautiful, interactive, browser-based data visualizations with the D3 JavaScript library. This hands-on book shows you how to use a combination of JavaScript and SVG to build everything from simple bar charts to complex infographics. You’ll learn how to use basic D3 tools by building visualizations based on real data from the New York Metropolitan Transit Authority.
Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript provides readers with a strong framework of principles for making well-conceived and well-crafted infographics, as well as detailed and practical instructions for how to really wield D3, the best tool for making web infographics available. An extended example is used in the book to explain how to put theory to practical use.
Pro JavaScript Performance: Monitoring and Visualization by Tom Barker, gives you the tools to observe and track the performance of your web applications over time from multiple perspectives, so that you are always aware of, and can fix, all aspects of your performance.

About the author

TomBarker_biosmall Tom Barker is a software engineer, an engineering manager, a professor and an author. Currently he is the Senior Manager of Web Development at Comcast, and an Adjunct Professor at Philadelphia University. He has authored Pro JavaScript Performance: Monitoring and Visualization, Pro Data Visualization with R and JavaScript, and Technical Management: A Primer, and can be reached at @tomjbarker.

About Safari Books Online

Safari Books Online is an online learning library that provides access to thousands of technical, engineering, business, and digital media books and training videos. Get the latest information on topics like Windows 8, Android Development, iOS Development, Cloud Computing, HTML5, and so much more – sometimes even before the book is published or on bookshelves. Learn something new today with a free subscription to Safari Books Online.
|

Comments are closed.