Area chart with dynamic gradient based on a condition.

by Aditya Kadiwal

HTML

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

CSS

body {
  font: 10px sans-serif;
}

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

JavaScript

var data = [{
    "stamp": "Mon Apr 18 16:12:52 UTC 2016",
    "dailyConsValue": -10,
    "targetConsValue": 10
  },
  {
    "stamp": "Mon Mar 15 09:38:41 UTC 2016",
    "dailyConsValue": 20,
    "targetConsValue": 10
  },
  {
    "stamp": "Mon Feb 15 13:52:37 UTC 2016",
    "dailyConsValue": -10,
    "targetConsValue": 10
  }
];

data.reverse();


createGradient('#chart', data);


function createGradient(id, data) {
  let svg = d3.select('#chart');
  let linearGradient = svg.append('defs').append('linearGradient').attr('id', 'gradFill').attr({
    'x1': '0%',
    'y1': '0%',
    'x2': '100%',
    'y2': '0%'
  });
  var scale = d3.scale.linear().range([0, 1]).domain([0, data.length - 1]);
  let stops = []
  for (var i = 0; i < data.length; i++) {
    stops.push(scale(i))
  };

  for (var i = 0; i < stops.length; i++) {
    linearGradient.append('stop').attr('offset', function() {
        return parseFloat(stops[i]).toFixed(3)
      })
      .style('stop-color', function() {
        if (data[i]['dailyConsValue'] < data[i]['targetConsValue']) {
          return 'green';
        } else {
          return 'blue';
        }
      })

  }
}



var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 50
  },
  width = 500 - margin.left - margin.right,
  height = 300 - margin.top - margin.bottom;

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

var x = d3.time.scale()
  .range([0, width]);

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

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left");



var svg = d3.select('#chart')
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

data.forEach(function(d) {
  d.stamp = new Date(d.stamp)
  d.dailyConsValue = +d.dailyConsValue;
});

x.domain(d3.extent(data, function(d) {
  return...