GeoJson map of Colombia

Geo Json map of Colombia

Based on the Map of Thailand by Master Krist Wongsuphasawat, a simple map of Colombia using GeoJSON and D3.js

As in Krist example:

Each province is color-coded by the length of its name in English.
Hover each province to see text effects.
New font is chosen randomly every time you change the province.
Click on a province to zoom in. Click somewhere else to zoom out.

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

<!DOCTYPE html>
<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>

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 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