D3 Examples - stacked bar

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3: Stack layout stacked bar chart</title>
        <script type="text/javascript" src="//d3js.org/d3.v3.js"></script>
        <style type="text/css">
            /* No style rules here yet */
        </style>
    </head>
    <body>
        <script type="text/javascript">
            //Width and height
            var w = 500;
            var h = 300;
            //Original data
            var dataset = [
                [
                    { x: 0, y: 5 },
                    { x: 1, y: 4 },
                    { x: 2, y: 2 },
                    { x: 3, y: 7 },
                    { x: 4, y: 23 }
                ],
                [
                    { x: 0, y: 10 },
                    { x: 1, y: 12 },
                    { x: 2, y: 19 },
                    { x: 3, y: 23 },
                    { x: 4, y: 100 }
                ],
                [
                    { x: 0, y: 22 },
                    { x: 1, y: 28 },
                    { x: 2, y: 32 },
                    { x: 3, y: 35 },
                    { x: 4, y: 43 }
                ]
            ];
            //Set up stack method
            var stack = d3.layout.stack();
            //Data, stacked
            stack(dataset);
            //Set up scales
            var yScale = d3.scale.ordinal()
                .domain(d3.range(dataset[0].length))
                .rangeRoundBands([0, h], 0.05);
        
            var xScale = d3.scale.linear()
                .domain([0,             
                    d3.max(dataset, function(d) {
                        return d3.max(d, function(d) {
                            return d.y0 + d.y;
                        });
                    })
                ])
                .range([0, w]);
                
            //Easy colors accessible via a 10-step ordinal scale
            var colors = d3.scale.category10();
        
            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
    
            // Add a group for each row of data
            var groups = svg.selectAll("g")
                .data(dataset)
                .enter()
                .append("g")
                .style("fill", function(d, i) {
                    return colors(i);
                });
    
            // Add a rect for each data value
            var rects = groups.selectAll("rect")
                .data(function(d) { return d; })
                .enter()
                .append("rect")
                .attr("y", function(d, i) {
                    return yScale(i);
                })
                .attr("x", function(d) {
                    return xScale(d.y0);
                })
                .attr("width", function(d) {
                    return xScale(d.y);
                })
                .attr("height", yScale.rangeBand());
                        
        </script>
    </body>
</html>
​
    