I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
chart = {
const svg = d3.select(
html`<svg width="100%" height="100%" viewBox="0, 0, ${width}, ${height}"></svg>`
);
const g = svg.append("g");
const circle = g
.selectAll("circle")
.data(data)
.join("circle")
.attr("r", 2.5)
.style("fill", "steelblue")
.attr("transform", d => `translate(${d})`);
svg
.append("rect")
.attr("fill", "none")
.attr("pointer-events", "all")
.attr("width", width)
.attr("height", height)
.call(
d3
.zoom()
.scaleExtent([1, 8])
.on("zoom", zoom)
);
function zoom(event) {
g.attr("transform", event.transform);
}
return svg.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")
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.
