D3 Path

by Jossef Harush

HTML

<svg width="500" height="80">
</svg>
value: <div id="color-value"></div>

JavaScript

var svg = d3.select("svg")

var dataset = [
  [10, 25],
  [10, 75],
  [40, 75],
]

var color =
  d3.scale.threshold()
  .domain([0, 1])
  .range(["green", "yellow", "red"]);

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


var lineGraph = svg.attr("fill", "red").append("path")
  .attr("d", lineFunction(dataset))


var colorValues = [-1, 0.5, 2];
var colorIndex = 0;

setInterval(function() {
  colorIndex++;
  var newValue = colorValues[(colorIndex + colorValues.length) % colorValues.length];
  d3.select('#color-value').text(newValue)
  svg
    .data([newValue])
    .transition()
    .duration(1500)
    .attr('fill', function(d) {
      return color(d);
    })

}, 3000)