md`# Interactions from Fullstack Dataviz with D3`
d3 = require("d3@5")
{
const svg = d3.select(DOM.svg(width, 200))
const rectColors = [
"yellowgreen",
"cornflowerblue",
"seagreen",
"slateblue",
]
const rects = svg.selectAll(".rect")
.data(rectColors)
.enter().append("rect")
.attr("height", 100)
.attr("width", 100)
.attr("x", (d, i) => i * 110)
.attr("fill", "lightgrey")
rects.on("mouseenter", function(datum, index, nodes) {
d3.select(this).style("fill", datum)
})
.on("mouseout", function() {
d3.select(this).style("fill", "lightgrey")
})
setTimeout(() => {
rects
.dispatch("mouseout")
.on("mouseenter", null)
.on("mouseout", null)
}, 3000)
return svg.node()
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
