The data visualisation team at the Economist.
renderFrame = function (ctx, t) {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, size + sidePadding * 2, size);
// the sun!
ctx.beginPath();
ctx.ellipse(size / 2 + sidePadding, size / 2, 20, 20, 0, 0, Math.PI * 2);
ctx.fillStyle = colours.sun;
ctx.fill();
// others
[
"Donaldjohanson",
"Eurybates",
"Leucus",
"Orus",
"Patroclus",
"Polymele"
].map((k) => drawObject(ctx, k, colours.asteroids, 6, t));
// the earth!
drawObject(ctx, "Earth", colours.earth, 8, t);
// Jupiter!
drawObject(ctx, "Jupiter", colours.jupiter, 12, t);
// LUCY
drawObject(ctx, "Lucy", colours.lucy, 4, t);
ctx.fillStyle = "white";
const fontSize = 28;
ctx.font = `${fontSize * 2}px Econ Sans, Source Serif Pro`;
ctx.textAlign = "end";
ctx.fillText(
timeFmt(objects.get("Earth")[t].date),
size + sidePadding * 2 - 50,
fontSize * 2
);
}
drawObject = function (ctx, key, colour, r, time = 0) {
const data = objects.get(key);
const now = data[time];
const trail = data.slice(Math.max(0, time - 60), time);
const first = trail[0] || data[0];
const fullTrail = data.slice(0, Math.max(0, time - 60));
const firstFull = data[0];
ctx.beginPath();
ctx.strokeStyle = d3.color(colour).darker(2);
ctx.moveTo(
scale(firstFull[`x_${frame}`]) + sidePadding,
scale(firstFull[`y_${frame}`])
);
fullTrail.forEach((pt) =>
ctx.lineTo(scale(pt[`x_${frame}`]) + sidePadding, scale(pt[`y_${frame}`]))
);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = colour;
ctx.lineWidth = 2;
ctx.moveTo(
scale(first[`x_${frame}`]) + sidePadding,
scale(first[`y_${frame}`])
);
trail.forEach((pt) =>
ctx.lineTo(scale(pt[`x_${frame}`]) + sidePadding, scale(pt[`y_${frame}`]))
);
ctx.stroke();
ctx.beginPath();
ctx.ellipse(
scale(now[`x_${frame}`]) + sidePadding,
scale(now[`y_${frame}`]),
r,
r,
0,
0,
Math.PI * 2
);
ctx.fillStyle = colour;
ctx.fill();
}
n = {
if (!dlButton) {
return 0;
}
const zip = dlButton === 2 && new JSZip();
const img = dlButton === 2 && zip.folder("images");
const ctx = chart.getContext("2d");
for (let i = 0; i < 1000; ++i) {
const n = await Promises.delay(1, i);
renderFrame(ctx, n);
if (dlButton === 2) {
const data = chart.toDataURL("image/png");
img.file(`${n}.png`, data.substr(data.indexOf(",") + 1), {
base64: true
});
}
yield n;
}
if (dlButton === 2) {
zip.generateAsync({ type: "blob" }).then(function (content) {
// const fileStream = streamSaver.createWriteStream("lucy.zip", {});
console.log("ok, here it is...?");
FileSaver.saveAs(content, "lucy.zip");
});
}
}
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.
