boundingBox = {
let svg = d3.select(DOM.svg(textWidth, textHeight))
.style("background-color", "#e0e0e0")
.style("outline", "thin dashed black")
.style("overflow", "visible")
let label = svg
.append('text')
.text(text)
.style("text-anchor", "start")
.attr("font-family", font)
.attr("font-weight","bold")
.attr("font-size",size+"pt")
.attr("fill", 'black')
.attr('y', textY )
return svg.node()
}
measure = measureText( text, size, font )
textWidth = measure.width * widthCorrection
textHeight = (measure.fontBoundingBoxAscent + measure.fontBoundingBoxDescent) * heightCorrection
textY = measure.fontBoundingBoxAscent * heightCorrection
fonts_link = "https://use.typekit.net/szl4srx.css"
htl.html`
<link rel="stylesheet" href="${fonts_link}">
`
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.
