Skip to content

Instantly share code, notes, and snippets.

@mmmatthew

mmmatthew/README.md

Last active September 10, 2015 12:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mmmatthew/e353bdc2ae16ca4d6f17 to your computer and use it in GitHub Desktop.
Save mmmatthew/e353bdc2ae16ca4d6f17 to your computer and use it in GitHub Desktop.
Download ZIP
Cumulative rain plot
Raw
README.md

Dynamic Cumulative Distribution Plot

Answers the question:

How much has it rained since ##

Where you choose the ##

Raw
data.txt
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
Raw
index.html
<!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>
Raw
thumbnail.png
蛛槿ꇉᮺ⥝窺⮃簾馫涅签睭휶槭穱긝�
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment