chart = {
const size = 1.5;
d3.select(ctx2d.canvas).call(d3.zoom()
.scaleExtent([1, 8])
.on("zoom", ({transform}) => zoomed(transform)));
function zoomed(transform) {
ctx2d.save();
ctx2d.clearRect(0, 0, width, height);
ctx2d.translate(transform.x, transform.y);
ctx2d.scale(transform.k, transform.k);
ctx2d.beginPath();
//Draw data
data
.map((pos) => new Token(pos, size))
.map(token => token.draw())
//Draw center
const center = new Token([width/2, height/2], 5)
center.draw()
ctx2d.fill();
ctx2d.restore();
}
zoomed(d3.zoomIdentity);
return ctx2d.canvas;
}
Token = class extends Point {
}
Point = class extends Verlet {
#size = 1
constructor(pos, size = null) {
super(pos)
this.#size = size || this.#size
}
draw() {
renderer.drawPoint(this.pos, this.#size)
}
}
Verlet = class {
#pos
constructor(pos) {
this.#pos = pos
}
get pos(){
return this.#pos
}
}
renderer = {
const ctx = '2d',
drawPoint = function (pos, size) {
if(ctx === '2d') {
drawCircle(pos, size)
}
if(ctx === '3d') {
drawSphere(pos, size)
}
}
return {drawPoint}
}
drawCircle = function (pos, size) {
ctx2d.moveTo(pos[0] + size, pos[1]);
ctx2d.arc(pos[0], pos[1], size, 0, 2 * Math.PI);
}
drawSphere = function (pos, size) {
ctx3d.parms = {pos, size}
}
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.
