Ch. 5, Fig. 21 - D3.js in Action

This is the code for Chapter 5, Figure 21 from D3.js in Action showing how to use d3.layout.stack() to create a streamgraph.

forked from emeeks's block: Ch. 5, Fig. 21 - D3.js in Action

<html>
<head>
  <title>D3 in Action Chapter 5 - Example 9</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;
  }
  
</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([0, 10])
    .range([0, 500]);

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

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

stackLayout = d3.layout.stack()
    .offset("silhouette")
    .order("inside-out")
    .values(function(d) { return d.values; });

d3.select("svg").selectAll("path")
    .data(stackLayout(stackData))
    .enter().append("path")
    .style("fill", function(d) {return movieColors(d.name)})
    .attr("d", function(d) { return stackArea(d.values); })

}
</script>
  </footer>

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js