Skip to content

Instantly share code, notes, and snippets.

@wrigh3tl

wrigh3tl/.block

Last active April 26, 2017 22:15
Show Gist options
  • Save wrigh3tl/b982993eea2ae1f77bea805579163162 to your computer and use it in GitHub Desktop.
Save wrigh3tl/b982993eea2ae1f77bea805579163162 to your computer and use it in GitHub Desktop.
Download ZIP
nutrients
Raw
.block
license: mit
Raw
README.md
Raw
data1.tsv
date Site 1 Site 2
20150911 439.35 568.4
20150925 400.02 473.59
20151023 329.55 318.38
20151113 239.67 158.79
20160516 165.11 156.27
20160614 323.92 390.65
20160718 408.87 397.54
20160824 400.2 457.29
Raw
data2.tsv
date Site 1 Site 2
20150911 23.92 24.08
20150925 18.73 17.91
20151023 12.13 13.49
20151113 10.62 11
20160516 14.83 15.28
20160614 22.68 22.12
20160718 26.06 24.73
20160824 23.88 24.2
Raw
data3.tsv
date Site 1 Site 2
20150911 0.51 0.85
20150925 0.39 1.11
20151023 0.19 1.69
20151113 2.05 0.55
20160516 0.52 0.44
20160614 0.8 0.8
20160718 2.15 2.15
20160824 0.66 0.66
Raw
data4.tsv
date Site 1 Site 2
20150911 0.21 0.28
20150925 0.22 0.27
20151023 0.21 0.2
20151113 0.16 0.1
20160516 0.1 0.09
20160614 0.16 0.2
20160718 0.19 0.19
20160824 0.2 0.22
Raw
data5.tsv
date Site 1 Site 2
20150911
20150925
20151023
20151113
20160516 11.21 6.78
20160614 9.75 10.84
20160718 18.13 52.04
20160824 16.22 14.53
Raw
data6.tsv
date Site 1 Site 2
20150911 291.59 376.09
20150925 395.4 356.05
20151023 284.02 265.24
20151113 214.78 140.88
20160516 133.19 124.73
20160614 220.3 268.69
20160718 260.49 259.75
20160824 265.8 301.84
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis--x path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var files = ["data1.tsv", "data2.tsv", "data3.tsv", "data4.tsv", "data5.tsv", "data6.tsv"];
var svg = d3.select("svg"),
margin = {top: 20, right: 80, bottom: 30, left: 50},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var parseTime = d3.timeParse("%Y%m%d");
var x = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
z = d3.scaleOrdinal(d3.schemeCategory10);
var line = d3.line()
.curve(d3.curveBasis)
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.temperature); });
d3.tsv("data1.tsv", type, function(error, data) {
if (error) throw error;
var cities = data.columns.slice(1).map(function(id) {
return {
id: id,
values: data.map(function(d) {
return {date: d.date, temperature: d[id]};
})
};
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([
d3.min(cities, function(c) { return d3.min(c.values, function(d) { return d.temperature; }); }),
d3.max(cities, function(c) { return d3.max(c.values, function(d) { return d.temperature; }); })
]);
z.domain(cities.map(function(c) { return c.id; }));
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("fill", "#000")
.text("Conductivity, us/cm");
var city = g.selectAll(".city")
.data(cities)
.enter().append("g")
.attr("class", "city");
city.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return z(d.id); });
city.append("text")
.datum(function(d) { return {id: d.id, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
.attr("x", 3)
.attr("dy", "0.35em")
.style("font", "10px sans-serif")
.text(function(d) { return d.id; });
});
function type(d, _, columns) {
d.date = parseTime(d.date);
for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c];
return d;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment