Public
Edited
Feb 10, 2023
viewof drop = Inputs.button("Click me")
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
}));
const s = 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]);
//.on("click", clicked);
function clicked(event, d) {
d3.select(this)
.transition()
.ease(d3.easeBounceOut)
.duration(1000)
.attr("y", height - side);
}
if (dodrop) {
d3.selectAll("rect")
.transition()
.ease(d3.easeBounceOut)
.duration(1000)
.attr("y", height - side);
}
return svg.node();
}
dodrop = {
return drop ? true : false;
}
side = 100
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.
