Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
function interpolateSinebow(t) {
return t = 0.5 - t, d3.rgb(
255 * Math.sin(Math.PI * (t + 0 / 3)) ** 2,
255 * Math.sin(Math.PI * (t + 1 / 3)) ** 2,
255 * Math.sin(Math.PI * (t + 2 / 3)) ** 2
);
}
function interpolateRainbow(t) {
return t = (t + 0.2) % 1, d3.cubehelix(
360 * t - 100,
1.5 - 1.5 * Math.abs(t - 0.5),
0.8 - 0.9 * Math.abs(t - 0.5)
);
}
function interpolateAngry(t) {
return d3.hsl(
t * 360,
1,
0.5
);
}
chartRgb(interpolateSinebow)
chartRgb(interpolateRainbow)
chartRgb(interpolateAngry)
chartL(interpolateSinebow)
chartL(interpolateRainbow)
chartL(interpolateAngry)
chartDifference(interpolateSinebow)
chartDifference(interpolateRainbow)
chartDifference(interpolateAngry)
function chartRgb(interpolate) {
const height = 240;
const margin = ({top: 20, right: 30, bottom: 30, left: 40});
const x = d3.scaleLinear()
.range([margin.left, width - margin.right]);
const y = d3.scaleLinear()
.domain([0, 255])
.range([height - margin.bottom, margin.top]);
const xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));
const yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(8))
.call(g => g.select(".domain").remove());
const svg = d3.select(DOM.svg(width, height));
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
const g = svg.append("g")
.datum(Array.from({length: width}, (_, i) => i / (width - 1)))
.attr("fill", "none")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round");
g.append("path")
.attr("stroke", "#f00")
.attr("d", d3.line().x(x).y(t => y(d3.rgb(interpolate(t)).r)));
g.append("path")
.attr("stroke", "#0f0")
.attr("d", d3.line().x(x).y(t => y(d3.rgb(interpolate(t)).g)));
g.append("path")
.attr("stroke", "#00f")
.attr("d", d3.line().x(x).y(t => y(d3.rgb(interpolate(t)).b)));
return svg.node();
}
function chartL(interpolate) {
const height = 240;
const margin = ({top: 20, right: 30, bottom: 30, left: 40});
const x = d3.scaleLinear()
.range([margin.left, width - margin.right]);
const y = d3.scaleLinear()
.domain([0, 100])
.range([height - margin.bottom, margin.top]);
const xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));
const yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(8))
.call(g => g.select(".domain").remove());
const svg = d3.select(DOM.svg(width, height));
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append("line")
.datum(d3.mean(d3.range(width), i => d3.lab(interpolate(i / (width - 1))).l))
.attr("fill", "none")
.attr("stroke", "#aaa")
.attr("stroke-dasharray", "2,2")
.attr("x1", margin.left)
.attr("x2", width - margin.right)
.attr("y1", y)
.attr("y2", y);
svg.append("path")
.datum(d3.range(width).map(i => i / (width - 1)))
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", d3.line().x(x).y(t => y(d3.lab(interpolate(t)).l)));
return svg.node();
}
function chartDifference(interpolate) {
const height = 240;
const margin = ({top: 20, right: 30, bottom: 30, left: 40});
const x = d3.scaleLinear()
.range([margin.left, width - margin.right]);
const y = d3.scaleLinear()
.domain([0, 70])
.range([height - margin.bottom, margin.top]);
const xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));
const yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(8))
.call(g => g.select(".domain").remove());
const svg = d3.select(DOM.svg(width, height));
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append("path")
.datum(d3.range(width).map(i => i / (width - 1)))
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", d3.line().x(x).y(t => y(d3.differenceDin99o(interpolate(t + 0.05), interpolate(t - 0.05)))));
return svg.node();
}
function rampNamed(interpolate) {
return html`<div style="position:relative;margin-bottom:4px;">
${ramp(interpolate)}
<div style="position:absolute;top:14px;font:10px sans-serif;">${interpolate.name}</div>
</div>`;
}
import {ramp} from "@mbostock/color-ramp"
d3 = require("d3@5", "d3-color-difference@0.1")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
