html`
<ul id="exemple">
<li>Pomme</li>
<li>Tomate</li>
<li>Orange</li>
</ul>`
{
d3.select("#exemple").selectAll("li")
.data(["green", "red", "orange"])
.property("couleur", function(d) { return d;})
.on("mouseover", function () {
d3.select(this).style("background-color", this.couleur);
d3.select(this).style("color", "white");
})
.on("mouseout", function () {
d3.select(this).style("background-color", "ghostwhite");
d3.select(this).style("color", "black");
});
}
{
d3.select("#rect")
.on("mousemove", function (event) {
var pos = d3.pointer(event);
d3.select("#x").html(pos[0]);
d3.select("#y").html(pos[1]);
})
.on("mouseout", function () {
d3.select("#x").html("--");
d3.select("#y").html("--");
});
}
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.
