Types of scales and common use cases
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 |