Interactive Data Visualization with D3.js
Topics:
This course has been updated! We now recommend you take the Introduction to Data Visualization with d3.js v4 course.
Table of Contents
Pre-Game
Introduction
Ian begins the course by discussing a number of resources he's posted on his GitHub account. These include Tributary.io, Bl.ocks.org, and the use of reddit.com's data API. Both Tributary and Blocks are great places to post code when experimenting with D3. Ian also demonstrates the visualization project being built throughout this course
Course Topics
There will be six sections to this course. An SVG overview, a look at the binding and non-binding APIs, reusable charts, application patterns, and finally some useful links and resources.
Using Data
In order to build a visualization project, you need data. Tributary allows you to include datasets without incorporating AJAX request. Ian looks a couple examples he's created that demonstrate the inclusion of Reddit's datasets.
SVG Overview
Binding API
append(), select(), and selectAll()
The append method will allows you to add D3 elements to DOM elements. The select method is similar to the jQuery "$". It allows you to target specific DOM elements in the browser. The selectAll method is useful for data binding. It allows you to target multiple DOM elements at once and provide them with data.
enter() and exit()
The enter and exit methods are called DOM elements are added and removed from the dataset. Developers can use these methods to modify the DOM to reflect the change in data.
transition() and DOM events
Transitions can be added to any selection by chaining the transition() method. Methods like delay() and duration() can also be added to adjust the transition. Using the on() method allows you to handle events like the click event. The handler is passed a reference to the individual element and it's dataset.
Code Demo: SVG Circles
Ian codes an example that adds SVG circles for each Reddit post in the dataset. He also groups them so they can be moved together.
Non-Binding API
Quantitative Scales
D3 contains helper methods like scale() that will preform mathematical operations on the dataset allowing the data to be scaled into a physical range. For example, taking a dataset consisting of values between 0-3000 and displaying them in a 500 pixel area.
Categorical Scales
Categorical scales adjust the positioning of items. They are useful when a certain number of items must spaced evenly in a region. Ian create a bar chart to demonstrate using these categorical scales.
Axis Generator
An axis in D3 is a visual representation of a scale. The ticks included on the axis can be automatically included or hard-coded.
Line Generator
The line generator will generate an SVG path based on the dataset. To demonstrate this, Ian draws a line chart on top of the bar chart created in the previous example.
Brush Generator
The brush generator highlights an area within the dataset. Similar to the axis, it uses a scale and range to define the region of coverage.
Brush Generator, cont.
Ian continues his coding of the brush generator. His next task is to show when the posts happen on top of the brush. He'll add this additional context by drawing graphics on the brush.
Histogram Layout
Layouts are data processing tools that convert data into a more friendly format. The key concept is that they manipulate data and not DOM elements. The histogram layout organizing data into distributions.
Audience Questions and AJAX
Ian field a few questions from the audience regarding the brush generator example. During the process of answering the questions, Ian demonstrates a color scale and address D3's AJAX convenience methods.
Reusable Charts
Creating Tables
D3 Tables can quickly create a customizable table of data. They can be used to create traditional HTML DOM elements.
Adding Columns
Using the append() method, Ian adds columns to each row in they table. Each column will contain a different piece of data from the dataset.
Audience Questions
Ian answers a few questions about the differences between Tributary and jsFiddle and working with image maps in D3.
Application Patterns
Moving Code from Tributary
Ian begins by discussing how to move code from Tributary into a real-world project. Each data visualization element from Tributary will become a reusable component in the application. Ian begins bootstrapping the application and initializing the display object. He uses D3's json() method to access the Reddit service and populate the data object.
Creating the Table
Each visualization is going to be moved into it's own component. Ian starts with the table.
Making a Chart Reusable
While moving the table to an individual component, Ian discusses the process of making a completely reusable chart. The chart's constructor function returns a reference to it to enable chaining.
Moving to GitHub
Ian takes a quick break from coding to move the project to a GitHub gist so each iteration can be committed.
Creating the Scatter Plot
Now that we have a reusable table chart, the next task is to recreate the scatter plot. Ian copies in his code from Tributary, replaces the bars with circles and makes the code reusable.
Creating the Brush
Ian ports the Brush code from Tributary into the application. During the port, he strips out any of the data calls and adjusts the sizing to be based on the chart's parameters.
Adjusting the layout
Now that the table, scatter plot, and brush are in place, Ian does some tweaking of the layout. He also adds an axis to the brush.
Connecting the Charts
Event Dispatching
In order to update one chart when another is modified, the charts need to utilize custom events. Custom events encapsulate the functionality and all for greater reusability.
Connecting the Charts
Ian begins binding the chart interactions with each other. The scatter plot should only show data for the range displayed in the brush. To do this, he sets up an event listener in the main application to listen for changes in the brush.
Creating a Rendering Function
A better method for updating the visual states of the charts is to add an initializing function and move all rendering to an update function. Ian also answers a questions about throttling the visual updates.
Adding styling and transitions
Ian works on adding some hover functionality as well as some additional styling and transitions between filters.
Connecting the Table
Wiring up the table to work with the custom even with be similar to the scatter plot. It's important to recognize the proper ways to regenerate the rows during the filtering process.
Adding the Histogram
The histogram is the final chart to port into the application. It will need to be bound to the data, respond to the brush's selection, and include some transitions. The first step is to get it added and positioned
Finishing the Histogram
When one of the "bins" in the histogram is highlighted, common data in the scatter plot, brush, and table should highlight as well. The histogram also needs to get filtered based on the brush selection.
Adding Color Schemes
Addressing an audience question, Ian talks about incorporating color schemes into a D3 visualization. Other visual changes like size can be manipulated using a scale.
Reviewing the Application
Now that the charts are styled appropriately, Ian takes some time to review the application's code. He reviews the SVG code, binding and non-binding APIs, and the application architecture.
Diving Board
Force Layouts
Ian begins his resource section with a discussion about forced layouts. Forced layouts have a number of unique visualization tools like physics-based layout or mouse interaction.
Geography
Ian talks about some of his favorite d3.geo resources. He also answers a few questions about using d3.geo versus Google Maps
Plugins and Illustrations
There are many plugins available for D3. Ian demonstrates a few of his favorites.
Inkscape and MVC Frameworks
Inkscape integrates D3 with Illustrator graphics. This is an exciting area because it allows talented designers to work more closely with D3 developers. There are also a lot of tutorials available demonstrating D3 integration with MVC frameworks.