Learning Path: D3.js: Visualizing Data with D3.js
2.5 (2 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.
23 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learning Path: D3.js: Visualizing Data with D3.js to your Wishlist.

Add to Wishlist

Learning Path: D3.js: Visualizing Data with D3.js

Leverage the power of D3.js to create beautiful and stunning illustrations of data
2.5 (2 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.
23 students enrolled
Created by Packt Publishing
Last updated 6/2017
Current price: $10 Original price: $200 Discount: 95% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 2 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Get started with D3JS setup
  • Familiarize yourself with the Node Package Manager (NPM)
  • Select elements with D3JS
  • Learn the enter-update-exit pattern for representing data visually in D3_js
  • Work with D3JS scales
  • Master D3JS axes components
  • Learn all about the transition and animation support provided by D3_js
View Curriculum
  • You should have basic knowledge of JavaScript, HTML, SVG, and CSS.

Need to get your hands dirty with D3.js quickly?

Start learning all you needed to know about creating beautiful data visualizations with Packt’s Learning Path, D3.js: Visualizing Data with D3.js.

This Learning Path seeks to take you on a journey to learn to create beautiful visualizations of information using D3.js. D3.js, where D3 stands for data-driven documents, is an amazing JavaScript library which is known among data analysts, engineers, mathematicians, and developers worldwide as an advanced data visualization tool. Its ability to bring data to life in the form of graphics is what has made it so widespread in its use, scope, and popularity.

D3.js has revolutionized the way data is analyzed, making it far easier than before to gain useful insights from complex, yet highly lucid data visualizations. With an extensive library equipped to help you create a huge variety of plots, charts, and graphs, D3.js is currently one of the best tools to help you create attractive and intuitive data visualizations.

D3.js: Visualizing Data with D3.js is Packt’s Video Learning Path that is a series of individual video products put together in a logical and stepwise manner such that each video builds on the concepts mastered in the video before it.

First, we would be looking at understanding the basics of D3.js. Then, we would move on to aspects such as setting up some of our very first data visualizations, including learning ways to bind the data to the DOM and applying custom, data-driven transformations to it to create stunning infographics. Further, we would be learning to harness the power of the recently released D3 v4 API. Finally, we would be looking at some of the techniques to create data visualizations using the animation and transition support provided by the D3 library.

The goal of this course is to help you develop a strong foundation in D3.js and allow you to create breathtaking visualizations of data using its vast library

This course is authored by some of the best in the field.

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 – meta-search engine for online shopping. He is also the creator of dc.js—a popular multidimensional charting library built on D3.

Who is the target audience?
  • This Learning Path is for all web developers or data analysts familiar with JavaScript, interested in getting started with D3_js, so as to start creating stunning data visualizations on their own.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
39 Lectures
Introduction to D3
20 Lectures 01:14:44

This video gives an overview of the entire course.

Preview 01:42

The first thing you will need when you start a D3-powered data visualization project is a working development environment. Let’s see how a simple D3 development environment can be set up.

Setting Up a Simple D3 Development Environment

When you work on a more complex data visualization project that requires the use of a number of JavaScript libraries, the simple solution we discussed before might become a bit clumsy and unwieldy. This video will demonstrate an improved setup using Node Packaged Modules (NPM).

Setting Up an NPM-Based Development Environment

D3 is designed and built using functional style JavaScript, which might come as a bit unfamiliar or even alien to someone who is more comfortable with the procedural or object-oriented JavaScript styles. This video is designed to cover some of the most fundamental concepts in functional JavaScript.

Understanding D3-Style JavaScript

Selector support is standardized by W3C, so all modern web browsers have built-in support for the selector API. In this video, we will cover how D3's selection API works and some of its powerful features.

Preview 04:04

It is very common that at times you will need to select a single element on a page to perform some visual manipulation. Let’s see how to perform a targeted single element selection in D3 using a CSS selector.

Selecting a Single Element

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. Let’s play with the D3 multi-element selector and its selection API.

Selecting Multiple Elements

Sometimes it is handy to be able to iterate through each element within a selection and modify each element differently according to their position. This video shows us how this can be achieved using D3 selection iteration API.

Iterating Through a Selection

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

Performing Subselection

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. Let’s explore how the entire body structure can be constructed using D3 alone.

Function Chaining

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, which require access to raw DOM elements. This video will show us ways to do that.

Manipulating the Raw Selection

The task of matching each datum with its visual representation seems to be a complicated and tedious task. Let’s see how the enter-update-exit pattern helps us solve this.

Preview 06:06

One of the most common and popular ways to define data in D3 visualization is through the use of JavaScript arrays. This video shows how we can get visualization to reflect changes.

Binding an Array as Data

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. We’ll explore how this more complex data structure can drive visualization.

Binding Object Literals as Data

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 is a more advanced video.

Binding Functions as Data

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 utilities functions, making this task a lot easier.

Working with Arrays

Imagine you need to filter D3 selection based on the associated data elements so that you can hide or show different sub-datasets based on the user's input. D3 selection provides a filter function to perform this kind of data-driven filtering.

Filtering with Data

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 video, we will explore how this can be achieved in D3.

Sorting with Data

It is probably very rare that you will only be visualizing static local data. The power of data visualization usually lies in the ability to visualize dynamic data typically generated by a server-side program.

Loading Data from a Server

In this video, we will demonstrate another very useful technique commonly used to process or generate data in large data visualization projects. It is usually necessary in complex visualization projects to load and merge multiple datasets from different sources before proceeding to visualizing.

Asynchronous Data Loading Using Queue

Test Your Knowledge
5 questions
Mapping and Styling in D3
19 Lectures 56:42

This video gives an overview of the entire course.

Preview 01:46

Most commonly used scales are continuous scales that map a continuous quantitative domain to a continuous range, including linear, power, logarithmic, and time scales.

Using Continuous Scales

You will learn how to use the D3 time scale so as to create visualization on a dataset that has time and date dimensions.

Using the Time Scale

In some cases, we may need to map our data to some ordinal values, so, here you will learn how to do it.

Using the Ordinal Scale

In some cases, you might need to interpolate numbers embedded in a string; perhaps, a CSS style for font, so, here we will deal with this.

Interpolating a String

It is sometimes necessary to interpolate colors when you interpolate values that do not contain numbers but rather RGB or the HSL color code.

Interpolating Colors

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. D3 has built-in support for this type of compound object interpolation.

Interpolating Compound Objects

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.

Preview 04:22

We will cover some of the most common and useful ticks-related customizations with D3 axis.

Customizing Ticks

Quite often, we will need horizontal and vertical grid lines to be drawn in consistency with the ticks on both x and y axes. Let’s explore some useful techniques for drawing consistent grid lines on Axis without actually needing to know the tick values.

Drawing Grid Lines

In some cases, the scale used by axes might change when triggered by user interaction or changes from data feeds. For example, a user may change the time range for the visualization. This video shows how rescaling can be achieved dynamically while also redrawing the grid lines associated with each tick.

Dynamic Rescaling of Axes

In this video, 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.

Preview 03:17

More elaborate data visualization requires animating multiple elements instead of a single element, as demonstrated in the previous video. Let’s see how a data-driven multi-element transition can be created to generate a moving bar chart.

Animating Multiple Elements

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

Using Ease

This phrase is borrowed in modern computer-generated animation and refers to the technique or algorithm that controls how the in between frames are generated. In this video, we will examine how the D3 transition supports tweening.

Using Tweening

The first four videos in this section were focused on single transition controls in D3, including custom easing and tweening functions. However, sometimes, regardless of how much easing or tweening you do, a single transition is just not enough. This video shows exactly how transition chaining can be achieved using transition chaining.

Using Transition Chaining

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

Using Transition Filter

Transition chaining gives you the ability to trigger secondary transitions after the initial transition reach its completion state; however, sometimes you might need to trigger certain actions other than a transition, or maybe do something else during the transition. This is what transition event listeners are designed for.

Listening to Transitional Events

So far in this section, we discussed various topics on D3 transition. At this point, you might be asking the question, What is powering D3 transition that is generating the animated frames? This video shows a low-level D3 timer function that you can leverage to create your own custom animation from scratch.

Working with Timer

Test Your Knowledge
5 questions
About the Instructor
Packt Publishing
3.9 Average rating
7,219 Reviews
51,672 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.