Drought plot with gradient

forked from fogonwater's block: Area graph with gradient in v4

forked from anonymous's block: Area graph with gradient in v4

<!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
var parseTime = d3.timeParse("%Y-%m-%d");

// set the ranges
var x = d3.scaleTime().range([0, width]),
    y = d3.scaleLinear().range([height - ymargin, 0])

var years = d3.range(start_year, end_year + 1).map(function(d) {
  return parseTime(d + '-01-01')
})

// 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.1) {
        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])
  
  
  /*
  svg.selectAll("bar")
      .data(data)
    .enter().append("rect")
      .style("fill", function(d) { return color(d.value); })
      .attr("x", function(d) { return x(d.date); })
      .attr("width", (width / num_days) + 0.4)
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value) })
  */

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-width", .69)
  
  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>

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

https://d3js.org/d3-scale-chromatic.v1.min.js

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.4/moment.min.js