CrashLaker/br-states.json

## br-states.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              br-states.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
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="//unpkg.com/d3@5.7.0/dist/d3.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
    <style>
    path {
        fill: none;
    }
    </style>
</head>
<body>
<svg id="map"></svg>
<script>
var width = 500,
    height = 500;

var color = d3.scaleSequential().domain([1,120]).interpolator(d3.interpolatePuRd)

var svg = d3.select('#map')
    .attr("width", width)
    .attr("height", height)
    .attr('style', 'border:1px solid black;')

var g = svg.append("g");

// Align center of Brazil to center of map
var projection = d3.geoMercator()
    .scale(650)
    .center([-52, -13])
    .translate([270,225]);

var path = d3.geoPath()
    .projection(projection);

d3.json('./br-states.json').then((rs) => build_map(rs))

function build_map(shp) {
    // Extracting polygons and contours
    states = topojson.feature(shp, shp.objects.estados);
    states_contour = topojson.mesh(shp, shp.objects.estados);
    console.log(states, states_contour)
    // Desenhando estados
    color.domain([0,27])
    console.log(states)

    state_nodes = g.selectAll(".estado")
        .data(states.features)
        .enter()
        .append("path")
        .attr("class", "state")
        .attr("state", (d) => d.id)
        .attr("d", path)
        .style('fill', (d,i) => color(i))
        //.style('fill', 'white')

    g.append("path")
        .datum(states_contour)
        .attr("d", path)
        .attr("class", "state_contour")

    //for (let state of states.features.map((d) => d.id)){
    //    console.log(state)
    //    //console.log(state, rs[state], color_leg(rs[state]))
    //    d3.select('[state='+state+']')
    //            .style('fill', color(1))
    //            //.attr('fill', 'black')
    //}
}
</script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script type="text/javascript" src="//unpkg.com/d3@5.7.0/dist/d3.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>
	<style>
	path {
	fill: none;
	}
	</style>
	</head>
	<body>
	<svg id="map"></svg>
	<script>
	var width = 500,
	height = 500;

	var color = d3.scaleSequential().domain([1,120]).interpolator(d3.interpolatePuRd)

	var svg = d3.select('#map')
	.attr("width", width)
	.attr("height", height)
	.attr('style', 'border:1px solid black;')

	var g = svg.append("g");

	// Align center of Brazil to center of map
	var projection = d3.geoMercator()
	.scale(650)
	.center([-52, -13])
	.translate([270,225]);

	var path = d3.geoPath()
	.projection(projection);

	d3.json('./br-states.json').then((rs) => build_map(rs))

	function build_map(shp) {
	// Extracting polygons and contours
	states = topojson.feature(shp, shp.objects.estados);
	states_contour = topojson.mesh(shp, shp.objects.estados);
	console.log(states, states_contour)
	// Desenhando estados
	color.domain([0,27])
	console.log(states)

	state_nodes = g.selectAll(".estado")
	.data(states.features)
	.enter()
	.append("path")
	.attr("class", "state")
	.attr("state", (d) => d.id)
	.attr("d", path)
	.style('fill', (d,i) => color(i))
	//.style('fill', 'white')

	g.append("path")
	.datum(states_contour)
	.attr("d", path)
	.attr("class", "state_contour")

	//for (let state of states.features.map((d) => d.id)){
	// console.log(state)
	// //console.log(state, rs[state], color_leg(rs[state]))
	// d3.select('[state='+state+']')
	// .style('fill', color(1))
	// //.attr('fill', 'black')
	//}
	}
	</script>
	</body>
	</html>