Public
Edited
Jul 24, 2020
md`# D3 interpolate but without strings`
interpolateRdBu = {
return interpolateRgbBasis(schemeRdBu[schemeRdBu.length - 1]);
}
interpolateRgbBasis = rgbSpline(basis)
colorRgb = (r, g, b, opacity) => {
return Rgb(r, g, b, opacity == null ? 1 : opacity);
}
Rgb = (r, g, b, opacity) => ({
r, g, b, opacity
})
rgbSpline = (spline) => {
return function(colors) {
var n = colors.length,
r = new Array(n),
g = new Array(n),
b = new Array(n),
i, color;
for (i = 0; i < n; ++i) {
color = [colors[i][0], colors[i][1], colors[i][2]];
r[i] = color[0] || 0;
g[i] = color[1] || 0;
b[i] = color[2] || 0;
}
r = spline(r);
g = spline(g);
b = spline(b);
return function(t) {
return [r(t),g(t), b(t)];
};
};
}
basis = (values) => {
function innerBasis(t1, v0, v1, v2, v3) {
var t2 = t1 * t1, t3 = t2 * t1;
return ((1 - 3 * t1 + 3 * t2 - t3) * v0
+ (4 - 6 * t2 + 3 * t3) * v1
+ (1 + 3 * t1 + 3 * t2 - 3 * t3) * v2
+ t3 * v3) / 6;
}
var n = values.length - 1;
return function(t) {
var i = t <= 0 ? (t = 0) : t >= 1 ? (t = 1, n - 1) : Math.floor(t * n),
v1 = values[i],
v2 = values[i + 1],
v0 = i > 0 ? values[i - 1] : 2 * v1 - v2,
v3 = i < n - 1 ? values[i + 2] : 2 * v2 - v1;
return innerBasis((t - i / n) * n, v0, v1, v2, v3);
};
}
colors = (specifier) => {
var n = specifier.length / 6 | 0, innerColors = new Array(n), i = 0;
while (i < n) innerColors[i] = "#" + specifier.slice(i * 6, ++i * 6);
return innerColors;
}
JSON.stringify(schemePlasma)
schemePlasma = colors("0d088710078813078916078a19068c1b068d1d068e20068f2206902406912605912805922a05932c05942e05952f059631059733059735049837049938049a3a049a3c049b3e049c3f049c41049d43039e44039e46039f48039f4903a04b03a14c02a14e02a25002a25102a35302a35502a45601a45801a45901a55b01a55c01a65e01a66001a66100a76300a76400a76600a76700a86900a86a00a86c00a86e00a86f00a87100a87201a87401a87501a87701a87801a87a02a87b02a87d03a87e03a88004a88104a78305a78405a78606a68707a68808a68a09a58b0aa58d0ba58e0ca48f0da4910ea3920fa39410a29511a19613a19814a099159f9a169f9c179e9d189d9e199da01a9ca11b9ba21d9aa31e9aa51f99a62098a72197a82296aa2395ab2494ac2694ad2793ae2892b02991b12a90b22b8fb32c8eb42e8db52f8cb6308bb7318ab83289ba3388bb3488bc3587bd3786be3885bf3984c03a83c13b82c23c81c33d80c43e7fc5407ec6417dc7427cc8437bc9447aca457acb4679cc4778cc4977cd4a76ce4b75cf4c74d04d73d14e72d24f71d35171d45270d5536fd5546ed6556dd7566cd8576bd9586ada5a6ada5b69db5c68dc5d67dd5e66de5f65de6164df6263e06363e16462e26561e26660e3685fe4695ee56a5de56b5de66c5ce76e5be76f5ae87059e97158e97257ea7457eb7556eb7655ec7754ed7953ed7a52ee7b51ef7c51ef7e50f07f4ff0804ef1814df1834cf2844bf3854bf3874af48849f48948f58b47f58c46f68d45f68f44f79044f79143f79342f89441f89540f9973ff9983ef99a3efa9b3dfa9c3cfa9e3bfb9f3afba139fba238fca338fca537fca636fca835fca934fdab33fdac33fdae32fdaf31fdb130fdb22ffdb42ffdb52efeb72dfeb82cfeba2cfebb2bfebd2afebe2afec029fdc229fdc328fdc527fdc627fdc827fdca26fdcb26fccd25fcce25fcd025fcd225fbd324fbd524fbd724fad824fada24f9dc24f9dd25f8df25f8e125f7e225f7e425f6e626f6e826f5e926f5eb27f4ed27f3ee27f3f027f2f227f1f426f1f525f0f724f0f921").map(hexToRgb)
scheme = {
return new Array(3).concat(
"ef8a62f7f7f767a9cf",
"ca0020f4a58292c5de0571b0",
"ca0020f4a582f7f7f792c5de0571b0",
"b2182bef8a62fddbc7d1e5f067a9cf2166ac",
"b2182bef8a62fddbc7f7f7f7d1e5f067a9cf2166ac",
"b2182bd6604df4a582fddbc7d1e5f092c5de4393c32166ac",
"b2182bd6604df4a582fddbc7f7f7f7d1e5f092c5de4393c32166ac",
"67001fb2182bd6604df4a582fddbc7d1e5f092c5de4393c32166ac053061",
"67001fb2182bd6604df4a582fddbc7f7f7f7d1e5f092c5de4393c32166ac053061"
).map(colors).map(a => a.map(hexToRgb))
}
hexToRgb = (hex) => {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? [
parseInt(result[1], 16),
parseInt(result[2], 16),
parseInt(result[3], 16)
] : null;
}
schemeRdBu = ([null,null,null,[[239,138,98],[247,247,247],[103,169,207]],[[202,0,32],[244,165,130],[146,197,222],[5,113,176]],[[202,0,32],[244,165,130],[247,247,247],[146,197,222],[5,113,176]],[[178,24,43],[239,138,98],[253,219,199],[209,229,240],[103,169,207],[33,102,172]],[[178,24,43],[239,138,98],[253,219,199],[247,247,247],[209,229,240],[103,169,207],[33,102,172]],[[178,24,43],[214,96,77],[244,165,130],[253,219,199],[209,229,240],[146,197,222],[67,147,195],[33,102,172]],[[178,24,43],[214,96,77],[244,165,130],[253,219,199],[247,247,247],[209,229,240],[146,197,222],[67,147,195],[33,102,172]],[[103,0,31],[178,24,43],[214,96,77],[244,165,130],[253,219,199],[209,229,240],[146,197,222],[67,147,195],[33,102,172],[5,48,97]],[[103,0,31],[178,24,43],[214,96,77],[244,165,130],[253,219,199],[247,247,247],[209,229,240],[146,197,222],[67,147,195],[33,102,172],[5,48,97]]])
interpolateRdBu(0)
interpolateRdBu(0.5)
interpolateRdBu(1)
[d3.interpolateRdBu(0), d3.interpolateRdBu(0.5), d3.interpolateRdBu(1)]
[d3.interpolatePlasma(0), d3.interpolateRdBu(0.5), d3.interpolatePlasma(1)]
d3 = require("d3")
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.
