Answers the question:
How much has it rained since ##
Where you choose the ##
name value | |
A 8.167 | |
B 1.492 | |
C 2.782 | |
D 4.253 | |
E 2.702 | |
F 2.288 | |
G 2.015 | |
H 6.094 | |
I 6.966 | |
J 0.153 | |
K 0.772 | |
L 4.025 | |
M 2.406 | |
N 6.749 | |
O 7.507 | |
P 1.929 | |
Q 0.095 | |
R 5.987 | |
S 6.327 | |
T 9.056 | |
U 2.758 | |
V 0.978 | |
W 2.360 | |
X 0.150 | |
Y 1.974 | |
Z 0.074 |
<!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> |
蛛槿ꇉᮺ⥝窺⮃簾馫涅签睭휶槭穱긝� |