Segmented Lines

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

path {
  fill: none;
  stroke: #000;
  stroke-width: 7px;
  stroke-linejoin: round;
}

circle {
  fill: #ccc;
  stroke: #777;
  stroke-width: 1px;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500;

var n = 4,
    m = 64;

var x = d3.scale.linear()
  .domain([0, m - 1])
  .range([0, width]);

var y = d3.scale.linear()
  .range([height - 20, 20]);

var z = d3.scale.linear()
    .domain([0, Math.PI / 2, Math.PI])
    .range(["#0f0", "#777", "#f00"]);

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

var line = d3.svg.line()
    .x(function(d) { return x(d[0]); })
    .y(function(d) { return y(d[1]); });

d3.json("series.json", function(error, series) {
  if (error) throw error;

y.domain([0, d3.max(d3.merge(series))]);

var g = svg.selectAll("g")
      .data(series)
    .enter().append("g");

var path = g.selectAll("path")
      .data(segments)
    .enter().append("path")
      .attr("d", line)
      .style("stroke", function(d) { return z(Math.atan2(d[1][0] - d[0][0], d[1][1] - d[0][1])); });

// Produce an array of two-element arrays [x, y] for each segment of values.
function segments(values) {
  var i = 0, n = values.length, segments = new Array(n - 1);
  while (++i < n) segments[i - 1] = [[i - 1, values[i - 1]], [i, values[i]]];
  return segments;
}

</script>

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