D3 Examples - Custom SVG path with arcs

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    
let data = [ 
      { 
         "start": 10, "startValue": 7, 
         "end": 75, "endValue": 20, 
         "above": true 
      }, 
      { 
        "start": 15, "startValue": 3, 
        "end": 60, "endValue": 18, 
        "above": false 
      }, 
        { 
       "start": 50, "startValue": 15, 
       "end": 90, "endValue": 20, 
       "above": false 
      } 
    ] 
       
    let width = 500
    let height = width
    
    let xScale = d3.scaleLinear()
        .domain([0, 100])
        .range([0, width])
    
    let g = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", width)
            .append("g")
    
    let arcs = g.selectAll("path")
        .data(data)
        .enter()
        .append("g")
    
    arcs.append("path")
        .attr("d", function(d){
        let x1 = xScale(d.start) - (xScale(d.startValue)/2)
        let x2 = xScale(d.start) + (xScale(d.startValue)/2)
        let x3 = xScale(d.end) - (xScale(d.endValue)/2)
        let x4 = xScale(d.end) + (xScale(d.endValue)/2)
        let r2to3 = (x3 - x2)/2
        let r4to1 = (x4 - x1)/2
        let y = height/2
        let sweep2to3 = d.above ? 1 : 0
        let sweep4to1 = d.above ? 0 : 1
        return "M" + x1 + " " + y + " "
            + "L" + x2 + " " + y + " " 
            + "A" + r2to3 + " " + r2to3 + " 0 0 " + sweep2to3 + " " + x3 + " " + y
            + "L" + x4 + " " + y + " " 
            + "A" + r4to1 + " " + r4to1 + " 0 0 " + sweep4to1 + " " + x1 + " " + y
      })
        .style("fill", "pink")
        .style("opacity", 0.6)
        .style("stroke-width", 0)
    
    
    g.append("line")
        .attr("x1", 0)
        .attr("y1", height/2)
        .attr("x2", width)
        .attr("y2", height/2)
        .style("stroke", "black")
​
  </script>
</body>
​
    