xxxxxxxxxx
<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="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.min.js"></script>
<script src="https://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%;
/*margin: 0;
padding: 0;*/
}
#map {
width: 100%;
height: 90%;
}
circle {
/*fill: #040;
stroke: #040;*/
cursor: pointer;
fill-opacity: 0.8;
stroke-opacity: 0.01;
}
circle:hover {
stroke-opacity: 1;
}
.towns {
width: 100000px;
height: 100000px;
}
/* this is because of Bootstrap - very important! */
svg:not(:root) {
overflow: visible;
}
/* D3 tips */
.d3-tip {
line-height: 1;
/*font-weight: bold;*/
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
.d3-tip small {
font-size: 0.5em;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
.stronger {
color: yellow;
font-weight: bold;
}
/*overwrite bootstrap*/
.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">
// Create the map
var map = L.map('map', {'zoomControl':false}).setView([48.55,19.467773], 8);
// add an OpenStreetMap tile layer
// also see https://wiki.openstreetmap.org/wiki/Tiles
L.tileLayer('https://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', {
attribution: 'CC-BY Michal Škop | © <a href="https://osm.org/copyright">OpenStreetMap</a> contributors | dáta Štatistický úrad SR'
}).addTo(map);
L.control.zoom({"position":"topright"}).addTo(map);
//svg
var svg = d3.select(map.getPanes().overlayPane).append("svg").attr("class", "towns");
//scale
var radiusScale = d3.scale.sqrt().domain([0, 400000]).range([0, 60]);
/* Initialize tooltip */
var tip = changetooltip();
/* Invoke the tip in the context of your visualization */
svg.call(tip);
// Add tooltip div
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) {
//mapping
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, //including whole d
mayor: mayors[d.id]
};
});
//adding circles
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);
//on zoom or map movement, https://leafletjs.com/reference.html#events
map.on("viewreset", changeit);
map.on("moveend", changeit);
//map.on("move", hidepoints); //not needed
map.on("zoomstart", hidepoints);
$(".towns").show(100);
});
});
//helper function matrix to values
function matrixVal(s) {
return s.split('(')[1].split(')')[0].split(',');
}
function hidepoints() {
$(".towns").hide();
}
// adjust points after map change (zoom, move)
function changeit() {
//Chromium/Chrome does not support well changes, so:
var s = $(".leaflet-map-pane").css("-webkit-transform"); //chromium, opera
if (typeof(s) == 'undefined')
var s = $(".leaflet-map-pane").css("transform"); //ff
var sar = matrixVal(s);
//if towns in svg: (not used if it is div)
$(".towns").css('left',-1*parseFloat(sar[4]));
$(".towns").css('top',-1*parseFloat(sar[5]));
d3.selectAll(".town").each(function(d,i) {
//set correct x,y
mpoint = projectPoint(d.value.lat,d.value.long,d.value.id);
$(this)
.attr("r",
radiusScale(d.value.size) * Math.pow(map.getZoom(),3) / 512 //power of 3 to show the results better in small scale
)
/*.attr("stroke-width",
Math.abs(radiusScale(d.value.population.p9)-radiusScale(d.value.population.p6)) * Math.pow(map.getZoom(),3) / 729 //power of 3 to show the results better in small scale
)*/
.attr("cx", mpoint.x)
.attr("cy", mpoint.y);
//Reposition the SVG to cover the features.
//note: if towns is div, next lines are needed; if it is svg, it is different:
$(this).attr('transform',"translate(" + sar[4] + "," + sar[5] + ")");
/*$(this).parent().css('left',-1*parseFloat(sar[4]));
$(this).parent().css('top',-1*parseFloat(sar[5]));*/
});
$(".towns").show(300);
}
// Use Leaflet to implement a D3 geometric transformation.
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>';
}
});
}
/*if (typeof(d.value.description) != 'undefined') {
html += d.value.description;
}*/
/*else
html += 'Ešte nie je rozhodnuté';*/
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>
Modified http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js to a secure url
Modified http://d3js.org/d3.v3.min.js to a secure url
https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js
https://d3js.org/d3.v3.min.js
https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js