News and graphics at @ClimateLab, a project of @PostGraphics.
Public
Edited
Dec 4, 2023
1 fork
Importers
3 stars
myColorInterpolator = interpolatePalette(["red", "orange", "yellow", "green", "blue", "indigo", "violet", "red"]);
ramp(myColorInterpolator);
ramp(d3.interpolateSinebow)
ramp(interpolatePalette(["#00429d", "#2e59a8", "#4771b2", "#5d8abd", "#73a2c6", "#8abccf", "#a5d5d8", "#c5eddf", "#ffffe0"]));
ramp(interpolatePalette(["#fc8d62", "#ffd92f", "#66c2a5", "#8da0cb"]));
interpolatePalette = (palette) => t => d3.piecewise(d3.interpolateLab, palette)(Math.min(Math.max(0, t), 1));
[d3.piecewise([0, 1])(-1), d3.piecewise([0, 1])(2)]
piecewiseClamp = range => t => d3.piecewise(range)(Math.min(Math.max(0, t), 1));
[piecewiseClamp([0, 1])(-1), piecewiseClamp([0, 1])(2)]
interpolatePaletteOld = (palette) => {
const domain = [0];
for (let i = 1, l = palette.length - 1; i <= l; i++){
domain[i] = i / l;
}
const scale = d3.scaleLinear(domain, palette)
.interpolate(d3.interpolateLab)
.clamp(true);
return t => scale(t);
}
import { ramp } from "@mbostock/color-ramp"
swatches = colors => {
return html`${colors.map(color => {
return `<div style="display: inline-block; width: 32px; height: 32px; margin-right: 4px; background: ${color}"></div>`
})}`
}
import { getCurrentPinnedName } from "@bryangingechen/version-pinning-for-notebooks@469"
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.
