Based on the Map of Thailand by Master Krist Wongsuphasawat, a simple map of Colombia using GeoJSON and D3.js
As in Krist example:
I obtained the Colombian GeoJSON by transforming the Colombian shapefiles by Maurix Suárez, using:
ogr2ogr -f GeoJSON -t_srs EPSG:4326 Colombia.geo.json depto.shp
forked from john-guerra's block: GeoJson map of Colombia
forked from anonymous's block: GeoJson map of Colombia
forked from davidgutierrez's block: GeoJson map of Colombia
xxxxxxxxxx
<meta charset="utf-8">
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Josefin+Slab|Arvo|Lato|Vollkorn|Abril+Fatface|Old+Standard+TT|Droid+Sans|Lobster|Inconsolata|Montserrat|Playfair+Display|Karla|Alegreya|Libre+Baskerville|Merriweather|Lora|Archivo+Narrow|Neuton|Signika|Questrial|Fjalla+One|Bitter|Varela+Round);
.tract {
stroke: #777;
stroke-width: 0.1px;
}
.tract:hover {
stroke: orange;
}
.tract-border {
fill: none;
/*stroke: #777;*/
stroke-width: 0.1px;
pointer-events: none;
}
.tract-border-state {
fill: none;
stroke: #333;
stroke-width: 0.5px;
pointer-events: none;
}
.legend {
font-family: sans-serif;
font-size: 10pt;
}
.legendTitle {
font-weight: bold;
font-size:11pt;
}
.background {
fill:#a5a5a6;
}
</style>
<svg width="900" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.11.0/d3-legend.min.js"></script>
<script src="coolEffects.js"></script>
<script>
var formatNumber = d3.format("$,.2f"),
formatBillion = function(x) { return formatNumber(x / 1e9) + "MM"; },
formatMillion = function(x) { return formatNumber(x / 1e6) + "M"; },
formatThousand = function(x) { return formatNumber(x / 1e3) + "k"; };
function formatAbbreviation(x) {
var v = Math.abs(x);
return (
v >= .9995e9 ? formatBillion :
v >= .9995e6 ? formatMillion
: formatThousand)(x);
}
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
margin = { top: 20, bottom:20, right: 20, left: 20},
centered,
fmt = d3.format(" 0.2%");
fmt2 = d3.format("$,");
function ready(error, mapData, data) {
if (error) throw error;
var dictCities = {};
data.forEach(function (d) {
//Parse the percentages
d.result = d["PorcentajedeCubrimiento"];
var res = {};
dictCities[d.Departamento.toUpperCase()]=d;
});
var min = d3.min(data, function(d) { return d.PorcentajedeCubrimiento; });
var max = d3.max(data, function(d) { return d.PorcentajedeCubrimiento; });
var color = d3.scaleSequential(d3.interpolateGreens)
.domain([min, max]);
var land = topojson.feature(mapData, {
type: "GeometryCollection",
geometries: mapData.objects.depts.geometries
});
var landState = topojson.feature(mapData, {
type: "GeometryCollection",
geometries: mapData.objects.depts.geometries.filter(function(d) {
return (d.id / 10000 | 0) % 100 !== 99;
})
});
var g = svg.append("g");
// EPSG:32111
var path = d3.geoPath()
.projection(d3.geoTransverseMercator()
.rotate([74 + 3 / 6, -38 - 50 / 60])
.fitExtent([[margin.left, margin.top], [width-margin.right, height-margin.bottom]], land));
var pathState = d3.geoPath()
.projection(d3.geoTransverseMercator()
.rotate([74 + 30 / 60, -38 - 50 / 60])
.fitExtent([[margin.left, margin.top], [width-margin.right, height-margin.bottom]], landState));
g.selectAll("path")
.data(land.features)
.enter().append("path")
.attr("class", "tract")
.on('click', clicked)
.style("fill", function (d) {
var city = dictCities[d.properties.dpt];
if (city)
return color(city.result);
else {
console.log(d.properties.dpt);
return color(0);
}
})
.attr("d", path)
.on("mouseover", function(d) {
// Draw effects
// textArt(d.properties.dpt);
})
.append("title")
.text(function(d) {
var city = dictCities[d.properties.dpt];
var msg = d.properties.dpt+"\n";
if (city)
msg += " Porcentaje de Cubrimiento: " + fmt(city.result);
msg += "\n Aportes Valorizados: " + city.FechaAportesValorizados+" : "+formatAbbreviation(city.AportesValorizados);
msg += "\n Pasivo Pensional: " + city.FechaPasivoPensional+" : "+formatAbbreviation(city.PasivoPensional);
return msg;
})
g.append("path")
.datum(topojson.mesh(mapData, mapData.objects.mpios, function(a, b) { return a !== b; }))
.attr("class", "tract-border")
.attr("d", path);
g.append("path")
.datum(topojson.mesh(mapData, mapData.objects.depts, function(a, b) { return a !== b; }))
.attr("class", "tract-border-state")
.attr("d", pathState);
// The legend
svg.append("g")
.attr("class", "legend")
.attr("transform", "translate(660,20)");
var legendLinear = d3.legendColor()
// .shapeWidth(30)
.cells(7)
.orient('vertical')
.title('Porcentaje de Cubrimiento')
.labelFormat(fmt)
.labelAlign("start")
.scale(color);
svg.select(".legend")
.call(legendLinear);
// When clicked, zoom in
function clicked(d) {
console.log("Clicked!");
var x, y, k;
// Compute centroid of the selected path
if (d && centered !== d) {
var centroid = path.centroid(d);
x = centroid[0];
y = centroid[1];
k = 6;
centered = d;
} else {
x = width / 2;
y = height / 2;
k = 1;
centered = null;
}
// // Highlight the clicked province
// svg.selectAll('path')
// .style('fill', function(d){return centered && d===centered ? '#D5708B' : d;});
// Zoom
// g.transition()
// .duration(750)
// .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')scale(' + k + ')translate(' + -x + ',' + -y + ')');
}
}
d3.queue()
.defer(d3.json, "colombia.geo.json" )
.defer(d3.csv, "datosDepto.csv" )
.await(ready);
</script>
https://d3js.org/d3.v4.min.js
https://d3js.org/d3-scale-chromatic.v1.min.js
https://d3js.org/topojson.v1.min.js
https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.11.0/d3-legend.min.js