D3 Examples - [DataViz] TP4

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; }
    /* ADDED FOR SHOW REGION NAME ON MOUSEOVER*/
    .province {
        fill: #000;
        stroke: #fff;
        stroke-width: 1px;
    }
    .province:hover {
        opacity: 0.5;
    }
    .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;
    }
    /*END*/
  </style>
</head>
​
<body>  
  <!-- Question 5 On rajouter un slider qui permettra de naviguer entre les différentes semaines du jeu de données.-->
  <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 );
    
    // On rajoute un groupe englobant toute la visualisation pour plus tard
    var g = svg.append( "g" ); 
    
// ETAPE 1 : Changer la valeur de projection comme mentionné en TP
    var projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2500);
    
    // On definie une echelle de couleur
        var color = d3.scaleQuantize()  
                .range(["rgb(213,239,204)", 
                  "rgb(169,221,160)", 
                  "rgb(94,186,97)", 
                  "rgb(42,141,71)", 
                  "rgb(0,91,36)"]);
    
     
   //   console.log("this is color domain : " + color.domain());
    
    var path = d3.geoPath() // d3.geo.path avec d3 version 3
                 .projection(projection);
​
    d3.csv("GrippeFrance2014.csv", function(data) {
      //Set input domain for color scale
                color.domain([
                    d3.min(data, function(d) { return parseFloat(d.somme2014); }), 
                    d3.max(data, function(d) { return parseFloat(d.somme2014); })
                ]);
    
    d3.json("regions.json", function(json) {
            
       var sommeNovembre = parseFloat(0); // Initialiser la somme à 0
       var sommeS1 = parseFloat(0);       // la somme pour la 1ere semaine de Novembre
       var sommeS2 = parseFloat(0);             // la somme pour la 2eme semaine de Novembre
       var sommeS3 = parseFloat(0);             // la somme pour la 3eme semaine de Novembre
       var sommeS4 = parseFloat(0);             // la somme pour la 4eme semaine de Novembre
      //On fusionne les donnees avec le GeoJSON des regions
      for (var i = 0; i < data.length; i++) {
            //Nom de l'etat
           var dataState = data[i].region;
           ////////////////// Partie 3 
             sommeS1 += parseFloat(data[i]["02/11/14"]);
           sommeS2 += parseFloat(data[i]["09/11/14"]);
           sommeS3 += parseFloat(data[i]["16/11/14"]);
           sommeS4 += parseFloat(data[i]["23/11/14"]);
           //////////////////
          //Valeur associee a l'etat
           var dataValue = parseFloat(data[i].somme2014); 
            //Recherche de l'etat dans le GeoJSON
          for (var j = 0; j < json.features.length; j++) {
               var jsonState = json.features[j].properties.nom;
               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;
              }
          }     
      }
     
      sommeNovembre = sommeS1 + sommeS2 + sommeS3 + sommeS4;
       // J'affiche la somme finale
      //console.log("Le nombre de malades en Novembre est :" + sommeNovembre);
      
      // AFFICHER SUR LA CARTE le nombre de malade en Novembre
      var afficheNbrMaladesNovembre = d3.select('body').append('div')
                                            .attr('class', 'hidden tooltip');
      afficheNbrMaladesNovembre.classed('hidden', false)
                        .attr('style', 'left:' + 15 + 'px; top:' + 35 + 'px')
                        .html("Le nombre de malade en novembre est : " + sommeNovembre);
      
      /* Colorer chaque région selon l'intensité de la grippe.
      g.selectAll("path")
          .data(json.features)
          .enter()
          .append("path")
          .attr("d", path)
          .style("fill", function(d) {
           var value = d.properties.value; 
                  if (value) {
                        return color(value);
                    } else { 
                      // si pas de valeur alors en gris
                        return "#ccc";
                    }
               });*/
      
        //Question 4 DEBUT_____________________________
        // Création d'une variable "tooltip" correspondant au rectangle contenant (region, somme2014) qui sera affiché quand on met la sourie sur une region de la caret.
        var tooltip = d3.select('body').append('div')
            .attr('class', 'hidden tooltip');
      
       var provinces = svg.selectAll('.province')
                .data(json.features).enter();
            
             provinces.append('path')
                .attr('class', function(d) {
                  return 'province ' + d.properties.code;
                })
                .attr('d', path)
                    .style("fill", function(d) {// Colorer chaque région selon l'intensité de la grippe.
                     var value = d.properties.value; 
                            if (value) {
                                  return color(value);
                              } 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);
                    });
                    tooltip.classed('hidden', false)
                        .attr('style', 'left:' + (mouse[0] + 15) +
                                'px; top:' + (mouse[1] - 35) + 'px')
                        .html(d.properties.nom + ", " + d.properties.value);
                })
                .on('mouseout', function() {
                    tooltip.classed('hidden', true);
                });
        // END   ______________________________________
      
      
      
    }); //End of L  d3.json("regions.json", function(json)
     
});// End of L43 d3.csv("GrippeFrance2014.csv", function(data)
​
​
  </script>
</body>
 
    