ppKrauss/.block

## .block
license: mit
height: 600

## README.md

      
    Raw
  

              README.md
            
          
    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.

  
## articulacao.jpg

      
    Raw
  

              articulacao.jpg
            
          
## br-states.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              br-states.json
            
          
      Loading

      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>
<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>
	<!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":cellWidthi, "y":cellHeightj} )
	;
	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/> <b>MERCATOR:</b><br/><svg>
	<br/> The Brazilian Official Statistical Grid IBGE, using <b>Albers projection:</b><br/><img src="articulacao.jpg"/>

	</body>


	</html>