Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags


What are Scales in D3?

Educative Answers Team
svg viewer

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.


Copyright ©2022 Educative, Inc. All rights reserved

View all Courses

Keep Exploring