Published
Edited
Mar 18, 2020
1 fork
1 star
md`
# Text along circular border
`
d3 = require("d3")
{
const svg = d3.select(DOM.svg(width, 500))
.style("font-family", "Roboto")
.style("font-size", "24px");
const r = 200;
const txr = r * 0.9
const x = width / 2;
const y = 250;
const arc = d3.arc()
const arcPath = arc({
innerRadius: txr,
outerRadius: txr,
startAngle: -Math.PI,
endAngle: Math.PI
});
svg.append("circle")
.attr("r", r)
.attr("cx", x)
.attr("cy", y)
.attr("fill", "#BFBFBF");
svg.append("path")
.attr("d", arcPath)
.attr("id", "textArc")
.attr('transform', `translate(${x}, ${y})`)
.attr("fill", "none")
.attr('stroke', "none");
svg.append("text")
.attr("x", Math.PI * txr)
.attr("fill", "blue")
.attr('text-anchor', 'middle')
.attr('alignment-baseline', 'central')
.append("textPath")
.attr('href', '#textArc')
.text('Web Application Development')
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.
