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; }
    line { opacity: 0.6 }
    path { opacity: 0.4 }
  </style>
</head>
​
<body>
  <script>
    
    let data = [
      {
        "start": 15, "startValue": 15,
        "end": 75, "endValue": 9,
        "above": true
      },
      {
        "start": 25, "startValue": 3,
        "end": 70, "endValue": 14,
        "above": false
      },
      {
        "start": 45, "startValue": 15,
        "end": 90, "endValue": 20,
        "above": false
      }
    ]
    
    let width = 800
    let height = width
    let margin = 10
    let axisWidth = 10
    let axisY = height/2
    
    let xScale = d3.scaleLinear()
        .domain([0, 100])
        .range([0, width])
    
    let colour = d3.scaleOrdinal()
        .domain(d3.range(data.length))
        .range(["rgb(148,166,253)", "rgb(154,16,115)", "rgb(100,212,253)"])
    
    let g = d3.select("body").append("svg")
        .attr("width", width + margin + margin)
        .attr("height", width + margin + margin)
            .append("g")
        .attr("transform", "translate(" + margin + "," + margin + ")")
        
    let arcs = g.selectAll("path")
        .data(data)
        .enter()
        .append("g")
    
    arcs.append("path")
        .attr("d", function(d){
        let x1 = getx1(d)
        let x2 = getx2(d)
        let x3 = getx3(d)
        let x4 = getx4(d)
        let r2to3 = (x3 - x2)/2
        let r4to1 = (x4 - x1)/2
        let y = d.above ? axisY - axisWidth/2 : axisY + axisWidth/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", function(d, i){ return colour(i) })
    
    arcs.append("line")
        .attr("x1", function(d){ return getx1(d) })
        .attr("x2", function(d){ return getx2(d) })
        .attr("y1", axisY)
        .attr("y2", axisY)
        .attr("stroke-width", axisWidth - 4)
        .style("stroke", function(d, i){ return colour(i) })
    
    arcs.append("line")
        .attr("x1", function(d){ return getx3(d) })
        .attr("x2", function(d){ return getx4(d) })
        .attr("y1", axisY)
        .attr("y2", axisY)
        .attr("stroke-width", axisWidth - 4)
        .style("stroke", function(d, i){ return colour(i) })
    
    function getx1(d) { return xScale(d.start) - (xScale(d.startValue)/2) }
    function getx2(d) { return xScale(d.start) + (xScale(d.startValue)/2) }
    function getx3(d) { return xScale(d.end) - (xScale(d.endValue)/2) }
    function getx4(d) { return xScale(d.end) + (xScale(d.endValue)/2) }
​
  </script>
</body>
​
    