Published
Edited
Apr 13, 2020
1 star
cell
fps(cell)
import {fps} from '@zzzev/fps-counter'
{
d3.select(map).selectAll('circle.dot')
.attr("cx", d => d[0](t))
.attr("cy", d => d[1](t))
.attr('fill-opacity', d => d[2](t))
}
cell = {
restart
const duration = 30; // animation length in seconds
const t = d3.scaleLinear().domain([0, duration * 60]).range(extent);
const dots = d3.select(map).selectAll('circle.dot');
let i = 600;
while (i++ < duration * 60) {
dots.attr("cx", d => d[0](t(i)))
.attr("cy", d => d[1](t(i)))
.attr('fill-opacity', d => d[2](t(i)))
yield i
await Promises.tick(50);
}
}
data = Object.keys(json).map(d => {
// Data model: d = [lat, lon, alt, time]
const a = json[d].map(d => d3.merge([ projection([d[1], d[0]]), [d[2], d[3]] ]));
const x = d3.scaleLinear()
.domain(a.map(d => d[3]))
.range(a.map(d => d[0]))
.clamp(true);
const y = d3.scaleLinear()
.domain(a.map(d => d[3]))
.range(a.map(d => d[1]))
.clamp(true);
const opacity = function(t) {
const before = t < a[0][3];
const after = t > a[a.length - 1][3];
return (before || after) ? 0 : 1;
}
return [x, y, opacity]
})
json = FileAttachment("adsbQuadArray.json").json()
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.
