Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
Public
Edited
Apr 25, 2023
2 forks
<svg width="600" height="300">
<g id="layer1"></g>
<text id="mytext" x="100" y="250"></text>
<style>
#mytext {font-family: Arial,Helvetica,sans-serif; font-size: 30px; fill: red;}
</style>
</svg>
data = [
{name: "one", value: 1},
{name: "two", value: 2},
{name: "three", value: 3},
{name: "four", value: 4},
{name: "five", value: 5}
]
viz.select("#layer1").selectAll(".mycircle")
.data(data)
.join("circle")
.classed("mycircle", true)
.attr("cx",d => d.value * 100)
.attr("cy", 150)
.attr("r", d => d.value * 10)
.style("fill","steelblue")
.on("mouseover", putText) // this is the critical part, calling the putText function below
putText = (evt,d) => {
viz.select("#mytext").text("this item is: " + d.name);
}
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.
