Public
Edited
Apr 25, 2023
1 fork
Insert cell
Insert cell
<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>
Insert cell
Insert cell
mutable log = "" // a mutable variable that we can use to log things to for testing and debugging.
Insert cell
Insert cell
data = [
{name: "one", value: 1},
{name: "two", value: 2},
{name: "three", value: 3},
{name: "four", value: 4},
{name: "five", value: 5}
]
Insert cell
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", highlight) // this is the critical part, calling the highlight function below
.on("mouseout", unhighlight) // and then clear it when the mouse leaves the element
Insert cell
highlight = (evt,d) => {
let mousedoverElem = evt.currentTarget;
mutable log = mousedoverElem; // this is for demonstration, and debugging.

d3.select(mousedoverElem).style("stroke","blue").style("stroke-width","3px"); // give it a yellow stroke when we highlight it

putText(evt,d); // and while were at is, let's call putText also using the same event and data.
}
Insert cell
unhighlight = (evt,d) => {
let mousedoverElem = evt.currentTarget;
d3.select(mousedoverElem).style("stroke","").style("stroke-width",""); // return styles to null to reset to defaults
clearText();
}
Insert cell
putText = (evt,d) => {
viz.select("#mytext").text("this item is: " + d.name);
}
Insert cell
clearText = () => {
viz.select("#mytext").text("");
}
Insert cell
Insert cell
Insert cell

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.
Learn more