Intermediate D3 - Module 2 - Stacked Bars

<!DOCTYPE html>
<head>
<html lang="en">		
    <meta charset="utf-8">
		<title>Will's module 2 exercise</title>
         <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>

#container{
            width: 800px;
            margin-left:auto;
            margin-right:auto;
            margin-top: 100px;
            padding: 20px;
            background-color:white;
            box-shadow: 3px 3px 4px 4px gray;
        }

svg {
            background-color: white;
        }
            
        .axis path,
        .axis line {
            fill: none; stroke: black; shape-rendering: crispEdges; }
            .y.axis path,
            .y.axis text {font-size: 14px;}
            .x.axis path,
            .x.axis line {opacity: 0;}
            .x.axis text {font-size: 12px;}
        
        </style>
    </head>

<body>

</div>
    
<script type="text/javascript">

var w = 800;

var h = 400;

var padding = [110, 50, 30, 100]

var dataset = [
                                
                [
                    { x: 0, y: 407000, name: "United States" },
                    { x: 1, y: 383800, name: "United Kingdom" },
                    { x: 2, y: 200000, name: "France" },
                    { x: 3, y: 2100000, name: "Japan" },
                    { x: 4, y: 240000, name: "Poland" },
                    { x: 5, y: 4900000, name: "Germany" },
                    { x: 6, y: 3500000, name: "China" },
                    { x: 7, y: 11275000, name: "Soviet Union" },
                ],
                [
                    { x: 0, y: 12000, name: "United States" },
                    { x: 1, y: 67100, name: "United Kingdom" },
                    { x: 2, y: 350000, name: "France" },
                    { x: 3, y: 550000, name: "Japan" },
                    { x: 4, y: 4980000, name: "Poland" },
                    { x: 5, y: 1100000, name: "Germany" },
                    { x: 6, y: 9000000, name: "China" },
                    { x: 7, y: 9500000, name: "Soviet Union" },
                ],                
                [
                    { x: 0, y: 0, name: "United States" },
                    { x: 1, y: 0, name: "United Kingdom" },
                    { x: 2, y: 0, name: "France" },
                    { x: 3, y: 0, name: "Japan" },
                    { x: 4, y: 500000, name: "Poland" },
                    { x: 5, y: 1400000, name: "Germany" },
                    { x: 6, y: 5000000, name: "China" },
                    { x: 7, y: 6000000, name: "Soviet Union" },
                ]
                
            ];

var stack = d3.layout.stack();

stack(dataset);

//SCALES
        //something is wrong with scales or functions for y values for bars and axes (bars and axes don't respond correctly to padding changes)

var xScale = d3.scale.ordinal()
                .domain(d3.range(dataset[0].length))
                .rangeRoundBands([padding[3], w-padding[1]], 0.4);
        
            var yScale = d3.scale.linear()
                .domain([0,             
                    30000000
                ])
                .range([0,h-padding[0]]);
                //.range([padding[2],h-padding[2]-padding[0]]);

//unique scale for y axis in order to get axis values going from low to high
            var yScale2 = d3.scale.linear()
                .domain([0,             
                    30000000
                ])
                .range([h-padding[0],0]);

var colors = d3.scale.ordinal()
                .range(["#003B00", "#990000", "#FF0000"]);
        
            var svg = d3.select("#container")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

//creates a var for an x axis at the bottom of the chart
            var xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickSize(3);
            //creates a var for a y axis at the left of the chart
            var yAxis = d3.svg.axis().scale(yScale2).orient("left").ticks(6,",").tickSize(-w+padding[1]+padding[3]);
           // svg.append("g")
            //  .attr("class", "x axis")
             // .attr("transform", "translate(0," + (h - padding[2]) + ")")
              //.call(xAxis);

svg.append("g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + padding[3] + ",90)")
                .call(yAxis);

var groups = svg.selectAll("gx")
                .data(dataset)
                .enter()
                .append("g")
                .style("fill", function(d, i) {
                    return colors(i);
                });

var rects = groups.selectAll("rect")
                .data(function(d) { return d; })
                .enter()
                .append("rect")
                .attr("x", function(d, i) {
                    return xScale(i);
                })
                .attr("width", xScale.rangeBand())

//bar starting position (ensures bars start at bottom)
                .attr("y", function(d) { return h+10-yScale(d.y0)-yScale(d.y)-padding[2];
                })
                .attr("height", function(d) {
                    return yScale(d.y);
                })
                ;

;

//LEGEND
            svg.append("rect")
                .attr("x",w-padding[1]-270)
                .attr("y",40)
                .attr("width",15)
                .attr("height",15)
                .attr("fill","#003B00");

svg.append("rect")
                .attr("x",w-padding[1]-270)
                .attr("y",20)
                .attr("width",15)
                .attr("height",15)
                .attr("fill","#990000");

svg.append("rect")
                .attr("x",w-padding[1]-270)
                .attr("y",0)
                .attr("width",15)
                .attr("height",15)
                .attr("fill","#FF0000");

svg.append("text")
                .attr("x",w-padding[1]-250)
                .attr("y",52)
                .attr("font-size",12)
                .text("Military deaths");

svg.append("text")
                .attr("x",w-padding[1]-250)
                .attr("y",32)
                .attr("font-size",12)
                .text("Civilian deaths from military activity and war crimes");

svg.append("text")
                .attr("x",w-padding[1]-250)
                .attr("y",12)
                .attr("font-size",12)
                .text("Civilian deaths from famine and disease");

//SOURCE LABEL

svg.append("text")
                .attr("x",0)
                .attr("y",30)
                .attr("font-size",35)
                .attr("font-weight","bold")
                .text("World War II Deaths");

svg.append("text")
                .attr("x",0)
                .attr("y",50)
                .attr("font-size",15)
                .text("Selected Countries");

d3.select("#container")
                .append("p3")
                .text("Source: Wikipedia");

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js