EJ Fox & Ian Johnson
streaming data, code, acid, design
letterToShow = 0
animatedLetterToShow = Generators.observe(notify => {
let i = 0;
notify(i);
let interval = setInterval(() => {
i = i + 1;
if (i === 13) i = 0;
notify(i);
}, 2500);
return () => clearInterval(interval);
})
ltr = d3
.select(logoSVG)
.selectAll("path")
.nodes()[animatedLetterToShow]
ltrpoints = getPoints(ltr)
height = 400
canvas = {
let ctx = DOM.context2d(width, height);
let scale = 300;
let tx = 100;
let ty = 30;
let radius = 5;
ctx.lineWidth = 5;
ctx.fillStyle = "seagreen";
ctx.globalAlpha = 0.5;
ctx.beginPath();
ctx.moveTo(tx + ltrpoints[0].nx * scale, ty + ltrpoints[1].ny * scale);
ltrpoints.forEach(d => {
let x = tx + d.nx * scale;
let y = ty + d.ny * scale;
ctx.lineTo(x, y);
});
ctx.closePath();
ctx.stroke();
// ctx.fillRect(100, 100, 200, 200);
ltrpoints.forEach(d => {
let x = tx + d.nx * scale;
let y = ty + d.ny * scale;
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
// ctx.stroke();
ctx.fill();
});
return ctx.canvas;
}
ejcanvas = {
let ctx = DOM.context2d(width, height);
ctx.fillStyle = "seagreen";
ctx.globalAlpha = 0.2;
let lscale = 300;
let m = 50;
// ctx.fillRect(100, 100, 200, 200);
ltrpoints.forEach((d, i) => {
ctx.beginPath();
ctx.arc(m + d.nx * lscale, m + d.ny * lscale, 20 - i * 0.1, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
});
return ctx.canvas;
}
function getPoints(pathElement) {
let len = pathElement.getTotalLength();
let points = [];
let p;
// TODO: replace this with a better example
let min = { x: Infinity, y: Infinity };
let max = { x: -Infinity, y: -Infinity };
for (var i = 0; i < numPoints; i++) {
p = pathElement.getPointAtLength((len * i) / numPoints);
points.push({ x: p.x, y: p.y });
if (p.x < min.x) min.x = p.x;
if (p.y < min.y) min.y = p.y;
if (p.x > max.x) max.x = p.x;
if (p.y > max.y) max.y = p.y;
}
console.log(min, max);
points.forEach(p => {
p.nx = (p.x - min.x) / max.x;
p.ny = (p.y - min.y) / max.y;
});
return points;
}
//.pathSegList()
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.
