D3 Examples - gripe fr

xxxxxxxxxx
 
<!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 = 980,
          height = 780;
        var color = d3.scaleLinear()
        .range(["pink","brown"]);
        var svg = d3.select( "body" )
        .append( "svg" )
          .attr( "width", width )
          .attr( "height", height );
​
    var projection = d3.geoConicConformal().center([2.454071,   46.279229]).scale(2800);
​
    var path = d3.geoPath() // d3.geo.path avec d3 version 3
                 .projection(projection);
    
    d3.csv("GrippeFrance2014.csv", function(data) {
    color.domain([0, 1500]);
​
    d3.json("regions.json", function(json) {
      /* Fusionner les donnees avec le GeoJSON des regions: */
      for (var i = 0; i < data.length; i++) {
        for(var j=0; j<json.features.length; j++) {
          if(data[i].region == json.features[j].properties.nom) {
                var dataValue = parseFloat(data[i].somme2014);
            json.features[j].properties.value= dataValue;
        }
        }
      }
      svg.selectAll("path")
           .data(json.features)
           .enter()
           .append("path")
           .attr("d", path);
      
      svg.selectAll("path")
        .style("fill", function(d) {
              var value = d.properties.value;
              return color(value);
      });
    });
});
    //Encapsulation:
    
  </script>
</body>
​
​
​
​
​
Popular / About Aurélien’s Block 3bd4b19b6706617c1f4e4d53d3a5725e
Updated November 28, 2017
3bd4b19b6706617c1f4e4d53d3a5725e
​
Open
Built with blockbuilder.org
​
forked from aurelient's block:
​
forked from aurelient's block:
​
forked from aurelient's block:
​
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" ); 
    
    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)"]);
    
    var path = d3.geoPath()
                 .projection(projection);
    
    
    // Chargement des donnees
        d3.csv("us-ag-productivity-2004.csv", function(data) {
                //Set input domain for color scale
                color.domain([
                    d3.min(data, function(d) { return d.value; }), 
                    d3.max(data, function(d) { return d.value; })
                ]);
      
            d3.json("us-states.json", function(json) {
          //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;
                }
            }       
        }
        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
LICENSE#
Released under the The MIT License.
    