Skip to content

Instantly share code, notes, and snippets.

@interwebjill

interwebjill/.block

Last active June 29, 2022 10:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save interwebjill/8122dd08da9facf8c6ef6676be7da03f to your computer and use it in GitHub Desktop.
Save interwebjill/8122dd08da9facf8c6ef6676be7da03f to your computer and use it in GitHub Desktop.
Download ZIP
D3 Multiple Area Chart
Raw
.block
license: gpl-3.0
height: 500
scrolling: no
border: yes
Raw
index.html
<!DOCTYPE html>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 20, 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 parseDate = d3.timeParse("%Y/%m/%d %H:%M");
var color = d3.scaleOrdinal()
.domain(["PVkW", "TBLkW"])
.range(["rgba(249, 208, 87, 0.7)", "rgba(54, 174, 175, 0.65)"]);
var x = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
z = color;
var area = d3.area()
.curve(d3.curveMonotoneX)
.x(function(d) { return x(d.date); })
.y0(y(0))
.y1(function(d) { return y(d.kW); });
d3.csv("kW_zoomed.csv", type, function(error, data) {
if (error) throw error;
var sources = data.columns.slice(1).map(function(id) {
return {
id: id,
values: data.map(function(d) {
return {date: d.date, kW: d[id]};
})
};
});
console.log(sources);
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([
0,
d3.max(sources, function(c) { return d3.max(c.values, function(d) { return d.kW; }); })
]);
z.domain(sources.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("Power, kW");
var source = g.selectAll(".area")
.data(sources)
.enter().append("g")
.attr("class", function(d) { return `area ${d.id}`; })
source.append("path")
.attr("d", function(d) { console.log(area(d.values)); return area(d.values); })
.style("fill", function(d) { return z(d.id); });
});
function type(d, _, columns) {
d.date = parseDate(d.date);
for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c];
return d;
}
</script>
</body>
</html>
Raw
kW_zoomed.csv
date PVkW TBLkW
2016/05/19 00:00 0.0 239.50626
2016/05/19 01:00 0.0 206.19063
2016/05/19 02:00 0.0 214.84766000000002
2016/05/19 03:00 0.0 181.61172
2016/05/19 04:00 0.0 170.51875
2016/05/19 05:00 0.0 183.08907
2016/05/19 06:00 0.0 216.7539
2016/05/19 07:00 103.1 177.90312
2016/05/19 08:00 319.2 217.39217999999997
2016/05/19 09:00 366.5 261.4992
2016/05/19 10:00 701.4 321.71405
2016/05/19 11:00 1022.1 313.33124
2016/05/19 12:00 1151.2 298.8094
2016/05/19 13:00 1173.1 309.1164
2016/05/19 14:00 1136.9 291.63672
2016/05/19 15:00 1141.4 331.23984
2016/05/19 16:00 486.5 316.14297
2016/05/19 17:00 759.7 269.61014
2016/05/19 18:00 375.7 258.6242
2016/05/19 19:00 113.1 259.47266
2016/05/19 20:00 5.9 294.9992
2016/05/19 21:00 0.0 301.95703
2016/05/19 22:00 0.0 347.30078
2016/05/19 23:00 0.0 244.0953
2016/05/20 00:00 0.0 250.16718999999998
2016/05/20 01:00 0.0 236.74374
2016/05/20 02:00 0.0 236.65155
2016/05/20 03:00 0.0 215.8172
2016/05/20 04:00 0.0 263.45547
2016/05/20 05:00 0.0 235.24765
2016/05/20 06:00 0.0 239.89687
2016/05/20 07:00 94.6 228.99219
2016/05/20 08:00 361.4 235.61717000000002
2016/05/20 09:00 628.7 296.9117
2016/05/20 10:00 890.9 300.43124
2016/05/20 11:00 1040.4 326.11017000000004
2016/05/20 12:00 1177.4 346.31952
2016/05/20 13:00 1215.4 325.96094
2016/05/20 14:00 1187.9 295.23904
2016/05/20 15:00 1090.6 304.12732
2016/05/20 16:00 962.1 381.3164
2016/05/20 17:00 719.9 335.2672
2016/05/20 18:00 472.9 198.23438000000002
2016/05/20 19:00 156.7 209.66406
2016/05/20 20:00 12.0 210.47342999999998
2016/05/20 21:00 0.0 244.43282000000002
2016/05/20 22:00 0.0 233.48515
2016/05/20 23:00 0.0 250.00702
2016/05/21 00:00 0.0 256.9742
2016/05/21 01:00 0.0 238.1961
2016/05/21 02:00 0.0 217.1461
2016/05/21 03:00 0.0 217.98515
2016/05/21 04:00 0.0 195.2664
2016/05/21 05:00 0.0 211.32422000000003
2016/05/21 06:00 0.0 196.6211
2016/05/21 07:00 33.5 189.13516
2016/05/21 08:00 44.1 233.9078
2016/05/21 09:00 289.3 305.66486000000003
2016/05/21 10:00 191.3 321.01797
2016/05/21 11:00 354.5 290.99844
2016/05/21 12:00 700.7 293.85156
2016/05/21 13:00 676.3 359.50232
2016/05/21 14:00 962.6 343.28516
2016/05/21 15:00 721.1 457.98828
2016/05/21 16:00 820.2 406.09296
2016/05/21 17:00 828.0 256.93515
2016/05/21 18:00 445.9 297.17343
2016/05/21 19:00 190.5 257.10233
2016/05/21 20:00 12.3 353.86484
2016/05/21 21:00 0.0 280.41092000000003
2016/05/21 22:00 0.0 262.20392000000004
2016/05/21 23:00 0.0 220.90937999999997
2016/05/22 00:00 0.0 240.6086
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment