Cumulative rain plot

Dynamic Cumulative Distribution Plot

Answers the question:

How much has it rained since ##

Where you choose the ##

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

.chart rect.hourly {
  fill: steelblue;
}
.chart rect.cumul {
  fill: grey;
}

.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: middle;
}
  
#controls {
  position: absolute;
  width: 240px;
  height: 30px;
  font: 10px sans-serif;
}

#controls span,
#controls label {
  position: relative;
  top: -5px;
  padding: 5px;
  display: inline-block;
  width: 49px;
}

#controls button {
  font: 10px sans-serif;
  padding: 5px;
  width: 70px;
}

</style>
<div id="controls"></div>
<svg class="chart"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

var width = 731,
    height = 424;
  
var dataFinal, bar, barWidth, refCumul;
  
var startpos = 0;

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

var chart = d3.select(".chart")
    .attr("width", width)
    .attr("height", height);
  
var control = d3.select("#controls")
		.append("div")
    .attr("id", "startPos");

control.append("label")
    .text("startPos");

var input = control.append("input")
    .attr("type", "range")
    .attr("max", 20)
    .attr("min", 0)
		.attr('value',0)
input
    .on("input", function() {
      startpos = this.value;
      render();
    });
control.append("span")
.attr('id','indicator')
    .text(function() { return startpos; });

// Load data
d3.tsv("data.txt", type, function(error, data) {
  var all = 0;
  data.forEach(function(d){ 
    all+=d.value;
    d.cumul = all;
  });
  refCumul = data[startpos].cumul;
  var max = d3.max(data, function(d) { return d.cumul; });
  y.domain([0,max ]);

barWidth = width / data.length;

dataFinal = data;
  
  render();

});

</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js