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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Most commonly used scales are continuous scales that map a continuous quantitative domain to a continuous range, including linear, power, logarithmic, and time 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.
In some cases, we may need to map our data to some ordinal values, so, here you will learn how to do it.
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.
It is sometimes necessary to interpolate colors when you interpolate values that do not contain numbers but rather RGB or the HSL color code.
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.
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.
We will cover some of the most common and useful ticks-related customizations with D3 axis.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.