LuisSevillano/.block

## .block
border: none
height: 600

## README.md

      
    Raw
  

              README.md
            
          
    Example using a preprojected topojson based on es-atlas by Martín González. For now using a d3-geo-projection forked version by Roger Veciana.

  
## index.html
<!DOCTYPE html>
<canvas width="960" height="600"></canvas>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>

var context = d3.select("canvas").node().getContext("2d"),
path = d3.geoPath().context(context);

var color = d3.scaleThreshold()
  .domain([5, 9, 19, 49, 74, 124, 249, 499, 1000])
  .range(["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177","#49006a"]);

d3.queue()
  .defer(d3.json, "municipalities.json")
  .defer(d3.csv, "municipalities_population.csv")
  .await(ready)

function ready(error, es, pop) {
    if (error) throw error;

    var obj = []

    // loop through the csv to create a new object accesible by ids
    pop.forEach(function(d){
        obj[d.id] = d;
    });

    var features = topojson.feature(es, es.objects.municipalities).features

    for (var i = 0; i < features.length; i++) {


        if (obj[features[i].id]) {

            context.fillStyle = color(obj[features[i].id].rate)
            context.beginPath()
            path(features[i])
            context.fill()
      }

  }

  // country border
  context.beginPath()
  path(topojson.feature(es, es.objects.nation))
  context.strokeStyle = "rgb(100, 100, 100)";
  context.stroke()


};
</script>

## municipalities.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              municipalities.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.
      
    
## municipalities_population.csv

      
    Raw
  

              municipalities_population.csv
            
          
            View raw
              (Sorry about that, but we can’t show files that are this big right now.)
        
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<canvas width="960" height="600"></canvas>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/topojson.v2.min.js"></script>
	<script>

	var context = d3.select("canvas").node().getContext("2d"),
	path = d3.geoPath().context(context);

	var color = d3.scaleThreshold()
	.domain([5, 9, 19, 49, 74, 124, 249, 499, 1000])
	.range(["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177","#49006a"]);

	d3.queue()
	.defer(d3.json, "municipalities.json")
	.defer(d3.csv, "municipalities_population.csv")
	.await(ready)

	function ready(error, es, pop) {
	if (error) throw error;

	var obj = []

	// loop through the csv to create a new object accesible by ids
	pop.forEach(function(d){
	obj[d.id] = d;
	});

	var features = topojson.feature(es, es.objects.municipalities).features

	for (var i = 0; i < features.length; i++) {


	if (obj[features[i].id]) {

	context.fillStyle = color(obj[features[i].id].rate)
	context.beginPath()
	path(features[i])
	context.fill()
	}

	}

	// country border
	context.beginPath()
	path(topojson.feature(es, es.objects.nation))
	context.strokeStyle = "rgb(100, 100, 100)";
	context.stroke()


	};
	</script>