Skip to content

Instantly share code, notes, and snippets.

@michalskop

michalskop/cz_president_2013_both_2_ring_20000.json

Last active July 27, 2017 17:37
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/4688352 to your computer and use it in GitHub Desktop.
Save michalskop/4688352 to your computer and use it in GitHub Desktop.
Download ZIP
Czech presidential elections
Raw
readme.md

Czech presidential elections 2013 2nd round (towns with population 20000+) Illustration based on results from Czech presidential elections 2013 (2nd round). Showing: delay, proper size of circle stroke calculation (r, r2), tooltips

Raw
cz_president_2013_both_2_ring_20000.json
{"features":[{"id":"554782","coordinates":["14.421111","50.087106"],"name":"Praha","population":{"p6":200472,"p9":389250},"winner":"Schwarzenberg","classname":"schwarzenberg"},{"id":"582786","coordinates":["16.606085","49.193816"],"name":"Brno","population":{"p6":85372,"p9":99828},"winner":"Schwarzenberg","classname":"schwarzenberg"},{"id":"554821","coordinates":["18.291581","49.841743"],"name":"Ostrava","population":{"p6":92460,"p9":50317},"winner":"Zeman","classname":"zeman"},{"id":"554791","coordinates":["13.377767","49.748147"],"name":"Plze\u0148","population":{"p6":39708,"p9":46898},"winner":"Schwarzenberg","classname":"schwarzenberg"},{"id":"500496","coordinates":["17.251466","49.593699"],"name":"Olomouc","population":{"p6":24988,"p9":23406},"winner":"Zeman","classname":"zeman"},{"id":"563889","coordinates":["15.058251","50.769002"],"name":"Liberec","population":{"p6":19796,"p9":26814},"winner":"Schwarzenberg","classname":"schwarzenberg"},{"id":"554804","coordinates":["14.036975","50.660316"],"name":"\u00dast\u00ed nad Labem","population":{"p6":21011,"p9":16025},"winner":"Zeman","classname":"zeman"},{"id":"544256","coordinates":["14.47439","48.973841"],"name":"\u010cesk\u00e9 Bud\u011bjovice","population":{"p6":20743,"p9":24813},"winner":"Schwarzenberg","classname":"schwarzenberg"},{"id":"569810","coordinates":["15.837246","50.21233"],"name":"Hradec Kr\u00e1lov\u00e9","population":{"p6":22766,"p9":26504},"winner":"Schwarzenberg","classname":"schwarzenberg"},{"id":"555134","coordinates":["15.778958","50.039049"],"name":"Pardubice","population":{"p6":22347,"p9":21501},"winner":"Zeman","classname":"zeman"},{"id":"555088","coordinates":["18.422702","49.783083"],"name":"Hav\u00ed\u0159ov","population":{"p6":25562,"p9":8568},"winner":"Zeman","classname":"zeman"},{"id":"585068","coordinates":["17.665842","49.226624"],"name":"Zl\u00edn","population":{"p6":18574,"p9":20086},"winner":"Schwarzenberg","classname":"schwarzenberg"},{"id":"532053","coordinates":["14.102998","50.147821"],"name":"Kladno","population":{"p6":15379,"p9":13052},"winner":"Zeman","classname":"zeman"},{"id":"567027","coordinates":["13.640524","50.502867"],"name":"Most","population":{"p6":16166,"p9":8903},"winner":"Zeman","classname":"zeman"},{"id":"598917","coordinates":["18.542995","49.853942"],"name":"Karvin\u00e1","population":{"p6":18889,"p9":4037},"winner":"Zeman","classname":"zeman"},{"id":"505927","coordinates":["17.90251","49.938873"],"name":"Opava","population":{"p6":15536,"p9":11415},"winner":"Zeman","classname":"zeman"},{"id":"598003","coordinates":["18.350637","49.685506"],"name":"Fr\u00fddek-M\u00edstek","population":{"p6":16788,"p9":8719},"winner":"Zeman","classname":"zeman"},{"id":"562335","coordinates":["14.195645","50.773765"],"name":"D\u011b\u010d\u00edn","population":{"p6":11711,"p9":8779},"winner":"Zeman","classname":"zeman"},{"id":"567442","coordinates":["13.824423","50.641389"],"name":"Teplice","population":{"p6":11004,"p9":8989},"winner":"Zeman","classname":"zeman"},{"id":"586846","coordinates":["15.591191","49.396014"],"name":"Jihlava","population":{"p6":14226,"p9":10721},"winner":"Zeman","classname":"zeman"},{"id":"562971","coordinates":["13.410816","50.462475"],"name":"Chomutov","population":{"p6":11777,"p9":6526},"winner":"Zeman","classname":"zeman"},{"id":"554961","coordinates":["12.865922","50.228046"],"name":"Karlovy Vary","population":{"p6":9910,"p9":11805},"winner":"Schwarzenberg","classname":"schwarzenberg"},{"id":"511382","coordinates":["17.446161","49.453653"],"name":"P\u0159erov","population":{"p6":13819,"p9":7434},"winner":"Zeman","classname":"zeman"},{"id":"589250","coordinates":["17.109298","49.471944"],"name":"Prost\u011bjov","population":{"p6":13028,"p9":7940},"winner":"Zeman","classname":"zeman"},{"id":"563510","coordinates":["15.171279","50.724523"],"name":"Jablonec nad Nisou","population":{"p6":9114,"p9":11243},"winner":"Schwarzenberg","classname":"schwarzenberg"},{"id":"535419","coordinates":["14.903544","50.412332"],"name":"Mlad\u00e1 Boleslav","population":{"p6":9123,"p9":9220},"winner":"Schwarzenberg","classname":"schwarzenberg"},{"id":"590266","coordinates":["15.878082","49.215584"],"name":"T\u0159eb\u00ed\u010d","population":{"p6":11309,"p9":7871},"winner":"Zeman","classname":"zeman"},{"id":"561380","coordinates":["14.53793","50.68659"],"name":"\u010cesk\u00e1 L\u00edpa","population":{"p6":8472,"p9":5608},"winner":"Zeman","classname":"zeman"},{"id":"598810","coordinates":["18.672753","49.677715"],"name":"T\u0159inec","population":{"p6":9775,"p9":5050},"winner":"Zeman","classname":"zeman"},{"id":"552046","coordinates":["14.657882","49.414129"],"name":"T\u00e1bor","population":{"p6":8860,"p9":8445},"winner":"Zeman","classname":"zeman"},{"id":"593711","coordinates":["16.048628","48.855449"],"name":"Znojmo","population":{"p6":10258,"p9":6224},"winner":"Zeman","classname":"zeman"},{"id":"539911","coordinates":["14.010561","49.6892"],"name":"P\u0159\u00edbram","population":{"p6":8509,"p9":7446},"winner":"Zeman","classname":"zeman"},{"id":"599069","coordinates":["18.426842","49.871854"],"name":"Orlov\u00e1","population":{"p6":10243,"p9":2275},"winner":"Zeman","classname":"zeman"},{"id":"579025","coordinates":["15.916048","50.561696"],"name":"Trutnov","population":{"p6":7237,"p9":6941},"winner":"Zeman","classname":"zeman"},{"id":"554481","coordinates":["12.371099","50.079044"],"name":"Cheb","population":{"p6":7287,"p9":4585},"winner":"Zeman","classname":"zeman"},{"id":"533165","coordinates":["15.201039","50.028746"],"name":"Kol\u00edn","population":{"p6":8512,"p9":6070},"winner":"Zeman","classname":"zeman"},{"id":"549240","coordinates":["14.147326","49.308782"],"name":"P\u00edsek","population":{"p6":7214,"p9":7343},"winner":"Schwarzenberg","classname":"schwarzenberg"},{"id":"588296","coordinates":["17.392929","49.297851"],"name":"Krom\u011b\u0159\u00ed\u017e","population":{"p6":8341,"p9":5927},"winner":"Zeman","classname":"zeman"},{"id":"541630","coordinates":["17.993587","49.338041"],"name":"Vset\u00edn","population":{"p6":7048,"p9":5091},"winner":"Zeman","classname":"zeman"},{"id":"523704","coordinates":["16.970455","49.965324"],"name":"\u0160umperk","population":{"p6":7509,"p9":5189},"winner":"Zeman","classname":"zeman"},{"id":"545058","coordinates":["17.970583","49.471163"],"name":"Vala\u0161sk\u00e9 Mezi\u0159\u00ed\u010d\u00ed","population":{"p6":6009,"p9":4922},"winner":"Zeman","classname":"zeman"},{"id":"567256","coordinates":["13.611726","50.598837"],"name":"Litv\u00ednov","population":{"p6":5645,"p9":3644},"winner":"Zeman","classname":"zeman"},{"id":"586021","coordinates":["17.128363","48.84832"],"name":"Hodon\u00edn","population":{"p6":7292,"p9":3986},"winner":"Zeman","classname":"zeman"},{"id":"592005","coordinates":["17.460571","49.067927"],"name":"Uhersk\u00e9 Hradi\u0161t\u011b","population":{"p6":6922,"p9":6077},"winner":"Zeman","classname":"zeman"},{"id":"598933","coordinates":["18.625598","49.746341"],"name":"\u010cesk\u00fd T\u011b\u0161\u00edn","population":{"p6":6988,"p9":3573},"winner":"Zeman","classname":"zeman"},{"id":"597520","coordinates":["17.701973","50.090522"],"name":"Krnov","population":{"p6":7193,"p9":3311},"winner":"Zeman","classname":"zeman"},{"id":"584291","coordinates":["16.880729","48.75896"],"name":"B\u0159eclav","population":{"p6":6998,"p9":4415},"winner":"Zeman","classname":"zeman"},{"id":"599191","coordinates":["18.010388","49.594369"],"name":"Nov\u00fd Ji\u010d\u00edn","population":{"p6":6436,"p9":4174},"winner":"Zeman","classname":"zeman"},{"id":"560286","coordinates":["12.643671","50.179547"],"name":"Sokolov","population":{"p6":5634,"p9":3513},"winner":"Zeman","classname":"zeman"},{"id":"564567","coordinates":["14.131442","50.533538"],"name":"Litom\u011b\u0159ice","population":{"p6":5876,"p9":5364},"winner":"Zeman","classname":"zeman"},{"id":"568414","coordinates":["15.578583","49.606578"],"name":"Havl\u00ed\u010dk\u016fv Brod","population":{"p6":7265,"p9":4856},"winner":"Zeman","classname":"zeman"},{"id":"571164","coordinates":["15.795575","49.951092"],"name":"Chrudim","population":{"p6":6186,"p9":5491},"winner":"Zeman","classname":"zeman"},{"id":"599565","coordinates":["18.14716","49.597824"],"name":"Kop\u0159ivnice","population":{"p6":6232,"p9":3908},"winner":"Zeman","classname":"zeman"},{"id":"550787","coordinates":["13.901639","49.261221"],"name":"Strakonice","population":{"p6":6062,"p9":5054},"winner":"Zeman","classname":"zeman"},{"id":"599051","coordinates":["18.3581","49.904"],"name":"Bohum\u00edn","population":{"p6":6892,"p9":2210},"winner":"Zeman","classname":"zeman"},{"id":"595209","coordinates":["15.936123","49.564997"],"name":"\u017d\u010f\u00e1r nad S\u00e1zavou","population":{"p6":7895,"p9":4296},"winner":"Zeman","classname":"zeman"},{"id":"555771","coordinates":["13.292941","49.394639"],"name":"Klatovy","population":{"p6":5566,"p9":5264},"winner":"Zeman","classname":"zeman"},{"id":"545881","coordinates":["15.001932","49.147091"],"name":"Jind\u0159ich\u016fv Hradec","population":{"p6":5801,"p9":4848},"winner":"Zeman","classname":"zeman"},{"id":"592889","coordinates":["16.998987","49.277268"],"name":"Vy\u0161kov","population":{"p6":7088,"p9":3405},"winner":"Zeman","classname":"zeman"},{"id":"563099","coordinates":["13.447754","50.500469"],"name":"Jirkov","population":{"p6":4480,"p9":2249},"winner":"Zeman","classname":"zeman"},{"id":"533955","coordinates":["15.269119","49.948394"],"name":"Kutn\u00e1 Hora","population":{"p6":5400,"p9":4435},"winner":"Zeman","classname":"zeman"},{"id":"573868","coordinates":["16.16386","50.416326"],"name":"N\u00e1chod","population":{"p6":4367,"p9":5287},"winner":"Schwarzenberg","classname":"schwarzenberg"},{"id":"581283","coordinates":["16.643754","49.363493"],"name":"Blansko","population":{"p6":6711,"p9":3877},"winner":"Zeman","classname":"zeman"}]}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Czech Republic - presidential election 2013 2nd round</title>
<link rel="stylesheet" type="text/css" href="president_2013_ring.css" />
</head>
<body>
<h1>Czech Republic - presidential election 2013 2nd round</h1>
<!-- chart -->
<p id="chart_cz"></p>
<p>Hlasy <span class="zeman">M. Zemana</span> a <span class="schwarzenberg">K. Schwarzenberga</span>. Plocha barevného kruhu odpovídá rozdílu počtu hlasů. (Velikost vnitřního (prázdného) kruhu je dle počtu hlasů kandidáta na 2. místě, celý kruh je dle počtu hlasů kandidáta na 1. místě)</p>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
//subcharts' specifications
var specs = {i: 0, name: 'chart_cz', width: 900, height: 502, lngMin: 12.156, lngMax: 18.84, latMin: 48.6, latMax: 51.023, file: 'cz_president_2013_both_2_ring_20000.json', max_population: 1120000, max_size: 100};
// Chart dimensions.
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = specs.width - margin.right,
height = specs.height - margin.top - margin.bottom;
//Various scales. These domains make assumptions of data, naturally.
var xScale = d3.scale.linear().domain([specs.lngMin, specs.lngMax]).range([0, width]),
yScale = d3.scale.linear().domain([specs.latMin, specs.latMax]).range([height, 0]),
radiusScale = d3.scale.sqrt().domain([0, specs.max_population]).range([0, specs.max_size]);
// Create the SVG container and set the origin.
var svg = d3.select("#"+specs.name).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 + ")");
// Add tooltip div
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
// Load the data.
d3.json(specs.file, function(data) {
var nodes = data.features
.map(function(d) {
return {
x: xScale(d.coordinates[0]),
y: yScale(d.coordinates[1]),
r: (radiusScale(d.population.p6)+radiusScale(d.population.p9))/2,
r2: Math.abs(radiusScale(d.population.p9)-radiusScale(d.population.p6)),
title: d.name + ': ' + d.winner + ' vyhrál ' + Math.max(d.population.p6,d.population.p9) + ':' + Math.min(d.population.p6,d.population.p9),
name: d.name,
id: d.id,
population: d.population,
classname: d.classname
};
});
//enter data
var circles = svg.selectAll("circle").data(nodes);
circles
.enter().append("circle")
.attr("r",function(d) {return d.r;})
.attr("stroke-width", function(d) {return d.r2;})
.attr("cx", function(d) {return d.x;})
.attr("cy", function(d) {return d.y;})
.attr("class", function(d) {return d.classname})
.on("mouseover", mouseover)
.on("mousemove", function(d){mousemove(d);})
.on("mouseout", mouseout)
//delay needs to be done this way (or similar)
// see http://stackoverflow.com/questions/5226285/settimeout-in-a-for-loop-and-pass-i-as-value
var delay = 0;
for (var j=0;j<nodes.length;j++) {
(function(k) {setTimeout(function(){
animateFirstStep(d3.selectAll("circle").filter(function(d,i) { return (k==i); }));
},delay);
delay += Math.max(50*nodes[k].r,5);
})(j);
}
//animation
function animateFirstStep(selected){
selected
.transition()
.delay(0)
.duration(function(d) { return Math.min(1000,d.r*50);})
.attr("r", function(d) {
return Math.max(2*d.r,10);
})
.each("end", animateSecondStep);
};
function animateSecondStep(){
d3.select(this)
.transition()
.duration(function(d) { return Math.min(1000,d.r*50);})
.attr("r", function(d) {
return 0;//d.r;
})
};
});
//tooltips animations
function mouseover() {
div.transition()
.duration(300)
.style("opacity", 1);
}
function mousemove(d) {
div
.text(d.title)
.style("left", (d3.event.pageX ) + "px")
.style("top", (d3.event.pageY) + "px");
}
function mouseout() {
div.transition()
.duration(300)
.style("opacity", 1e-6);
}
</script>
</body>
</html>
Raw
president_2013_ring.css
#chart_cz {
height: 502px;/*502*/
width: 900px;
border: 1px solid;
background-color: black;
}
div.tooltip
{
position: absolute;
text-align: center;
width: 140px;
height: 25px;
padding: 8px;
font: 10px sans-serif;
background: #ffff99;
border: solid 1px #aaa;
border-radius: 8px;
pointer-events: none;
}
circle {
fill: #888;
fill-opacity: 0.01;
stroke-opacity: 0.75;
}
.dienstbier {
stroke: #ffa500;
color: #ffa500;
fill: none;
}
.sobotka {
stroke: #008;
color: #008;
fill: none;
}
.roithova {
stroke: #ff0;
color: #ff0;
fill: none;
}
.fischerova {
stroke: #0a0;
color: #0a0;
fill: none;
}
.franz {
stroke: #000;
color: #000;
fill: none;
}
.schwarzenberg {
stroke: #f0f;
color: #f0f;
fill: #f0f;
}
.zeman {
stroke: #f00;
color: #f00;
fill: #f00;
}
.bobosikova {
stroke: #ff4;
color: #ff4;
fill: none;
}
.fischer {
stroke: #00f;
color: #00f;
fill: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment