Skip to content

Instantly share code, notes, and snippets.

@ruliana
Created May 14, 2016 00:11
Show Gist options
  • Save ruliana/1ccaaab05ea113b0dff3b22be3b4d637 to your computer and use it in GitHub Desktop.
Save ruliana/1ccaaab05ea113b0dff3b22be3b4d637 to your computer and use it in GitHub Desktop.
Brazilian States Topojson (Estados do Brasil)
license: mit
height: 600

Topojson with brazilian states (estados brasileiros).

Projection is EPSG:4326.

The polygons are simplified, making the file really small.

Display the source blob
Display the rendered blob
Raw
Loading
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>
.state {
fill: #ddc;
fill-opacity: 0.1;
}
.state_contour {
fill: none;
stroke: black;
stroke-linejoin: round;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3-queue.v2.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>
// Define map size on screen
var width = 960,
height = 600;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g");
var zoom = d3.behavior.zoom()
.translate([0, 0])
.scale(1)
.scaleExtent([1, 8])
.on("zoom", zoomed);
svg.call(zoom) // delete this line to disable free zooming
.call(zoom.event);
// Align center of Brazil to center of map
var projection = d3.geo.mercator()
.scale(650)
.center([-52, -15])
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
// Load data (asynchronously)
d3_queue.queue()
.defer(d3.json, "./br-states.json")
.await(ready);
function ready(error, shp) {
if (error) throw error;
// Extracting polygons and contours
var states = topojson.feature(shp, shp.objects.estados);
var states_contour = topojson.mesh(shp, shp.objects.estados);
// Desenhando estados
g.selectAll(".estado")
.data(states.features)
.enter()
.append("path")
.attr("class", "state")
.attr("d", path);
g.append("path")
.datum(states_contour)
.attr("d", path)
.attr("class", "state_contour");
}
// What to do when zooming
function zoomed() {
g.style("stroke-width", 1.5 / d3.event.scale + "px");
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
d3.select(self.frameElement).style("height", height + "px");
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment