Skip to content

Instantly share code, notes, and snippets.

@mbaba

mbaba/index.html

Created November 5, 2015 06:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mbaba/53fc3fd74c0f3e9bf43f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mbaba/53fc3fd74c0f3e9bf43f to your computer and use it in GitHub Desktop.
Download ZIP
Results of last parliamentary elections in Poland
Raw
index.html
<!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 w = 800;
var h = 600;
var padding = [20, 30, 20, 175];
var widthScale = d3.scale.linear()
.range([ 0, w - padding[1] - padding[3] ])
.domain([0, 60]);
var heightScale = d3.scale.ordinal()
.rangeRoundBands([ padding[0], h - padding[2] ], 0.15);
var xAxis = d3.svg.axis()
.scale(widthScale)
.tickFormat(function(d) { return d + "%"; })
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left");
d3.select("div", "#wrapper")
.append("div")
.attr("id", "buttons");
d3.select("div", "#wrapper")
.append("div")
.attr("id", "content");
var svg = d3.select("#content")
.append("svg")
.attr("width", w)
.attr("height", h);
var parties = ["PiS", "PO", "PSL", "Kukiz", "Nowoczesna"],
currentParty = parties[0],
transitionDuration = 1000,
textTransitionDuration = 1500;
function setChart() {
d3.csv("woj.csv", function(data) {
data.sort(function(a, b) {
return d3.ascending(+a.kod, +b.kod);
})
heightScale.domain(data.map(function(d) { return d.woj; } ));
var groups = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("class", "bar");
var rects = groups.append("rect")
rects.attr("x", padding[3])
.attr("y", function(d) {
return heightScale(d.woj);
})
.attr("width", 0)
.attr("height", heightScale.rangeBand());
groups.append("text")
updateBarChart(currentParty);
updateText(currentParty);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate("+ padding[3] + "," + (h - padding[2]) + ")")
.call(xAxis)
.selectAll("text")
.attr("x", 1)
.attr("y", 6)
.style("text-anchor", "start");
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
.call(yAxis);
});
}
function setButtons() {
var btn = d3.select("#buttons")
.append("div");
btn.selectAll("div")
.data(parties)
.enter()
.append("button")
.attr("type", "button")
.attr("class", function(d){
var className="click";
if (d === currentParty) {
className += " active";
}
return className;
})
.text(function(d){ return d; })
.on("click", function(d) {
d3.select(".click.active").classed("active", false);
d3.select(this).classed("active", true);
updateBarChart(d);
updateText(d);
})
}
function updateBarChart(currentParty) {
svg.selectAll("rect")
.transition()
.duration(transitionDuration)
.attr("width", function(d) {
return widthScale(d[currentParty]);
});
}
function updateText(currentParty) {
svg.selectAll(".bar text")
.attr("fill-opacity", 0)
.attr("x", function(d) {
return padding[3] + widthScale(d[currentParty]) + 50;
})
.attr("y", function(d) {
return heightScale(d.woj) + 20;
})
.text(function(d) {
return d[currentParty] + "%";
})
.transition()
.duration(textTransitionDuration)
.attr("fill-opacity", 1);
}
setChart();
setButtons();
</script>
<div class="text">
<p class="source">
Data source: <a href="http://parlament2015.pkw.gov.pl/">PKW</a>
</p>
</div>
</div>
</body>
</html>
Raw
main.css
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;
/*text-indent: 10%;*/
}
.axis path, .axis line {
fill: none;
stroke: dimgrey;
shape-rendering: crispEdges;
}
.y.axis path,
.y.axis line {
opacity: 0;
}
.axis text {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
fill: dimgrey;
}
#wrapper {
width: 75%;
height: 100%;
margin: 0 auto;
position: relative;
}
#content {
padding: 1%;
background-color: #ededeb;
margin: 0 1%;
}
#buttons {
padding: 1%;
margin: 0 1%;
background-color: #ededeb;
text-align: center;
}
g.bar {
fill:#ffc04c;
cursor: crosshair;
}
g.bar:hover rect {
fill:#ff7b00;
}
g.bar text {
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: bold;
fill: dimgrey;
text-anchor: end;
}
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;
}
Raw
woj.csv
kod woj PiS PO PSL Kukiz Nowoczesna
2 Dolnośląskie 32.63 29.26 3.14 9.03 8.69
4 Kujawsko-pomorskie 31.86 27.74 6.4 8.04 6.91
6 Lubelskie 47.76 14.83 9.24 9.79 4.22
8 Lubuskie 28.27 28.21 5.12 8.75 9.99
10 Łódzkie 38.35 23.15 5.93 8.65 6.7
12 Małopolskie 48.18 19.43 4.19 8.14 6.58
14 Mazowieckie 38.3 22.61 4.84 7.89 9.53
16 Opolskie 27.77 26.23 3.68 12.57 7.14
18 Podkarpackie 55.09 13.37 5.69 9.23 4.09
20 Podlaskie 45.38 16.74 8.07 9.07 5.37
22 Pomorskie 30.45 34.06 3.13 7.6 8.67
24 Śląskie 34.82 25.56 2.52 10.69 8.06
26 Świętokrzyskie 42.81 17.25 9.51 9.41 4.98
28 Warmińsko-mazurskie 30.91 28.38 7.69 8.66 6.39
30 Wielkopolskie 29.61 28.45 6.62 7.77 9.32
32 Zachodniopomorskie 28.91 31.25 3.97 8.78 8.44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment