Developer @Observable
Public
Edited
Aug 25, 2024
1 star
basisGens = {
let s1 = d3.scaleLinear([-1, 1], [form.min1, form.max1]);
let s2 = d3.scaleLinear([-1, 1], [form.min2, form.max2]);
let s3 = d3.scaleLinear([-1, 1], [form.min3, form.max3]);
return [
(d) =>
Math.pow(
s1(Math.cos(2 * Math.PI * (d * form.freq1 - form.offset1))),
form.exp1
),
(d) =>
Math.pow(
s2(Math.cos(2 * Math.PI * (d * form.freq2 - form.offset2))),
form.exp2
),
(d) =>
Math.pow(
s3(Math.cos(2 * Math.PI * (d * form.freq3 - form.offset3))),
form.exp3
)
];
}
function varyBar(gen, basis, { w = width, h = 50 } = {}) {
let width = w;
let height = h;
let canvas = document.createElement("canvas");
canvas.setAttribute("width", width);
canvas.setAttribute("height", height);
let ctx = canvas.getContext("2d");
let xScale = d3.scaleLinear().domain([0, 1]).range([0, width]);
let xScaleInv = (d) => xScale.invert(d);
let colorScale = culori.interpolate(["black", basis]);
for (let x = 0; x < width; x++) {
let d = xScaleInv(x);
let t = gen(d);
let c = colorScale(t);
ctx.fillStyle = culori.formatCss(c);
ctx.fillRect(x, 0, 1, height);
}
return canvas;
}
culori = require("culori@4.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.
