xxxxxxxxxx
<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"/>
<!--<script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>-->
<!--<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">-->
<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