hannahherbig/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Data taken from sdvx.in

  
## data.csv

          
            level
            total
            NOV
            ADV
            EXH
            MXM
            INF
            GRV
            HVN

            
              01
              17
              17
              0
              0
              0
              0
              0
              0

            
              02
              78
              78
              0
              0
              0
              0
              0
              0

            
              03
              190
              190
              0
              0
              0
              0
              0
              0

            
              04
              265
              264
              1
              0
              0
              0
              0
              0

            
              05
              310
              307
              3
              0
              0
              0
              0
              0

            
              06
              212
              201
              11
              0
              0
              0
              0
              0

            
              07
              93
              16
              76
              1
              0
              0
              0
              0

            
              08
              133
              1
              130
              2
              0
              0
              0
              0

            
              09
              179
              0
              176
              3
              0
              0
              0
              0

            
              10
              260
              0
              248
              12
              0
              0
              0
              0

            
              11
              246
              0
              222
              24
              0
              0
              0
              0

            
              12
              273
              0
              170
              103
              0
              0
              0
              0

            
              13
              230
              0
              24
              201
              0
              5
              0
              0

            
              14
              116
              0
              7
              107
              2
              0
              0
              0

            
              15
              219
              0
              5
              185
              21
              7
              1
              0

            
              16
              283
              0
              0
              199
              53
              16
              14
              1

            
              17
              276
              0
              0
              170
              57
              12
              29
              8

            
              18
              142
              0
              0
              60
              51
              3
              19
              9

            
              19
              43
              0
              0
              7
              7
              2
              18
              9

            
              20
              5
              0
              0
              0
              4
              0
              1
              0

## index.html
<!DOCTYPE html>
<style>

.axis .domain {
  display: none;
}

body {
  background: #222222;
}

line {
  stroke: white;
}
text {
  fill: white;
}

</style>
<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: 40},
    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 x = d3.scaleBand()
    .rangeRound([0, width])
    .paddingInner(0.05)
    .align(0.1);

var y = d3.scaleLinear()
    .rangeRound([height, 0]);

var z = d3.scaleOrdinal()
    .range(['#b153f9', '#ffff00', '#ff4444', '#ffffff', '#f953f0', '#f76c00', '#53d4f9'])

d3.csv("data.csv", function(d, i, columns) {
  for (i = 0; i < columns.length; ++i) d[columns[i]] = +d[columns[i]];
  return d;
}, function(error, data) {
  if (error) throw error;

  var keys = data.columns.slice(2);

  // data.sort(function(a, b) { return b.total - a.total; });
  x.domain(data.map(function(d) { return d.level; }));
  y.domain([0, d3.max(data, function(d) { return d.total; })]).nice();
  z.domain(keys);

  g.append("g")
    .selectAll("g")
    .data(d3.stack().keys(keys)(data))
    .enter().append("g")
      .attr("fill", function(d) { return z(d.key); })
    .selectAll("rect")
    .data(function(d) { return d; })
    .enter().append("rect")
      .attr("x", function(d) { return x(d.data.level); })
      .attr("y", function(d) { return y(d[1]); })
      .attr("height", function(d) { return y(d[0]) - y(d[1]); })
      .attr("width", x.bandwidth());

  g.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  g.append("g")
      .attr("class", "axis")
      .call(d3.axisLeft(y).ticks(null, "s"))
    .append("text")
      .attr("x", 2)
      .attr("y", y(y.ticks().pop()) + 0.5)
      .attr("dy", "0.32em")
      .attr("fill", "#000")
      .attr("font-weight", "bold")
      .attr("text-anchor", "start")
      .text("Charts");

  var legend = g.append("g")
      .attr("font-family", "sans-serif")
      .attr("font-size", 10)
      .attr("text-anchor", "end")
    .selectAll("g")
    .data(keys.slice().reverse())
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 19)
      .attr("width", 19)
      .attr("height", 19)
      .attr("fill", z);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9.5)
      .attr("dy", "0.32em")
      .text(function(d) { return d; });
});

</script>
level	total	NOV	ADV	EXH	MXM	INF	GRV	HVN
01	17	17	0	0	0	0	0	0
02	78	78	0	0	0	0	0	0
03	190	190	0	0	0	0	0	0
04	265	264	1	0	0	0	0	0
05	310	307	3	0	0	0	0	0
06	212	201	11	0	0	0	0	0
07	93	16	76	1	0	0	0	0
08	133	1	130	2	0	0	0	0
09	179	0	176	3	0	0	0	0
10	260	0	248	12	0	0	0	0
11	246	0	222	24	0	0	0	0
12	273	0	170	103	0	0	0	0
13	230	0	24	201	0	5	0	0
14	116	0	7	107	2	0	0	0
15	219	0	5	185	21	7	1	0
16	283	0	0	199	53	16	14	1
17	276	0	0	170	57	12	29	8
18	142	0	0	60	51	3	19	9
19	43	0	0	7	7	2	18	9
20	5	0	0	0	4	0	1	0
	<!DOCTYPE html>
	<style>

	.axis .domain {
	display: none;
	}

	body {
	background: #222222;
	}

	line {
	stroke: white;
	}
	text {
	fill: white;
	}

	</style>
	<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: 40},
	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 x = d3.scaleBand()
	.rangeRound([0, width])
	.paddingInner(0.05)
	.align(0.1);

	var y = d3.scaleLinear()
	.rangeRound([height, 0]);

	var z = d3.scaleOrdinal()
	.range(['#b153f9', '#ffff00', '#ff4444', '#ffffff', '#f953f0', '#f76c00', '#53d4f9'])

	d3.csv("data.csv", function(d, i, columns) {
	for (i = 0; i < columns.length; ++i) d[columns[i]] = +d[columns[i]];
	return d;
	}, function(error, data) {
	if (error) throw error;

	var keys = data.columns.slice(2);

	// data.sort(function(a, b) { return b.total - a.total; });
	x.domain(data.map(function(d) { return d.level; }));
	y.domain([0, d3.max(data, function(d) { return d.total; })]).nice();
	z.domain(keys);

	g.append("g")
	.selectAll("g")
	.data(d3.stack().keys(keys)(data))
	.enter().append("g")
	.attr("fill", function(d) { return z(d.key); })
	.selectAll("rect")
	.data(function(d) { return d; })
	.enter().append("rect")
	.attr("x", function(d) { return x(d.data.level); })
	.attr("y", function(d) { return y(d[1]); })
	.attr("height", function(d) { return y(d[0]) - y(d[1]); })
	.attr("width", x.bandwidth());

	g.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x));

	g.append("g")
	.attr("class", "axis")
	.call(d3.axisLeft(y).ticks(null, "s"))
	.append("text")
	.attr("x", 2)
	.attr("y", y(y.ticks().pop()) + 0.5)
	.attr("dy", "0.32em")
	.attr("fill", "#000")
	.attr("font-weight", "bold")
	.attr("text-anchor", "start")
	.text("Charts");

	var legend = g.append("g")
	.attr("font-family", "sans-serif")
	.attr("font-size", 10)
	.attr("text-anchor", "end")
	.selectAll("g")
	.data(keys.slice().reverse())
	.enter().append("g")
	.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

	legend.append("rect")
	.attr("x", width - 19)
	.attr("width", 19)
	.attr("height", 19)
	.attr("fill", z);

	legend.append("text")
	.attr("x", width - 24)
	.attr("y", 9.5)
	.attr("dy", "0.32em")
	.text(function(d) { return d; });
	});

	</script>