I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
chart = {
const canvas = d3
.create("canvas")
.attr("width", width + "px")
.attr("height", height + "px")
.call(
d3
.zoom()
.scaleExtent([1, 8])
.on("zoom", zoom)
),
context = canvas.node().getContext("2d");
scaleCanvas(canvas.node(), context);
function zoom(event) {
var transform = event.transform;
context.save();
context.clearRect(0, 0, width, height);
context.translate(transform.x, transform.y);
context.scale(transform.k, transform.k);
draw();
context.restore();
}
function draw() {
let i = -1,
n = data.length,
d;
context.fillStyle = "steelblue";
context.beginPath();
while (++i < n) {
d = data[i];
context.moveTo(d[0], d[1]);
context.arc(d[0], d[1], 2.5, 0, 2 * Math.PI);
}
context.fill();
}
draw();
return canvas.node();
}
data = {
const randomX = d3.randomNormal(width / 2, 80),
randomY = d3.randomNormal(height / 2, 80);
return d3.range(2000).map(() => [randomX(), randomY()]);
}
height = width * 0.6
d3 = require("d3@6")
import { scaleCanvas } from "@john-guerra/canvas-retina-display"
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.
