Skip to content

Instantly share code, notes, and snippets.

@emeeks
Last active March 18, 2016 03:36
Show Gist options
  • Save emeeks/b734c50af51dc727cacc to your computer and use it in GitHub Desktop.
Save emeeks/b734c50af51dc727cacc to your computer and use it in GitHub Desktop.
Ch. 4, Fig. 24 - D3.js in Action

This is the code for Chapter 4, Figure 24 from D3.js in Action showing a simple stacked graph created using d3.svg.area() and setting its .y() and .y0() functions to derive values based on the stacked value at each point. Note that this does not use d3.layout.stack (which you should seriously consider if you're considering making stacked charts) but that's because the focus here is on understanding how d3.svg.area() works.

<html>
<head>
<title>D3 in Action Chapter 4 - Example 14</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", areaChart)
function areaChart(data) {
xScale = d3.scale.linear().domain([1,10.5]).range([20,480]);
yScale = d3.scale.linear().domain([0,50]).range([480,20]);
xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickSize(480)
.tickValues([1,2,3,4,5,6,7,8,9,10]);
d3.select("svg").append("g").attr("id", "xAxisG").call(xAxis);
yAxis = d3.svg.axis()
.scale(yScale)
.orient("right")
.ticks(10)
.tickSize(480)
.tickSubdivide(true);
d3.select("svg").append("g").attr("id", "yAxisG").call(yAxis);
fillScale = d3.scale.linear()
.domain([0,5])
.range(["lightgray","black"]);
var n = 0;
for (x in data[0]) {
if (x != "day") {
movieArea = d3.svg.area()
.x(function(d) {
return xScale(d.day)
})
.y(function(d) {
return yScale(simpleStacking(d,x))
})
.y0(function(d) {
return yScale(simpleStacking(d,x) - d[x]);
})
.interpolate("basis")
d3.select("svg")
.append("path")
.style("id", x + "Area")
.attr("d", movieArea(data))
.attr("fill", fillScale(n))
.attr("stroke", "none")
.attr("stroke-width", 2)
.style("opacity", .5)
n++;
}
}
function simpleStacking(
incomingData, incomingAttribute) {
var newHeight = 0;
for (x in incomingData) {
if (x != "day") {
newHeight += parseInt(incomingData[x]);
if (x == incomingAttribute) {
break;
}
}
}
return newHeight;
}
}
</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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment