We’ve updated this course to d3.js v4 with Shirley Wu! We recommend you go there.
Ian Johnson, the organizer of Bay Area d3 (the largest d3 meetup in the world), starts with SVG and then dives deep into d3 including DOM manipulation, categorical and quantitative scales, axis, brushes, color schemes, events and histograms. Make sense of your data by exploring it visually with D3.js!
Ian Johnson is the author of Tributary - an open source live-coding environment designed for prototyping data visualizations with D3. He also co-organizes the SF Bay Area d3 Meetup and makes educational D3 videos.
Bay Area D3 and Tributary
- 0:00:00 - 0:11:05 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
- 0:11:06 - 0:16:14 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.
- 0:16:15 - 0:21:55 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.
- 0:31:32 - 0:38:40 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.
- 0:38:41 - 0:45:05 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.
- 0:45:06 - 0:50:37 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.
- 0:50:38 - 0:57:40 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.
- 0:57:41 - 1:08:45 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.
- 1:08:46 - 1:22:11 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.
- 1:22:12 - 1:32:47 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.
- 1:32:48 - 1:40:43 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.
- 1:40:44 - 1:51:41 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.
- 1:51:42 - 2:04:29 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.
- 2:04:30 - 2:10:13 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.
- 2:10:14 - 2:17:08 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.
- 2:17:09 - 2:24:29 Creating Tables D3 Tables can quickly create a customizable table of data. They can be used to create traditional HTML DOM elements.
- 2:24:30 - 2:31:09 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.
- 2:31:10 - 2:40:29 Audience Questions Ian answers a few questions about the differences between Tributary and jsFiddle and working with image maps in D3.
- 2:40:30 - 2:45:32 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.
- 2:45:33 - 2:55:57 Creating the Table Each visualization is going to be moved into it's own component. Ian starts with the table.
- 2:55:58 - 3:05:57 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.
- 3:05:58 - 3:13:51 Moving to GitHub Ian takes a quick break from coding to move the project to a GitHub gist so each iteration can be committed.
- 3:13:52 - 3:24:20 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.
- 3:24:21 - 3:31:44 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.
- 3:31:45 - 3:39:54 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
- 3:39:55 - 3:45:58 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.
- 3:45:59 - 3:55:19 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.
- 3:55:20 - 4:01:47 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.
- 4:01:48 - 4:12:12 Adding styling and transitions Ian works on adding some hover functionality as well as some additional styling and transitions between filters.
- 4:12:13 - 4:17:37 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.
- 4:17:38 - 4:27:32 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
- 4:27:33 - 4:34:27 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.
- 4:34:28 - 4:44:01 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.
- 4:44:02 - 4:49:39 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.
- 4:49:40 - 5:01:17 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.
- 5:01:18 - 5:08:44 Geography Ian talks about some of his favorite d3.geo resources. He also answers a few questions about using d3.geo versus Google Maps
- 5:08:45 - 5:20:37 Plugins and Illustrations There are many plugins available for D3. Ian demonstrates a few of his favorites.
- 5:20:38 - 5:31:36 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.