Last active
December 31, 2015 16:58
-
-
Save michalskop/8016812 to your computer and use it in GitHub Desktop.
Czech elections 2013: double bar chart
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> | |
<title>Czech general elections 2013</title> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
<style> | |
.chart text { | |
fill: white; | |
font: 11px sans-serif; | |
text-anchor: end; | |
} | |
.axis { | |
font: 10px sans-serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.x.axis path { | |
display: none; | |
} | |
.limit-line { | |
stroke: Black; | |
width: 3px; | |
} | |
.label { | |
font: 8px sans-serif; | |
} | |
.label2 { | |
font: 7px sans-serif; | |
} | |
.cssd { | |
fill: DarkOrange; | |
} | |
.ods { | |
fill: Blue; | |
} | |
.ano-2011 { | |
fill: CornflowerBlue; | |
} | |
.kscm { | |
fill: DarkRed; | |
} | |
.top-09 { | |
fill: DarkViolet; | |
} | |
.usvit { | |
fill: GreenYellow; | |
} | |
.kdu-csl { | |
fill: Gold; | |
} | |
.zeleni { | |
fill: Green; | |
} | |
.pirati { | |
fill: Black; | |
} | |
.svobodni { | |
fill: DarkGreen; | |
} | |
.ostatni { | |
fill: Gray; | |
} | |
.old { | |
fill-opacity: 0.33; | |
} | |
/* because of bootstrap*/ | |
svg { | |
position: fixed; | |
top: 180px; | |
} | |
</style> | |
<body> | |
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> | |
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> | |
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> | |
<div class="container"> | |
<div class="navbar-header"> | |
<a class="navbar-brand" href="#">Czech general elections 2013 - results</a> | |
</div> | |
</div> | |
</div> | |
<div style="position:fixed;top:50px;z-index:1000;"> | |
<div class="alert alert-info" >Recreation of "Wikipedia-style" charts of elections results (e.g. <em><a href="http://de.wikipedia.org/wiki/Nationalratswahl_in_Österreich_2013">here</a></em>) in D3.<br/> | |
Full color: results from 2013<br/> | |
Opaque color: results from 2010</div> | |
</div> | |
<script> | |
//based on http://bl.ocks.org/mbostock/raw/3885304/ | |
var data = [ | |
{name: 'ČSSD', friendly_name: 'cssd', gain2013: .2045, gain2010: .2208}, | |
{name: 'ANO 2011', friendly_name: 'ano-2011', gain2013: .1865, gain2010: 0}, | |
{name: 'KSČM', friendly_name: 'kscm', gain2013: .1491, gain2010: .1127}, | |
{name: 'TOP 09', friendly_name: 'top-09', gain2013: .1199, gain2010: .1670}, | |
{name: 'ODS', friendly_name: 'ods', gain2013: .0772, gain2010: .2022}, | |
{name: 'Úsvit', friendly_name: 'usvit', gain2013: .0688, gain2010: 0}, | |
{name: 'KDU-ČSL', friendly_name: 'kdu-csl', gain2013: .0678, gain2010: .0439}, | |
{name: 'Zelení', friendly_name: 'zeleni', gain2013: .0319, gain2010: .0246}, | |
{name: 'Piráti', friendly_name: 'pirati', gain2013: .0266, gain2010: .0080}, | |
{name: 'Svobodní', friendly_name: 'svobodni', gain2013: .0246, gain2010: .0072}, | |
{name: 'Ostatní', friendly_name: 'ostatni', gain2013: .0431, gain2010: .2073}, | |
]; | |
var names = []; | |
for (i = 0; i < data.length; i++) { | |
names.push(data[i].name); | |
} | |
var margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
width = 600 - margin.left - margin.right, | |
height = 200 - margin.top - margin.bottom; | |
var x = d3.scale.ordinal() | |
.rangeRoundBands([0, width], .25) | |
.domain(names); | |
var y = d3.scale.linear() | |
.range([height, 0]) | |
.domain([0,0.25]); | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.orient("left") | |
.ticks(5, "%"); | |
var svg = d3.select("body").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 + ")"); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis) | |
.append("text") | |
.attr("transform", "rotate(-90)") | |
.attr("y", 6) | |
.attr("dy", ".71em") | |
.style("text-anchor", "end"); | |
//.text("Hlasy"); | |
svg.selectAll(".e2010") | |
.data(data) | |
.enter().append("rect") | |
.attr("class", function(d) {return "bar old " + d.friendly_name}) | |
.attr("x", function(d) { return x(d.name) - x.rangeBand()/5; }) | |
.attr("width", x.rangeBand()) | |
.attr("y", function(d) { return y(d.gain2010); }) | |
.attr("height", function(d) { return height - y(d.gain2010); }) | |
.attr("title",function(d) {title = "2010: " + Math.round(100*d.gain2010) + " %"; return title;}); | |
svg.selectAll(".e2013") | |
.data(data) | |
.enter().append("rect") | |
.attr("class", function(d) {return "bar new " + d.friendly_name}) | |
.attr("x", function(d) { return x(d.name); }) | |
.attr("width", x.rangeBand()) | |
.attr("y", function(d) { return y(d.gain2013); }) | |
.attr("height", function(d) { return height - y(d.gain2013); }) | |
.attr("title",function(d) {title = "2013: " + Math.round(100*d.gain2013) + " %"; return title;}); | |
svg.append("line") | |
.attr("x1", 0) | |
.attr("y1", function() { return y(0.05) }) | |
.attr("x2", width) | |
.attr("y2", function() { return y(0.05) }) | |
.attr("class","limit-line"); | |
svg.selectAll(".text") | |
.data(data) | |
.enter() | |
.append("text") | |
.text(function(d){return Math.round(10000*d.gain2013)/100 + "%";}) | |
.attr("text-anchor", "middle") | |
.attr("x", function(d, i) { return i * (width / data.length) + (width / data.length) / 2; }) | |
.attr("y", function(d) { return y(Math.max(d.gain2010,d.gain2013)) - 20; }) | |
.attr("class","label"); | |
svg.selectAll(".text") | |
.data(data) | |
.enter() | |
.append("text") | |
.text(function(d){return "(" + Math.round(10000*d.gain2010)/100 + "%)";}) | |
.attr("text-anchor", "middle") | |
.attr("x", function(d, i) { return i * (width / data.length) + (width / data.length) / 2; }) | |
.attr("y", function(d) { return y(Math.max(d.gain2010,d.gain2013)) - 10; }) | |
.attr("class","label2"); | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment