chart = {
const svg = d3.select(DOM.svg(graphWidth, graphHeight));
svg.attr("id", "myGraph");
svg.append("circle")
.attr("id", "circle")
.attr("cx", graphWidth/2)
.attr("cy", graphHeight/2)
.attr("r", 40)
.attr("fill", "#69b3a2")
return svg.node();
}
tooltip = {
chart
const tooltip = d3.select("body").append("div")
.attr("class", "svg-tooltip")
.style("position", "absolute")
.style("visibility", "hidden")
.text("I'm a circle!");
d3.select("#circle")
.on("mouseover", function(){
return tooltip.style("visibility", "visible");
})
.on("mousemove", function(){
return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");
})
.on("mouseout", function(){
return tooltip.style("visibility", "hidden");
});
}
width
height = width * 0.4
margin = ({
top: 0,
bottom: 0,
left: 0,
right: 0
})
graphWidth = width - margin.left - margin.right
graphHeight = height - margin.top - margin.bottom
d3 = require("d3@5")
styles = html`
<style>
.svg-tooltip {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: rgba(69,77,93,.9);
border-radius: .1rem;
color: #fff;
display: block;
font-size: 11px;
max-width: 320px;
padding: .2rem .4rem;
position: absolute;
text-overflow: ellipsis;
white-space: pre;
z-index: 300;
visibility: hidden;
}
</style>`
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.
