I'm a professor of mathematics at the University of North Carolina Asheville. I've also done a fair amount of consulting work over the years focusing on scientific and data visualization.
I'm happy to be part of the first Observable Ambassador's cohort.
Public
Edited
Jun 20, 2024
1 fork
4 stars
{
let data = [
{ x: 10, y: 20, text: "This" },
{ x: 56, y: 50, text: "should" },
{ x: 120, y: 20, text: "work" }
];
let pad = 2;
let w = 200;
let h = 100;
let svg = d3
.create("svg")
.attr("viewBox", [0, 0, w, h])
.style("max-width", `${640}px`);
yield svg.node();
svg
.append("g")
.selectAll()
.data(data)
.join((enter) => {
let g = enter.append("g");
let rect = g.append("rect");
let text = g
.append("text")
.attr("x", (d) => d.x)
.attr("y", (d) => d.y)
.text((d) => d.text)
.call(wrap);
rect
.attr("x", (d) => d.x - pad)
.attr("y", (d) => d.y - d.bbox.height + 2 * pad)
.attr("width", (d) => d.bbox.width + 2 * pad)
.attr("height", (d) => d.bbox.height + 2 * pad)
.attr("fill", "#ddd")
.attr("stroke", "black");
});
function wrap(selection) {
selection.each(function (d) {
d.bbox = this.getBBox();
console.log(d.bbox);
});
}
}
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.
