D3 Scales, An Introduction

December 10th, 2019

#public, #d3js

Data Driven Documents (d3) is generally considered the industry standard for data visualization in the browser. The basic task which I use d3 for is the proportional mapping of a set or domain of input values to a designated set or range of output values.

Here are a few examples:

Linear Mapping

1
2
3
import { scaleLinear } from 'd3';

const linearScale = scaleLinear().domain([0, 100]).range([0, 1]);

In this case, we can now invoke linearScale(5) and receive a return value between 0 and 1 which represents the proportion of the integer 5 between 0 and 100; namely, 0.05.

Quantize Mapping:

1
2
3
import { quantizeScale } from 'd3';

const quantizeScale = scaleQuantize().domain([0, 100]).range(['red', 'blue']);

What this will do is designated the input quantizeScale(1) as either red or blue.

Time Scales

D3 also has a scale for handling time.

1
2
3
4
5
import { linearScale } from 'd3';

const timeScale = linearScale()
  .domain([new Date(1990, 04, 04), new Date()])
  .range([0, 1]);

What this will do is take a date as an input, timeScale(new Date(2019, 04, 04)), and tell us what percentage of time the given date is relative to the provided scale.

Overview

What these methods do is demonstrate for us one high level feature of d3, which I find most useful. That is, mapping input values to a specified output value. This can be very useful in illustrating relative or comparative data.

D3 is very powerful. There will be more posts to come on the various ways that it can bring data to life!