This course is a blend of text, videos, code examples, and assessments, which together makes your learning journey all the more exciting and truly rewarding. It includes sections that form a sequential flow of concepts covering a focused learning path presented in a modular manner. This helps you learn a range of topics at your own speed and also move towards your goal of mastering data visualization with D3.
This course has been prepared using extensive research and curation skills. Each section adds to the skills learned and helps us to achieve mastery in solving data visualization problems using D3. Every section is modular and can be used as a standalone resource too.
This course has been designed to teach you D3 through the use of practical recipes, a do-as-you-learn approach, to provide you with skills to develop your own cool, neat-looking visualizations.
This course will take you through the most common to the not-so-common techniques to build data visualizations using D3.
This course has been authored by some of the best in their fields:
Nick Zhu is a professional programmer and data engineer with more than a decade experience in software development, Big Data, and machine learning. Currently, he is one of the founders and CTO of Yroo - a meta search engine for online shopping. He is also the creator of dc.js — a popular multidimensional charting library built on D3.
Matt Dionis has over three years of experience with both Angular and D3.js. He uses D3.js frequently and Angular on a daily basis while building internal tools for a rapidly growing financial technology start-up.
The first thing you will need when you start a D3-powered data visualization project is a working development environment. In this lecture, we will show you how a simple D3 development environment can be set up within minutes.
The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/tree/master/src/chapter1/simple-dev-env.
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:
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:
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:
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:
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:
The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter2/function-chain.html.
The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter2/raw-selection.html.
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.
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.
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:
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:
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:
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:
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:
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:
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:
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:
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:
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?:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter6/timer.html.
Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.
With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.
From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.
Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.