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
license: mit |
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
<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, 70]) | |
.range([480, 0]); | |
var heightScale = d3.scale.linear() | |
.domain([0, 70]) | |
.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 | 20 | 8 | 3 | 0 | 0 | 0 | |
2 | 18 | 5 | 1 | 13 | 0 | 0 | |
3 | 14 | 3 | 1 | 10 | 0 | 0 | |
4 | 7 | 3 | 0 | 5 | 27 | 15 | |
5 | 4 | 3 | 0 | 2 | 20 | 14 | |
6 | 3 | 1 | 0 | 0 | 10 | 13 | |
7 | 2 | 0 | 0 | 0 | 8 | 12 | |
8 | 0 | 0 | 0 | 0 | 6 | 11 | |
9 | 0 | 0 | 0 | 0 | 3 | 9 | |
10 | 0 | 0 | 0 | 0 | 1 | 8 |