{
function createCircleData(paddinLeft = 0, circleData){
return circleData.map(c => {
return {
"cx": c.cx + paddinLeft || 0,
"cy": c.cy || 0,
"r": c.r || 0,
"fill": c.fill || "none",
"stroke": c.stroke || "#555555",
"strokeWidth": c.strokeWidth || 4
}
});
}
const circleData = createCircleData(100, [
{ "cx": 0, "cy": 145, "r": 8, "fill": "#555555" },
{ "cx": 0, "cy": 145, "r": 16, "fill": "none" }
]);
const circleGroup = svgContainer.append("g");
//Add circles to the circleGroup
const circles = circleGroup.selectAll("circle")
.data(circleData)
.enter()
.append("circle");
const circleAttributes = circles
.attr("cx", d => d.cx)
.attr("cy", d => d.cy)
.attr("r", d => d.r)
.attr("stroke", d => d.stroke)
.style("stroke-width", d => d.strokeWidth)
.style("fill", d => d.fill);
addLinesToSvg(svgContainer);
return svgContainer.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.
