Arcs and Chevrons

This block uses d3.js v4 with a custom module.

A very basic modification of d3.arc() to produce an arc that ends with a chevron/point, d3.chevronArc. This block serves primarily as a proof of concept - and not as a demo of a decent module/plugin. It is based entirely off of the d3-shape module's (https://github.com/d3/d3-shape) arc function with few changes and a lot of code removed. In creating it, many or all of the checks for different cases or exceptions were removed.

Four methods are available for chevronArc(), these are:

innerRadius()
outerRadius()
startAngle() - in radians
endAngle() - in radians

All behave the same as with d3.arc().

var svg = d3.select("#svg").append("svg").attr("width",500).attr("height",500);
var width = 500;
var height = 450;
margin = {bottom: 1, top:1,left:1,right:1};
padding = 2;
marginBottom = 0;

var arcs = [];

var arcs = [
	{start: 1 / 180 * Math.PI, end: 119 / 180 * Math.PI,fill:"#43a2ca",inner:150,outer:200},
	{start: 121 / 180 * Math.PI, end: 239 / 180 * Math.PI,fill:"#43a2ca",inner:150,outer:200},
	{start: 241 / 180 * Math.PI, end: 359 / 180 * Math.PI,fill:"#43a2ca",inner:150,outer:200},
	{start: 119 / 180 * Math.PI, end: 1 / 180 * Math.PI,fill:"#0868ac",inner:205,outer:215},
	{start: 239 / 180 * Math.PI, end: 121 / 180 * Math.PI,fill:"#0868ac",inner:205,outer:215},
	{start: 359 / 180 * Math.PI, end: 241 / 180 * Math.PI,fill:"#0868ac",inner:205,outer:215},	
	{start: 200 / 180 * Math.PI, end: -159 / 180 * Math.PI,fill:"#e0f3db",inner:100,outer:145},	
	{start: 1 / 180 * Math.PI, end: 359 / 180 * Math.PI,fill:"#a8ddb5",inner:45,outer:95}
];

var g = svg.append("g").attr("transform", "translate(" + 500 / 2 + "," + 500 / 2 + ")");

var circle = g.append("circle").attr("r",40).attr("fill","lightblue");

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.js