EJ Fox & Ian Johnson
streaming data, code, acid, design
Published
Edited
Dec 1, 2020
Importers
1 star
demoFrames = [[0, 0.1], [100, 0.1], [105, 1], [125, 0.3], [240, 0.3]]
html`<div>
${circles.map(d => {
return drawKeyframes(d.key.frames);
})}
</div>
`
function generateSimple(
start,
{
startVal = 0.1, // the value at the start
endVal = 0.2, // the value at the end
increase = 0.75, // how much to go above the start
upswing = 5, // how many frames it takes to transition up
downswing = 50 // how many frames it takes to transition to the ending value
} = {}
) {
// let upswing = 5;
// let downswing = 50;
// let startVal = 0.1;
// let increase = 0.75;
// let endVal = 0.2;
let frames = [
[0, startVal], // initial frame
[start, startVal],
[start + upswing, endVal + increase],
[start + upswing + downswing, endVal],
[240, endVal]
];
return keyframe(frames);
}
circles = {
return d3.range(mapWidth / 50 - 2).map(i => {
let start = chance.integer({ min: 5, max: 200 }); // when to start transitioning
let d = {
i,
x: 50 + i * 50,
y: mapHeight / 2,
key: generateSimple(start),
start
};
return d;
});
}
chance = new Chance(new Date())
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.
