{
const svg = d3.create("svg").attr("width", width).attr("height", height);
// Set a randomized checkered-ish background
svg
.selectAll("circle")
.data(d3.range(100))
.join("circle")
.attr("cx", (d) => d * 50)
.attr("cy", height / 2)
.attr("r", (d) => Math.random() * 60)
.attr("fill", "hsl(216deg 100% 13%)");
// Outlined Text (this is what you're looking for)
svg
.append("text")
.attr("x", width / 2)
.attr("y", height / 2)
.style("text-anchor", "middle")
.style("font-size", fontSize)
.style("font-weight", fontWeight)
.style("fill", innerColor)
.style("stroke", outerColor)
.style("stroke-width", outlineWidth)
.style("paint-order", "stroke fill") // this CSS attribute is the key (along with setting both stroke and fill)
.text(textValue);
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.
