Scale type Explanation Data type(s) Example Common Uses
scaleLinear As inputs get larger, so does the output Quantitative, ordinal (if numeric) d3.scaleLinear()
.domain([0, maxAge])
.range([0, width])
Axes: as age gets larger, your points will move further to the right.
Bar graphs: as age gets larger, your bars get longer
scaleSqrt As inputs get larger, so does the output. BUT based on square root growth. Quantitative + wanting to make the radius of circles grow d3.scaleSqrt()
.domain([0, maxAge])
.range([0, maxRadius])
Every. Single. Time.: Making circles get bigger (instead of scaleLinear). It has to do with the fact that you perceive area when watching a circle grow, not radius size.
scaleOrdinal Each input has a specific output Nominal, sometimes ordinal d3.scaleOrdinal()
.domain(["America","Canada","Mexico"])
.range(["blue", "red", "green"])
Coloring: Different categories of elements get different specific colors
scaleThreshold Break a quantitative value into different categories Quantitative, ordinal (if numeric) d3.scaleThreshold()
.domain([50,100])
.range(["red", "white", "green"])
Two common uses: breaking a quantitative variable into color categories or turning a quantitative variable into an ordinal variable
In the example: under 50 is red, 50-99 is white, and over 100 is green
scalePoint Evenly spaced out circles/points Nominal, sometimes ordinal d3.scaleOrdinal()
.domain(["America", "Canada", "Mexico"])
.range([0, width])
Spacing out categories evenly on an axis - think of the when-authors-published example I’ve shown a hundred times in class
scaleBand Evenly spaced out bars/areas Nominal, sometimes ordinal d3.scaleBand()
.domain(["America", "Canada", "Mexico"])
.range([0, width])
.padding(0.1)
Setting up the categorical axis of bar graphs