JSFiddle - React, Tailwind, and code Playground

by mbostock

HTML

<script src="http://mbostock.github.com/d3/d3.js"></script>

JavaScript

var r0 = 50,
    r1 = 150,
    a0 = 0,
    a1 = 45,
    p0 = cartesian(a0, r0),
    p1 = cartesian(a0, (r0 + r1) / 2),
    p2 = cartesian(a1, (r0 + r1) / 2),
    p3 = cartesian(a1, r1);

var svg = d3.select("body").append("svg:svg")
    .attr("width", r1 * 2)
    .attr("height", r1 * 2)
    .style("padding", "5px")
  .append("svg:g")
    .attr("transform", "translate(" + r1 + "," + r1 + ")");

svg.append("svg:path")
    .attr("d", d3.svg.arc()
    .innerRadius(r0)
    .outerRadius(r1)
    .startAngle(a0 / 180 * Math.PI)
    .endAngle(a1 / 180 * Math.PI))
    .attr("fill", "none")
    .attr("stroke", "#ccc")
    .attr("stroke-width", "1.5px");

svg.append("svg:path")
    .attr("d", "M" + p0 + "C" + p1 + " " + p2 + " " + p3)
    .attr("fill", "none")
    .attr("stroke", "#000")
    .attr("stroke-width", "1.5px");

svg.append("svg:path")
    .attr("d", "M" + p0 + "L" + p1)
    .attr("fill", "none")
    .attr("stroke", "#f00")
    .attr("stroke-width", "1.5px");

svg.append("svg:circle")
    .attr("r", 4.5)
    .attr("transform", "translate(" + p1 + ")")
    .attr("fill", "white")
    .attr("stroke", "#f00")
    .attr("stroke-width", "1.5px");

svg.append("svg:path")
    .attr("d", "M" + p3 + "L" + p2)
    .attr("fill", "none")
    .attr("stroke", "#0f0")
    .attr("stroke-width", "1.5px");

svg.append("svg:circle")
    .attr("r", 4.5)
    .attr("transform", "translate(" + p2 + ")")
    .attr("fill", "white")
    .attr("stroke", "#0f0")
    .attr("stroke-width", "1.5px");

function cartesian(a, r) {
  a = (a - 90) / 180 * Math.PI;
  return [r * Math.cos(a), r * Math.sin(a)];
}