The avatar for @jwolondon
Jo Wood
Professor of Visual Analytics interested in design, geovisualization, visual storytelling and computational thinking.
Public
Edited
Dec 20
Paused
1 fork
Importers
30 stars
Hello
Hello ObservableHello PolygonsHello TransformsHello AnimationHello Plot layout with HTML and CSSHello modern colour spaces
Hello Colour Mixing
Hello custom marks with PlotHello Polygon MorphingHello Zoom-PanHello VegaLite and VegaHello Zoomable Vega-Lite MapHello SketchyHello ClipperLibHello NetworkHello Linear ProgrammingHello Census 2021Hello LabellaHello function expressions
Also listed in…
utilities
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3.interpolateRgb(...blueGold)(0.5)
Insert cell
Insert cell
function mix(clrs, interp = d3.interpolateRgb) {
return clrs
.slice(1)
.reduce((mixedClr, clr, i) => interp(mixedClr, clr)(1 / (i + 2)), clrs[0]);
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3.interpolateHsl(...blueGold)(0.5)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3.interpolateLab(...blueGold)(0.5)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
spectral = require("spectral.js@2/spectral.js")
Insert cell
Insert cell
spectral.mix(...blueGold, 0.5)
Insert cell
Insert cell
function interpolateSpectral(clr1, clr2) {
return (t = 0.5) =>
spectral.mix(d3.color(clr1).formatHex(), d3.color(clr2).formatHex(), t);
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mixbox = require("mixbox@2/mixbox.js")
Insert cell
Insert cell
mixbox.lerp(...blueGold, 0.5).toString()
Insert cell
Insert cell
function interpolateMixbox(clr1, clr2) {
const rgbToHex = (r, g, b) =>
"#" + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1);
return (t = 0.5) => rgbToHex(...mixbox.lerp(clr1, clr2, t));
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chroma = import("https://unpkg.com/chroma-js@3.0.0/index.js?module")
Insert cell
Insert cell
function blendMult(clr1, clr2) {
return (t) => chroma.blend(clr1, clr2, "multiply").hex();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function blendWMult(clr1, clr2) {
const midClr = chroma.blend(clr1, clr2, "multiply").hex();
return (t = 0.5) =>
t < 0.5
? d3.interpolateRgb(clr1, midClr)(t * 2)
: d3.interpolateRgb(midClr, clr2)(t * 2 - 1);
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function sequence(clrs, interp = d3.interpolateRgb) {
const interps = [];
for (let i = 0; i < clrs.length - 1; i++) {
interps.push(interp(clrs[i], clrs[i + 1]));
}

return (t) => {
const scaledT = d3.scaleLinear().range([0, clrs.length - 1])(t);
const intT = Math.min(clrs.length - 2, Math.floor(scaledT));
return interps[intT](scaledT - intT);
};
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function ternary([clr1, clr2, clr3], [a, b, c], interp = d3.interpolateRgb) {
return interp(interp(clr1, clr2)(a + b == 0 ? 0 : b / (a + b)), clr3)(c);
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof cvd = inputCvd({ condition: "none" })
Insert cell
Insert cell
filterCvd(cvd)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more