Box plot / Yuanjie (Tukey) Tu

diamonds = FileAttachment("diamonds.csv").csv({typed: true})

import { Table } from "@observablehq/inputs"

Table(diamonds.slice(0, 5))

// Specify the dimensions of the chart.

width

height = 600

margins = ({

top: 50,

right: 20,

bottom: 30,

left: 40

})

// Bin the data and derive the values (inter-quartile range, outliers…) for each bin.

n = width / 40;

bins = d3.bin()

.thresholds(n)

.value(d => d.carat)

(diamonds)

.map(bin => {

bin.sort((a, b) => a.price - b.price);

const values = bin.map(d => d.price);

const min = values[0];

const max = values[values.length - 1];

const q1 = d3.quantile(values, 0.25);

const q2 = d3.quantile(values, 0.50);

const q3 = d3.quantile(values, 0.75);

const iqr = q3 - q1; // interquartile range

const r0 = Math.max(min, q1 - iqr * 1.5);

const r1 = Math.min(max, q3 + iqr * 1.5);

bin.quartiles = [q1, q2, q3];

bin.range = [r0, r1];

bin.outliers = bin.filter(v => v.price < r0 || v.price > r1); // TODO

return bin;

})

// Prepare the positional scales.

x = d3.scaleLinear()

.domain([d3.min(bins, d => d.x0), d3.max(bins, d => d.x1)])

.rangeRound([margins.left, width - margins.right])

y = d3.scaleLinear()

.domain([d3.min(bins, d => d.range[0]), d3.max(bins, d => d.range[1])]).nice()

.range([height - margins.bottom, margins.top])

emptyChart = {

// Create the SVG container.

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height)

.attr("viewBox", [0, 0, width, height])

.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;")

.attr("text-anchor", "middle")

// Append the x axis.

svg.append("g")

.attr("transform", `translate(0,${height - margins.bottom})`)

.call(d3.axisBottom(x).ticks(n).tickSizeOuter(0))

// Append the y axis.

svg.append("g")

.attr("transform", `translate(${margins.left},0)`)

.call(d3.axisLeft(y).ticks(null, "s"))

.call(g => g.select(".domain").remove())

return svg.node()

}

quantileChart = {

// Create the SVG container.

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height)

.attr("viewBox", [0, 0, width, height])

.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;")

.attr("text-anchor", "middle")

// Create a visual representation for each bin.

const g = svg.append("g")

.selectAll("g")

.data(bins)

.join("g")

// Quartiles.

const quantiles = g.append("path")

.attr("fill", "none")

.style("stroke", "black")

.attr("d", d => `

M${x(d.x0) + 1},${y(d.quartiles[2])}

H${x(d.x1)}

V${y(d.quartiles[0])}

H${x(d.x0) + 1}

Z

`)

// Append the x axis.

const xAxis = svg.append("g")

.attr("transform", `translate(0,${height - margins.bottom})`)

.call(d3.axisBottom(x).ticks(n).tickSizeOuter(0))

// Append the y axis.

const yAxis = svg.append("g")

.attr("transform", `translate(${margins.left},0)`)

.call(d3.axisLeft(y).ticks(null, "s"))

.call(g => g.select(".domain").remove())

return svg.node()

}

medianChart = {

// Create the SVG container.

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height)

.attr("viewBox", [0, 0, width, height])

.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;")

.attr("text-anchor", "middle")

// Create a visual representation for each bin.

const g = svg.append("g")

.selectAll("g")

.data(bins)

.join("g")

// Quartiles.

const quantiles = g.append("path")

.attr("fill", "#ddd")

.attr("d", d => `

M${x(d.x0) + 1},${y(d.quartiles[2])}

H${x(d.x1)}

V${y(d.quartiles[0])}

H${x(d.x0) + 1}

Z

`)

// Median.

const median = g.append("path")

.attr("stroke", "currentColor")

.attr("stroke-width", 2)

.attr("d", d => `

M${x(d.x0) + 1},${y(d.quartiles[1])}

H${x(d.x1)}

`)

// Append the x axis.

const xAxis = svg.append("g")

.attr("transform", `translate(0,${height - margins.bottom})`)

.call(d3.axisBottom(x).ticks(n).tickSizeOuter(0))

// Append the y axis.

const yAxis = svg.append("g")

.attr("transform", `translate(${margins.left},0)`)

.call(d3.axisLeft(y).ticks(null, "s"))

.call(g => g.select(".domain").remove())

return svg.node()

}

rangeChart = {

// Create the SVG container.

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height)

.attr("viewBox", [0, 0, width, height])

.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;")

.attr("text-anchor", "middle")

// Create a visual representation for each bin.

const g = svg.append("g")

.selectAll("g")

.data(bins)

.join("g")

// Range.

const whisker = g.append("path")

.attr("stroke", "#00cc99")

.attr("d", d => `

M${x((d.x0 + d.x1) / 2)},${y(d.range[1])}

V${y(d.range[0])}

`)

// Quartiles.

const quantiles = g.append("path")

.attr("fill", "#ddd")

.attr("d", d => `

M${x(d.x0) + 1},${y(d.quartiles[2])}

H${x(d.x1)}

V${y(d.quartiles[0])}

H${x(d.x0) + 1}

Z

`)

// Median.

const median = g.append("path")

.attr("stroke", "currentColor")

.attr("stroke-width", 2)

.attr("d", d => `

M${x(d.x0) + 1},${y(d.quartiles[1])}

H${x(d.x1)}

`)

// Append the x axis.

const xAxis = svg.append("g")

.attr("transform", `translate(0,${height - margins.bottom})`)

.call(d3.axisBottom(x).ticks(n).tickSizeOuter(0))

// Append the y axis.

const yAxis = svg.append("g")

.attr("transform", `translate(${margins.left},0)`)

.call(d3.axisLeft(y).ticks(null, "s"))

.call(g => g.select(".domain").remove())

return svg.node()

}

outlierChart = {

// Create the SVG container.

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height)

.attr("viewBox", [0, 0, width, height])

.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;")

.attr("text-anchor", "middle")

// Create a visual representation for each bin.

const g = svg.append("g")

.selectAll("g")

.data(bins)

.join("g")

// Range.

const whisker = g.append("path")

.attr("stroke", "#00cc99")

.attr("d", d => `

M${x((d.x0 + d.x1) / 2)},${y(d.range[1])}

V${y(d.range[0])}

`)

// Quartiles.

const quantiles = g.append("path")

.attr("fill", "#ddd")

.attr("d", d => `

M${x(d.x0) + 1},${y(d.quartiles[2])}

H${x(d.x1)}

V${y(d.quartiles[0])}

H${x(d.x0) + 1}

Z

`)

// Median.

const median = g.append("path")

.attr("stroke", "currentColor")

.attr("stroke-width", 2)

.attr("d", d => `

M${x(d.x0) + 1},${y(d.quartiles[1])}

H${x(d.x1)}

`)

// Append the x axis.

const xAxis = svg.append("g")

.attr("transform", `translate(0,${height - margins.bottom})`)

.call(d3.axisBottom(x).ticks(n).tickSizeOuter(0))

// Append the y axis.

const yAxis = svg.append("g")

.attr("transform", `translate(${margins.left},0)`)

.call(d3.axisLeft(y).ticks(null, "s"))

.call(g => g.select(".domain").remove())

// Outliers, with a bit of jitter.

const outliers = g.append("g")

.attr("fill", "currentColor")

.attr("fill-opacity", 0.2)

.attr("stroke", "none")

.attr("transform", d => `translate(${x((d.x0 + d.x1) / 2)},0)`)

.selectAll("circle")

.data(d => d.outliers)

.join("circle")

.attr("r", 2)

.attr("cx", () => (Math.random() - 0.5) * 4)

.attr("cy", d => y(d.price))

return svg.node()

}

titleChart = {

// Create the SVG container.

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height)

.attr("viewBox", [0, 0, width, height])

.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;")

.attr("text-anchor", "middle")

// Create a visual representation for each bin.

const g = svg.append("g")

.selectAll("g")

.data(bins)

.join("g")

// Range.

const whisker = g.append("path")

.attr("stroke", "#00cc99")

.attr("d", d => `

M${x((d.x0 + d.x1) / 2)},${y(d.range[1])}

V${y(d.range[0])}

`)

// Quartiles.

const quantiles = g.append("path")

.attr("fill", "#ddd")

.attr("d", d => `

M${x(d.x0) + 1},${y(d.quartiles[2])}

H${x(d.x1)}

V${y(d.quartiles[0])}

H${x(d.x0) + 1}

Z

`)

// Median.

const median = g.append("path")

.attr("stroke", "currentColor")

.attr("stroke-width", 2)

.attr("d", d => `

M${x(d.x0) + 1},${y(d.quartiles[1])}

H${x(d.x1)}

`)

// Append the x axis.

const xAxis = svg.append("g")

.attr("transform", `translate(0,${height - margins.bottom})`)

.call(d3.axisBottom(x).ticks(n).tickSizeOuter(0))

// Append the y axis.

const yAxis = svg.append("g")

.attr("transform", `translate(${margins.left},0)`)

.call(d3.axisLeft(y).ticks(null, "s"))

.call(g => g.select(".domain").remove())

// Outliers, with a bit of jitter.

const outliers = g.append("g")

.attr("fill", "currentColor")

.attr("fill-opacity", 0.2)

.attr("stroke", "none")

.attr("transform", d => `translate(${x((d.x0 + d.x1) / 2)},0)`)

.selectAll("circle")

.data(d => d.outliers)

.join("circle")

.attr("r", 2)

.attr("cx", () => (Math.random() - 0.5) * 4)

.attr("cy", d => y(d.price))

// Add a title

const title = svg.append("g")

.append("text")

.attr("x", width / 2)

.attr("y", (margins.top / 2))

.attr("text-anchor", "middle")

.attr("front-weight", "bold")

.attr("font-family", "Helvetica Neue, Arial")

.attr("font-size", "20px")

.text("Diamond price distribution")

return svg.node()

}

import {textcolor} from "@observablehq/text-color-annotations-in-markdown"

import {toc} from "@jonfroehlich/collapsible-toc"

Purpose-built for displays of data