What are Scales in D3?
A little about D3
D3 is an interactive JavaScript library for data visualization. It uses Scalar Vector Graphics (SVG) coupled with HTML and CSS to display charts and figures to illustrate the numeric data. To display charts and figures, you need to make use of a data set that can be loaded from a .csv file or be hardcoded as an array. The data can be in different shapes, for example:
- The data can be either quantized or continuous.
- The dataset may contain either very large values or very small values.
Therefore, to accommodate data into our charts and figures (keeping in mind the size of SVG), D3 provides various types of scaling.
Scale functions
Scale functions are JavaScript functions that:
- Take an input (usually a number, date, or category).
- Return a value, e.g., a coordinate, color, length, or radius.
You need to specify the domain and the range whenever you are trying to scale a dataset. Domain denotes the maximal and minimal extremes of your dataset. Range indicates the maximal and minimal points where it will map your domain.
For example, consider the following dataset:[0, 1, 2, 3, 4, 5]. The domain of this dataset will be [0, 5], so, if we want our minimum value to be on 10px and the maximum value to be on 110px, then our range will be [10, 110].
Here is a list of scales that D3 provides to cater to different dataset types.
Scales with continuous input and continuous output
| Type | Function | Description |
|---|---|---|
| Linear Scale | scaleLinear() |
They use a linear function (y = m * x + b) to interpolate across the domain and range. |
| Power Scale | scalePow() |
The power scale interpolates using a power (y = m * x^k + b) function. The exponent k is set using exponent(). |
| Squareroot Scale | scaleSqrt() |
The scaleSqrt scale is a special case of the power scale (where k = 0.5). |
| Log Scale | scaleLog() |
Log scales interpolate using a log function (y = m * log(x) + b). |
| Time Scale | scaleTime() |
scaleTime is similar to scaleLinear, except the domain is expressed as an array of dates. |
| Sequential Scale | scaleSequential() |
scaleSequential is used for mapping continuous values to an output range that is determined by a preset (or custom) interpolator. |
Scales with continuous input and discrete output
| Type | Function | Description |
|---|---|---|
| Quantized Scale | scaleQuantize() |
scaleQuantize accepts continuous input and outputs a number of discrete quantities defined by the range. |
| Quantile Scale | scaleQuantile() |
scaleQuantile maps continuous numeric input to discrete values. The domain is defined by an array of numbers. |
| Threshold Scale | scaleThreshold() |
scaleThreshold maps continuous numeric input to discrete values defined by the range. n-1 domain split points are specified, where n is the number of range values. |
Scales with discrete input and discrete output
| Type | Function | Description |
|---|---|---|
| Ordinal Scale | scaleOrdinal() |
scaleOrdinal maps discrete values (specified by an array) to discrete values (also specified by an array). |
| Band Scale | scaleBand() |
scaleBand will split the range into n bands (where n is the number of values in the domain array) and compute the positions and widths of the bands while taking into account any specified padding. |
| Point Scale | scalePoint() |
scalePoint creates the specified range and scale functions that map from a discrete set of values to equally spaced points. |
To read more about scales, visit the official documentation.
Free Resources
