Skip to content

Instantly share code, notes, and snippets.

@wmerrow
Last active November 11, 2015 04:12
Show Gist options
  • Save wmerrow/1ba4e1524d7249484d6d to your computer and use it in GitHub Desktop.
Save wmerrow/1ba4e1524d7249484d6d to your computer and use it in GitHub Desktop.
Stacked bar chart - draft 1
<!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">
<p1>World War II Deaths</p1>
<br>
<p2>Selected Countries</p2>
<br>
<br>
</div>
<script type="text/javascript">
var w = 800;
var h = 300;
var padding = [30, 50, 30, 100]
var dataset = [
[
{ 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: 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: 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);
var groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
.style("fill", function(d, i) {
return colors(i);
});
//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] + ",10)")
.call(yAxis);
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);
})
.attr("y", h-padding[2]*.1)
.attr("fill", "black")
.attr("font-size",9)
.text(function(d){return d.name;})
;
//Source text
d3.select("#container")
.append("p3")
.text("Source: Wikipedia");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment