D3 4.x: Mastering Data Visualization

It is very common that at times you will need to select a single element on a page to perform some visual manipulation. This lecture will show you how to perform a targeted single element selection in D3 using a CSS selector:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter2/single-selection.html.

Often, selecting a single element is not good enough, but rather you want to apply a certain change to a set of elements on the page simultaneously. In this lecture, we will play with the D3 multi-element selector and its selection API:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter2/multiple-selection.html.

Sometimes it is handy to be able to iterate through each element within a selection and modify each element differently according to their position. In this lecture, we will show you how this can be achieved using the D3 selection iteration API:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter2/selection-iteration.html.

It is quite common that you will need to perform scoped selection when working on a visualization. For example, selecting all div elements within a particular section element is one such use case of scoped selection. In this lecture, we will demonstrate how this can be achieved with different approaches and their advantages and disadvantages:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter2/sub-selection.html.

As we have seen so far, the D3 API is completely designed around the idea of function chaining. Therefore, it forms a DSL for building HTML/SVG elements dynamically. In this lecture, we will take a look at how the entire body structure of the previous section's example can be constructed using D3 alone:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter2/function-chain.html.

Sometimes, having access to the D3 raw selection array might be beneficial in development whether it's for debugging purposes or for integrating with other JavaScript libraries that require access to raw DOM elements; in this lecture, we will show you ways to do that. We will also see the internal structure of a D3 selection object:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter2/raw-selection.html.

One of the most common and popular ways to define data in a D3 visualization is through the use of JavaScript arrays; for example, say you have multiple data elements stored in an array, and you want to generate corresponding visual elements to represent each and every one of them. Additionally, when the data array gets updated, you would want your visualization to reflect such changes immediately. In this lecture, we will accomplish this common approach:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter3/array-as-data.html.

With a more complex visualization, each element we have in a data array might not be a primitive integer value or a string, but a JavaScript object itself. In this lecture, we will discuss how this more complex data structure can be leveraged to drive your visualization using D3:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter3/object-as-data.html.

One of the benefits of D3's excellent support for functional-style JavaScript programming is that it allows functions to be treated as data as well. This particular feature can offer some very powerful capabilities under certain circumstances. This is a more advanced lecture. Don't worry about it if you are new to D3 and have some difficulty understanding it at first. Over time, this functional programming usage will become natural to you.

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter3/function-as-data.html.

Most of our data is stored in arrays, and we spend a lot of our effort working with arrays to format and restructure data. This is why D3 provides a rich set of array-oriented utility functions, making this task a lot easier. In this lecture, we will explore some of the most common and helpful utilities in this aspect:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter3/working-with-array.html.

Imagine you need to filter a D3 selection based on the associated data elements so that you can hide or show different sub-datasets based on the user's input. The D3 selection provides a filter function to perform this kind of data-driven filtering. In this lecture, we will show you how this can be leveraged to filter visual elements in a data-driven fashion:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter3/data-filter.html.

In many cases, it is desirable to sort your visual elements according to the data they represent so that you can highlight the significance of different elements visually. In this lecture, we will explore how this can be achieved in D3:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter3/data-sort.html.

It is probably very rare that you will only be visualizing static local data. The power of data visualization usually lays on the ability to visualize dynamic data typically generated by a server-side program. Since this is a common usecase, D3 comes with some handy helper functions to make this task as easy as possible. In this lecture, we will see how a remote dataset can be loaded dynamically and will update an existing visualization once it is loaded:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter3/asyn-data-load.html.

It is usually necessary in complex visualization projects to load and merge multiple datasets from different sources before proceeding to visualizing. The challenge in this kind of asynchronous loading is the difficulty in waiting to know when all datasets have been successfully loaded since only then the visualization can begin. D3 provides a very convenient queue interface to help organize these types of asynchronous tasks and helps you coordinate among them, which is the focus of this lecture:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter3/queue.html.

In this lecture, we will examine the most commonly used scales provided by D3: the continuous scales that map a continuous quantitative domain to a continuous range, including linear, power, logarithmic, and time scales:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter4/continuous-scales.html.

Often, we will need to create visualizations on a dataset that has time and date dimensions; therefore, D3 provides a built-in time scale to help perform this type of mapping. In this lecture, we will learn how to use the D3 time scale:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter4/time-scale.html.

In some cases, we may need to map our data to some ordinal values, for example, ["a", "b", "c"] or ["#1f77b4", "#ff7f0e", "#2ca02c"]. So, how can we perform this kind of mapping using D3 scales? This lecture is dedicated to answer this question:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter4/ordinal-scale.html.

In some cases, you might need to interpolate numbers embedded in a string; perhaps a CSS style for font, for example. In this lecture, we will examine how you can do that using D3 scale and interpolation. Let's take a look at how the string interpolator works in D3:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter4/string-interpolation.html.

It is sometimes necessary to interpolate colors when you interpolate values that do not contain numbers but rather RGB or HSL color code. This lecture addresses the question, how can you define scales for color codes and perform interpolation on them?:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter4/color-interpolation.html.

There will be cases when what you need to interpolate in your visualization is not a simple value but rather an object consisting of multiple and different values, for example, a rectangular object with width, height, and color attributes. Fortunately, D3 has built-in support for this type of compound object interpolation:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter4/compound-interpolation.html.

In this lecture, we will focus on introducing the basic concepts and supports of the axis component in D3 while we cover different types and features of axis as well as their SVG structures:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter5/basic-axes.html.

We already saw how to use the ticks function in the previous section. This is the simplest ticks-related customization you can do on a D3 axis. In this lecture, we will cover some of the most common and useful ticks-related customizations with D3 axis:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter5/ticks.html.

In this lecture, we will explore some useful techniques for drawing consistent grid lines on the axes without actually needing to know the tick values:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter5/grid-line.html.

In some cases, a user may change the time range for the visualization. This kind of change also needs to be reflected by rescaling the axes. In this lecture, we will explore how this can be achieved dynamically while also redrawing the grid lines associated with each tick:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter5/rescaling.html.

In this lecture, we will first take a look at the simplest case of transition - interpolating attributes on a single element over time to produce a simple animation:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter6/single-element-transition.html.

More elaborate data visualization requires animating multiple elements instead of a single element. In this lecture, we will see how a data-driven multi-element transition can be created to generate a moving bar chart. New bars are added over time, while the chart shifts from right to left with a smooth transition:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter6/multi-element-transition.html.

D3 provides support for different types of easing capabilities, and in this lecture, we will explore different built-in D3 easing functions, as well as how to implement custom easing functions with D3 transition:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter6/easing.html.

"Tween" has been borrowed by modern computer-generated animation and refers to the technique or algorithm that controls how the inbetween frames are generated. In this lecture, we will examine how the D3 transition supports tweening:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter6/tweening.html.

Sometimes, regardless of how much easing or tweening you do, a single transition is just not enough. In this lecture, we will see exactly how to implement transition chaining:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter6/chaining.html.

Under some circumstances, you might find it necessary to selectively apply transition to a subset of a certain selection. In this lecture, we will explore this effect using data-driven transition filtering techniques:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter6/filtering.html.

Sometimes, you might need to trigger certain actions other than a transition, or do something else during the transition. This is what transition event listeners are designed for, they are the topic of this lecture:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter6/events.html.

In this lecture, we will explore a low-level D3 timer function that you can leverage to create your own custom animation from scratch:

Source code

The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter6/timer.html.