steps = [
{ weight: 5, color: 'SpringGreen', ease: d3.easeSinInOut },
{
weight: 12,
color: 'Gold',
ease: t => .5 + .5 * (1 - t) * Math.cos(t ** 2 * Math.PI * 20)
},
{ weight: 8, color: 'Tomato', ease: t => .5 + .3 * d3.easeElasticInOut(t) },
{ weight: 4, color: 'Aquamarine', ease: t => .8 },
{ weight: 2, color: 'DeepSkyBlue', ease: t => .8 - .8 * d3.easePolyInOut(t) }
]
preview2(mixedscale(steps), {})
function mixedscale(steps) {
const w = d3.sum(steps, d => d.weight),
choice = d3.scaleSequential(
d3.scaleLinear(
[0, ...d3.cumsum(steps, d => d.weight / w)],
d3.range(steps.length + 1)
)
);
return t => {
const c = choice(t),
step = Math.floor(c),
frac = c - step;
return { fill: steps[step].color, value: steps[step].ease(frac) };
};
}
function* preview2(scale, options) {
const {
width: w = width,
height: h = w / 6,
radius: r = h * .04,
pad: p = r * 2,
colorBg = '#fff',
colorStroke = '#000',
lineWidth = 2,
mapWeight = s => s.weight,
mapColor = s => s.color,
mapEase = s => s.ease,
duration = 6000
} = options;
const ctxBg = DOM.context2d(w, h);
ctxBg.fillStyle = colorBg;
ctxBg.fillRect(0, 0, w, h);
const wp = w - p * 2,
hp = h - p * 2;
ctxBg.beginPath();
for (let x = 0; x < wp; x++) {
const { fill, value } = scale(x / wp);
ctxBg.beginPath();
ctxBg.moveTo(x + p, p + hp);
ctxBg.lineTo(x + p, p + hp * (1 - value));
ctxBg.strokeStyle = fill;
ctxBg.globalAlpha = Math.random();
ctxBg.stroke();
}
yield ctxBg.canvas;
}
function weightedOffset(t, values) {
const max = values.reduce((sum, v) => sum + v, 0),
current = max * t,
l = values.length - 1;
let i = 0, o = 0;
while(i < l && o + values[i] < current) o += values[i++];
return [i, (current - o) / values[i]];
}
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.
