| 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
forked from RoxIv's block: Ch. 5, Fig. 22 - D3.js in Action
forked from RoxIv's block: Ch. 5, Fig. 22 - D3.js in Action
forked from RoxIv'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, 14]) | |
| .range([20, 440]); | |
| var yScale = d3.scale.linear() | |
| .domain([0, 30]) | |
| .range([480, 0]); | |
| var heightScale = d3.scale.linear() | |
| .domain([0, 30]) | |
| .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,7,7,5,3,3 | |
| 2,3,0,4,3,3 | |
| 3,1,5,4,3,3 | |
| 4,1,7,2,1,3 | |
| 5,7,0,3,3,3 | |
| 6,7,7,5,0,3 | |
| 7,7,0,0,1,3 | |
| 8,7,7,3,1,3 | |
| 9,1,7,5,3,3 | |
| 10,7,0,0,2,3 | |
| 11,7,0,0,1,3 | |
| 12,5,7,7,1,3 | |
| 13,4,7,5,3,3 | |
| 14,7,7,6,2,3 | |
| 15,5,0,0,2,3 | |
| 16,2,7,5,3,3 | |
| 17,7,0,0,1,3 | |
| 18,5,0,4,3,3 | |
| 19,3,0,0,3,3 | |
| 20,7,5,4,3,3 | |
| 21,4,0,0,1,3 | |
| 22,7,1,5,3,3 | |
| 23,3,0,0,3,3 | |
| 24,0,5,3,1,3 | |
| 25,7,4,2,1,3 | |
| 26,5,7,5,3,3 | |
| 27,1,0,4,3,2 | |
| 28,1,0,0,3,3 | |
| 29,3,7,4,2,3 | |
| 30,1,0,4,1,3 | |
| 31,7,7,5,1,3 | |
| 32,7,0,0,0,3 | |
| 33,7,2,3,0,3 | |
| 34,0,0,0,3,3 | |
| 35,2,6,7,3,3 | |
| 36,1,0,0,2,2 | |
| 37,0,6,5,1,3 | |
| 38,7,0,0,3,3 | |
| 39,5,4,6,3,3 | |
| 40,5,7,6,3,3 | |
| 41,6,4,6,1,3 | |
| 42,7,6,5,1,3 | |
| 43,1,0,0,1,2 | |
| 44,7,0,0,1,3 | |
| 45,7,4,3,1,3 | |
| 46,5,7,0,3,3 | |
| 47,7,0,0,1,3 | |
| 48,1,7,0,1,3 | |
| 49,5,0,0,1,2 | |
| 50,1,0,0,1,3 | |
| 51,1,7,6,3,3 | |
| 52,0,0,0,1,3 | |
| 53,7,0,0,3,3 | |
| 54,6,0,0,1,3 | |
| 55,6,7,5,3,3 | |
| 56,1,7,0,2,3 | |
| 57,1,1,0,1,0 | |
| 58,1,0,0,1,3 | |
| 59,5,0,0,0,3 | |
| 60,7,5,3,1,3 | |
| 61,3,5,0,3,3 | |
| 62,4,5,0,3,3 | |
| 63,4,1,2,2,1 | |
| 64,7,7,0,3,3 | |
| 65,3,0,5,3,3 | |
| 66,5,6,6,3,3 | |
| 67,5,0,0,3,3 | |
| 68,4,0,0,1,1 | |
| 69,7,0,0,3,3 | |
| 70,2,0,0,1,3 | |
| 71,7,0,3,2,3 | |
| 72,1,0,0,1,1 | |
| 73,1,0,4,3,3 | |
| 74,5,0,0,1,3 | |
| 75,7,7,5,1,3 | |
| 76,7,5,6,3,3 | |
| 77,1,2,4,3,2 | |
| 78,1,6,4,3,3 | |
| 79,3,6,5,3,0 | |
| 80,2,0,0,3,1 | |
| 81,1,0,0,1,1 | |
| 82,1,7,7,3,3 | |
| 83,7,7,6,3,3 | |
| 84,7,0,0,3,3 | |
| 85,7,7,3,3,3 | |
| 86,7,0,0,2,3 | |
| 87,3,3,4,1,3 | |
| 88,3,6,3,1,3 | |
| 89,5,6,3,3,3 | |
| 90,7,7,3,3,1 | |
| 91,7,0,0,3,3 | |
| 92,5,0,0,2,3 | |
| 93,0,7,6,3,3 | |
| 94,1,0,4,3,3 | |
| 95,3,6,0,3,3 | |
| 96,7,0,0,0,3 | |
| 97,2,0,0,3,1 | |
| 98,3,0,6,3,3 | |
| 99,3,7,3,2,3 | |
| 100,3,0,0,1,3 | |
| 101,1,6,5,2,3 | |
| 102,3,5,4,3,3 | |
| 103,1,7,6,1,3 | |
| 104,5,6,6,2,3 | |
| 105,7,6,4,2,3 | |
| 106,7,0,0,3,3 | |
| 107,7,6,5,2,3 | |
| 108,7,0,4,1,3 | |
| 109,3,6,5,3,3 | |
| 110,3,0,0,0,1 | |
| 111,1,2,4,2,3 | |
| 112,7,4,5,3,3 | |
| 113,3,7,2,3,3 | |
| 114,7,5,2,2,3 | |
| 115,7,0,0,3,3 | |
| 116,7,0,0,1,3 | |
| 117,7,7,2,3,3 | |
| 118,5,6,6,3,3 | |
| 119,1,6,6,3,3 | |
| 120,2,0,0,3,0 | |
| 121,7,5,4,1,3 | |
| 122,7,6,4,3,3 | |
| 123,1,0,2,3,1 | |
| 124,1,1,0,1,3 | |
| 125,7,0,0,1,3 | |
| 126,3,0,0,3,3 | |
| 127,5,5,4,3,3 | |
| 128,4,0,0,1,3 | |
| 129,7,1,2,1,3 | |
| 130,7,7,4,3,3 | |
| 131,3,7,5,3,3 | |
| 132,7,5,6,1,3 | |
| 133,1,0,0,1,1 | |
| 134,5,5,6,0,3 | |
| 135,7,6,4,1,3 | |
| 136,4,7,4,1,3 | |
| 137,7,0,5,3,3 | |
| 138,1,7,6,3,3 | |
| 139,7,0,0,3,3 | |
| 140,7,0,0,3,0 | |
| 141,1,0,2,1,2 | |
| 142,5,7,7,3,3 | |
| 143,4,7,3,3,3 | |