RoxIv/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    This is the code for Chapter 5, Figure 22 from D3.js in Action showing how to use d3.layout.stack() to create a stacked bar chart.
forked from emeeks's block: Ch. 5, Fig. 22 - D3.js in Action
forked from RoxIv's block: Ch. 5, Fig. 22 - D3.js in Action

  
## index.html
<html>
<head>
  <title>D3 in Action Chapter 5 - Example 10</title>
  <meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<style>
  svg {
    height: 500px;
    width: 500px;
    border: 1px solid gray;
  }
  line {
  shape-rendering: crispEdges;
  stroke: #000000;
  }

line.minor  {
  stroke: #777777;
  stroke-dasharray: 2,2;
}

path.domain {
  fill: none;
  stroke: black;
}
</style>
<body>

<div id="viz">
  <svg>
  </svg>
</div>
</body>
  <footer>

<script>
    d3.csv("movies.csv", function(error,data) {dataViz(data)});

  function dataViz(incData) {
    expData = incData;
    stackData = [];

    var xScale = d3.scale.linear()
    .domain([1, 10])
    .range([20, 440]);

    var yScale = d3.scale.linear()
    .domain([0, 30])
    .range([480, 0]);

    var heightScale = d3.scale.linear()
    .domain([0, 30])
    .range([0, 480]);

    var movieColors = d3.scale.category10(["movie1","movie2","movie3","movie4","movie5","movie6"]);

    for (x in incData[0]) {
      if (x != "day") {
        var newMovieObject = {name: x, values: []};
        for (y in incData) {
          newMovieObject.values.push({x: parseInt(incData[y]["day"]) ,y: parseInt(incData[y][x])})
        }
        stackData.push(newMovieObject);
      }
    }

    stackLayout = d3.layout.stack()
    .values(function(d) { return d.values; });

    xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickSize(480).ticks(10);
    d3.select("svg").append("g").attr("id", "xAxisG").call(xAxis);

    yAxis = d3.svg.axis().scale(yScale).orient("right").ticks(8).tickSize(480).tickSubdivide(true);
    d3.select("svg").append("g").attr("id", "yAxisG").call(yAxis);


    d3.select("svg").selectAll("g.bar")
    .data(stackLayout(stackData))
    .enter()
    .append("g")
    .attr("class", "bar")
    .each(function(d) {
    d3.select(this).selectAll("rect")
    .data(d.values)
    .enter()
    .append("rect")
    .attr("x", function(p) { return xScale(p.x) - 15; })
    .attr("y", function(p) { return yScale(p.y + p.y0); })
    .attr("height", function(p) { return heightScale(p.y); })
    .attr("width", 30)
    .style("fill", movieColors(d.name))
    })

  }
</script>
  </footer>

</html>

## movies.csv
day,movie1,movie2,movie3,movie4,movie5,movie6
1,7,7,5,3,3
2,3,0,4,3,3
3,1,5,4,3,3
4,1,7,2,1,3
5,7,0,3,3,3
6,7,7,5,0,3
7,7,0,0,1,3
8,7,7,3,1,3
9,1,7,5,3,3
10,7,0,0,2,3
11,7,0,0,1,3
12,5,7,7,1,3
13,4,7,5,3,3
14,7,7,6,2,3
15,5,0,0,2,3
16,2,7,5,3,3
17,7,0,0,1,3
18,5,0,4,3,3
19,3,0,0,3,3
20,7,5,4,3,3
21,4,0,0,1,3
22,7,1,5,3,3
23,3,0,0,3,3
24,0,5,3,1,3
25,7,4,2,1,3
26,5,7,5,3,3
27,1,0,4,3,2
28,1,0,0,3,3
29,3,7,4,2,3
30,1,0,4,1,3
31,7,7,5,1,3
32,7,0,0,0,3
33,7,2,3,0,3
34,0,0,0,3,3
35,2,6,7,3,3
36,1,0,0,2,2
37,0,6,5,1,3
38,7,0,0,3,3
39,5,4,6,3,3
40,5,7,6,3,3
41,6,4,6,1,3
42,7,6,5,1,3
43,1,0,0,1,2
44,7,0,0,1,3
45,7,4,3,1,3
46,5,7,0,3,3
47,7,0,0,1,3
48,1,7,0,1,3
49,5,0,0,1,2
50,1,0,0,1,3
51,1,7,6,3,3
52,0,0,0,1,3
53,7,0,0,3,3
54,6,0,0,1,3
55,6,7,5,3,3
56,1,7,0,2,3
57,1,1,0,1,0
58,1,0,0,1,3
59,5,0,0,0,3
60,7,5,3,1,3
61,3,5,0,3,3
62,4,5,0,3,3
63,4,1,2,2,1
64,7,7,0,3,3
65,3,0,5,3,3
66,5,6,6,3,3
67,5,0,0,3,3
68,4,0,0,1,1
69,7,0,0,3,3
70,2,0,0,1,3
71,7,0,3,2,3
72,1,0,0,1,1
73,1,0,4,3,3
74,5,0,0,1,3
75,7,7,5,1,3
76,7,5,6,3,3
77,1,2,4,3,2
78,1,6,4,3,3
79,3,6,5,3,0
80,2,0,0,3,1
81,1,0,0,1,1
82,1,7,7,3,3
83,7,7,6,3,3
84,7,0,0,3,3
85,7,7,3,3,3
86,7,0,0,2,3
87,3,3,4,1,3
88,3,6,3,1,3
89,5,6,3,3,3
90,7,7,3,3,1
91,7,0,0,3,3
92,5,0,0,2,3
93,0,7,6,3,3
94,1,0,4,3,3
95,3,6,0,3,3
96,7,0,0,0,3
97,2,0,0,3,1
98,3,0,6,3,3
99,3,7,3,2,3
100,3,0,0,1,3
101,1,6,5,2,3
102,3,5,4,3,3
103,1,7,6,1,3
104,5,6,6,2,3
105,7,6,4,2,3
106,7,0,0,3,3
107,7,6,5,2,3
108,7,0,4,1,3
109,3,6,5,3,3
110,3,0,0,0,1
111,1,2,4,2,3
112,7,4,5,3,3
113,3,7,2,3,3
114,7,5,2,2,3
115,7,0,0,3,3
116,7,0,0,1,3
117,7,7,2,3,3
118,5,6,6,3,3
119,1,6,6,3,3
120,2,0,0,3,0
121,7,5,4,1,3
122,7,6,4,3,3
123,1,0,2,3,1
124,1,1,0,1,3
125,7,0,0,1,3
126,3,0,0,3,3
127,5,5,4,3,3
128,4,0,0,1,3
129,7,1,2,1,3
130,7,7,4,3,3
131,3,7,5,3,3
132,7,5,6,1,3
133,1,0,0,1,1
134,5,5,6,0,3
135,7,6,4,1,3
136,4,7,4,1,3
137,7,0,5,3,3
138,1,7,6,3,3
139,7,0,0,3,3
140,7,0,0,3,0
141,1,0,2,1,2
142,5,7,7,3,3
143,4,7,3,3,3
	<html>
	<head>
	<title>D3 in Action Chapter 5 - Example 10</title>
	<meta charset="utf-8" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	</head>
	<style>
	svg {
	height: 500px;
	width: 500px;
	border: 1px solid gray;
	}
	line {
	shape-rendering: crispEdges;
	stroke: #000000;
	}

	line.minor {
	stroke: #777777;
	stroke-dasharray: 2,2;
	}

	path.domain {
	fill: none;
	stroke: black;
	}
	</style>
	<body>

	<div id="viz">
	<svg>
	</svg>
	</div>
	</body>
	<footer>

	<script>
	d3.csv("movies.csv", function(error,data) {dataViz(data)});

	function dataViz(incData) {
	expData = incData;
	stackData = [];

	var xScale = d3.scale.linear()
	.domain([1, 10])
	.range([20, 440]);

	var yScale = d3.scale.linear()
	.domain([0, 30])
	.range([480, 0]);

	var heightScale = d3.scale.linear()
	.domain([0, 30])
	.range([0, 480]);

	var movieColors = d3.scale.category10(["movie1","movie2","movie3","movie4","movie5","movie6"]);

	for (x in incData[0]) {
	if (x != "day") {
	var newMovieObject = {name: x, values: []};
	for (y in incData) {
	newMovieObject.values.push({x: parseInt(incData[y]["day"]) ,y: parseInt(incData[y][x])})
	}
	stackData.push(newMovieObject);
	}
	}

	stackLayout = d3.layout.stack()
	.values(function(d) { return d.values; });

	xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickSize(480).ticks(10);
	d3.select("svg").append("g").attr("id", "xAxisG").call(xAxis);

	yAxis = d3.svg.axis().scale(yScale).orient("right").ticks(8).tickSize(480).tickSubdivide(true);
	d3.select("svg").append("g").attr("id", "yAxisG").call(yAxis);


	d3.select("svg").selectAll("g.bar")
	.data(stackLayout(stackData))
	.enter()
	.append("g")
	.attr("class", "bar")
	.each(function(d) {
	d3.select(this).selectAll("rect")
	.data(d.values)
	.enter()
	.append("rect")
	.attr("x", function(p) { return xScale(p.x) - 15; })
	.attr("y", function(p) { return yScale(p.y + p.y0); })
	.attr("height", function(p) { return heightScale(p.y); })
	.attr("width", 30)
	.style("fill", movieColors(d.name))
	})

	}
	</script>
	</footer>

	</html>
	day,movie1,movie2,movie3,movie4,movie5,movie6
	1,7,7,5,3,3
	2,3,0,4,3,3
	3,1,5,4,3,3
	4,1,7,2,1,3
	5,7,0,3,3,3
	6,7,7,5,0,3
	7,7,0,0,1,3
	8,7,7,3,1,3
	9,1,7,5,3,3
	10,7,0,0,2,3
	11,7,0,0,1,3
	12,5,7,7,1,3
	13,4,7,5,3,3
	14,7,7,6,2,3
	15,5,0,0,2,3
	16,2,7,5,3,3
	17,7,0,0,1,3
	18,5,0,4,3,3
	19,3,0,0,3,3
	20,7,5,4,3,3
	21,4,0,0,1,3
	22,7,1,5,3,3
	23,3,0,0,3,3
	24,0,5,3,1,3
	25,7,4,2,1,3
	26,5,7,5,3,3
	27,1,0,4,3,2
	28,1,0,0,3,3
	29,3,7,4,2,3
	30,1,0,4,1,3
	31,7,7,5,1,3
	32,7,0,0,0,3
	33,7,2,3,0,3
	34,0,0,0,3,3
	35,2,6,7,3,3
	36,1,0,0,2,2
	37,0,6,5,1,3
	38,7,0,0,3,3
	39,5,4,6,3,3
	40,5,7,6,3,3
	41,6,4,6,1,3
	42,7,6,5,1,3
	43,1,0,0,1,2
	44,7,0,0,1,3
	45,7,4,3,1,3
	46,5,7,0,3,3
	47,7,0,0,1,3
	48,1,7,0,1,3
	49,5,0,0,1,2
	50,1,0,0,1,3
	51,1,7,6,3,3
	52,0,0,0,1,3
	53,7,0,0,3,3
	54,6,0,0,1,3
	55,6,7,5,3,3
	56,1,7,0,2,3
	57,1,1,0,1,0
	58,1,0,0,1,3
	59,5,0,0,0,3
	60,7,5,3,1,3
	61,3,5,0,3,3
	62,4,5,0,3,3
	63,4,1,2,2,1
	64,7,7,0,3,3
	65,3,0,5,3,3
	66,5,6,6,3,3
	67,5,0,0,3,3
	68,4,0,0,1,1
	69,7,0,0,3,3
	70,2,0,0,1,3
	71,7,0,3,2,3
	72,1,0,0,1,1
	73,1,0,4,3,3
	74,5,0,0,1,3
	75,7,7,5,1,3
	76,7,5,6,3,3
	77,1,2,4,3,2
	78,1,6,4,3,3
	79,3,6,5,3,0
	80,2,0,0,3,1
	81,1,0,0,1,1
	82,1,7,7,3,3
	83,7,7,6,3,3
	84,7,0,0,3,3
	85,7,7,3,3,3
	86,7,0,0,2,3
	87,3,3,4,1,3
	88,3,6,3,1,3
	89,5,6,3,3,3
	90,7,7,3,3,1
	91,7,0,0,3,3
	92,5,0,0,2,3
	93,0,7,6,3,3
	94,1,0,4,3,3
	95,3,6,0,3,3
	96,7,0,0,0,3
	97,2,0,0,3,1
	98,3,0,6,3,3
	99,3,7,3,2,3
	100,3,0,0,1,3
	101,1,6,5,2,3
	102,3,5,4,3,3
	103,1,7,6,1,3
	104,5,6,6,2,3
	105,7,6,4,2,3
	106,7,0,0,3,3
	107,7,6,5,2,3
	108,7,0,4,1,3
	109,3,6,5,3,3
	110,3,0,0,0,1
	111,1,2,4,2,3
	112,7,4,5,3,3
	113,3,7,2,3,3
	114,7,5,2,2,3
	115,7,0,0,3,3
	116,7,0,0,1,3
	117,7,7,2,3,3
	118,5,6,6,3,3
	119,1,6,6,3,3
	120,2,0,0,3,0
	121,7,5,4,1,3
	122,7,6,4,3,3
	123,1,0,2,3,1
	124,1,1,0,1,3
	125,7,0,0,1,3
	126,3,0,0,3,3
	127,5,5,4,3,3
	128,4,0,0,1,3
	129,7,1,2,1,3
	130,7,7,4,3,3
	131,3,7,5,3,3
	132,7,5,6,1,3
	133,1,0,0,1,1
	134,5,5,6,0,3
	135,7,6,4,1,3
	136,4,7,4,1,3
	137,7,0,5,3,3
	138,1,7,6,3,3
	139,7,0,0,3,3
	140,7,0,0,3,0
	141,1,0,2,1,2
	142,5,7,7,3,3
	143,4,7,3,3,3