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 circle = svg
.selectAll("circle")
.data(data)
.join("circle")
.attr("r", 2.5)
.style("fill", "steelblue")
.attr("transform", transform(d3.zoomIdentity));
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) {
circle.attr("transform", transform(event.transform));
}
function transform(t) {
return function(d) {
return "translate(" + t.apply(d) + ")";
};
}
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.
