Learn D3.js

Create interactive data-driven visualizations for the web with the D3.js library

Helder da Rocha

• Publisher: Packt Publishing
• Year: 2019
• Print ISBN: 9781838645571
• eBook ISBN: 9781838649609
• Edition: 1
• Topic: Computer Science
• Subtopic: Data Visualisation
• Index: Computer Science

Explore the power of D3.js 5 and its integration with web technologies for building rich and interactive data visualization solutions

Key Features

• Explore the latest D3.js 5 for creating charts, plots, and force-directed graphics
• Practical guide for creating interactive graphics and data-driven apps with JavaScript
• Build Real-time visualization and transition on web using SVG with D3.js

Book Description

This book is a practical hands-on introduction to D3 (Data-driven Documents): the most popular open-source JavaScript library for creating interactive web-based data visualizations. Based entirely on open web standards, D3 provides an integrated collection of tools for efficiently binding data to graphical elements. If you have basic knowledge of HTML, CSS and JavaScript you can use D3.js to create beautiful interactive web-based data visualizations.

D3 is not a charting library. It doesn't contain any pre-defined chart types, but can be used to create whatever visual representations of data you can imagine. The goal of this book is to introduce D3 and provide a learning path so that you obtain a solid understanding of its fundamental concepts, learn to use most of its modules and functions, and gain enough experience to create your own D3 visualizations. You will learn how to create bar, line, pie and scatter charts, trees, dendograms, treemaps, circle packs, chord/ribbon diagrams, sankey diagrams, animated network diagrams, and maps using different geographical projections. Fundamental concepts are explained in each chapter and then applied to a larger example in step-by-step tutorials, complete with full code, from hundreds of examples you can download and run.

This book covers D3 version 5 and is based on ES2015 JavaScript.

What you will learn

• Learn to use D3.js version 5 and web standards to create beautiful interactive data-driven visualizations for the web
• Bind data to DOM elements, applying different scales, color schemes and configuring smooth animated transitions for data updates
• Generate data structures and layouts for many popular chart formats
• Apply interactive behaviors to any chart
• Create thematic maps based on GIS data using different geographical projections with interactive behaviors
• Load, parse and transform data from JSON and CSV formats

Who this book is for

The book is intended for web developers, web designers, data scientists, artists, and any developer who wish to create interactive data visualization for the Web using D3. The book assumes basic knowledge of HTML, CSs, and JavaScript.

Scales, Axes, and Colors

Quantitative data visualizations that employ dots, lines, and other shapes to represent values usually need to situate those values within the context of a domain. The most common way to provide this context is using axes. Each axis represents a data domain, providing lines, tick marks, and labels that are rendered in the same scale as the data points. One axis represents one dimension. The Cartesian system, which used in most bar, line, area, and scatter charts, employs two perpendicular axes that provide context for a two-dimensional space. Other visualizations may use three or more axes.

The d3-axis module contains ready-to-use one-dimensional SVG axes that you can attach to a scale, configure, and use to assemble linear, Cartesian, and radial grids. In this chapter, you will learn how to use it to create axes for your charts, configure position, ticks, paddings, and other visual aspects using selections, axis styling methods, and CSS.

A typical visualization is a scaled representation of data. To encode data values in visual artifacts, you need to map data values to graphical aspects, such as pixel dimensions, areas, and colors. This is achieved with reusable transformation functions called scales. The d3-scale module contains a collection of generators that create different types of scale functions that can be used to expand or shrink a domain so that it fits in the output range of a viewport, or convert values into dates and colors using interpolation, quantizing, or discrete mapping. You will use all these different types of scales in this chapter.

This chapter also covers the d3-color module, which contains generators for popular color spaces and several color manipulation tools, color interpolators from the d3-interpolate module that was introduced in the last chapter, and the d3-scale-chromatic module, which provides a huge collection of interpolators and color palettes that you use with sequential and ordinal scales.

Finally, you will have the opportunity to practice all that you learned so far by following the complete step-by-step scatter and bubble chart example at the end of this chapter.

We will cover the following topics in this chapter:

• Axes
• Scales
• Color palettes, schemes, and spaces
• Creating a scatterplot

Axes

Axes are lines containing units of measure in a specified scale. Every axis is connected to a scale, which should be the same scale that's used for the data points it represents. D3 generates SVG for horizontal and vertical axes using the methods in the d3-axis module. Each axis consists of an SVG <path> element (of the domain class), followed by several <g> elements (of the tick class), each containing a small <line> (perpendicular to the path line) and a <text> element. There are methods to configure the positions, size, and padding of the tick marks, and you can change any position and style using D3 selection operations or CSS to create any axis-based system you like.

An axis is created using one of the four generator functions listed in the following table, which require a scale (that can also be provided later using the scale() configuration method). All ticks are created with a size of 6 and a padding of 3. All axes are located at the (0,0) position:

Function	Description
d3.axisTop(scale)	Creates a top-oriented axis generator function for the given scale. Ticks are drawn above the horizontal domain path.
d3.axisRight(scale)	Creates a right-oriented axis generator function for the given scale. Ticks are drawn to the right of the vertical domain path.
d3.axisBottom(scale)	Creates a bottom-oriented axis generator function for the given scale. Ticks are drawn below the horizontal domain path.
d3.axisLeft(scale)	Creates a left-oriented axis generator function for the given scale. Ticks are drawn to the left of the horizontal domain path.

Functions from the d3-axis module for creating SVG axes.

Once an axis function is created, it must be called with a selection that returns an SVG context (usually a <g>) element so that it can be appended to the DOM tree and rendered. The following code generates a simple 250-pixel wide horizontal bottom-oriented axis inside a 500 x 50 pixel SVG viewport, using the default domain for a linear scale, which is [0,1] (see Axes/1-axis.html):

const scale = d3.scaleLinear().range([0,250]);
const axis1 = d3.axisBottom(scale);
 
const svg = d3.select("body").append("svg")
 .attr("width", 500).attr("height",50);
 
axis1(svg.append("g"));

Normally, you won't call the axis function with a selection parameter, as shown in the following code, but in the context of a selection chain using the call() method, this has the same effect (see Axes/2-axis-call.html):

svg.append("g").call(axis1);

Any one of the preceding code fragments will generate the following SVG code inside <body> (use your browser's d...

Table of contents

• Title Page
• Copyright and Credits
• About Packt
• Contributors
• Preface
• Introduction
• Technical Fundamentals
• Quick Start
• Data Binding
• Manipulating Data and Formatting
• Scales, Axes, and Colors
• Shape and Layout Generators
• Animation and Interactivity
• Visualizing Hierarchical Data
• Visualizing Flows and Networks
• Visualizing Geographical Data
• Other Books You May Enjoy