wmerrow/index.html

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

        <style type="text/css">

        p1 {font-family: sans-serif; font-size: 35px; font-weight: bold;}
        p2 {color: black; font-size: 18px;}
        p3 {color: lightgray; font-size: 12px;}

        body {
            background-color: whitesmoke; font-family: sans-serif;
        }

        #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 id = "container">


</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);
                })
                ;

            var labels = groups.selectAll("text")
                .data(function(d) { return d; })
                .enter()
                .append("text")
                .attr("x", function(d, i) {
                    return xScale(i) + 23;
                })
                .attr("y", h-padding[2]*.1)
                .attr("fill", "black")
                .attr("font-size",9)
                .attr("text-anchor","middle")
                .text(function(d){return d.name;})

                ;

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

	<style type="text/css">

	p1 {font-family: sans-serif; font-size: 35px; font-weight: bold;}
	p2 {color: black; font-size: 18px;}
	p3 {color: lightgray; font-size: 12px;}

	body {
	background-color: whitesmoke; font-family: sans-serif;
	}

	#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 id = "container">


	</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);
	})
	;

	var labels = groups.selectAll("text")
	.data(function(d) { return d; })
	.enter()
	.append("text")
	.attr("x", function(d, i) {
	return xScale(i) + 23;
	})
	.attr("y", h-padding[2]*.1)
	.attr("fill", "black")
	.attr("font-size",9)
	.attr("text-anchor","middle")
	.text(function(d){return d.name;})

	;

	//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>