Published
Edited
Jul 3, 2019
7 stars
Insert cell
Insert cell
Insert cell
{
const svg = d3.select(DOM.svg(dim.chartW, dim.chartH))
// changing the viewBox so I don't have to translate the shape. 0,0 will be at the center
.attr("viewBox", [dim.view.g, dim.view.s, dim.chartW, dim.chartH]);

// arc generator creation with different options
const arc = d3.arc()
.innerRadius(inner_radius*dim.radius)
.outerRadius(outer_radius*dim.radius)
.startAngle(start_angle * 2*Math.PI)
.cornerRadius(corner_radius)
.padAngle(pad_angle*2*Math.PI)
.padRadius(pad_radius)
.endAngle(end_angle * 2*Math.PI);
//.centroid(centroid); check https://bl.ocks.org/mbostock/c274877f647361f3df7d good for labels
//arc();// "M0,-100A100,100,0,0,1,100,0L0,0Z"
// drawing it !
svg.append('path')
.attr('d', arc())
.attr('fill', 'none')
.attr('stroke-width', '1')
.attr('stroke', 'black');
return svg.node()
}

Insert cell
Insert cell
Insert cell
Insert cell
viewof pad_radius= slider({
title: "Pad radius",
min: 0,
max: 90,
step: 1,
value: 0,
})
Insert cell
viewof pad_angle= slider({
title: "pad angle",
min: 0,
max: 1,
step: .01,
format:".0%",
value: 0,
})
Insert cell
viewof centroid = slider({
title: "Centroid",
min: 1,
max: 60,
step: 1,
value: 30,
format: "",
})
Insert cell
viewof corner_radius = slider({
min: .0,
max: 45,
step: 1,
value: 10,
title: "Corner radius",
})
Insert cell
viewof end_angle = slider({
min: 0,
max: 1,
step: .01,
value: 1,
format: ".0%",
title: "End angle",
})
Insert cell
viewof start_angle = slider({
min: 0,
max: 1,
step: .01,
value: .32,
format: ".0%",
title: "Start angle",
})
Insert cell
viewof outer_radius = slider({
min: .01,
max: 1,
step: .01,
value: 10,
format: ".0%",
title: "Outer radius",
})
Insert cell
viewof inner_radius = slider({
min: 0,
max: outer_radius,
step: 0.01,
format: ".0%",
title: "Inner radius",
})
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more