| license: mit |
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
| <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 |