SK-BB '13: D3 + Leaflet

<!DOCTYPE html>
<html>
  <head>
    <title>Regional elections 2013, Banská Bystrica, Chairman - 2nd round</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
	<script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
	
	
	<script>
	  // see https://leafletjs.com/reference.html
	  //L_PREFER_CANVAS = true;
	</script>

html, body, #map {
		  width: 100%;
		  height: 100%;
		  margin: 0;
		  padding: 0;
		}
		
		/* somehow work in Chromium + Opera with this, but FF shows tooltips only without it */
		/*svg {
		  width: 10000px;
		  height: 10000px;
		}*/
		
		/* this is because of Bootstrap - very important! */
		svg:not(:root) {
			overflow: visible;
		}

circle {
		  fill: #888;
		  fill-opacity: 0.01;
		  /*stroke: #f00;*/
		  stroke-opacity: 0.75;
		  cursor:pointer;
		}

.marian-kotleba {
		  stroke: #040;
		  color: #080;
		  fill: #040;
		}
		.vladimir-manka {
		  stroke: #f00;
		  color: #f00;
		  fill: #f00;
		}
		
		div.tooltip 
		{
			position: absolute;
			text-align: center;
			width: 140px;
			/*height: 6em;*/
			padding: 8px;
			font: 10px sans-serif;
			background: #ffff99;
			border: solid 1px #aaa;
			border-radius: 8px;
			pointer-events: none;
		}

</style>
  </head>
  <body>
  
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Regional elections 2013, Banská Bystrica, Chairman - 2nd round - <span class="marian-kotleba">Kotleba</span> vs. <span class="vladimir-manka">Maňka</span></a>
        </div>
      </div>
    </div>
    <div style="position:fixed;top:50px;z-index:1000;">
      <div class="alert alert-info">The <strong>size</strong> of bubbles represents number of voters, the <strong>color</strong> represents the winner and the <strong>width of rings</strong> the margin of victory.</div>
      <div class="alert alert-danger alert-dismissable">As of 2013-12-02: works ok on last <strong>Firefox</strong>, does not work on <strong>Opera</strong> and <strong>Chrome/Chromium</strong><br/>
      2014-07-02: solution shown in map.html
      </div>
    </div>
    <div id="map" style="margin-top:40px;"></div>
    <script type="text/javascript">

// Create the map
		var map = L.map('map',{zoomControl: false}).setView([48.565703,19.390411], 9);
		map.addControl( L.control.zoom({position: 'topright'}) );
		
		// add an OpenStreetMap tile layer
		// also see https://wiki.openstreetmap.org/wiki/Tiles
		//L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
		L.tileLayer('https://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', {
			attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
		}).addTo(map);
		
		var svg = d3.select(map.getPanes().overlayPane).append("div").attr("class", "stations"),
		    g = svg.append("g").attr("class", "leaflet-zoom-hide");

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);
            }
		
		
		map.on("zoomend", zoomit);
		function zoomit() {
				  /*d3.selectAll("circle").each(
				    function(d,i) {
				       $(this).attr(
				         "r",d.value.population.p6/100/map.getZoom()
				       );
			  		}
  		  		 )*/
  		  		 d3.selectAll("circle").each(function(d,i) { 
  		  		   mpoint = projectPoint(d.value.coordinates[0],d.value.coordinates[1]);
  		  		   $(this)
  		  		     .attr("r",
  		  		       (radiusScale(d.value.population.p6)+radiusScale(d.value.population.p9))/2 * Math.pow(map.getZoom(),3) / 729	//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);

})
  		  	  }
		
		
		//for further exploring:
		/*map.on("viewreset", reset);
		  reset();

// Reposition the SVG to cover the features.
		  function reset() {
			var topLeft = [0,0],
				bottomRight = [100000,100000];

svg .attr("width", bottomRight[0] - topLeft[0])
				.attr("height", bottomRight[1] - topLeft[1])
				.style("left", topLeft[0] + "px")
				.style("top", topLeft[1] + "px");

g   .attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");

//feature.attr("d", path);
		  }*/
	</script>
  </body>
</html>

Modified http://code.jquery.com/jquery-1.8.2.min.js to a secure url

Modified http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js to a secure url

Modified http://mbostock.github.com/d3/d3.js?1.29.1 to a secure url

https://code.jquery.com/jquery-1.8.2.min.js

https://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js

https://mbostock.github.com/d3/d3.js?1.29.1