Public
Edited
Apr 25
viewof myBarChart = {
const array = [10, 20, 30];
const svg = d3.select(DOM.svg(500, 500));
const tooltip = d3
.select("body")
.append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("background", "lightgray")
.style("padding", "5px")
.style("border-radius", "5px")
.style("visibility", "hidden");
svg
.selectAll("rect")
.data(array)
.enter()
.append("rect")
.attr("width", (d) => d * 10)
.attr("height", 50)
.attr("y", (d, i) => i * 100)
.attr("fill", "green")
.on("mouseover", function (event, d) {
d3.select(this).attr("fill", "maroon");
tooltip
.style("visibility", "visible")
.text(`Value: ${d}`)
.style("color", "black")
.style("top", `${event.pageY - 10}px`)
.style("left", `${event.pageX + 10}px`);
})
.on("mouseout", function () {
d3.select(this).attr("fill", "green");
tooltip.style("visibility", "hidden");
});
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.
