In this course, you will learn how to map values in your 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, you’ll see how to use and customize various D3 axes and master transition to add bells and whistles to otherwise dry visualizations.
About The Author
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 Yroocom - meta search engine for online shopping. He is also the creator of dc.js—a popular multidimensional charting library built on D3.
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.