qingwufong/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    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.
forked from emeeks's block: Ch. 4, Fig. 24 - D3.js in Action

  
## index.html
<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>

## movies.csv

          
            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
	<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