D3 Examples - TP4 Data viz france ESSAI UCBL 2017

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>
  <div>
    <input id="slider" type="range" value="1" min="1" max="52" step="1" />
  <span id="week">week</span>
</div>
  <script>
    
    /****** Définition des variables globales ****/
    var dataGrippe;
    var geoJsonFrance;
    var dateKeys;
    var width = 700,
          height = 580;
​
        var svg = d3.select( "body" )
        .append( "svg" )
          .attr( "width", width )
          .attr( "height", height );
​
    var carte;
    var projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2800);
​
    var path = d3.geoPath() // d3.geo.path avec d3 version 3
                 .projection(projection);
    // On definit 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)"]);
    color.domain([0, 2000]);
    
    d3.select("#slider").on("input", function() {
      d3.select('#week').html(" valeur de la semaine selectionnée ");
      console.log("lol");
      
            updateMap(+this.value);
        });
    
    
    /***** Recupération des données ******/
    
    d3.queue()
      .defer(d3.csv, "grippe.csv")
      .defer(d3.json, "france.json")
      .await(function(error, grippe, france) {
      if (error) {
        console.error('Oh dear, something went wrong: ' + error);
      }
      else {
        dataGrippe = grippe;
        geoJsonFrance = france;
        dateKeys = Object.keys(dataGrippe[0]);
        console.log(dateKeys);
        delete dateKeys[0];
        delete dateKeys[dateKeys.length-1];
        
        console.log(dateKeys[0]);
        mergeAndDisplayData();
      }
    });
    
    
    /*********   fonctions d'execution    ********/
    
    
    function mergeAndDisplayData() {
      var sum = 0;
      for (var i = 0; i < dataGrippe.length; i++) {
          sum += +dataGrippe[i]["somme2014"];
        }
      
      
      for (var i = 0; i < dataGrippe.length; i++) {
        //console.log(geoJsonFrance);
          var total = +dataGrippe[i]["somme2014"];
          //console.log(data);
          var ratio = (total / sum) * 200 * 100;
          //var ratio = (+dataGrippe[i]["01/06/14"] * 2000 * 100) / total;
          //console.log(ratio);
          geoJsonFrance.features[i].properties["value"] = ratio;
        
        }
      updateMap();
    }
    
    function updateMap(val) {
      carte = svg.selectAll("path")
            .data(geoJsonFrance.features);
      
      carte.enter()
          .append("path")
          .style("fill", function(d) { return color(d.properties.value); })
            .attr("class", "enter")
            .attr("d", path);
        console.log("fini");
      
      console.log(val);
      for (var i = 0; i < dataGrippe.length; i++) {
          var total = +dataGrippe[i]["somme2014"];
          //var ratio = (total / sum) * 200 * 100;
          var ratio = (+dataGrippe[i]["01/06/14"] * 2000 * 100) / total;
          //console.log(ratio);
          geoJsonFrance.features[i].properties["value"] = ratio;
        
        }
      
      carte
        .style("fill", function(d) { return color(d.properties.value); }) 
            .attr("class", "update")
        .attr("d", path);
        
    }
​
  </script>
</body>
​
    