SK: referendum 2015

<!DOCTYPE html>
<html>
  <head>
    <title>Slovensko - referendum 2015</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 - referendum 2015</a>
        </div>
      </div>
    </div>
   
    <div style="position:fixed;top:125px;z-index:1000;">
		<div class="alert alert-info" style="float:left;" id="legend">
		<h3>Účasť</h3>
		    <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="blue"></svg> 100 %<br/>
		    <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="green"></svg> 50 %<br/>
		    <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="yellow"></svg> 21.4 %<br/>
		    <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="red"></svg> 0 %<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 | &copy; <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, 120]);
  var color = colorscale([0,0.214,0.5,1],["red", "yellow", "green", "blue"]);
  
  /* 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_referendum.json',function(mayors) {
    //mapping
    nodes = data
      .map(function(d) {
        mpoint = projectPoint(d.lat,d.long);
        ret = {
          x: mpoint.x,
          y: mpoint.y,
          //r: radiusScale(d.size), //radiusScale(mayors[d.id]["turnout"]),
          name: d.name,
          value: d  //including whole d
        };
        if (typeof(mayors[d.id]) != 'undefined') {
            ret['mayor'] = mayors[d.id];
            ret['r'] = radiusScale(mayors[d.id]["turnout"]);
        }
        return ret;
     });
    //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') {
	        return color(parseFloat(d.mayor.turnout_perc.replace(",","."))/100);
	      } 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",
           function() {
            if (typeof(d.mayor) != 'undefined')
                return radiusScale(d.mayor["turnout"]) * Math.pow(map.getZoom(),3) / 512;	//power of 3 to show the results better in small scale
            else
                return 0;
           }
          )
          /*.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') {
            html += 'Účasť: '+d.mayor.turnout+ ' ('+d.mayor.turnout_perc+'%)<br>';
            html += 'Otázka 1 (manželstvo): '+d.mayor.q1+'%<br>';
            html += 'Otázka 2 (adopcie): '+d.mayor.q2+'%<br>';
            html += 'Otázka 3 (sex.výchova): '+d.mayor.q3+'%<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);
}
  //set color scale
  function colorscale(domain,range) {
    return d3.scale.linear()
            .domain(domain)
            .range(range);
  }
</script>

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