Skip to content

Instantly share code, notes, and snippets.

@michalskop

michalskop/index.html

Last active December 31, 2015 16:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save michalskop/8016812 to your computer and use it in GitHub Desktop.
Save michalskop/8016812 to your computer and use it in GitHub Desktop.
Download ZIP
Czech elections 2013: double bar chart
Raw
index.html
<!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