D3 Examples - Drought plot with gradient II

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {text-align:center}
svg { font-family: Courier; }
​
</style>
<body>
  
<svg width="960" height="160">
    <g transform="translate(1,1)"></g>
</svg>
    
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.4/moment.min.js"></script>
<script>
  
const start_year = 2007,
  end_year = 2018,
    start = moment(start_year + "-01-01"),
    end = moment(end_year + "-01-01"),
    num_days = end.diff(start, "days") - 1
​
// set the dimensions and margins of the graph
const svg   = d3.select("svg"),
        width = +svg.attr("width"),
        height= +svg.attr("height"),
      ymargin = 0
​
const color = d3.scaleSequential(d3.interpolateYlOrBr)
    .domain([-0.5,2])
​
// parse the date / time
const parseTime = d3.timeParse("%Y-%m-%d");
​
// set the ranges
const x = d3.scaleTime().range([0, width]),
    y = d3.scaleLinear().range([height - ymargin, 0])
​
const years = d3.range(start_year, end_year + 1).map(function(d) {
  return parseTime(d + '-01-01')
})
​
const area = d3.area()  
    .x(function(d) { return x(d.date); })   
    .y0(height)                 
    .y1(function(d) { return y(d.value); });
​
// Get the data
d3.csv("data.csv", function(error, raw) {
  var data = []
  
  // format the data
  raw.forEach(function(d) {
        if (d.NZDI_INDICATOR == 'NZDI' && +d.VAL > 0.0) {
        if (moment(d.OBS_DATE) >= start) {
          d.date = parseTime(d.OBS_DATE)
            d.value = +d.VAL
            data.push(d)
        } 
      } 
  })
  
  // Scale the range of the data
  //x.domain(d3.extent(data, function(d) { return d.date; }))
  //y.domain([0, d3.max(data, function(d) { return d.value; })])
  x.domain([parseTime(start_year + '-01-01'), parseTime(end_year + '-01-01')])
  y.domain([0, 2.5])
  
  // set the gradient
  svg.append("linearGradient")              
    .attr("id", "line-gradient")            
    .attr("gradientUnits", "userSpaceOnUse")    
    .attr("x1", 0).attr("y1", height)           
    .attr("x2", 0).attr("y2", 0)        
  .selectAll("stop")                        
    .data([                             
      {offset: "0%",    color: color(0)},   
      {offset: "15%", color: color(1)},
        {offset: "50%", color: color(1.75)},
        {offset: "85%", color: color(2.5)},
      {offset: "100%",color: color(2.5)}    
    ])                  
  .enter().append("stop")           
    .attr("offset", function(d) { return d.offset; })   
    .attr("stop-color", function(d) { return d.color; })
​
  /*
  svg.selectAll("bar")
      .data(data)
    .enter().append("line")
      .attr("x1", function(d) { return x(d.date)} )
      .attr("y1", function(d) { return y(d.value); })
      .attr("x2", function(d) { return x(d.date)} )
      .attr("y2", height - ymargin)
      .style("fill", "none")
      //.style("stroke", function(d) { return color(d.value); })
        .style("stroke", "url(#line-gradient)")
        .style("stroke-width", .69)
   */
  
   // Add the area.
  svg.append("path")
      .data([data])
      .attr("class", "area")
      .attr("d", area)
        .style("fill", "url(#line-gradient)")
  
  svg.selectAll("years")
      .data(years)
    .enter().append("line")
      .attr("x1", function(d) { return x(d)} )
      .attr("y1", 0)
      .attr("x2", function(d) { return x(d)} )
      .attr("y2", height - ymargin)
      .style("fill", "none")
      .style("stroke", '#acacac')
        .style("stroke-width", .69)
  /*
  svg.append("text")
      .text(data.length + ' elements')
      .attr("y", 50)
      .attr("x", 10)
      .attr("font-size", 12)
      .attr("font-family", "monospace")
  */
  raw = null
});
​
</script>
</body>
​
    