Visual Analytics / Computer Science.
Published
Edited
Apr 11, 2022
function plot_scatter(selection, data, k) {
selection
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", ([x]) => x)
.attr("cy", ([, y]) => y)
.attr("r", 1.5 / k);
}
function zoom_callback(width, height, scaleExtent, zoomed) {
return d3
.zoom()
.extent([
[0, 0],
[width, height]
])
.scaleExtent(scaleExtent)
.on("zoom", zoomed);
}
function plot_zoomable() {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const g = svg.append("g");
g.call(plot_scatter, data, 1);
svg.call(zoom_callback(width, height, [0.5, 8], zoomed));
function zoomed({ transform }) {
g.attr("transform", transform);
g.call(plot_scatter, data, transform["k"]);
// Comment out to see original
// g.call(plot_scatter, data, 1);
}
return svg.node();
}
plot_zoomable()
data = {
const randomX = d3.randomNormal(width / 2, 80);
const randomY = d3.randomNormal(height / 2, 80);
return Array.from({length: 2000}, () => [randomX(), randomY()]);
}
height = 600
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.
