Data scientist, amateur web developer and visualization enthusiast.
Published
Edited
Feb 23, 2021
9 stars
data = [
{"name": "foo", "x": 10, "y": 20},
{"name": "bar", "x": 30, "y": 60},
{"name": "stuff", "x": 15, "y": 175},
{"name": "something really long", "x": 40, "y": 212},
{"name": "something even longer akhdihfi", "x": 2, "y": 300}
]
measure = {
svg.append("g")
.style("font", "14px sans-serif")
.style("fill", "#000")
.selectAll("text")
.data(data)
.join("text")
.attr("x", d => d.x)
.attr("y", d => d.y)
.text(d => d.name);
return svg.node()
}
function update(data) {
svg.selectAll("text")
.join(data)
.each(function(d) { d.bbox = this.getBBox(); });
}
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, 400, 400]);
update(data);
const xMargin = 4
const yMargin = 2
svg.append("g")
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => d.x)
.attr("y", d => d.y)
.style("fill", "black")
.style("opacity", "0.5")
.attr("width", d => d.bbox.width + 2 * xMargin)
.attr("height", d => d.bbox.height + 2 * yMargin)
.attr('transform', function(d) {
return `translate(-${xMargin}, -${d.bbox.height * 0.8 + yMargin})`
});
svg.append("g")
.style("font", "14px sans-serif")
.style("fill", "#FFF")
.selectAll("text")
.data(data)
.join("text")
.attr("x", d => d.x)
.attr("y", d => d.y)
.text(d => d.name);
return svg.node()
}
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.
