Trusted answers to developer questions

Educative Answers Team

**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** 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.

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. |

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. |

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.

RELATED TAGS

axes

scale

d3

Copyright Â©2022 Educative, Inc. All rights reserved

RELATED COURSES

View all Courses

Keep Exploring

Related Courses