john-guerra/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Map of Colombia with cities and states

Simple map of Colombia with cities (municipios) and states (departamentos)
GEO Json from Javier Moreno mapa-colombia-js project on github
forked from mbostock's block: New Jersey State Plane

  
## colombia-municipios.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              colombia-municipios.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.tract {
  fill: #eee;
}
.tract:hover {
  fill: orange;
}
.tract-border {
  fill: none;
  stroke: #777;
  pointer-events: none;
}
.tract-border-state {
  fill: none;
  stroke: #333;
  stroke-width: 1.5px;
  pointer-events: none;
}
</style>
<svg width="960" height="550"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    margin = { top: 20, bottom:20, right: 20, left: 20};
d3.json("colombia-municipios.json", function(error, data) {
  if (error) throw error;
  var land = topojson.feature(data, {
    type: "GeometryCollection",
    geometries: data.objects.mpios.geometries.filter(function(d) {
      return (d.id / 10000 | 0) % 100 !== 99;
    })
  });
  var landState = topojson.feature(data, {
    type: "GeometryCollection",
    geometries: data.objects.depts.geometries.filter(function(d) {
      return (d.id / 10000 | 0) % 100 !== 99;
    })
  });
  // EPSG:32111
  var path = d3.geoPath()
      .projection(d3.geoTransverseMercator()
          .rotate([74 + 30 / 60, -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));

  svg.selectAll("path")
    .data(land.features)
    .enter().append("path")
      .attr("class", "tract")
      .attr("d", path)
    .append("title")
      .text(function(d) { return d.properties.name; });
  svg.append("path")
      .datum(topojson.mesh(data, data.objects.mpios, function(a, b) { return a !== b; }))
      .attr("class", "tract-border")
      .attr("d", path);

  svg.append("path")
      .datum(topojson.mesh(data, data.objects.depts, function(a, b) { return a !== b; }))
      .attr("class", "tract-border-state")
      .attr("d", pathState);
});
</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.tract {
	fill: #eee;
	}
	.tract:hover {
	fill: orange;
	}
	.tract-border {
	fill: none;
	stroke: #777;
	pointer-events: none;
	}
	.tract-border-state {
	fill: none;
	stroke: #333;
	stroke-width: 1.5px;
	pointer-events: none;
	}
	</style>
	<svg width="960" height="550"></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>
	<script>
	var svg = d3.select("svg"),
	width = +svg.attr("width"),
	height = +svg.attr("height"),
	margin = { top: 20, bottom:20, right: 20, left: 20};
	d3.json("colombia-municipios.json", function(error, data) {
	if (error) throw error;
	var land = topojson.feature(data, {
	type: "GeometryCollection",
	geometries: data.objects.mpios.geometries.filter(function(d) {
	return (d.id / 10000 \| 0) % 100 !== 99;
	})
	});
	var landState = topojson.feature(data, {
	type: "GeometryCollection",
	geometries: data.objects.depts.geometries.filter(function(d) {
	return (d.id / 10000 \| 0) % 100 !== 99;
	})
	});
	// EPSG:32111
	var path = d3.geoPath()
	.projection(d3.geoTransverseMercator()
	.rotate([74 + 30 / 60, -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));

	svg.selectAll("path")
	.data(land.features)
	.enter().append("path")
	.attr("class", "tract")
	.attr("d", path)
	.append("title")
	.text(function(d) { return d.properties.name; });
	svg.append("path")
	.datum(topojson.mesh(data, data.objects.mpios, function(a, b) { return a !== b; }))
	.attr("class", "tract-border")
	.attr("d", path);

	svg.append("path")
	.datum(topojson.mesh(data, data.objects.depts, function(a, b) { return a !== b; }))
	.attr("class", "tract-border-state")
	.attr("d", pathState);
	});
	</script>