interwebjill/.block

## .block
license: gpl-3.0
height: 500
scrolling: no
border: yes

## 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>

## 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

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>
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