Thick Bezier lines

by stared

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.min.js"></script>
<svg id="chart"></svg>

JavaScript

var svg = d3.select("#chart");

var data = [
	{t: 5, dy: 10},
	{t: 5, dy: 20},
	{t: 5, dy: 40},
	{t: 20, dy: 10},
	{t: 20, dy: 20},
	{t: 20, dy: 40},
	{t: 50, dy: 10},
	{t: 50, dy: 20},
	{t: 50, dy: 40},
];

var ctrl = 10;
var dx = 40;
var spacing = 100;
var colors = d3.scale.category10();

svg
  .attr("width", 4 * spacing)
  .attr("height", 4 * spacing);

svg.selectAll("path")
  .data(data)
  .enter()
  	.append("path")
    	.attr("d", function (d, i) {
      	var x1 = spacing + spacing * (i % 3);
        var y1 = spacing + spacing * Math.floor(i / 3);
      	return "M" + x1 + "," + y1 +
        			 "c" + ctrl + "," + 0 +
               " " + (dx - ctrl) + "," + d.dy +
               " " + dx + "," + d.dy;
      })
    	.style("fill", "none")
      .style("stroke", colors(0))
      .style("stroke-width", function (d) { return d.t; });