Public
Edited
Apr 5
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 400, 200])
const circleData = [
{id: 'leftCircle', r: 25, align: "left", x: 50},
{id: 'rightCircle',r: 25, align: "right", x: 125}];
const circleGroup = svg
.selectAll(".circleGroup")
.data(circleData)
.join((group) => {
const enter = group.append("g").attr("class", "circleGroup");
enter.append("circle").attr("class", "demoCircle");
enter.append("path").attr("class", "demoCirclePath");
enter.append("text").attr("class", "demoCircleLabel").append("textPath").attr("class", "demoCircleLabelTextPath");
return enter;
});
circleGroup.select(".demoCircle")
.attr("r", (d) => d.r)
.attr("cx", (d) => d.x)
.attr("cy", (d) => d.r + 20)
.attr("fill", "#D0D0D0");
circleGroup.select(".demoCirclePath")
.attr("fill","deeppink")
.attr("id", (d) => d.id)
.attr("d", (d) => d3.arc()({
innerRadius: d.r,
outerRadius: d.r + 2,
startAngle: d.align === "left" ? -Math.PI : 0,
endAngle: d.align === "left" ? 0 : Math.PI
}))
.attr("transform", (d) => `translate(${d.x},${d.r + 20})`)
circleGroup
.select(".demoCircleLabelTextPath")
.attr("startOffset", "25%")
.attr("font-size", "12")
.attr("text-anchor", "middle")
.attr("xlink:href", (d) => `#${d.id}`)
.text("hello");
console.log()
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.
