chart = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("stroke-width", 2);
const squares = d3.range(10).map((i) => ({
x: Math.random() * (width - side),
y: Math.random() * (height - side),
index: i
}));
svg
.selectAll("rect")
.data(squares)
.join("rect")
.attr("x", (d) => d.x)
.attr("y", (d) => d.y)
.attr("width", side)
.attr("height", side)
.attr("fill", (d) => d3.schemeCategory10[d.index % 10])
.call(drag)
.on("click", clicked);
function clicked(event, d) {
if (event.defaultPrevented) return; // dragged
// trickier to grow a square than a circle
// have to adjust size and location
d3.select(this)
.transition()
.attr("fill", "black")
.attr("width", side * 1.5)
.attr("height", side * 1.5)
.attr("x", d.x - side / 4)
.attr("y", d.y - side / 4)
.transition()
.attr("width", side)
.attr("height", side)
.attr("x", d.x)
.attr("y", d.y)
.attr("fill", d3.schemeCategory10[d.index % 10]);
}
return svg.node();
}
side = 100
height = 600
drag = {
// when drag starts outline - this also impacts click/touch
function dragstarted() {
d3.select(this).attr("stroke", "black");
}
function dragged(event, d) {
d3.select(this)
.raise()
.attr("x", (d.x = event.x))
.attr("y", (d.y = event.y));
}
// when drag ends remove outline
function dragended() {
d3.select(this).attr("stroke", null);
}
return d3
.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
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.
