Published
Edited
May 17, 2022
chart = {
const svg = d3
.create("svg")
.attr("width", 300)
.attr("viewBox", [0, 0, 600, 600]);
const defaultColor = "black";
const colorWhileDragging = "gray";
svg
.append("g")
.selectAll("circle")
.data([0.8, 1.2])
.join("circle")
.attr("r", 20)
.attr("fill", defaultColor)
.attr("cx", (d) => d * 300)
.attr("cy", (d) => d * 300)
.call(
d3
.drag()
.on("start", function (e) {
d3.select(this).attr("fill", colorWhileDragging);
})
.on("drag", function (e) {
d3.select(this).attr("cx", e.x).attr("cy", e.y);
})
.on("end", function (e) {
d3.select(this).attr("fill", defaultColor);
})
);
return svg.node();
}
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.
