-
-
Save scotthmurray/26027916dbf2d4d81a17 to your computer and use it in GitHub Desktop.
Stacked bar chart - elections in Poland
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
<link rel="stylesheet" type="text/css" href="main.css"> | |
<title>Parliamentary elections</title> | |
</head> | |
<body> | |
<div id="wrapper"> | |
<div class="text"> | |
<h1>Polish Parliamentary Elections<br />2015</h1> | |
</div> | |
<div class="text"> | |
<p> | |
Results of parliamentary elections in Poland by <a href="https://en.wikipedia.org/wiki/Voivodeships_of_Poland">voivodeship</a>. | |
</p> | |
</div> | |
<script type="text/javascript"> | |
var margin = {top: 25, right: 140, bottom: 130, left: 50}; | |
var width = 800 - margin.left - margin.right, | |
height = 600 - margin.top - margin.bottom; | |
d3.select("div", "#wrapper") | |
.append("div") | |
.attr("id", "content"); | |
var svg = d3.select("#content") | |
.append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
d3.csv("woj.csv", function(data) { | |
var headerRow = ["PiS", "PO", "PSL", "Kukiz", "Nowoczesna", "Others"]; | |
var stacks = d3.layout.stack()(headerRow.map(function(support) { | |
return data.map(function(d) { | |
return {x: d.woj, y: +d[support]}; | |
}); | |
})); | |
var xScale = d3.scale.ordinal() | |
.domain(stacks[0].map(function(d) { return d.x; })) | |
.rangeRoundBands([10, width-10], 0.1); | |
var yScale = d3.scale.linear() | |
.domain([100, 0]) | |
.range([ 0, height]); | |
var colors = d3.scale.ordinal() | |
.domain(headerRow) | |
.range(["#e41a1c","#377eb8","#4daf4a","#984ea3","#ffff33","#a65628"]); | |
var xAxis = d3.svg.axis() | |
.scale(xScale) | |
.tickSize(0) | |
.orient("bottom"); | |
var yAxisLeft = d3.svg.axis() | |
.scale(yScale) | |
.tickSize(5) | |
.tickFormat(function(d) { return d + "%"; }) | |
.orient("left"); | |
var yAxisRight = d3.svg.axis() | |
.scale(yScale) | |
.tickSize(5) | |
.tickFormat(function(d) { return d + "%"; }) | |
.orient("right"); | |
var stack = svg.selectAll("g") | |
.data(stacks) | |
.enter() | |
.append("g") | |
.attr("class", "bar") | |
.style("fill", function(d, i) { return colors(i); }); | |
var rects = stack.selectAll("rect") | |
.data(function(d) { return d; }) | |
.enter() | |
.append("rect") | |
.attr("x", function(d) { return xScale(d.x); }) | |
.attr("y", function(d) { return yScale(d.y0 + d.y); }) | |
.attr("width", xScale.rangeBand()) | |
.attr("height", function(d) { return yScale(d.y0) - yScale(d.y0 + d.y); }); | |
rects.append("text") | |
.attr("x", function(d) { return xScale(d.x); }) | |
.attr("y", function(d) { return yScale(d.y0 + d.y)/2; }) | |
.attr("dy", ".35em") | |
.attr("class", ".bar text") | |
.style("text-anchor", "middle") | |
.text(function(d) { return d.y + "%"}); | |
svg.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(15,0)") | |
.call(yAxisLeft); | |
svg.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(" + (width - 15) + ", 0)") | |
.call(yAxisRight); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis) | |
.selectAll("text").style("text-anchor", "end") | |
.attr("dx", "-.8em") | |
.attr("dy", ".15em") | |
.attr("transform", function(d) { | |
return "rotate(-90)" | |
}); | |
var legend = svg.selectAll(".legend") | |
.data(colors.domain().slice(0, -6).reverse()) | |
.enter().append("g") | |
.attr("class", "legend") | |
.attr("transform", function(d, i) { return "translate(0," + i * 25 + ")"; }); | |
legend.append("rect") | |
.attr("x", width + 40) | |
.attr("width", 20) | |
.attr("height", 20) | |
.style("fill", colors); | |
legend.append("text") | |
.attr ("class", "legend_text") | |
.attr("x", width + 70) | |
.attr("y", 9) | |
.attr("dy", ".35em") | |
.style("text-anchor", "start") | |
.text(function(d) { return d; }); | |
}); | |
</script> | |
<div class="text"> | |
<p class="source"> | |
Data source: <a href="http://parlament2015.pkw.gov.pl/">PKW</a> | |
</p> | |
</div> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
background-color: #d2d0cc; | |
font-family: Helvetica, Arial, sans-serif; | |
font-size: 16px; | |
} | |
h1 { | |
font-size: 28px; | |
font-weight: bold; | |
font-variant: small-caps; | |
text-align: center; | |
line-height: 26px; | |
color: dimgrey; | |
} | |
a { | |
text-decoration: none; | |
} | |
a:link, a:visited { | |
color: dimgrey; | |
border-bottom: 2px dotted dimgrey; | |
} | |
a:hover { | |
color: #ffc04c; | |
border-bottom: 2px dotted #ffc04c; | |
} | |
.source { | |
font-family: Helvetica, Arial, sans-serif; | |
font-size: 12px; | |
text-align: right; | |
} | |
.chart-title { | |
font-size: 20px; | |
font-weight: bold; | |
font-variant: small-caps; | |
letter-spacing: 2px; | |
padding-top: 5px; | |
padding-bottom: 5px; | |
text-align: center; | |
color: dimgrey; | |
} | |
.text { | |
padding: 1px 1%; | |
margin-left: 1%; | |
margin-right: 1%; | |
margin-bottom: 0px; | |
background-color: #ededeb; | |
text-align: center; | |
} | |
.axis path, .axis line { | |
fill: none; | |
stroke: dimgrey; | |
shape-rendering: crispEdges; | |
} | |
.y.axis path, .x.axis path { | |
opacity: 0; | |
} | |
.y.axis line { | |
opacity: 1; | |
} | |
.axis text { | |
font-family: Helvetica, Arial, sans-serif; | |
font-size: 11px; | |
fill: dimgrey; | |
} | |
#wrapper { | |
width: 75%; | |
height: 100%; | |
margin: 0 auto; | |
position: relative; | |
} | |
#content { | |
padding: 1%; | |
background-color: #ededeb; | |
margin: 0 1%; | |
text-align: center; | |
} | |
#buttons { | |
padding: 1%; | |
margin: 0 1%; | |
background-color: #ededeb; | |
text-align: center; | |
} | |
g.bar:hover rect { | |
fill:grey; | |
cursor: crosshair; | |
} | |
g.bar text { | |
font-family: Helvetica, Arial, sans-serif; | |
font-size: 11px; | |
font-weight: bold; | |
} | |
.legend_text { | |
font-family: Helvetica, Arial, sans-serif; | |
font-size: 11px; | |
font-weight: bold; | |
fill: dimgrey; | |
text-align: left; | |
} | |
g.bar:hover text { | |
fill: #ff7b00; | |
} | |
.click { | |
padding: 5px 10px; | |
border: 1px solid dimgrey; | |
background: #FFF; | |
margin: 5px 10px; | |
border-radius: 5px; | |
cursor: pointer; | |
transition: background .2s; | |
outline: 0; | |
} | |
.click:hover { | |
background: #ffc04c; | |
} | |
.click.active { | |
background: #ffc04c; | |
border-color: #ff7b00; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
woj | PiS | PO | PSL | Kukiz | Nowoczesna | Others | |
---|---|---|---|---|---|---|---|
Dolnośląskie | 32.63 | 29.26 | 3.14 | 9.03 | 8.69 | 17.25 | |
Kujawsko-pomorskie | 31.86 | 27.74 | 6.4 | 8.04 | 6.91 | 19.05 | |
Lubelskie | 47.76 | 14.83 | 9.24 | 9.79 | 4.22 | 14.16 | |
Lubuskie | 28.27 | 28.21 | 5.12 | 8.75 | 9.99 | 19.66 | |
Łódzkie | 38.35 | 23.15 | 5.93 | 8.65 | 6.7 | 17.22 | |
Małopolskie | 48.18 | 19.43 | 4.19 | 8.14 | 6.58 | 13.48 | |
Mazowieckie | 38.3 | 22.61 | 4.84 | 7.89 | 9.53 | 16.83 | |
Opolskie | 27.77 | 26.23 | 3.68 | 12.57 | 7.14 | 22.61 | |
Podkarpackie | 55.09 | 13.37 | 5.69 | 9.23 | 4.09 | 12.53 | |
Podlaskie | 45.38 | 16.74 | 8.07 | 9.07 | 5.37 | 15.37 | |
Pomorskie | 30.45 | 34.06 | 3.13 | 7.6 | 8.67 | 16.09 | |
Śląskie | 34.82 | 25.56 | 2.52 | 10.69 | 8.06 | 18.35 | |
Świętokrzyskie | 42.81 | 17.25 | 9.51 | 9.41 | 4.98 | 16.04 | |
Warmińsko-mazurskie | 30.91 | 28.38 | 7.69 | 8.66 | 6.39 | 17.97 | |
Wielkopolskie | 29.61 | 28.45 | 6.62 | 7.77 | 9.32 | 18.23 | |
Zachodniopomorskie | 28.91 | 31.25 | 3.97 | 8.78 | 8.44 | 18.65 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment