D3 Examples - TP 5: Donnees spatiales test

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/queue.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .hidden {
        display: none;
    }
    div.tooltip {
        color: #222;
        background-color: #fff;
        padding: .5em;
        text-shadow: #f5f5f5 0 1px 0;
        border-radius: 2px;
        opacity: 0.9;
        position: absolute;
    }
  </style>
</head>
​
<body>
  <div>
  <input id="slider" type="range" value="1" min="1" max="100" step="1" />
  <span id="week">week</span>
</div>
  <script>
        var width = 700,
          height = 580;
​
        var svg = d3.select( "body" )
        .append( "svg" )
          .attr( "width", width )
          .attr( "height", height );
    
    var tooltip = d3.select('body').append('div')
            .attr('class', 'hidden tooltip');
    
    var g = svg.append( "g" ); 
​
    
    var projection = d3.geo.conicConformal().center([2.454071, 46.279229]).scale(3000)  //definition de la projection
                .translate([width/2, height/2]) ;
           //on la décale pour qu'elle soit dans le même espace que notre svg
                //.scale([500])
​
    var path = d3.geo.path()           //mapping des données spatiales à la proj
                 .projection(projection);
    
    var color = d3.scale.quantize()  
                .range(["rgb(246,239,247)",
                                    "rgb(189,201,225)",
                  "rgb(103,169,207)",
                  "rgb(28,144,153)",
                  "rgb(0,109,44)"]);
        
   queue()   // permet de charger les fichiers de manière asynchrone
  .defer(d3.json, "carteFrance.json")
   //.defer(d3.csv, "GrippeFrance2014.csv")
  .defer(d3.csv, "GrippeFrance2003-15.csv")
  .await(processData);  // une fois les fichiers chargé, la fonction processData
                        // est appelée avec les fichiers en arguments
              
    
    function processData(error,francejson,grippedata) { 
      //ON initialise minValue et maxValue 
      var minValue = Infinity;
      var maxValue = -Infinity;
      weeksArray = Object.keys(grippedata[0]);
      
​
      //Calcul de minValue et maxValue sur tout le tableau
      for (var i = 1; i < grippedata.length; i++) { //on ignore la 1ere ligne
                //var cle = Object.keys(grippedata[i]) //on récupère le titre de chaque colonne
        for (var j =1 ; j < weeksArray.length ; j++){
             var k = weeksArray[j] //cle [j] = semaine j
             if (grippedata[i][k]){
           if (parseFloat(grippedata[i][k]) > maxValue){
                                 maxValue = parseFloat(grippedata[i][k])
               }
               if (parseFloat(grippedata[i][k]) < minValue){
                 minValue = parseFloat(grippedata[i][k])
               }
             }
        }
  }
        //on ajuste le domaine de couleurs
        color.domain([minValue, maxValue]);
        //console.log("minvalue "+minValue+" max "+maxValue)
        //calcul du nombre de semaines
        var numberofweeks = weeksArray.length - 1 //c1:regions
​
        //on ajuste le slider
        d3.select('#slider').attr("max", numberofweeks)
        //console.log("num weeks "+numberofweeks)
        
     
        //On fusionne les données avec le geoJson
        for (var i = 1; i < grippedata.length; i++) { //on ignore ligne 0
        var dataRegion = grippedata[i].regions;
            var dataValue = Object.values(grippedata[i]);
           
        //Recherche de l'etat dans le GeoJSON
            for (var j = 0; j < francejson.features.length; j++) {
                var jsonRegion = francejson.features[j].properties.nom;
                if (dataRegion == jsonRegion) {
                    //On injecte la valeur de l'Etat dans le json
                    francejson.features[j].properties.value = dataValue;
​
​
                    //Pas besoin de chercher plus loin
                    break;
                }
            }
         
    
      }
      
    //lorsque la carte est chargée pour la première fois, afficher par défaut semaine1 
    affichageInitial(francejson)
    updateViz(1)
    }
    
    d3.select("#slider").on("input", function() {
            updateViz(+this.value);
        });
    
    function updateViz(slider){
      d3.select('#week').html("Semaine "+ weeksArray[slider] );
      affichage(slider);
    }
    
    
    function affichageInitial(francejson){
       g.selectAll("path")
            .data(francejson.features)
            .enter()
            .append("path")
            .attr("d", path)
            .style("fill", function(d) {
                //on prend la valeur recuperee plus haut
                var value = d.properties.value;
                    
                if (value && value[1]) {
                    return color(value[1]);
                } else { 
                    // si pas de valeur alors en gris
                    return "#ccc";
                }
            })
      
    .on('mousemove', function(d) {
                    var mouse = d3.mouse(svg.node()).map(function(d) {
                        return parseInt(d);
                    });
                    var value = d.properties.value;
                                var valeuraffichee;
                    if (value && value[1]){
                      valeuraffichee = value[1];
                    }
                                else{
                      valeuraffichee = "Aucune donnée";
                    }
                    tooltip.classed('hidden', false)
                        .attr('style', 'left:' + (mouse[0] + 15) +
                                'px; top:' + (mouse[1] - 35) + 'px')
                        .html(d.properties.nom+ " : "+ valeuraffichee);
                })
                .on('mouseout', function() {
                    tooltip.classed('hidden', true);
                });
        // draw legend
  var legend = svg.selectAll(".legend")
      .data(color.range())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; })
       
​
  // draw legend colored rectangles
  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", function(d){ return d;});
​
  // draw legend text
  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) {
        var r = color.invertExtent(d);
        return "["+parseInt(r[0])+","+parseInt(r[1])+"]";
    });
    }
    
    function affichage(currentWeek){
      g.selectAll("path")
            .style("fill", function(d) {
                //on prend la valeur recupere plus haut
                var value = d.properties.value;
​
​
                if (value && value[currentWeek]) {
                    return color(value[currentWeek]);
                } else { 
                    // si pas de valeur alors en gris
                    return "#ccc";
                }
            })
      
    .on('mousemove', function(d) {
                    var mouse = d3.mouse(svg.node()).map(function(d) {
                        return parseInt(d);
                    });
                    var value = d.properties.value;
                                var valeuraffichee;
                    if (value && value[currentWeek]){
                      valeuraffichee = value[currentWeek];
                    }
                                else{
                      valeuraffichee = "Aucune donnée";
                    }
                    tooltip.classed('hidden', false)
                        .attr('style', 'left:' + (mouse[0] + 15) +
                                'px; top:' + (mouse[1] - 35) + 'px')
                        .html(d.properties.nom+ " : "+ valeuraffichee);
                })
                .on('mouseout', function() {
                    tooltip.classed('hidden', true);
                });
      
      
      
    }
   
    
    
        
   
​
 
  </script>
</body>
​
    