D3 4.x: Mastering Data Visualization
2.9 (15 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
147 students enrolled
Wishlisted Wishlist

Please confirm that you want to add D3 4.x: Mastering Data Visualization to your Wishlist.

Add to Wishlist

D3 4.x: Mastering Data Visualization

Create fantastic looking data visualizations using the latest version of D3
2.9 (15 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
147 students enrolled
Created by Packt Publishing
Last updated 6/2017
English
Curiosity Sale
Current price: $10 Original price: $200 Discount: 95% off
30-Day Money-Back Guarantee
Includes:
  • 3.5 hours on-demand video
  • 30 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Use D3 to load, manipulate, and map data to any kind of visual representation on the Web
  • Create data-driven dynamic visualizations that update as the data does
  • Leverage the various modules provided by D3 to create sophisticated, dynamic, and interactive charts and graphics
  • Create data-driven transitions and animations within your visualizations
  • Understand and leverage more advanced concepts such as force and touch
  • Create a data dashboard with Angular 2
View Curriculum
Requirements
  • A text editor to edit and create HTML, CSS, and JavaScript files
  • A modern web browser (Firefox 3, IE 9, Chrome, Safari 3.2, and later)
  • A local HTTP server to host data files for some of the more advanced examples in this course. We will cover how to set up a Node-based and Python-based simple HTTP server in the first section
  • Optionally, you will need a Git client if you would like to check out the example source code directly from the Git repository
Description

Hi there! If you’re proficient in HTML, CSS, and JavaScript, and want to figure out data visualization for the web, then you’ve come to the right place.

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.

D3.js is a JavaScript library designed to display digital data in dynamic graphical form. It helps you bring data to life using HTML, SVG, and CSS. D3 allows greater control over the final visual result, and it is the hottest and most powerful web-based data visualization technology in the market today.

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 starts with the basic D3 structure and building blocks and quickly moves on to writing idiomatic D3-style JavaScript code. We will learn how to work with selections to target certain visual elements on the page, then we will see techniques to represent data both in programming constructs and its visual metaphor. We will learn how to map values in our data domain to the visual domain using scales, and use the various shape functions supported by D3 to create SVG shapes in visualizations. Moving on, we’ll see how to use and customize various D3 axes and master transitions to add bells and whistles to otherwise dry visualizations. We’ll also learn to work with charts, hierarchy, graphs, and build interactive visualizations. Next we’ll work with force, which is one of the most awe-inspiring techniques we can add to our visualizations. We'll then see how to create a basic Angular 2 application complete with components, services, data and event binding, and a testing infrastructure. We will learn how to integrate D3 into an Angular 2 application. We will build a data dashboard out of flexible Angular 2 components. Finally, we will learn to leverage a few advanced features and functionalities such as incorporating real-time data streams, and adding interactivity and animations.

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

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

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.

Who is the target audience?
  • If you are a developer or an analyst familiar with HTML, CSS, and JavaScript, and you wish to get the most out of D3, then this course is for you. This course is also for data science professionals looking for a web-based visualization toolkit. This course can also serve as a quick-reference guide for experienced data visualization developers.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
83 Lectures
05:26:32
+
Getting Started with D3.js
4 Lectures 21:02

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.


Source code
The source code for this lecture can be found at https://github.com/NickQiZhu/d3-cookbook-v2/tree/master/src/chapter1/simple-dev-env.


Preview 03:33

Setting up an NPM-based D3 development environment
05:15

Understanding D3-style functional JavaScript
07:14

Test Your Knowledge
2 questions
+
Be Selective
7 Lectures 20:33
Introducing selection
02:25

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.
Preview 03:02

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.


Selecting multiple elements
02:01

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.


Iterating through a selection
03:13

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.


Performing subselection
04:41

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.


Function chaining
02:46

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.


Manipulating the raw selection
02:25

Test Your Knowledge
2 questions
+
Dealing with Data
9 Lectures 28:31
The enter-update-exit pattern
04:16

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.


Binding an array as data
05:28

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.


Binding object literals as data
02:12

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.


Binding functions as data
02:57

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.


Working with arrays
03:13

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.


Filtering with data
02:09

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.


Sorting with data
02:08

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.


Loading data from a server
02:20

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.


Asynchronous data loading using queue
03:48

Test Your Knowledge
2 questions
+
Tipping the Scales
6 Lectures 17:56

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.


Using continuous scales
04:36

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.


Using the time scale
02:38

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.


Using the ordinal scale
03:06

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.


Interpolating a string
02:12

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.


Interpolating colors
02:36

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.
Interpolating compound objects
02:48

Test Your Knowledge
1 question
+
Playing with Axes
4 Lectures 11:28

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.


Working with basic axes
04:04

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.


Customizing ticks
01:46

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.


Drawing grid lines
03:15

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.


Dynamic rescaling of axes
02:23

Test Your Knowledge
1 question
+
Transition with Style
8 Lectures 22:09

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.


Animating a single element
02:53

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.


Animating multiple elements
04:13

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.


Using ease
03:27

"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.


Using tweening
02:31

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.


Using transition chaining
01:51

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.


Using transition filter
02:17

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.


Listening to transitional events
02:07

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.


Working with timers
02:50
+
Getting into Shape
8 Lectures 20:31
Creating simple shapes
03:24

Using a line generator
03:01

Using a line curve
02:29

Changing the line tension
01:23

Using an area generator
02:18

Using an area curve
01:30

Using an arc generator
03:14

Implementing arc transition
03:08
+
Chart Them Up
5 Lectures 15:44
Creating a line chart
05:44

Creating an area chart
02:43

Creating a scatterplot chart
02:10

Creating a bubble chart
02:37

Creating a bar chart
02:28
+
Lay Them Out
4 Lectures 24:11
Building a pie chart
04:11

Building a stacked area chart
04:28

Building a treemap and a tree
12:40

Building an enclosure diagram
02:50

Test Your Knowledge
2 questions
+
Interacting with Your Visualization
3 Lectures 13:12
Interacting with mouse events
02:51

Interacting with a multi-touch device
03:51

Implementing the zoom, pan, and drag behavior
06:29

Test Your Knowledge
1 question
5 More Sections
About the Instructor
Packt Publishing
3.9 Average rating
7,336 Reviews
52,421 Students
616 Courses
Tech Knowledge in Motion

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.