D3 Examples - Cumulative rain plot

xxxxxxxxxx
 
<!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();
​
​
​
});
​
function type(d) {
  d.value = +d.value; // coerce to number
  return d;
}
  
  function render() {
    
    refCumul = dataFinal[startpos].cumul;
    
  var rC = chart.selectAll('rect.cumul').data(dataFinal)
      .attr("y", function(d) { return Math.max(0,y(d.cumul-refCumul)); })
      .attr("height", function(d) { return Math.max(0,height - y(d.cumul-refCumul)); });
    rC
    .enter()
    .append("rect")
        .attr('class','cumul')
      .attr("width", barWidth - 2)
            .attr('x', function(d,i) { return i*barWidth; })
      .attr("y", function(d) { return Math.max(0,y(d.cumul-refCumul)); })
      .attr("height", function(d) { return Math.max(0,height - y(d.cumul-refCumul)); });
​
    
var rH = chart.selectAll('rect.hourly').data(dataFinal)
    .enter()
    .append("rect")
        .attr('class','hourly')
      .attr("width", barWidth - 4)
            .attr('x', function(d,i) { return i*barWidth; })
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); });
    control.selectAll('#indicator')
        .text(function() { return startpos; });
    
  }
  
​
​
</script>
​
    