Public
Edited
Oct 24, 2023
4 forks
Importers
37 stars
interpolator = t => `hello ${t}`
hello = d3.scaleSequential(interpolator)
hello(0.5)
hello200 = d3.scaleSequential(interpolator).domain([200, 100])
hello200(170)
angryRainbow = d3.scaleSequential(t => d3.hsl(t * 360, 1, 0.5).toString())
angryRainbow(t0)
viewof t0 = ramp(angryRainbow)
d3.interpolateSinebow(t1)
viewof t1 = ramp(d3.scaleSequential(d3.interpolateSinebow))
{
const scale = d3.scaleSequential(d3.interpolateSinebow); // same as t1
const interpolator = scale.interpolator(); // read its interpolator
const mirror = t => interpolator(1 - t); // creates a mirror image of the interpolator
if (use_mirror) {
scale.interpolator(mirror); // updates the scale’s interpolator
}
return ramp(scale);
}
d3.scaleSequential(t => 10 - 2.5 * t).range()
d3.scaleSequential(d3.interpolateCividis).range()
{
const scale = d3.scaleSequential(d3.interpolateCool);
const before = scale(0.5);
const range = scale.range();
scale.range(range); // uses the same extrema, but resets the interpolator
const after = scale(0.5);
return { before, after, range };
}
d3.scaleSequential(t => t * t).rangeRound([0, 100])(1 / 3)
ramp(d3.scaleSequential(["blue", "green"]))
magnitude = d3.scaleSequentialLog(d3.interpolatePuBuGn).domain([1e-8, 1e8])
qu = d3.scaleSequentialQuantile().domain([100, 1, 13])
[qu(1), qu(2), qu(13), qu(20), qu(99.99), qu(100)]
[qu(0), qu(10000)]
ramp(d3.scaleSequentialQuantile(d3.interpolateRdYlBu).domain([0, 0.2, 0.5, 0.9]))
seq = d3.scaleSequentialQuantile(d3.interpolateRdYlBu)
.domain(Float32Array.from({ length: 1000 }, d3.randomNormal(0.5, 0.15)))
ramp(seq)
seq.quantiles(4)
// Adapted from "@mbostock/color-ramp"
function ramp(color, numscale, n = 512) {
const canvas = DOM.canvas(n, 1);
const context = canvas.getContext("2d"),
w = width + 28;
canvas.style.margin = "0 -14px";
canvas.style.width = `${w}px`;
canvas.style.height = "40px";
canvas.style.imageRendering = "pixelated";
// companion numerical scale, to define the axis.
if (numscale === undefined) numscale = d3.scaleLinear();
if (color.domain) numscale.domain(color.domain());
numscale.range([0, n]);
const t = color.ticks ? color.ticks(n) : d3.range(n).map(i => i / (n - 1));
for (let i = 0; i < t.length; ++i) {
context.fillStyle = color(t[i]);
context.fillRect((i * n) / t.length, 0, 100, 1);
}
d3.select(canvas).on("mousemove click", function(event) {
const t = numscale.invert((d3.pointer(event)[0] / w) * n);
canvas.value = t;
canvas.dispatchEvent(new CustomEvent("input"));
});
canvas.value = 0;
return canvas;
}
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.
