Skip to content

Instantly share code, notes, and snippets.

@caticoa3

caticoa3/.block

Forked from john-guerra/.block
Last active Jun 13, 2020
Embed
What would you like to do?
GeoJson map of Colombia Municipios
license: mit
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment