mell0kat/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
Remake of Mike Bostock's Stacked Bar Chart
What I learned:

How d3.stack layout works
Stack creates an array of layers - each layer is an of coordinates (one array per 'key')
Coordinates [y, y1] specify top and bottom of rectangle
Can use ordinal scale to generate colors for "layers" of stack
Used band scale for x (time) - Band scales are like ordinal scales except the output range is continuous and numeric.


## crimea.tsv

          
            date
            total
            disease
            wounds
            other

            
              4/1854
              8571
              1
              0
              5

            
              5/1854
              23333
              12
              0
              9

            
              6/1854
              28333
              11
              0
              6

            
              7/1854
              28772
              359
              0
              23

            
              8/1854
              30246
              828
              1
              30

            
              9/1854
              30290
              788
              81
              70

            
              10/1854
              30643
              503
              132
              128

            
              11/1854
              29736
              844
              287
              106

            
              12/1854
              32779
              1725
              114
              131

            
              1/1855
              32393
              2761
              83
              324

            
              2/1855
              30919
              2120
              42
              361

            
              3/1855
              30107
              1205
              32
              172

            
              4/1855
              32252
              477
              48
              57

            
              5/1855
              35473
              508
              49
              37

            
              6/1855
              38863
              802
              209
              31

            
              7/1855
              42647
              382
              134
              33

            
              8/1855
              44614
              483
              164
              25

            
              9/1855
              47751
              189
              276
              20

            
              10/1855
              46852
              128
              53
              18

            
              11/1855
              37853
              178
              33
              32

            
              12/1855
              43217
              91
              18
              28

            
              1/1856
              44212
              42
              2
              48

            
              2/1856
              43485
              24
              0
              19

            
              3/1856
              46140
              15
              0
              35

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .axis text {
      font: 10px sans-serif;
    }

    .axis line,
    .axis path {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }

    .axis--x path {
      display: none;
    }
  </style>
</head>

<body>
  <script>
const causes = ['wounds', 'other', 'disease']
const parseDate = d3.timeParse('%m/%Y')
const margin = { top: 20, right: 50, bottom: 30, left: 20 }
const width = 960 - margin.left -margin.right
const height = 500 - margin.top - margin.bottom

const x = d3.scaleBand()
	.rangeRound([0, width])

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

const z = d3.scaleOrdinal(d3.schemeCategory10)

const xAxis = d3.axisBottom()
	.scale(x)
	.tickFormat(d3.timeFormat('%b'))

const yAxis = d3.axisRight()
	.scale(y)

const svg = d3.select('body')
	.append('svg')
	.attr('width', width + margin.left + margin.right)
	.attr('height', height + margin.top + margin.bottom)
	.append('g')
	.attr('transform', `translate(${margin.left},${margin.top})`)

const type = (d) => {
	d.date = parseDate(d.date)
	causes.forEach(c => {
		d[c] = +d[c]
	})
	return d
}

d3.tsv('crimea.tsv', type, (crimea) => {

	const layers = d3.stack()
	.keys(causes)
	(crimea)

	x.domain(layers[0].map(d => d.data.date))

	y.domain([0, d3.max(layers[layers.length - 1], d => (d[0] + d[1]) )]).nice()

	const layer = svg.selectAll('layer')
		.data(layers)
		.enter()
		.append('g')
		.attr('class', 'layer')
		.style('fill', (d, i) => (z(i) ))

	layer.selectAll('rect')
		.data(d => d)
		.enter()
		.append('rect')
		.attr('x', d => x(d.data.date))
		.attr('y', d => y(d[0] + d[1]))
		.attr('height', d => y(d[0]) - y(d[1] + d[0]))
		.attr('width', x.bandwidth() - 1)

	svg.append('g')
		.attr('class', 'axis axis--x')
		.attr('transform', `translate(0,${height})`)
		.call(xAxis)

	svg.append('g')
		.attr('class', 'axis axis--y')
		.attr('transform', `translate(${width},0)`)
		.call(yAxis)
})

  </script>
</body>
date	total	disease	wounds	other
4/1854	8571	1	0	5
5/1854	23333	12	0	9
6/1854	28333	11	0	6
7/1854	28772	359	0	23
8/1854	30246	828	1	30
9/1854	30290	788	81	70
10/1854	30643	503	132	128
11/1854	29736	844	287	106
12/1854	32779	1725	114	131
1/1855	32393	2761	83	324
2/1855	30919	2120	42	361
3/1855	30107	1205	32	172
4/1855	32252	477	48	57
5/1855	35473	508	49	37
6/1855	38863	802	209	31
7/1855	42647	382	134	33
8/1855	44614	483	164	25
9/1855	47751	189	276	20
10/1855	46852	128	53	18
11/1855	37853	178	33	32
12/1855	43217	91	18	28
1/1856	44212	42	2	48
2/1856	43485	24	0	19
3/1856	46140	15	0	35
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	.axis text {
	font: 10px sans-serif;
	}

	.axis line,
	.axis path {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.axis--x path {
	display: none;
	}
	</style>
	</head>

	<body>
	<script>
	const causes = ['wounds', 'other', 'disease']
	const parseDate = d3.timeParse('%m/%Y')
	const margin = { top: 20, right: 50, bottom: 30, left: 20 }
	const width = 960 - margin.left -margin.right
	const height = 500 - margin.top - margin.bottom

	const x = d3.scaleBand()
	.rangeRound([0, width])

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

	const z = d3.scaleOrdinal(d3.schemeCategory10)

	const xAxis = d3.axisBottom()
	.scale(x)
	.tickFormat(d3.timeFormat('%b'))

	const yAxis = d3.axisRight()
	.scale(y)

	const svg = d3.select('body')
	.append('svg')
	.attr('width', width + margin.left + margin.right)
	.attr('height', height + margin.top + margin.bottom)
	.append('g')
	.attr('transform', `translate(${margin.left},${margin.top})`)

	const type = (d) => {
	d.date = parseDate(d.date)
	causes.forEach(c => {
	d[c] = +d[c]
	})
	return d
	}

	d3.tsv('crimea.tsv', type, (crimea) => {

	const layers = d3.stack()
	.keys(causes)
	(crimea)

	x.domain(layers[0].map(d => d.data.date))

	y.domain([0, d3.max(layers[layers.length - 1], d => (d[0] + d[1]) )]).nice()

	const layer = svg.selectAll('layer')
	.data(layers)
	.enter()
	.append('g')
	.attr('class', 'layer')
	.style('fill', (d, i) => (z(i) ))

	layer.selectAll('rect')
	.data(d => d)
	.enter()
	.append('rect')
	.attr('x', d => x(d.data.date))
	.attr('y', d => y(d[0] + d[1]))
	.attr('height', d => y(d[0]) - y(d[1] + d[0]))
	.attr('width', x.bandwidth() - 1)

	svg.append('g')
	.attr('class', 'axis axis--x')
	.attr('transform', `translate(0,${height})`)
	.call(xAxis)

	svg.append('g')
	.attr('class', 'axis axis--y')
	.attr('transform', `translate(${width},0)`)
	.call(yAxis)
	})

	</script>
	</body>