Interactive Data Visualization with D3.js
This course has been updated! We now recommend you take the Introduction to Data Visualization with d3.js v4 course.
Table of Contents
IntroductionIan 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 TopicsThere 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 DataIn 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 OverviewSVG is a declarative XML web standard for creating graphics. Ian walks through a brief overview of SVG. This includes circles, rectangles, paths, and groups. Hey also field a few questions about using D3 with libraries like Rafael.
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 eventsTransitions 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 CirclesIan codes an example that adds SVG circles for each Reddit post in the dataset. He also groups them so they can be moved together.
Quantitative ScalesD3 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 ScalesCategorical 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 GeneratorAn axis in D3 is a visual representation of a scale. The ticks included on the axis can be automatically included or hard-coded.
Line GeneratorThe 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 GeneratorThe 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 LayoutLayouts 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 AJAXIan 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.
Creating TablesD3 Tables can quickly create a customizable table of data. They can be used to create traditional HTML DOM elements.
Adding ColumnsUsing 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 QuestionsIan answers a few questions about the differences between Tributary and jsFiddle and working with image maps in D3.
Moving Code from TributaryIan 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 TableEach visualization is going to be moved into it's own component. Ian starts with the table.
Making a Chart ReusableWhile 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 GitHubIan takes a quick break from coding to move the project to a GitHub gist so each iteration can be committed.
Creating the Scatter PlotNow 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 BrushIan 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 layoutNow 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 DispatchingIn 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 ChartsIan 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 FunctionA 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 transitionsIan works on adding some hover functionality as well as some additional styling and transitions between filters.
Connecting the TableWiring 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 HistogramThe 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 HistogramWhen 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 SchemesAddressing 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 ApplicationNow 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.
Force LayoutsIan 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.
GeographyIan talks about some of his favorite d3.geo resources. He also answers a few questions about using d3.geo versus Google Maps
Plugins and IllustrationsThere are many plugins available for D3. Ian demonstrates a few of his favorites.
Inkscape and MVC FrameworksInkscape 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.