Skip to content

Instantly share code, notes, and snippets.

@ppKrauss
Forked from ruliana/.block
Last active October 28, 2019 14:18
Show Gist options
  • Save ppKrauss/0c33364240e841fa23e78b21005f792c to your computer and use it in GitHub Desktop.
Save ppKrauss/0c33364240e841fa23e78b21005f792c 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 standard Mercator, at EPSG:4326 datum.

The polygons are simplified, making the file really small. Comparing with Albers used by IBGE's Statistical Grid.

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>
<html>
<head>
<meta charset="utf-8">
<title>Brazilian States Topojson</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<style>
#brMap1 .state {
fill: #bfe;
fill-opacity: 0.6;
}
#brMap1 .state:hover { fill: #d78; }
#brMap1 .state_contour {
fill: none;
stroke: black;
stroke-linejoin: round;
}
#brMap1 rect.map_canvas {
stroke: #F00;
fill: none;
stroke-width: 4; /* 0.25 to 5 */
opacity: 0.6; /* 0 to 0.5 */
}
#brMap1 .map_gridCell {
stroke: #F55;
fill: none;
stroke-width: 2; /* 0.25 to 5 */
opacity: 0.9; /* 0 to 0.5 */
}
</style>
<script>
// Define map size on screen
var width=596, height=660,
svg, g, path;
function ready(shp) {
// 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");
}
function ONLOAD() {
svg = d3.select("body svg")
.attr("width", width)
.attr("height", height);
g = svg.append("g")
// Align center of Brazil to center of map
var projection = d3.geoMercator()
.scale(815)
.center([-52, -15])
.translate([width / 2 + 18, height / 2 + 20]);
path = d3.geoPath().projection(projection);
d3.json("./br-states.json").then(ready);
d3.select(self.frameElement).style("height", height + "px");
g.attr("id","brMap1");
g.append("rect") // the canvas frame
.attr("x", 0 ).attr("y", 0 )
.attr("class","map_canvas")
.attr("width",width).attr("height",height)
;
const cellWidth = width/9.0;
const cellHeight = height/10.0;
var rectsXY = []
for (let i=0; i<9; i++) for(let j=0; j<10; j++)
rectsXY.push( {"x":cellWidth*i, "y":cellHeight*j} )
;
g.selectAll().data( rectsXY ).enter().append("rect")
.attr("x", d=>d.x).attr("y", d=>d.y )
.attr("class","map_gridCell")
.attr("width",cellWidth).attr("height",cellHeight)
;
}
</script>
</head>
<body onload="ONLOAD()">
<h3>Brazilian States Topojson and grid</h3>
Adapting https://bl.ocks.org/ruliana/1ccaaab05ea113b0dff3b22be3b4d637 to <b>D3js v5</b> ...
<br/>&nbsp;<b>MERCATOR:</b><br/><svg>
<br/>&nbsp;The Brazilian Official Statistical Grid IBGE, using <b>Albers projection:</b><br/><img src="articulacao.jpg"/>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment