index.html
<!DOCTYPE html>
<html>
<head>
<title>Slovensko - voľby starostov a primátorov 2014</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/journal/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="d3.tip.js"></script>
<style type="text/css">
.leaflet-tile-pane {
opacity: .4
}
.leaflet-container {
background-color: #fff;
}
html, body{
width: 100%;
height: 100%;
}
#map {
width: 100%;
height: 90%;
}
circle {
cursor: pointer;
fill-opacity: 0.8;
stroke-opacity: 0.01;
}
circle:hover {
stroke-opacity: 1;
}
.towns {
width: 100000px;
height: 100000px;
}
svg:not(:root) {
overflow: visible;
}
.d3-tip {
line-height: 1;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
.d3-tip small {
font-size: 0.5em;
}
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
.stronger {
color: yellow;
font-weight: bold;
}
.navbar {
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="navbar navbar-default" role=navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">Slovensko - voľby starostov a primátorov 2014</a>
</div>
</div>
</div>
<div style="position:fixed;top:125px;z-index:1000;">
<div class="alert alert-info" style="float:left;">
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#888"></svg> Nezávislí kandidáti<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#A70004"></svg> SMER-SD<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#0099bF"></svg> KDH<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#004e00"></svg> SMK-MKP<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#ff7f0e"></svg> Most-Híd<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#9744c7"></svg> SMER+KDH<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#224766"></svg> Sieť<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#301C00"></svg> SMER+SNS<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#aaf"></svg> Iné<br/>
</div>
</div>
<div id="map"></div>
<script type="text/javascript">
var map = L.map('map', {'zoomControl':false}).setView([48.55,19.467773], 8);
L.tileLayer('//{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', {
attribution: 'CC-BY Michal Škop | © <a href="//osm.org/copyright">OpenStreetMap</a> contributors | dáta Štatistický úrad SR'
}).addTo(map);
L.control.zoom({"position":"topright"}).addTo(map);
var svg = d3.select(map.getPanes().overlayPane).append("svg").attr("class", "towns");
var radiusScale = d3.scale.sqrt().domain([0, 400000]).range([0, 60]);
var tip = changetooltip();
svg.call(tip);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
d3.csv('sk.csv', function(data) {
d3.json('sk_mayor_votes.json',function(mayors) {
nodes = data
.map(function(d) {
mpoint = projectPoint(d.lat,d.long);
return {
x: mpoint.x,
y: mpoint.y,
r: radiusScale(d.size),
name: d.name,
value: d,
mayor: mayors[d.id]
};
});
var circle = svg.selectAll("svg")
.data(nodes)
.enter().append("svg:svg")
.append("svg:circle")
.attr("class","town")
.attr("cx", function (d) {return d.x})
.attr("cy", function (d) {return d.y})
.attr("r", function (d) {return d.r})
.attr("fill", function (d) {
if (typeof(d.mayor) != 'undefined') {
if (typeof(d.mayor[0].color) == 'undefined') return '#ccf'; else return d.mayor[0].color;
} else {
return '#ccf';
}
})
.on("mouseover", tip.show)
.on("mouseout", tip.hide);
map.on("viewreset", changeit);
map.on("moveend", changeit);
map.on("zoomstart", hidepoints);
$(".towns").show(100);
});
});
function matrixVal(s) {
return s.split('(')[1].split(')')[0].split(',');
}
function hidepoints() {
$(".towns").hide();
}
function changeit() {
var s = $(".leaflet-map-pane").css("-webkit-transform");
if (typeof(s) == 'undefined')
var s = $(".leaflet-map-pane").css("transform");
var sar = matrixVal(s);
$(".towns").css('left',-1*parseFloat(sar[4]));
$(".towns").css('top',-1*parseFloat(sar[5]));
d3.selectAll(".town").each(function(d,i) {
mpoint = projectPoint(d.value.lat,d.value.long,d.value.id);
$(this)
.attr("r",
radiusScale(d.value.size) * Math.pow(map.getZoom(),3) / 512
)
.attr("cx", mpoint.x)
.attr("cy", mpoint.y);
$(this).attr('transform',"translate(" + sar[4] + "," + sar[5] + ")");
});
$(".towns").show(300);
}
function projectPoint(x, y, id) {
var point = map.latLngToLayerPoint(new L.LatLng(x, y));
if (!isNumeric(point.x)) alert(id);
return point;
}
function changetooltip() {
tip = d3.tip().attr('class', 'd3-tip').html(function(d) {
html = '<span class="stronger">' + d.name + "</span><br>";
if (typeof(d.mayor) != 'undefined') {
$.each(d.mayor, function(i,v) {
if (i == 0) {
html += '<strong>'+v.name+' <small>(' + v.party + ')</small>: ' + parseInt(v.n).toLocaleString() + '</strong><br>';
} else {
html += v.name+' <small>(' + v.party + ')</small>: ' + parseInt(v.n).toLocaleString() + '<br>';
}
});
}
return html;
});
return tip;
}
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-8592359-13', 'ocks.org');
ga('send', 'pageview');
</script>
</body>
</html>
automatization.md
Automation
==============
1. Git
---
set up Github project (manual)
set timeout for credentials:
git config --global credential.helper 'cache --timeout 3600'
2. set up cron (every minute)
--------------------------
$ crontab -e
or (run as a different user)
$ crontab -u www-data -e
in crontab
* * * * * /usr/bin/python3 /home/michal/dev/sk-local-2014/downloads/download_2.py
* * * * * /usr/bin/python3 /home/michal/dev/sk-local-2014/csv2json_media2.py
* * * * * /bin/bash /home/michal/project/gist/94f985cf439ea9212d0f/autopush.sh
3. in python (whole path so it is ok from cron)
----------------------------------------------
path = "/home/michal/dev/sk-local-2014/"
with open(path + 'sk-ba.csv', 'w') as outfile:
csv_writer = csv.writer(outfile,delimiter=",")
for row in datacsv:
...
#copy to gist directory
import shutil
shutil.copy2(path + 'sk_mayor.csv','/home/michal/project/gist/94f985cf439ea9212d0f')
4. shell script to push to github (autopush.sh)
---------------------------------------------
#!/bin/bash
cd /home/michal/project/gist/94f985cf439ea9212d0f
git add -A
git commit -m "update"
# needed to be authentized
# using git config --global credential.helper 'cache --timeout 3600'
# also good for security
git push
autopush.sh
#!/bin/bash
cd /home/michal/project/gist/94f985cf439ea9212d0f
git add -A
git commit -m "update"
# needed to be authentized
# using git config --global credential.helper 'cache --timeout 3600'
# also good for security
git push
d3.tip.js
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(['d3'], factory)
} else {
root.d3.tip = factory(root.d3)
}
}(this, function (d3) {
return function() {
var direction = d3_tip_direction,
offset = d3_tip_offset,
html = d3_tip_html,
node = initNode(),
svg = null,
point = null,
target = null
function tip(vis) {
svg = getSVGNode(vis)
point = svg.createSVGPoint()
document.body.appendChild(node)
}
tip.show = function() {
var args = Array.prototype.slice.call(arguments)
if(args[args.length - 1] instanceof SVGElement) target = args.pop()
var content = html.apply(this, args),
poffset = offset.apply(this, args),
dir = direction.apply(this, args),
nodel = d3.select(node),
i = directions.length,
coords,
scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
nodel.html(content)
.style({ opacity: 1, 'pointer-events': 'all' })
while(i--) nodel.classed(directions[i], false)
coords = direction_callbacks.get(dir).apply(this)
nodel.classed(dir, true).style({
top: (coords.top + poffset[0]) + scrollTop + 'px',
left: (coords.left + poffset[1]) + scrollLeft + 'px'
})
return tip
}
tip.hide = function() {
nodel = d3.select(node)
nodel.style({ opacity: 0, 'pointer-events': 'none' })
return tip
}
tip.attr = function(n, v) {
if (arguments.length < 2 && typeof n === 'string') {
return d3.select(node).attr(n)
} else {
var args = Array.prototype.slice.call(arguments)
d3.selection.prototype.attr.apply(d3.select(node), args)
}
return tip
}
tip.style = function(n, v) {
if (arguments.length < 2 && typeof n === 'string') {
return d3.select(node).style(n)
} else {
var args = Array.prototype.slice.call(arguments)
d3.selection.prototype.style.apply(d3.select(node), args)
}
return tip
}
tip.direction = function(v) {
if (!arguments.length) return direction
direction = v == null ? v : d3.functor(v)
return tip
}
tip.offset = function(v) {
if (!arguments.length) return offset
offset = v == null ? v : d3.functor(v)
return tip
}
tip.html = function(v) {
if (!arguments.length) return html
html = v == null ? v : d3.functor(v)
return tip
}
function d3_tip_direction() { return 'n' }
function d3_tip_offset() { return [0, 0] }
function d3_tip_html() { return ' ' }
var direction_callbacks = d3.map({
n: direction_n,
s: direction_s,
e: direction_e,
w: direction_w,
nw: direction_nw,
ne: direction_ne,
sw: direction_sw,
se: direction_se
}),
directions = direction_callbacks.keys()
function direction_n() {
var bbox = getScreenBBox()
return {
top: bbox.n.y - node.offsetHeight,
left: bbox.n.x - node.offsetWidth / 2
}
}
function direction_s() {
var bbox = getScreenBBox()
return {
top: bbox.s.y,
left: bbox.s.x - node.offsetWidth / 2
}
}
function direction_e() {
var bbox = getScreenBBox()
return {
top: bbox.e.y - node.offsetHeight / 2,
left: bbox.e.x
}
}
function direction_w() {
var bbox = getScreenBBox()
return {
top: bbox.w.y - node.offsetHeight / 2,
left: bbox.w.x - node.offsetWidth
}
}
function direction_nw() {
var bbox = getScreenBBox()
return {
top: bbox.nw.y - node.offsetHeight,
left: bbox.nw.x - node.offsetWidth
}
}
function direction_ne() {
var bbox = getScreenBBox()
return {
top: bbox.ne.y - node.offsetHeight,
left: bbox.ne.x
}
}
function direction_sw() {
var bbox = getScreenBBox()
return {
top: bbox.sw.y,
left: bbox.sw.x - node.offsetWidth
}
}
function direction_se() {
var bbox = getScreenBBox()
return {
top: bbox.se.y,
left: bbox.e.x
}
}
function initNode() {
var node = d3.select(document.createElement('div'))
node.style({
position: 'absolute',
top: 0,
opacity: 0,
'pointer-events': 'none',
'box-sizing': 'border-box'
})
return node.node()
}
function getSVGNode(el) {
el = el.node()
if(el.tagName.toLowerCase() == 'svg')
return el
return el.ownerSVGElement
}
function getScreenBBox() {
var targetel = target || d3.event.target,
bbox = {},
matrix = targetel.getScreenCTM(),
tbbox = targetel.getBBox(),
width = tbbox.width,
height = tbbox.height,
x = tbbox.x,
y = tbbox.y
point.x = x
point.y = y
bbox.nw = point.matrixTransform(matrix)
point.x += width
bbox.ne = point.matrixTransform(matrix)
point.y += height
bbox.se = point.matrixTransform(matrix)
point.x -= width
bbox.sw = point.matrixTransform(matrix)
point.y -= height / 2
bbox.w = point.matrixTransform(matrix)
point.x += width
bbox.e = point.matrixTransform(matrix)
point.x -= width / 2
point.y -= height / 2
bbox.n = point.matrixTransform(matrix)
point.y += height
bbox.s = point.matrixTransform(matrix)
return bbox
}
return tip
};
}));
sk-ba.csv
id,name,lat,long,size
529460,Bratislava-Petržalka,48.1108879,17.1115635,167459
529320,Bratislava-Ružinov,48.1575967,17.1627978,114135
528595,Bratislava-Staré Mesto,48.148598,17.1077475,66619
529346,Bratislava-Nové Mesto,48.1671515,17.1368492,59078
529389,Bratislava-Dúbravka,48.1888276,17.0290285,53124
529397,Bratislava-Karlova Ves,48.1591643,17.0518443,50726
529311,Bratislava-Podunajské Biskupice,48.1251057,17.2107902,31325
529354,Bratislava-Rača,48.2120284,17.1546065,30365
529338,Bratislava-Vrakuňa,48.1421639,17.2129005,28486
529371,Bratislava-Devínska Nová Ves,48.2112712,16.9734671,24455
529419,Bratislava-Lamač,48.1938879,17.0474565,10323
529362,Bratislava-Vajnory,48.2030662,17.2052549,7227
529427,Bratislava-Záhorská Bystrica,48.241632,17.0387275,5494
529494,Bratislava-Rusovce,48.0560336,17.1450367,4809
529443,Bratislava-Jarovce,48.0650577,17.1140119,2832
529401,Bratislava-Devín,48.1737498,16.9844742,1902
529435,Bratislava-Čunovo,48.0307363,17.1994899,1739
sk-ba.html
<!DOCTYPE html>
<html>
<head>
<title>Bratislava - voľby starostov 2014</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/journal/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="d3.tip.js"></script>
<style type="text/css">
.leaflet-tile-pane {
opacity: .4
}
.leaflet-container {
background-color: #fff;
}
html, body{
width: 100%;
height: 100%;
}
#map {
width: 100%;
height: 90%;
}
circle {
cursor: pointer;
fill-opacity: 0.8;
stroke-opacity: 0.01;
}
circle:hover {
stroke-opacity: 1;
}
.towns {
width: 100000px;
height: 100000px;
}
svg:not(:root) {
overflow: visible;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
.stronger {
color: yellow;
}
.navbar {
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="navbar navbar-default" role=navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">Bratislava - voľby starostov 2014</a>
</div>
</div>
</div>
<div style="position:fixed;top:125px;z-index:1000;">
<div class="alert alert-info" style="float:left;">
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#444"></svg> Nezávislí kandidáti<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#A70004"></svg> SMER-SD<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#0099bF"></svg> KDH<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#008"></svg> SDKÚ-DS<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#000"></svg> SNS<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#224766"></svg> Sieť<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#004e00"></svg> SMK-MKP<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#ff7f0e"></svg> Most-Híd
</div>
</div>
<div id="map"></div>
<script type="text/javascript">
var map = L.map('map', {'zoomControl':false}).setView([48.148598,17.1077475], 11);
L.tileLayer('//{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', {
attribution: 'CC-BY Michal Škop | © <a href="//osm.org/copyright">OpenStreetMap</a> contributors | dáta Štatistický úrad SR'
}).addTo(map);
L.control.zoom({"position":"topright"}).addTo(map);
var svg = d3.select(map.getPanes().overlayPane).append("svg").attr("class", "towns");
var radiusScale = d3.scale.sqrt().domain([0, 150000]).range([0, 60]);
var tip = changetooltip();
svg.call(tip);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
d3.csv('sk-ba.csv', function(data) {
d3.csv('sk-ba_mayor.csv',function(mayors) {
data = data.joinWith(mayors, 'id');
nodes = data
.map(function(d) {
mpoint = projectPoint(d.lat,d.long);
return {
x: mpoint.x,
y: mpoint.y,
r: radiusScale(d.size),
name: d.name,
value: d
};
});
var circle = svg.selectAll("svg")
.data(nodes)
.enter().append("svg:svg")
.append("svg:circle")
.attr("class","town")
.attr("cx", function (d) {return d.x})
.attr("cy", function (d) {return d.y})
.attr("r", function (d) {return d.r})
.attr("fill", function (d) {
if (typeof(d.value.color) == 'undefined') return '#ccf'; else return d.value.color;
})
.on("mouseover", tip.show)
.on("mouseout", tip.hide);
map.on("viewreset", changeit);
map.on("moveend", changeit);
map.on("zoomstart", hidepoints);
$(".towns").show(100);
});
});
function matrixVal(s) {
return s.split('(')[1].split(')')[0].split(',');
}
function hidepoints() {
$(".towns").hide();
}
function changeit() {
var s = $(".leaflet-map-pane").css("-webkit-transform");
if (typeof(s) == 'undefined')
var s = $(".leaflet-map-pane").css("transform");
var sar = matrixVal(s);
$(".towns").css('left',-1*parseFloat(sar[4]));
$(".towns").css('top',-1*parseFloat(sar[5]));
d3.selectAll(".town").each(function(d,i) {
mpoint = projectPoint(d.value.lat,d.value.long);
$(this)
.attr("r",
radiusScale(d.value.size) * Math.pow(map.getZoom(),3) / 1331
)
.attr("cx", mpoint.x)
.attr("cy", mpoint.y);
$(this).attr('transform',"translate(" + sar[4] + "," + sar[5] + ")");
});
$(".towns").show(300);
}
function projectPoint(x, y) {
var point = map.latLngToLayerPoint(new L.LatLng(x, y));
return point;
}
function changetooltip() {
tip = d3.tip().attr('class', 'd3-tip').html(function(d) {
html = '<span class="stronger">' + d.name + "</span><br>";
if (typeof(d.value.mayor) != 'undefined') {
html += d.value.mayor + '<br>';
html += d.value.party;
}
else
html += 'Ešte nie je rozhodnuté';
return html;
});
return tip;
}
if (!Array.prototype.joinWith) {
+function () {
Array.prototype.joinWith = function(that, by, select, omit) {
var together = [], length = 0;
if (select) select.map(function(x){select[x] = 1;});
function fields(it) {
var f = {}, k;
for (k in it) {
if (!select) { f[k] = 1; continue; }
if (omit ? !select[k] : select[k]) f[k] = 1;
}
return f;
}
function add(it) {
var pkey = '.'+it[by], pobj = {};
if (!together[pkey]) together[pkey] = pobj,
together[length++] = pobj;
pobj = together[pkey];
for (var k in fields(it))
pobj[k] = it[k];
}
this.map(add);
that.map(add);
return together;
}
}();
}
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-8592359-13', 'ocks.org');
ga('send', 'pageview');
</script>
</body>
</html>
sk-ba2.html
<!DOCTYPE html>
<html>
<head>
<title>Bratislava - voľby starostov 2014</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/journal/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="d3.tip.js"></script>
<style type="text/css">
.leaflet-tile-pane {
opacity: .4
}
.leaflet-container {
background-color: #fff;
}
html, body{
width: 100%;
height: 100%;
}
#map {
width: 100%;
height: 90%;
}
circle {
cursor: pointer;
fill-opacity: 0.8;
stroke-opacity: 0.01;
}
circle:hover {
stroke-opacity: 1;
}
.towns {
width: 100000px;
height: 100000px;
}
svg:not(:root) {
overflow: visible;
}
.d3-tip {
line-height: 1;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
.d3-tip small {
font-size: 0.5em;
}
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
.stronger {
color: yellow;
font-weight: bold;
}
.navbar {
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="navbar navbar-default" role=navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">Bratislava - voľby starostov 2014</a>
</div>
</div>
</div>
<div style="position:fixed;top:125px;z-index:1000;">
<div class="alert alert-info" style="float:left;">
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#888"></svg> Nezávislí kandidáti<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#A70004"></svg> SMER-SD<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#0099bF"></svg> KDH<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#004e00"></svg> SMK-MKP<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#ff7f0e"></svg> Most-Híd<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#9744c7"></svg> SMER+KDH<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#224766"></svg> Sieť<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#301C00"></svg> SMER+SNS<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#aaf"></svg> Iné<br/>
</div>
</div>
<div id="map"></div>
<script type="text/javascript">
var map = L.map('map', {'zoomControl':false}).setView([48.148598,17.1077475], 11);
L.tileLayer('//{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', {
attribution: 'CC-BY Michal Škop | © <a href="//osm.org/copyright">OpenStreetMap</a> contributors | dáta Štatistický úrad SR'
}).addTo(map);
L.control.zoom({"position":"topright"}).addTo(map);
var svg = d3.select(map.getPanes().overlayPane).append("svg").attr("class", "towns");
var radiusScale = d3.scale.sqrt().domain([0, 150000]).range([0, 60]);
var tip = changetooltip();
svg.call(tip);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
d3.csv('sk-ba.csv', function(data) {
d3.json('sk-ba_mayor_votes.json',function(mayors) {
nodes = data
.map(function(d) {
mpoint = projectPoint(d.lat,d.long);
return {
x: mpoint.x,
y: mpoint.y,
r: radiusScale(d.size),
name: d.name,
value: d,
mayor: mayors[d.id]
};
});
var circle = svg.selectAll("svg")
.data(nodes)
.enter().append("svg:svg")
.append("svg:circle")
.attr("class","town")
.attr("cx", function (d) {return d.x})
.attr("cy", function (d) {return d.y})
.attr("r", function (d) {return d.r})
.attr("fill", function (d) {
if (typeof(d.mayor) != 'undefined') {
if (typeof(d.mayor[0].color) == 'undefined') return '#ccf'; else return d.mayor[0].color;
} else {
return '#ccf';
}
})
.on("mouseover", tip.show)
.on("mouseout", tip.hide);
map.on("viewreset", changeit);
map.on("moveend", changeit);
map.on("zoomstart", hidepoints);
$(".towns").show(100);
});
});
function matrixVal(s) {
return s.split('(')[1].split(')')[0].split(',');
}
function hidepoints() {
$(".towns").hide();
}
function changeit() {
var s = $(".leaflet-map-pane").css("-webkit-transform");
if (typeof(s) == 'undefined')
var s = $(".leaflet-map-pane").css("transform");
var sar = matrixVal(s);
$(".towns").css('left',-1*parseFloat(sar[4]));
$(".towns").css('top',-1*parseFloat(sar[5]));
d3.selectAll(".town").each(function(d,i) {
mpoint = projectPoint(d.value.lat,d.value.long,d.value.id);
$(this)
.attr("r",
radiusScale(d.value.size) * Math.pow(map.getZoom(),3) / 1331
)
.attr("cx", mpoint.x)
.attr("cy", mpoint.y);
$(this).attr('transform',"translate(" + sar[4] + "," + sar[5] + ")");
});
$(".towns").show(300);
}
function projectPoint(x, y, id) {
var point = map.latLngToLayerPoint(new L.LatLng(x, y));
if (!isNumeric(point.x)) alert(id);
return point;
}
function changetooltip() {
tip = d3.tip().attr('class', 'd3-tip').html(function(d) {
html = '<span class="stronger">' + d.name + "</span><br>";
if (typeof(d.mayor) != 'undefined') {
$.each(d.mayor, function(i,v) {
if (i == 0) {
html += '<strong>'+v.name+' <small>(' + v.party + ')</small>: ' + parseInt(v.n).toLocaleString() + '</strong><br>';
} else {
html += v.name+' <small>(' + v.party + ')</small>: ' + parseInt(v.n).toLocaleString() + '<br>';
}
});
}
return html;
});
return tip;
}
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-8592359-13', 'ocks.org');
ga('send', 'pageview');
</script>
</body>
</html>
sk-ba_mayor.csv
id,mayor,party,color
529460,Vladimír Bajan,NEKA,#444
528595,Radoslav Števčík,NEKA,#444
529494,Dušan Antoš,NEKA,#444
529397,Dana Čahojová,NEKA,#444
529401,Ľubica Kolková,"SIEŤ, MOST - HÍD, SDKÚ-DS, SaS, KDH",#224766
529419,Peter Šramko,"KDH, SaS, SDKÚ-DS, NOVA, OBYČAJNÍ ĽUDIA a nezávislé osobnosti, OKS, SIEŤ",#0099bF
529443,Pavel Škodler,NEKA,#444
529346,Rudolf Kusý,NEKA,#444
529435,Gabriela Ferenčáková,"MOST - HÍD, SIEŤ, SDKÚ-DS, SZ, SaS, OKS, KDH",#ff7f0e
529311,Alžbeta Ožvaldová,"SIEŤ, SDKÚ-DS, SaS, MOST - HÍD, SMK-MKP, KDH, NOVA, SMER-SD",#224766
529338,Martin Kuruc,NEKA,#444
529354,Peter Pilinský,"SIEŤ, KDH, MOST - HÍD, NOVA, SZ",#224766
529371,Milan Jambor,"SIEŤ, SDKÚ-DS, SaS, MOST - HÍD",#224766
529320,Dušan Pekár,"KDH, OBYČAJNÍ ĽUDIA a nezávislé osobnosti, NOVA, Zmena zdola, DÚ, SMK-MKP, OKS",#0099bF
529389,Martin Zaťovič,"SIEŤ, SDKÚ-DS, KDH, MOST - HÍD, NOVA, OKS, SaS, SZ, EDS",#224766
529427,Jozef Krúpa,"SDKÚ-DS, KDH, SIEŤ, NOVA, SaS, MOST - HÍD",#008
529362,Ján Mrva,NEKA,#444
sk-ba_mayor_votes.json
{"529338": [{"n": "1431", "party": "NEKA", "color": "#888", "name": "Martin Kuruc"}, {"n": "826", "party": "SIE\u0164, SDK\u00da-DS, KDH, MOST - H\u00cdD, NOVA, SaS, SMK-MKP", "color": "#aaf", "name": "Martin Miche\u013e"}, {"n": "792", "party": "NEKA", "color": "#888", "name": "Juraj \u0160tubniak"}, {"n": "475", "party": "NF", "color": "#aaf", "name": "Ferdinand Klimsch"}, {"n": "470", "party": "SMER-SD, SNS, SZS", "color": "#aaf", "name": "Marek Posp\u00edchal"}, {"n": "450", "party": "NEKA", "color": "#888", "name": "Jozef Valach"}], "529354": [{"n": "4271", "party": "SIE\u0164, KDH, MOST - H\u00cdD, NOVA, SZ", "color": "#aaf", "name": "Peter Pilinsk\u00fd"}, {"n": "2306", "party": "OKS, SDK\u00da-DS", "color": "#aaf", "name": "Michal Drotov\u00e1n"}, {"n": "1014", "party": "NEKA", "color": "#888", "name": "Lucia Veselsk\u00e1"}, {"n": "170", "party": "NEKA", "color": "#888", "name": "Milan N\u00e1hlik"}], "529460": [{"n": "6382", "party": "NEKA", "color": "#888", "name": "Vladim\u00edr Bajan"}, {"n": "5572", "party": "NEKA", "color": "#888", "name": "J\u00e1n Hr\u010dka"}, {"n": "5291", "party": "NEKA", "color": "#888", "name": "Pavel Nechala"}, {"n": "3628", "party": "SIE\u0164, KDH, MLAD\u00c1 PETR\u017dALKA, SaS, MOST - H\u00cdD, SZ", "color": "#aaf", "name": "Iveta Pl\u0161ekov\u00e1"}, {"n": "2735", "party": "NEKA", "color": "#888", "name": "Mari\u00e1n Greksa"}, {"n": "2712", "party": "NEKA", "color": "#888", "name": "Daniel \u0160avel"}, {"n": "466", "party": "ASV", "color": "#aaf", "name": "Jozef August\u00edn"}, {"n": "460", "party": "PR\u00c1VO A SPRAVODLIVOS\u0164", "color": "#aaf", "name": "M\u00e1ria Javorekov\u00e1"}, {"n": "435", "party": "NEKA", "color": "#888", "name": "Kristi\u00e1n Roman Zimmermann"}], "529401": [{"n": "355", "party": "SIE\u0164, MOST - H\u00cdD, SDK\u00da-DS, SaS, KDH", "color": "#aaf", "name": "\u013dubica Kolkov\u00e1"}, {"n": "297", "party": "NEKA", "color": "#888", "name": "Gabriel Drobniak"}, {"n": "0", "party": "LEP\u0160IA \u0160TVR\u0164", "color": "#aaf", "name": "Juraj \u0160terbat\u00fd"}, {"n": "0", "party": "\u013dS Na\u0161e Slovensko", "color": "#aaf", "name": "Ivan Bielik"}], "529320": [{"n": "8178", "party": "KDH, OBY\u010cAJN\u00cd \u013dUDIA a nez\u00e1visl\u00e9 osobnosti, NOVA, Zmena zdola, D\u00da, SMK-MKP, OKS", "color": "#aaf", "name": "Du\u0161an Pek\u00e1r"}, {"n": "6082", "party": "SIE\u0164, SaS, SZ, MOST - H\u00cdD, SDK\u00da-DS", "color": "#aaf", "name": "J\u00e1n Buocik"}, {"n": "4685", "party": "SMER-SD, SNS, SZS", "color": "#aaf", "name": "Slavom\u00edr Drozd"}, {"n": "665", "party": "NP", "color": "#aaf", "name": "Miloslav Hette\u0161"}, {"n": "612", "party": "LEP\u0160IA \u0160TVR\u0164", "color": "#aaf", "name": "Valent\u00edn Miku\u0161"}, {"n": "271", "party": "Strana modern\u00e9ho Slovenska", "color": "#aaf", "name": "Vladim\u00edr Koval\u010d\u00edk"}], "529419": [{"n": "1337", "party": "KDH, SaS, SDK\u00da-DS, NOVA, OBY\u010cAJN\u00cd \u013dUDIA a nez\u00e1visl\u00e9 osobnosti, OKS, SIE\u0164", "color": "#aaf", "name": "Peter \u0160ramko"}, {"n": "1176", "party": "SMER-SD, SNS, SZS, Strana modern\u00e9ho Slovenska", "color": "#aaf", "name": "Radoslav Olek\u0161\u00e1k"}, {"n": "511", "party": "NEKA", "color": "#888", "name": "Gabriela Bizo\u0148ov\u00e1"}], "529435": [{"n": "388", "party": "MOST - H\u00cdD, SIE\u0164, SDK\u00da-DS, SZ, SaS, OKS, KDH", "color": "#aaf", "name": "Gabriela Feren\u010d\u00e1kov\u00e1"}, {"n": "240", "party": "NF", "color": "#aaf", "name": "Al\u017ebeta Broszov\u00e1"}, {"n": "116", "party": "NEKA", "color": "#888", "name": "Ema Orlick\u00e1"}, {"n": "1", "party": "SMER-SD, SNS, Strana modern\u00e9ho Slovenska, SDS, SZS, LEP\u0160IA \u0160TVR\u0164", "color": "#aaf", "name": "Karol Rakovsk\u00fd"}], "529371": [{"n": "2958", "party": "SIE\u0164, SDK\u00da-DS, SaS, MOST - H\u00cdD", "color": "#aaf", "name": "Milan Jambor"}, {"n": "1681", "party": "NEKA", "color": "#888", "name": "Rastislav Te\u0161ovi\u010d"}, {"n": "439", "party": "NEKA", "color": "#888", "name": "Marcela \u013dupt\u00e1kov\u00e1"}], "529427": [{"n": "1321", "party": "SDK\u00da-DS, KDH, SIE\u0164, NOVA, SaS, MOST - H\u00cdD", "color": "#aaf", "name": "Jozef Kr\u00fapa"}], "529443": [{"n": "597", "party": "NEKA", "color": "#888", "name": "Pavel \u0160kodler"}, {"n": "277", "party": "NF", "color": "#aaf", "name": "Martin Wolf"}, {"n": "47", "party": "LEP\u0160IA \u0160TVR\u0164", "color": "#aaf", "name": "Jozef Szabo"}], "528595": [{"n": "4056", "party": "NEKA", "color": "#888", "name": "Radoslav \u0160tev\u010d\u00edk"}, {"n": "4031", "party": "KDH, MOST - H\u00cdD, NOVA, SaS, OBY\u010cAJN\u00cd \u013dUDIA a nez\u00e1visl\u00e9 osobnosti, KDS", "color": "#aaf", "name": "G\u00e1bor Grendel"}, {"n": "3495", "party": "SDK\u00da-DS, SIE\u0164, OKS, SZ, Strana modern\u00e9ho Slovenska", "color": "#aaf", "name": "Tatiana Rosov\u00e1"}, {"n": "1215", "party": "NEKA", "color": "#888", "name": "Kristi\u00e1n Straka"}, {"n": "897", "party": "NEKA", "color": "#888", "name": "Miroslav Vetr\u00edk"}], "529346": [{"n": "10412", "party": "NEKA", "color": "#888", "name": "Rudolf Kus\u00fd"}, {"n": "1969", "party": "SIE\u0164, SDK\u00da-DS, KDH, SaS, MOST - H\u00cdD, SZ, NOVA, OKS", "color": "#aaf", "name": "Pavol Martanovi\u010d"}], "529362": [{"n": "1553", "party": "NEKA", "color": "#888", "name": "J\u00e1n Mrva"}, {"n": "410", "party": "NEKA", "color": "#888", "name": "\u013dudov\u00edt Horv\u00e1th"}, {"n": "76", "party": "NF", "color": "#aaf", "name": "Peter Jaslovsk\u00fd"}, {"n": "68", "party": "MS, KDS", "color": "#aaf", "name": "Marian Pru\u017eina"}], "529494": [{"n": "820", "party": "NEKA", "color": "#888", "name": "Du\u0161an Anto\u0161"}, {"n": "540", "party": "SIE\u0164, KDH, SaS", "color": "#aaf", "name": "Lucia Tulekov\u00e1 Hen\u010delov\u00e1"}, {"n": "172", "party": "OBY\u010cAJN\u00cd \u013dUDIA a nez\u00e1visl\u00e9 osobnosti, NOVA, Zmena zdola, D\u00da, OKS", "color": "#aaf", "name": "Viktor Glaser - Opitz"}, {"n": "45", "party": "PD", "color": "#aaf", "name": "Gabriel Kar\u00e1csony"}], "529389": [{"n": "7793", "party": "SIE\u0164, SDK\u00da-DS, KDH, MOST - H\u00cdD, NOVA, OKS, SaS, SZ, EDS", "color": "#aaf", "name": "Martin Za\u0165ovi\u010d"}, {"n": "2757", "party": "NEKA", "color": "#888", "name": "J\u00e1n Sandtner"}], "529397": [{"n": "4847", "party": "NEKA", "color": "#888", "name": "Dana \u010cahojov\u00e1"}, {"n": "3746", "party": "SMER-SD, SNS, SZS, Strana modern\u00e9ho Slovenska", "color": "#aaf", "name": "Iveta Hanul\u00edkov\u00e1"}, {"n": "2460", "party": "SIE\u0164, SDK\u00da-DS, KDH, SaS, MOST - H\u00cdD, NOVA, SZ", "color": "#aaf", "name": "Pavol Bulla"}, {"n": "445", "party": "NEKA", "color": "#888", "name": "Michal Makovn\u00edk"}, {"n": "148", "party": "Rob\u00edme to pre deti - SF", "color": "#aaf", "name": "Dana Kobidov\u00e1"}], "529311": [{"n": "3883", "party": "SIE\u0164, SDK\u00da-DS, SaS, MOST - H\u00cdD, SMK-MKP, KDH, NOVA, SMER-SD", "color": "#aaf", "name": "Al\u017ebeta O\u017evaldov\u00e1"}, {"n": "1702", "party": "SD\u013d", "color": "#aaf", "name": "Martin Hal\u00e1s"}]}
sk-ke.csv
id,name,lat,long,size
598224,Košice-Západ,48.7143063,21.2345873,67372
598682,Košice-Dargovských hrdinov,48.7442344,21.2771429,45957
599786,Košice-Šebastovce,48.6549691,21.2703882,41413
599816,Košice-Nad jazerom,48.6893403,21.2844607,40658
599824,Košice-Juh,48.7092508,21.2570841,38679
598151,Košice-Sever,48.7366124,21.2461837,36779
599883,Košice-Sídlisko KVP,48.7164151,21.2148908,36149
599841,Košice-Šaca,48.6370535,21.1713844,33789
599875,Košice-Sídlisko Ťahanovce,48.7539765,21.2676675,9716
599972,Košice-Luník IX,48.6972038,21.2224101,7648
599794,Košice-Krásna,48.6726061,21.3188165,6804
599093,Košice-Barca,48.663056,21.241111,5779
599018,Košice-Košická Nová Ves,48.7334389,21.2977631,4186
598127,Košice-Ťahanovce,48.757492,21.2551353,3442
598216,Košice-Myslava,48.7091002,21.2045831,3436
599913,Košice-Vyšné Opátske,48.7164117,21.2799977,3209
598208,Košice-Pereš,48.6888583,21.211786,2746
598119,Košice-Kavečany,48.7754061,21.2058674,2029
599859,Košice-Poľov,48.6648877,21.1935779,1802
598186,Košice-Staré Mesto,48.7223734,21.2570032,1086
599891,Košice-Džungľa,48.7372364,21.268109,978
598194,Košice-Lorinčík,48.6879213,21.1952577,845
sk-ke.html
<!DOCTYPE html>
<html>
<head>
<title>Košice - voľby starostov 2014</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/journal/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="d3.tip.js"></script>
<style type="text/css">
.leaflet-tile-pane {
opacity: .4
}
.leaflet-container {
background-color: #fff;
}
html, body{
width: 100%;
height: 100%;
}
#map {
width: 100%;
height: 90%;
}
circle {
cursor: pointer;
fill-opacity: 0.8;
stroke-opacity: 0.01;
}
circle:hover {
stroke-opacity: 1;
}
.towns {
width: 100000px;
height: 100000px;
}
svg:not(:root) {
overflow: visible;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
.stronger {
color: yellow;
}
.navbar {
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="navbar navbar-default" role=navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">Košice - voľby starostov 2014</a>
</div>
</div>
</div>
<div style="position:fixed;top:125px;z-index:1000;">
<div class="alert alert-info" style="float:left;">
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#444"></svg> Nezávislí kandidáti<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#A70004"></svg> SMER-SD<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#0099bF"></svg> KDH<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#008"></svg> SDKÚ-DS<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#000"></svg> SNS<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#224766"></svg> Sieť<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#004e00"></svg> SMK-MKP<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#ff7f0e"></svg> Most-Híd
</div>
</div>
<div id="map"></div>
<script type="text/javascript">
var map = L.map('map', {'zoomControl':false}).setView([48.7223734,21.2570032], 11);
L.tileLayer('//{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', {
attribution: 'CC-BY Michal Škop | © <a href="//osm.org/copyright">OpenStreetMap</a> contributors | dáta Štatistický úrad SR'
}).addTo(map);
L.control.zoom({"position":"topright"}).addTo(map);
var svg = d3.select(map.getPanes().overlayPane).append("svg").attr("class", "towns");
var radiusScale = d3.scale.sqrt().domain([0, 150000]).range([0, 60]);
var tip = changetooltip();
svg.call(tip);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
d3.csv('sk-ke.csv', function(data) {
d3.csv('sk-ke_mayor.csv',function(mayors) {
data = data.joinWith(mayors, 'id');
nodes = data
.map(function(d) {
mpoint = projectPoint(d.lat,d.long);
return {
x: mpoint.x,
y: mpoint.y,
r: radiusScale(d.size),
name: d.name,
value: d
};
});
var circle = svg.selectAll("svg")
.data(nodes)
.enter().append("svg:svg")
.append("svg:circle")
.attr("class","town")
.attr("cx", function (d) {return d.x})
.attr("cy", function (d) {return d.y})
.attr("r", function (d) {return d.r})
.attr("fill", function (d) {
if (typeof(d.value.color) == 'undefined') return '#ccf'; else return d.value.color;
})
.on("mouseover", tip.show)
.on("mouseout", tip.hide);
map.on("viewreset", changeit);
map.on("moveend", changeit);
map.on("zoomstart", hidepoints);
$(".towns").show(100);
});
});
function matrixVal(s) {
return s.split('(')[1].split(')')[0].split(',');
}
function hidepoints() {
$(".towns").hide();
}
function changeit() {
var s = $(".leaflet-map-pane").css("-webkit-transform");
if (typeof(s) == 'undefined')
var s = $(".leaflet-map-pane").css("transform");
var sar = matrixVal(s);
$(".towns").css('left',-1*parseFloat(sar[4]));
$(".towns").css('top',-1*parseFloat(sar[5]));
d3.selectAll(".town").each(function(d,i) {
mpoint = projectPoint(d.value.lat,d.value.long);
$(this)
.attr("r",
radiusScale(d.value.size) * Math.pow(map.getZoom(),3) / 1331
)
.attr("cx", mpoint.x)
.attr("cy", mpoint.y);
$(this).attr('transform',"translate(" + sar[4] + "," + sar[5] + ")");
});
$(".towns").show(300);
}
function projectPoint(x, y) {
var point = map.latLngToLayerPoint(new L.LatLng(x, y));
return point;
}
function changetooltip() {
tip = d3.tip().attr('class', 'd3-tip').html(function(d) {
html = '<span class="stronger">' + d.name + "</span><br>";
if (typeof(d.value.mayor) != 'undefined') {
html += d.value.mayor + '<br>';
html += d.value.party;
}
else
html += 'Ešte nie je rozhodnuté';
return html;
});
return tip;
}
if (!Array.prototype.joinWith) {
+function () {
Array.prototype.joinWith = function(that, by, select, omit) {
var together = [], length = 0;
if (select) select.map(function(x){select[x] = 1;});
function fields(it) {
var f = {}, k;
for (k in it) {
if (!select) { f[k] = 1; continue; }
if (omit ? !select[k] : select[k]) f[k] = 1;
}
return f;
}
function add(it) {
var pkey = '.'+it[by], pobj = {};
if (!together[pkey]) together[pkey] = pobj,
together[length++] = pobj;
pobj = together[pkey];
for (var k in fields(it))
pobj[k] = it[k];
}
this.map(add);
that.map(add);
return together;
}
}();
}
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-8592359-13', 'ocks.org');
ga('send', 'pageview');
</script>
</body>
</html>
sk-ke2.html
<!DOCTYPE html>
<html>
<head>
<title>Košice - voľby starostov 2014</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/journal/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="d3.tip.js"></script>
<style type="text/css">
.leaflet-tile-pane {
opacity: .4
}
.leaflet-container {
background-color: #fff;
}
html, body{
width: 100%;
height: 100%;
}
#map {
width: 100%;
height: 90%;
}
circle {
cursor: pointer;
fill-opacity: 0.8;
stroke-opacity: 0.01;
}
circle:hover {
stroke-opacity: 1;
}
.towns {
width: 100000px;
height: 100000px;
}
svg:not(:root) {
overflow: visible;
}
.d3-tip {
line-height: 1;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
.d3-tip small {
font-size: 0.5em;
}
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
.stronger {
color: yellow;
font-weight: bold;
}
.navbar {
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="navbar navbar-default" role=navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">Košice - voľby starostov 2014</a>
</div>
</div>
</div>
<div style="position:fixed;top:125px;z-index:1000;">
<div class="alert alert-info" style="float:left;">
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#888"></svg> Nezávislí kandidáti<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#A70004"></svg> SMER-SD<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#0099bF"></svg> KDH<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#004e00"></svg> SMK-MKP<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#ff7f0e"></svg> Most-Híd<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#9744c7"></svg> SMER+KDH<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#224766"></svg> Sieť<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#301C00"></svg> SMER+SNS<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#aaf"></svg> Iné<br/>
</div>
</div>
<div id="map"></div>
<script type="text/javascript">
var map = L.map('map', {'zoomControl':false}).setView([48.7223734,21.2570032], 11);
L.tileLayer('//{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', {
attribution: 'CC-BY Michal Škop | © <a href="//osm.org/copyright">OpenStreetMap</a> contributors | dáta Štatistický úrad SR'
}).addTo(map);
L.control.zoom({"position":"topright"}).addTo(map);
var svg = d3.select(map.getPanes().overlayPane).append("svg").attr("class", "towns");
var radiusScale = d3.scale.sqrt().domain([0, 150000]).range([0, 60]);
var tip = changetooltip();
svg.call(tip);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
d3.csv('sk-ke.csv', function(data) {
d3.json('sk-ke_mayor_votes.json',function(mayors) {
nodes = data
.map(function(d) {
mpoint = projectPoint(d.lat,d.long);
return {
x: mpoint.x,
y: mpoint.y,
r: radiusScale(d.size),
name: d.name,
value: d,
mayor: mayors[d.id]
};
});
var circle = svg.selectAll("svg")
.data(nodes)
.enter().append("svg:svg")
.append("svg:circle")
.attr("class","town")
.attr("cx", function (d) {return d.x})
.attr("cy", function (d) {return d.y})
.attr("r", function (d) {return d.r})
.attr("fill", function (d) {
if (typeof(d.mayor) != 'undefined') {
if (typeof(d.mayor[0].color) == 'undefined') return '#ccf'; else return d.mayor[0].color;
} else {
return '#ccf';
}
})
.on("mouseover", tip.show)
.on("mouseout", tip.hide);
map.on("viewreset", changeit);
map.on("moveend", changeit);
map.on("zoomstart", hidepoints);
$(".towns").show(100);
});
});
function matrixVal(s) {
return s.split('(')[1].split(')')[0].split(',');
}
function hidepoints() {
$(".towns").hide();
}
function changeit() {
var s = $(".leaflet-map-pane").css("-webkit-transform");
if (typeof(s) == 'undefined')
var s = $(".leaflet-map-pane").css("transform");
var sar = matrixVal(s);
$(".towns").css('left',-1*parseFloat(sar[4]));
$(".towns").css('top',-1*parseFloat(sar[5]));
d3.selectAll(".town").each(function(d,i) {
mpoint = projectPoint(d.value.lat,d.value.long,d.value.id);
$(this)
.attr("r",
radiusScale(d.value.size) * Math.pow(map.getZoom(),3) / 1331
)
.attr("cx", mpoint.x)
.attr("cy", mpoint.y);
$(this).attr('transform',"translate(" + sar[4] + "," + sar[5] + ")");
});
$(".towns").show(300);
}
function projectPoint(x, y, id) {
var point = map.latLngToLayerPoint(new L.LatLng(x, y));
if (!isNumeric(point.x)) alert(id);
return point;
}
function changetooltip() {
tip = d3.tip().attr('class', 'd3-tip').html(function(d) {
html = '<span class="stronger">' + d.name + "</span><br>";
if (typeof(d.mayor) != 'undefined') {
$.each(d.mayor, function(i,v) {
if (i == 0) {
html += '<strong>'+v.name+' <small>(' + v.party + ')</small>: ' + parseInt(v.n).toLocaleString() + '</strong><br>';
} else {
html += v.name+' <small>(' + v.party + ')</small>: ' + parseInt(v.n).toLocaleString() + '<br>';
}
});
}
return html;
});
return tip;
}
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-8592359-13', 'ocks.org');
ga('send', 'pageview');
</script>
</body>
</html>
sk-ke_mayor.csv
id,mayor,party,color
598119,Martin Balčík,"KDH, SIEŤ",#0099bF
599794,Marek Kažimír,NEKA,#444
599891,Adriana Balogová,NEKA,#444
599883,Alfonz Halenár,NEKA,#444
598127,Ján Nigut,"KDH, MOST - HÍD, SIEŤ, SMER-SD, SMK-MKP, NOVA",#0099bF
599018,Milan Lesňák,NEKA,#444
599824,Jaroslav Hlinka,NEKA,#444
598208,Jozef Karabin,NEKA,#444
598224,Ján Jakubov,SMER-SD,#A70004
599841,Daniel Petrík,SDKÚ-DS,#008
598151,Marián Gaj,NEKA,#444
599972,Marcel Šaňa,SRK,#bbb
599816,Lenka Kovačevičová,NEKA,#444
598194,Damián Exner,NEKA,#444
598186,Ľubomír Grega,NEKA,#444
599093,František Krištof,KDH,#0099bF
598216,Iveta Šimková,NEKA,#444
599786,Monika Puzderová,NEKA,#444
599859,Ladislav Brada,NEKA,#444
598682,Jozef Andrejčák,SMER-SD,#A70004
599875,Cyril Betuš,NEKA,#444
599913,Viktor Mikluš,NEKA,#444
sk-ke_mayor_votes.json
{"599816": [{"n": "2352", "party": "NEKA", "color": "#888", "name": "Lenka Kova\u010devi\u010dov\u00e1"}, {"n": "1704", "party": "SMER-SD", "color": "#A70004", "name": "Anna Jen\u010dov\u00e1"}, {"n": "1013", "party": "SIE\u0164, MOST - H\u00cdD", "color": "#aaf", "name": "Mari\u00e1n G\u00e1l"}, {"n": "665", "party": "KDH, SDK\u00da-DS, NOVA, SaS, SMK-MKP, OBY\u010cAJN\u00cd \u013dUDIA a nez\u00e1visl\u00e9 osobnosti, DS, KDS, OKS", "color": "#aaf", "name": "Jarmila Tk\u00e1\u010dov\u00e1"}, {"n": "246", "party": "NEKA", "color": "#888", "name": "Rastislav Jen\u010d\u00edk"}, {"n": "201", "party": "NEKA", "color": "#888", "name": "Roman Lengyel"}, {"n": "191", "party": "JEDNOTA-\u013dSS", "color": "#aaf", "name": "Stanislav L\u00e1baj"}, {"n": "177", "party": "TIP", "color": "#aaf", "name": "Miroslav Betu\u0161"}, {"n": "158", "party": "NEKA", "color": "#888", "name": "Peter Mali\u0148\u00e1k"}, {"n": "66", "party": "Strana modern\u00e9ho Slovenska", "color": "#aaf", "name": "Ji\u0159\u00ed Shejbal"}, {"n": "56", "party": "NEKA", "color": "#888", "name": "Peter Buchl\u00e1k"}], "598127": [{"n": "524", "party": "KDH, MOST - H\u00cdD, SIE\u0164, SMER-SD, SMK-MKP, NOVA", "color": "#aaf", "name": "J\u00e1n Nigut"}], "599859": [{"n": "372", "party": "NEKA", "color": "#888", "name": "Ladislav Brada"}, {"n": "319", "party": "NEKA", "color": "#888", "name": "M\u00e1ria Biro\u0161ov\u00e1"}], "599972": [{"n": "277", "party": "SRK", "color": "#aaf", "name": "Marcel \u0160a\u0148a"}, {"n": "188", "party": "SIE\u0164", "color": "#224766", "name": "Tibor Horv\u00e1th"}, {"n": "116", "party": "SP", "color": "#aaf", "name": "J\u00e1n Lacko"}, {"n": "33", "party": "NEKA", "color": "#888", "name": "Jozef \u0160ana"}], "599883": [{"n": "1621", "party": "NEKA", "color": "#888", "name": "Alfonz Halen\u00e1r"}, {"n": "1366", "party": "SDK\u00da-DS, SaS, SMK-MKP", "color": "#aaf", "name": "Iveta Kijevsk\u00e1"}, {"n": "1083", "party": "SIE\u0164, KDH, NOVA, DS", "color": "#aaf", "name": "Daniel Rusn\u00e1k"}, {"n": "847", "party": "NEKA", "color": "#888", "name": "Tom\u00e1\u0161 G\u00e1ll"}, {"n": "433", "party": "JEDNOTA-\u013dSS", "color": "#aaf", "name": "Anna Burdov\u00e1"}, {"n": "204", "party": "NEKA", "color": "#888", "name": "Peter Korim"}, {"n": "151", "party": "NEKA", "color": "#888", "name": "Ivan Harajda"}, {"n": "136", "party": "TIP", "color": "#aaf", "name": "Du\u0161an Cais"}, {"n": "97", "party": "NEKA", "color": "#888", "name": "J\u00e1n Onda"}, {"n": "87", "party": "MOST - H\u00cdD", "color": "#ff7f0e", "name": "M\u00e1ria Ivaneck\u00e1"}, {"n": "86", "party": "NEKA", "color": "#888", "name": "Pavol Golenya"}, {"n": "78", "party": "NEKA", "color": "#888", "name": "Miroslav Sekanina"}, {"n": "60", "party": "SO\u013d", "color": "#aaf", "name": "Peter Mati"}, {"n": "58", "party": "7 STATO\u010cN\u00ddCH", "color": "#aaf", "name": "Ladislav Seren\u010da"}], "598151": [{"n": "1500", "party": "NEKA", "color": "#888", "name": "Mari\u00e1n Gaj"}, {"n": "1365", "party": "NEKA", "color": "#888", "name": "Jaroslav Pola\u010dek"}, {"n": "902", "party": "NEKA", "color": "#888", "name": "Andreja Tak\u00e1\u010dov\u00e1"}, {"n": "742", "party": "SIE\u0164, KDH, SMK-MKP, SaS, NOVA, SDK\u00da-DS", "color": "#aaf", "name": "Erik Ha\u013eko"}, {"n": "408", "party": "SMER-SD", "color": "#A70004", "name": "Richard \u0160m\u00edda"}, {"n": "403", "party": "NEKA", "color": "#888", "name": "Peter Berta"}, {"n": "402", "party": "MOST - H\u00cdD", "color": "#ff7f0e", "name": "Vladim\u00edr V\u00e1g\u00e1si"}], "599018": [{"n": "413", "party": "NEKA", "color": "#888", "name": "Milan Les\u0148\u00e1k"}, {"n": "360", "party": "SMER-SD", "color": "#A70004", "name": "Du\u0161an Petrenka"}, {"n": "111", "party": "SDK\u00da-DS", "color": "#aaf", "name": "Du\u0161an Ko\u017eu\u0161ko"}, {"n": "38", "party": "MOST - H\u00cdD", "color": "#ff7f0e", "name": "Igor Hildebrand"}], "599093": [{"n": "768", "party": "KDH", "color": "#0099bF", "name": "Franti\u0161ek Kri\u0161tof"}, {"n": "388", "party": "NEKA", "color": "#888", "name": "Daniel Antal"}, {"n": "117", "party": "SDK\u00da-DS", "color": "#aaf", "name": "Ladislav Bu\u013eko"}, {"n": "61", "party": "JEDNOTA-\u013dSS", "color": "#aaf", "name": "Be\u00e1ta Br\u016fnov\u00e1"}, {"n": "60", "party": "MOST - H\u00cdD", "color": "#ff7f0e", "name": "Ondrej Vilner"}, {"n": "60", "party": "NEKA", "color": "#888", "name": "Viera Ma\u0148kov\u00e1"}, {"n": "59", "party": "NEKA", "color": "#888", "name": "Pavol Ryb\u00e1r"}, {"n": "24", "party": "SO\u013d", "color": "#aaf", "name": "\u0160tefan Varga"}], "598682": [{"n": "3891", "party": "SMER-SD", "color": "#A70004", "name": "Jozef Andrej\u010d\u00e1k"}, {"n": "1637", "party": "SIE\u0164, SDK\u00da-DS, SaS, SMK-MKP", "color": "#aaf", "name": "Jana Rubick\u00e1"}, {"n": "499", "party": "MOST - H\u00cdD", "color": "#ff7f0e", "name": "Milena Hus\u0165\u00e1kov\u00e1"}], "598208": [{"n": "390", "party": "NEKA", "color": "#888", "name": "Jozef Karabin"}, {"n": "206", "party": "NEKA", "color": "#888", "name": "M\u00e1ria Smr\u010dov\u00e1"}, {"n": "144", "party": "KDH, SIE\u0164, SDK\u00da-DS, NOVA, SaS, SMK-MKP, DS", "color": "#aaf", "name": "Emil Ko\u010di\u0161"}, {"n": "92", "party": "NEKA", "color": "#888", "name": "Daniel Liba"}, {"n": "26", "party": "NEKA", "color": "#888", "name": "Tom\u00e1\u0161 Topor"}], "599786": [{"n": "263", "party": "NEKA", "color": "#888", "name": "Monika Puzderov\u00e1"}, {"n": "116", "party": "SMER-SD", "color": "#A70004", "name": "M\u00e1ria Tak\u00e1\u010dov\u00e1"}], "599875": [{"n": "1118", "party": "NEKA", "color": "#888", "name": "Cyril Betu\u0161"}, {"n": "1111", "party": "SDK\u00da-DS, SaS, NOVA, KDS, DS, OKS", "color": "#aaf", "name": "Emil Petrvalsk\u00fd"}, {"n": "1012", "party": "NEKA", "color": "#888", "name": "Milo\u0161 Ihn\u00e1t"}, {"n": "904", "party": "SIE\u0164, KDH, MOST - H\u00cdD, SMK-MKP", "color": "#aaf", "name": "Miroslav \u0160pak"}, {"n": "342", "party": "NEKA", "color": "#888", "name": "Mari\u00e1n K\u00e9da"}, {"n": "246", "party": "NEKA", "color": "#888", "name": "Iveta Strukanov\u00e1"}, {"n": "200", "party": "NEKA", "color": "#888", "name": "Peter Bozog\u00e1\u0148"}], "598224": [{"n": "4029", "party": "SMER-SD", "color": "#A70004", "name": "J\u00e1n Jakubov"}, {"n": "2424", "party": "SIE\u0164, KDH, MOST - H\u00cdD, KDS, SMK-MKP", "color": "#aaf", "name": "Igor Jutka"}, {"n": "1901", "party": "SDK\u00da-DS, NOVA, SaS, OBY\u010cAJN\u00cd \u013dUDIA a nez\u00e1visl\u00e9 osobnosti, OKS, DS", "color": "#aaf", "name": "Zsolt Varga"}, {"n": "1075", "party": "NEKA", "color": "#888", "name": "Zdenko Lipt\u00e1k"}, {"n": "606", "party": "7 STATO\u010cN\u00ddCH", "color": "#aaf", "name": "Darina Koles\u00e1rov\u00e1"}], "599794": [{"n": "960", "party": "NEKA", "color": "#888", "name": "Marek Ka\u017eim\u00edr"}, {"n": "780", "party": "KDH, SDK\u00da-DS, NOVA, KDS", "color": "#aaf", "name": "Vladim\u00edr Saxa"}], "598119": [{"n": "329", "party": "KDH, SIE\u0164", "color": "#aaf", "name": "Martin Bal\u010d\u00edk"}, {"n": "205", "party": "SDK\u00da-DS", "color": "#aaf", "name": "Milan Perh\u00e1\u010d"}, {"n": "46", "party": "NEKA", "color": "#888", "name": "Rudolf Taba\u010dko"}, {"n": "35", "party": "NEKA", "color": "#888", "name": "J\u00e1n Spi\u0161\u00e1k"}], "599841": [{"n": "536", "party": "SDK\u00da-DS", "color": "#aaf", "name": "Daniel Petr\u00edk"}, {"n": "518", "party": "NEKA", "color": "#888", "name": "\u013dubom\u00edra Boro\u0161ov\u00e1"}, {"n": "413", "party": "NEKA", "color": "#888", "name": "Rudolf Re\u0161tei"}, {"n": "266", "party": "SMER-SD", "color": "#A70004", "name": "Marek Hutn\u00edk"}, {"n": "35", "party": "JEDNOTA-\u013dSS", "color": "#aaf", "name": "Martina Gerendov\u00e1"}, {"n": "33", "party": "Strana modern\u00e9ho Slovenska", "color": "#aaf", "name": "Miroslav Andr\u00e1ssy"}, {"n": "26", "party": "SNS", "color": "#aaf", "name": "\u013dudov\u00edt Re\u0161tei"}], "599913": [{"n": "489", "party": "NEKA", "color": "#888", "name": "Viktor Miklu\u0161"}, {"n": "210", "party": "SMER-SD", "color": "#A70004", "name": "Richard Herrgott"}, {"n": "72", "party": "NEKA", "color": "#888", "name": "\u0160tefan \u0160pacai"}, {"n": "55", "party": "NEKA", "color": "#888", "name": "Valeri\u00e1n Stec"}, {"n": "44", "party": "7 STATO\u010cN\u00ddCH", "color": "#aaf", "name": "Tibor Truhan"}, {"n": "28", "party": "NEKA", "color": "#888", "name": "Jozef Palen\u010d\u00e1r"}, {"n": "22", "party": "SNS", "color": "#aaf", "name": "Pavol Lehotsk\u00fd"}], "599824": [{"n": "3646", "party": "NEKA", "color": "#888", "name": "Jaroslav Hlinka"}, {"n": "1566", "party": "KDH, SDK\u00da-DS, NOVA, SaS, SMK-MKP, OBY\u010cAJN\u00cd \u013dUDIA a nez\u00e1visl\u00e9 osobnosti, KDS, OKS, DS", "color": "#aaf", "name": "Tibor Bacs\u00f3"}, {"n": "625", "party": "SIE\u0164", "color": "#224766", "name": "Peter M\u00fadry"}, {"n": "249", "party": "7 STATO\u010cN\u00ddCH", "color": "#aaf", "name": "Vladim\u00edr \u0160pernoga"}, {"n": "145", "party": "KSS", "color": "#aaf", "name": "Luk\u00e1\u0161 Sis\u00e1k"}], "598186": [{"n": "3179", "party": "NEKA", "color": "#888", "name": "\u013dubom\u00edr Grega"}, {"n": "1460", "party": "SMER-SD", "color": "#A70004", "name": "\u0160tefan Lask\u00fd"}, {"n": "752", "party": "NEKA", "color": "#888", "name": "Juraj K\u00e1n\u00e1ssy"}, {"n": "442", "party": "MOST - H\u00cdD", "color": "#ff7f0e", "name": "Marek Korpa"}, {"n": "431", "party": "7 STATO\u010cN\u00ddCH", "color": "#aaf", "name": "Daniela Pasni\u0161inov\u00e1"}], "599891": [{"n": "188", "party": "NEKA", "color": "#888", "name": "Adriana Balogov\u00e1"}], "598216": [{"n": "504", "party": "NEKA", "color": "#888", "name": "Iveta \u0160imkov\u00e1"}, {"n": "450", "party": "NEKA", "color": "#888", "name": "Vladim\u00edr Klema"}], "598194": [{"n": "113", "party": "NEKA", "color": "#888", "name": "Dami\u00e1n Exner"}, {"n": "80", "party": "SMER-SD", "color": "#A70004", "name": "Rastislav Petrik"}, {"n": "77", "party": "NEKA", "color": "#888", "name": "Peter Dzuro"}, {"n": "41", "party": "NEKA", "color": "#888", "name": "Ladislav Ryb\u00e1rsky"}, {"n": "9", "party": "KDH", "color": "#0099bF", "name": "J\u00e1n Piro\u0161ko"}]}
sk.html
<!DOCTYPE html>
<html>
<head>
<title>Slovensko - voľby starostov a primátorov 2014</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/journal/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="d3.tip.js"></script>
<style type="text/css">
.leaflet-tile-pane {
opacity: .4
}
.leaflet-container {
background-color: #fff;
}
html, body{
width: 100%;
height: 100%;
}
#map {
width: 100%;
height: 90%;
}
circle {
cursor: pointer;
fill-opacity: 0.8;
stroke-opacity: 0.01;
}
circle:hover {
stroke-opacity: 1;
}
.towns {
width: 100000px;
height: 100000px;
}
svg:not(:root) {
overflow: visible;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
.stronger {
color: yellow;
}
.navbar {
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="navbar navbar-default" role=navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">Slovensko - voľby starostov a primátorov 2014</a>
</div>
</div>
</div>
<div style="position:fixed;top:125px;z-index:1000;">
<div class="alert alert-info" style="float:left;">
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#444"></svg> Nezávislí kandidáti<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#A70004"></svg> SMER-SD<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#0099bF"></svg> KDH<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#008"></svg> SDKÚ-DS<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#000"></svg> SNS<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#224766"></svg> Sieť<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#004e00"></svg> SMK-MKP<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#ff7f0e"></svg> Most-Híd
</div>
</div>
<div id="map"></div>
<script type="text/javascript">
var map = L.map('map', {'zoomControl':false}).setView([48.55,19.467773], 8);
L.tileLayer('//{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', {
attribution: 'CC-BY Michal Škop | © <a href="//osm.org/copyright">OpenStreetMap</a> contributors | dáta Štatistický úrad SR'
}).addTo(map);
L.control.zoom({"position":"topright"}).addTo(map);
var svg = d3.select(map.getPanes().overlayPane).append("svg").attr("class", "towns");
var radiusScale = d3.scale.sqrt().domain([0, 400000]).range([0, 60]);
var tip = changetooltip();
svg.call(tip);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
d3.csv('sk.csv', function(data) {
d3.csv('sk_mayor.csv',function(mayors) {
data = data.joinWith(mayors, 'id');
nodes = data
.map(function(d) {
mpoint = projectPoint(d.lat,d.long);
return {
x: mpoint.x,
y: mpoint.y,
r: radiusScale(d.size),
name: d.name,
value: d
};
});
var circle = svg.selectAll("svg")
.data(nodes)
.enter().append("svg:svg")
.append("svg:circle")
.attr("class","town")
.attr("cx", function (d) {return d.x})
.attr("cy", function (d) {return d.y})
.attr("r", function (d) {return d.r})
.attr("fill", function (d) {
if (typeof(d.value.color) == 'undefined') return '#ccf'; else return d.value.color;
})
.on("mouseover", tip.show)
.on("mouseout", tip.hide);
map.on("viewreset", changeit);
map.on("moveend", changeit);
map.on("zoomstart", hidepoints);
$(".towns").show(100);
});
});
function matrixVal(s) {
return s.split('(')[1].split(')')[0].split(',');
}
function hidepoints() {
$(".towns").hide();
}
function changeit() {
var s = $(".leaflet-map-pane").css("-webkit-transform");
if (typeof(s) == 'undefined')
var s = $(".leaflet-map-pane").css("transform");
var sar = matrixVal(s);
$(".towns").css('left',-1*parseFloat(sar[4]));
$(".towns").css('top',-1*parseFloat(sar[5]));
d3.selectAll(".town").each(function(d,i) {
mpoint = projectPoint(d.value.lat,d.value.long);
$(this)
.attr("r",
radiusScale(d.value.size) * Math.pow(map.getZoom(),3) / 512
)
.attr("cx", mpoint.x)
.attr("cy", mpoint.y);
$(this).attr('transform',"translate(" + sar[4] + "," + sar[5] + ")");
});
$(".towns").show(300);
}
function projectPoint(x, y) {
var point = map.latLngToLayerPoint(new L.LatLng(x, y));
return point;
}
function changetooltip() {
tip = d3.tip().attr('class', 'd3-tip').html(function(d) {
html = '<span class="stronger">' + d.name + "</span><br>";
if (typeof(d.value.mayor) != 'undefined') {
html += d.value.mayor + '<br>';
html += d.value.party;
}
else
html += 'Ešte nie je rozhodnuté';
return html;
});
return tip;
}
if (!Array.prototype.joinWith) {
+function () {
Array.prototype.joinWith = function(that, by, select, omit) {
var together = [], length = 0;
if (select) select.map(function(x){select[x] = 1;});
function fields(it) {
var f = {}, k;
for (k in it) {
if (!select) { f[k] = 1; continue; }
if (omit ? !select[k] : select[k]) f[k] = 1;
}
return f;
}
function add(it) {
var pkey = '.'+it[by], pobj = {};
if (!together[pkey]) together[pkey] = pobj,
together[length++] = pobj;
pobj = together[pkey];
for (var k in fields(it))
pobj[k] = it[k];
}
this.map(add);
that.map(add);
return together;
}
}();
}
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-8592359-13', 'ocks.org');
ga('send', 'pageview');
</script>
</body>
</html>
sk2.html
<!DOCTYPE html>
<html>
<head>
<title>Slovensko - voľby starostov a primátorov 2014</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/journal/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="d3.tip.js"></script>
<style type="text/css">
.leaflet-tile-pane {
opacity: .4
}
.leaflet-container {
background-color: #fff;
}
html, body{
width: 100%;
height: 100%;
}
#map {
width: 100%;
height: 90%;
}
circle {
cursor: pointer;
fill-opacity: 0.8;
stroke-opacity: 0.01;
}
circle:hover {
stroke-opacity: 1;
}
.towns {
width: 100000px;
height: 100000px;
}
svg:not(:root) {
overflow: visible;
}
.d3-tip {
line-height: 1;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
.d3-tip small {
font-size: 0.5em;
}
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
.stronger {
color: yellow;
font-weight: bold;
}
.navbar {
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="navbar navbar-default" role=navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">Slovensko - voľby starostov a primátorov 2014</a>
</div>
</div>
</div>
<div style="position:fixed;top:125px;z-index:1000;">
<div class="alert alert-info" style="float:left;">
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#888"></svg> Nezávislí kandidáti<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#A70004"></svg> SMER-SD<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#0099bF"></svg> KDH<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#004e00"></svg> SMK-MKP<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#ff7f0e"></svg> Most-Híd<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#9744c7"></svg> SMER+KDH<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#224766"></svg> Sieť<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#301C00"></svg> SMER+SNS<br/>
<svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#aaf"></svg> Iné<br/>
</div>
</div>
<div id="map"></div>
<script type="text/javascript">
var map = L.map('map', {'zoomControl':false}).setView([48.55,19.467773], 8);
L.tileLayer('//{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', {
attribution: 'CC-BY Michal Škop | © <a href="//osm.org/copyright">OpenStreetMap</a> contributors | dáta Štatistický úrad SR'
}).addTo(map);
L.control.zoom({"position":"topright"}).addTo(map);
var svg = d3.select(map.getPanes().overlayPane).append("svg").attr("class", "towns");
var radiusScale = d3.scale.sqrt().domain([0, 400000]).range([0, 60]);
var tip = changetooltip();
svg.call(tip);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
d3.csv('sk.csv', function(data) {
d3.json('sk_mayor_votes.json',function(mayors) {
nodes = data
.map(function(d) {
mpoint = projectPoint(d.lat,d.long);
return {
x: mpoint.x,
y: mpoint.y,
r: radiusScale(d.size),
name: d.name,
value: d,
mayor: mayors[d.id]
};
});
var circle = svg.selectAll("svg")
.data(nodes)
.enter().append("svg:svg")
.append("svg:circle")
.attr("class","town")
.attr("cx", function (d) {return d.x})
.attr("cy", function (d) {return d.y})
.attr("r", function (d) {return d.r})
.attr("fill", function (d) {
if (typeof(d.mayor) != 'undefined') {
if (typeof(d.mayor[0].color) == 'undefined') return '#ccf'; else return d.mayor[0].color;
} else {
return '#ccf';
}
})
.on("mouseover", tip.show)
.on("mouseout", tip.hide);
map.on("viewreset", changeit);
map.on("moveend", changeit);
map.on("zoomstart", hidepoints);
$(".towns").show(100);
});
});
function matrixVal(s) {
return s.split('(')[1].split(')')[0].split(',');
}
function hidepoints() {
$(".towns").hide();
}
function changeit() {
var s = $(".leaflet-map-pane").css("-webkit-transform");
if (typeof(s) == 'undefined')
var s = $(".leaflet-map-pane").css("transform");
var sar = matrixVal(s);
$(".towns").css('left',-1*parseFloat(sar[4]));
$(".towns").css('top',-1*parseFloat(sar[5]));
d3.selectAll(".town").each(function(d,i) {
mpoint = projectPoint(d.value.lat,d.value.long,d.value.id);
$(this)
.attr("r",
radiusScale(d.value.size) * Math.pow(map.getZoom(),3) / 512
)
.attr("cx", mpoint.x)
.attr("cy", mpoint.y);
$(this).attr('transform',"translate(" + sar[4] + "," + sar[5] + ")");
});
$(".towns").show(300);
}
function projectPoint(x, y, id) {
var point = map.latLngToLayerPoint(new L.LatLng(x, y));
if (!isNumeric(point.x)) alert(id);
return point;
}
function changetooltip() {
tip = d3.tip().attr('class', 'd3-tip').html(function(d) {
html = '<span class="stronger">' + d.name + "</span><br>";
if (typeof(d.mayor) != 'undefined') {
$.each(d.mayor, function(i,v) {
if (i == 0) {
html += '<strong>'+v.name+' <small>(' + v.party + ')</small>: ' + parseInt(v.n).toLocaleString() + '</strong><br>';
} else {
html += v.name+' <small>(' + v.party + ')</small>: ' + parseInt(v.n).toLocaleString() + '<br>';
}
});
}
return html;
});
return tip;
}
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-8592359-13', 'ocks.org');
ga('send', 'pageview');
</script>
</body>
</html>