Tapered Arc

Uses d3.svg.area to create an arc that tapers at its ends. Developed for a data visualization design by Nicolette Hayes.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 15px sans-serif;
  line-height: 18px;
  width: 600px;
  margin: 20px auto;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.area {
  fill: #555;
  pointer-events: none;
}

circle {
  fill: orange;
  stroke: none;
  opacity: 0.3;
}

circle:hover {
  fill: orange;
  stroke: orange;
  stroke-width: 12;
  opacity: 1;
}

</style>
<body>
<div style="margin-left: 100px">
Tension <input id="tension" type="range" min=0 max=1 value=0.5 step=0.05 /> <span id="tension-val">0.5</span><br/>
Width <input id="width" type="range" min=1 max=60 value=24 step=1 /> <span id="width-val">24</span> px<br/>
Offset <input id="offset" type="range" min=-200 max=200 value=-50 step=1 /> <span id="offset-val">-50</span> px
<div>
<script src="https://d3js.org/d3.v3.js"></script>
<script>

var width = 600,
    height = 400;

var parseDate = d3.time.format("%d-%b-%y").parse;

var link = {
  start: [100,200],
  end: [500,200],
  width: 24,
  offset: -50
};

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)

var path = svg.append("path")
    .datum(toArc(link))
    .attr("class", "area")
    .attr("d", area);

svg.append("circle")
  .attr("cx", link.start[0])
  .attr("cy", link.start[1])
  .attr("r", 3)
  .call(d3.behavior.drag()
    .on("drag", function() {
      link.start = [d3.event.x, d3.event.y];
      d3.select(this)
        .attr("cx", link.start[0])
        .attr("cy", link.start[1]);
      path.datum(toArc(link))
        .attr("d", area);
    })
  );

svg.append("circle")
  .attr("cx", link.end[0])
  .attr("cy", link.end[1])
  .attr("r", 3)
  .call(d3.behavior.drag()
    .on("drag", function() {
      link.end = [d3.event.x, d3.event.y];
      d3.select(this)
        .attr("cx", link.end[0])
        .attr("cy", link.end[1]);
      path.datum(toArc(link))
        .attr("d", area);
    })
  );

d3.select("#tension")
  .on("input", function() {
    area.tension(+this.value)
    d3.select("#tension-val").text(this.value);
    path.attr("d", area);
  });

d3.select("#width")
  .on("input", function() {
    link.width = +this.value;
    d3.select("#width-val").text(this.value);
    path.datum(toArc(link))
      .attr("d", area);
  });

d3.select("#offset")
  .on("input", function() {
    link.offset = +this.value;
    d3.select("#offset-val").text(this.value);
    path.datum(toArc(link))
      .attr("d", area);
  });

function toArc(d) {
  return [{
    x: d.start[0],
    x0: d.start[0],
    y0: d.start[1],
    y1: d.start[1],
  },
  {
    x: (d.start[0]+d.end[0])/2,
    x0: (d.start[0]+d.end[0])/2,
    y0: (d.start[1]+d.end[1])/2+d.offset+d.width/2,
    y1: (d.start[1]+d.end[1])/2+d.offset-d.width/2,
  }
  ,
  {
    x: d.end[0],
    x0: d.end[0],
    y0: d.end[1],
    y1: d.end[1],
  }];
};
</script>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js