mutable touches = null
{
clear;
const height = (width * 0.7) | 0;
const context = DOM.context2d(width, height),
canvas = context.canvas;
yield canvas;
let m;
d3.select(canvas)
.on("touchstart", () => {
m = [d3.mouse(canvas)];
})
.on("touchmove", () => {
d3.event.preventDefault();
d3.event.stopPropagation();
mutable touches = [...d3.event.touches];
const e = [...d3.event.touches].filter(e => e.touchType !== "direct")[0];
if (!e) return;
m.push(d3.mouse(canvas));
m = m.slice(-10);
context.beginPath();
context.lineWidth = 5 + e.force ** 2 * 130;
context.globalAlpha = e.force;
context.strokeStyle = d3.hsl(
(e.azimuthAngle * 180) / Math.PI,
(e.altitudeAngle / Math.PI) * 2,
1 - e.force
); //color((e.altitudeAngle / Math.PI) * 2);
context.moveTo(...m[0]);
for (const n of m) context.lineTo(...n);
context.stroke();
});
}
d3 = require("d3@5")
color = d3.scaleSequential(d3.interpolateMagma)
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.
