AR: Debt to Federal Government

<!DOCTYPE html>
<html>
  <head>
    <title>Argentina: Debt of Provinces to Federal Government</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/cerulean/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="d3.tip.js"></script>
    <style type="text/css">
        html, body{
		  width: 100%;
		  height: 100%;
		  /*margin: 0;
		  padding: 0;*/
		}
		#map {
		  width: 100%;
		  height: 95%;
		}
		.leaflet-tile-pane {
		  opacity: .4
		}
		.leaflet-container {
          background-color: #fff;
        }
        .div-icon {
          color: black;
          line-height: 1.1;
          font-size: 1.1em;
          padding: 5px 15px 0 0;
        }
        
        /* D3 tips */  
        .d3-tip {
          line-height: 1;
          font-weight: bold;
          padding: 12px;
          background: rgba(0, 0, 0, 0.8);
          color: #fff;
          border-radius: 2px;
        }
        /* Creates a small triangle extender for the tooltip */
        .d3-tip:after {
          box-sizing: border-box;
          display: inline;
          font-size: 10px;
          width: 100%;
          line-height: 1;
          color: rgba(0, 0, 0, 0.8);
          content: "\25BC";
          position: absolute;
          text-align: center;
        }
        /* Style northward tooltips differently */
        .d3-tip.n:after {
          margin: -1px 0 0 0;
          top: 100%;
          left: 0;
        }
        
        /*overwrite bootstrap*/
        .navbar {
          margin-bottom: 0;
        } 
    </style>
  </head>
  <body>
  
<div class="navbar navbar-default">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Argentina: Debt of Provinces to Federal Government</a>
  </div>
</div>

<div style="position:fixed;top:52px;z-index:1000;">
      <div class="alert alert-info" ><strong>Size of bubbles</strong> represents population of provinces, <strong>color</strong> represents the debt to the federal government per capita.</div>
    </div>

<div style="position:fixed;top:125px;z-index:1000;">
		<div class="alert alert-info" style="float:left;">
		  <strong>Debt per capita</strong>:<br/>
		  <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#f00"></svg> high (upto 6700$)<br/>
		  <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="yellow"></svg> average (1880$)<br/>
		  <svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="green"></svg> none (0$)
		</div>
	</div>  
    <div id="map"></div>
  
    <script type="text/javascript">
      // Create the map
      var map = L.map('map',{zoomControl: false}).setView([-32.09673,-63.79409], 5);
      // 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://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
	    attribution: 'CC-BY Michal Škop | Map tiles by CartoDB, under CC BY 3.0. Data by OpenStreetMap, under ODbL.'
	  }).addTo(map);
	  
	  //color scale
	  var color = d3.scale.linear()
        .domain([0, 1880, 6700])
        .range(["green", "yellow", "red"]);
	  
	  //add circles
	  d3.csv('argentina.csv', function(data) {
	  
	      //highlight country:
          //https://oramind.com/country-border-highlighting-with-leaflet-js/
          d3.json('argentina.json', function(json) {
          	function style(feature) {
		        return {
			        fillColor: "#3A87AD",
			        weight: 1,
			        opacity: 0.4,
			        color: '#3A87AD',
			        fillOpacity: 0.05
		        };
	        }
	        geojson = L.geoJson(json, {
		        //onEachFeature: onEachFeature,
		        style : style
	        }).addTo(map);
	      });
	      
	    data.forEach(function(d,i) {
	      circle = L.circle([d.lat, d.lon], Math.sqrt(parseInt(d.population)*4000), {
			color: color(d.debt),
			fillColor: color(d.debt),
			fillOpacity: 1,
			weight: 1
		  }).addTo(map);
		  rnd = Math.round(d.population/1000)*1000;
		  //because of bug in Leaflet, the following does not work properly (the overlays are always appended after the circles):
		  description = '<div class="alert alert-info"><strong>'+d.name+'</strong><br>Population: '+rnd+'<br>Fed.Debt: '+d.debt+' $(pesos)/capita';
		  circle.bindPopup(description);
		  
		  L.marker([d.lat, d.lon], {icon: L.divIcon({className: 'div-icon',html: d.name})}).addTo(map);
	    });
	  });
	  
	  
    </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.7.3/leaflet.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

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

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

https://d3js.org/d3.v3.min.js