Published
Edited
Sep 16, 2020
Importers
19 stars
Insert cell
Insert cell
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)},
]
Insert cell
Insert cell
Insert cell
Insert cell
function weightedOffset(t, weights) {
const max = weights.reduce((sum, v) => sum + v, 0),
current = max * t,
l = weights.length - 1;
let i = 0, o = 0;
while(i < l && o + weights[i] < current) o += weights[i++];
return [i, (current - o) / weights[i]];
}
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more