Quantile quantization divides continuous data into groups of similar size by choosing thresholds from the input distribution. In D3, a quantile scale uses a discrete data domain and a discrete range; the range length determines how many groups are computed. section 6.4.1
For quartiles, configure the scale with four range values:
- Pass the data values as the scale domain. section 6.4.1
- Pass [0, 1, 2, 3] as the range to divide the data into four groups. section 6.4.1
- Call quantiles() to obtain the three thresholds separating the first, second, and third quartiles. section 6.4.1
Comparing salary distributions
Filter the dataset into women’s and men’s salary arrays, create one quantile scale for each array, and calculate each group’s quartile thresholds. Use those thresholds with minimum, maximum, and median values to position a box plot’s rectangle, whiskers, and median line. section 6.4 section 6.4.1
Listing 6.5 Calculating quartile and min/max values (box-plot.js)
const femalesSalaries = data.filter(d => d.gender === #1 "Female").map(d => d.salary); const femalesQuartilesScale = d3.scaleQuantile() .domain(femalesSalaries) .range([0, 1, 2, 3]); const femalesQuartiles = femalesQuartilesScale #2 .quantiles(); const femalesExtent = d3.extent(femalesSalaries); const malesSalaries = data.filter(d => d.gender === "Male").map(d => d.salary); const malesQuartilesScale = d3.scaleQuantile() .domain(malesSalaries) .range([0, 1, 2, 3]); const malesQuartiles = malesQuartilesScale.quantiles(); const malesExtent = d3.extent(malesSalaries);
Inspect the complete D3 calculation for separate female and male salary arrays, quantile scales, thresholds, and extents. section 6.4.1
