100% organic
Published
Edited
Feb 10, 2018
1 fork
5 stars
viewof point = {
const svg = d3.select(DOM.svg(width, 300)),
n = svg.node();
const g = svg.append("g")
.attr("transform", `translate(${width/2}, 150)`)
.call(d3.drag().on("drag", function () {
// Update the circle's position
d3.select(this).attr("transform", `translate(${d3.event.x},${d3.event.y})`);
// Update the value of the observable
n.value = [d3.event.x, d3.event.y];
// This is the magic sauce that lets observers know the value has changed.
svg.dispatch("input");
}));
g.append("circle").attr("r", 20);
g.append("text")
.attr("text-anchor", "middle")
.attr("font-size", 12)
.attr("font-family", "sans-serif")
.attr("y", 36)
.text("Drag me");
n.value = [width/2, 150];
return n;
}
point
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.
