keikhcheung/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from aurelient's block: 
forked from aurelient's block: 
forked from aurelient's block: 
forked from aurelient's block: TP4-2-Mapping

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
		var width = 700,
  		  height = 580;

		var svg = d3.select( "body" )
  		.append( "svg" )
		  .attr( "width", width )
		  .attr( "height", height );

    // On rajoute un groupe englobant toute la visualisation pour plus tard
    var g = svg.append( "g" );

    // definition de la projection
    var projection = d3.geoAlbersUsa()
    			.translate([width/2, height/2])
			    .scale([500]);

		// On definie une echelle de couleur
		var color = d3.scaleQuantize()
    			.range(["rgb(237,248,233)",
									"rgb(186,228,179)",
                  "rgb(116,196,118)",
                  "rgb(49,163,84)",
                  "rgb(0,109,44)"]);

    // mapping des donnees spatiales a la projection
    var path = d3.geoPath()
                 .projection(projection);


    // Chargement des donnees
		d3.csv("us-ag-productivity-2004.csv", function(data) {
      console.log(data) // Check link element denomination: .state

				//Set input domain for color scale
        // Link data min and max values to colour scheme
				color.domain([
					d3.min(data, function(d) { return d.value; }),
					d3.max(data, function(d) { return d.value; })
				]);

        // Inject data value in CSV table to D3 JavaScript object
     		d3.json("us-states.json", function(json) {
          console.log(json) // Check link element denomination: .properties.name

          //On fusionne les donnees avec le GeoJSON
	        for (var i = 0; i < data.length; i++) {
            //Nom de l'etat
            var dataState = data[i].state;

            //Valeur associee a l'etat
            var dataValue = parseFloat(data[i].value);


            //Recherche de l'etat dans le GeoJSON
            for (var j = 0; j < json.features.length; j++) {
                var jsonState = json.features[j].properties.name;
                if (dataState == jsonState) {
                    //On injecte la valeur de l'Etat dans le json
                    json.features[j].properties.value = dataValue;


                    //Pas besoin de chercher plus loin
                    break;
                }
            }
        }

        // Paint graph
        g.selectAll("path")
            .data(json.features)
            .enter()
            .append("path")
            .attr("d", path)
            .style("fill", function(d) {
                //on prend la valeur recupere plus haut
                var value = d.properties.value;


                if (value) {
                    return color(value);
                } else {
                    // si pas de valeur alors en gris
                    return "#ccc";
                }
            });
        });
    });

  </script>
</body>

## us-ag-productivity-2004.csv

          
            state
            value

            
              Alabama
              1.1791

            
              Arkansas
              1.3705

            
              Arizona
              1.3847

            
              California
              1.7979

            
              Colorado
              1.0325

            
              Connecticut
              1.3209

            
              Delaware
              1.4345

            
              Florida
              1.6304

            
              Georgia
              1.3891

            
              Iowa
              1.5297

            
              Idaho
              1.4285

            
              Illinois
              1.5297

            
              Indiana
              1.4220

            
              Kansas
              1.0124

            
              Kentucky
              0.9403

            
              Louisiana
              0.9904

            
              Maine
              1.3877

            
              Maryland
              1.2457

            
              Massachusetts
              1.1458

            
              Michigan
              1.1058

            
              Minnesota
              1.2359

            
              Missouri
              1.0212

            
              Mississippi
              1.1306

            
              Montana
              0.8145

            
              North Carolina
              1.3554

            
              North Dakota
              1.0278

            
              Nebraska
              1.1619

            
              New Hampshire
              1.0204

            
              New Jersey
              1.2831

            
              New Mexico
              0.8925

            
              Nevada
              0.9640

            
              New York
              1.1327

            
              Ohio
              1.2075

            
              Oklahoma
              0.7693

            
              Oregon
              1.3154

            
              Pennsylvania
              1.0601

            
              Rhode Island
              1.4192

            
              South Carolina
              1.1247

            
              South Dakota
              1.0760

            
              Tennessee
              0.7648

            
              Texas
              0.8873

            
              Utah
              0.9638

            
              Virginia
              0.9660

            
              Vermont
              1.0762

            
              Washington
              1.1457

            
              Wisconsin
              1.1130

            
              West Virginia
              0.5777

            
              Wyoming
              0.5712

## us-states.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us-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.
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>
	var width = 700,
	height = 580;

	var svg = d3.select( "body" )
	.append( "svg" )
	.attr( "width", width )
	.attr( "height", height );

	// On rajoute un groupe englobant toute la visualisation pour plus tard
	var g = svg.append( "g" );

	// definition de la projection
	var projection = d3.geoAlbersUsa()
	.translate([width/2, height/2])
	.scale([500]);

	// On definie une echelle de couleur
	var color = d3.scaleQuantize()
	.range(["rgb(237,248,233)",
	"rgb(186,228,179)",
	"rgb(116,196,118)",
	"rgb(49,163,84)",
	"rgb(0,109,44)"]);

	// mapping des donnees spatiales a la projection
	var path = d3.geoPath()
	.projection(projection);


	// Chargement des donnees
	d3.csv("us-ag-productivity-2004.csv", function(data) {
	console.log(data) // Check link element denomination: .state

	//Set input domain for color scale
	// Link data min and max values to colour scheme
	color.domain([
	d3.min(data, function(d) { return d.value; }),
	d3.max(data, function(d) { return d.value; })
	]);

	// Inject data value in CSV table to D3 JavaScript object
	d3.json("us-states.json", function(json) {
	console.log(json) // Check link element denomination: .properties.name

	//On fusionne les donnees avec le GeoJSON
	for (var i = 0; i < data.length; i++) {
	//Nom de l'etat
	var dataState = data[i].state;

	//Valeur associee a l'etat
	var dataValue = parseFloat(data[i].value);


	//Recherche de l'etat dans le GeoJSON
	for (var j = 0; j < json.features.length; j++) {
	var jsonState = json.features[j].properties.name;
	if (dataState == jsonState) {
	//On injecte la valeur de l'Etat dans le json
	json.features[j].properties.value = dataValue;


	//Pas besoin de chercher plus loin
	break;
	}
	}
	}

	// Paint graph
	g.selectAll("path")
	.data(json.features)
	.enter()
	.append("path")
	.attr("d", path)
	.style("fill", function(d) {
	//on prend la valeur recupere plus haut
	var value = d.properties.value;


	if (value) {
	return color(value);
	} else {
	// si pas de valeur alors en gris
	return "#ccc";
	}
	});
	});
	});

	</script>
	</body>
	state	value
	Alabama	1.1791
	Arkansas	1.3705
	Arizona	1.3847
	California	1.7979
	Colorado	1.0325
	Connecticut	1.3209
	Delaware	1.4345
	Florida	1.6304
	Georgia	1.3891
	Iowa	1.5297
	Idaho	1.4285
	Illinois	1.5297
	Indiana	1.4220
	Kansas	1.0124
	Kentucky	0.9403
	Louisiana	0.9904
	Maine	1.3877
	Maryland	1.2457
	Massachusetts	1.1458
	Michigan	1.1058
	Minnesota	1.2359
	Missouri	1.0212
	Mississippi	1.1306
	Montana	0.8145
	North Carolina	1.3554
	North Dakota	1.0278
	Nebraska	1.1619
	New Hampshire	1.0204
	New Jersey	1.2831
	New Mexico	0.8925
	Nevada	0.9640
	New York	1.1327
	Ohio	1.2075
	Oklahoma	0.7693
	Oregon	1.3154
	Pennsylvania	1.0601
	Rhode Island	1.4192
	South Carolina	1.1247
	South Dakota	1.0760
	Tennessee	0.7648
	Texas	0.8873
	Utah	0.9638
	Virginia	0.9660
	Vermont	1.0762
	Washington	1.1457
	Wisconsin	1.1130
	West Virginia	0.5777
	Wyoming	0.5712