D3 Examples - TP5 Grippe Final

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/topojson.v1.min.js"></script>
    <script src="https://d3js.org/queue.v1.min.js"></script>
<style>
        .axis path,
        .axis tick,
        .axis line {
            fill: none;
            stroke: #dddddd;
        }
​
        .axis text {
            font-size: 12px;
            fill: #AAAAAA;
            font-weight: 400;
        }
​
        .legendTitle {
            font-size: 14px;
            fill: #4F4F4F;
            font-weight: 300;
        }
        body {
            font-size: 1rem;
            font-family: 'Open Sans', sans-serif;
            font-weight: 400;
            fill: #8C8C8C;
            text-align: left;
        }
    .hidden {
        display: none;
    }
    div.tooltip {
        color: #000000;
        background-color: #fff9fa;
        padding: .2em;
        text-shadow: #f5f5f5 0 1px 0;
        border-radius: 2px;
        opacity: 0.85;
        position: absolute;
    }
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<div>
  <input id="slider" type="range" value="1" min="1" max="100" step="1" />
  <span id="semaine">semaine</span>
</div>
    
<body>
  <script>
        var width = 760,
          height = 500;
    
    var tooltip = d3.select('body').append('div')
            .attr('class', 'hidden tooltip');
    
        var svg = d3.select( "body" )
        .append( "svg" )
          .attr( "width", width )
          .attr( "height", height );
    
    var g = svg.append( "g" ); 
    var max_feature = 0;
    var projection = d3.geo.conicConformal()
                .translate([width/2, height/2])
                .center([1.454071, 46.6]).scale(2700);
    
    var path = d3.geo.path()
                 .projection(projection);
    
     //Set input domain for color scale
    
     var color = d3.scale.linear()
        .domain([0,2000/4,2000])
        .range(["#f5d5d5","#d65656","#a5262a", "#450708"])
        .interpolate(d3.interpolateHcl);
          
    queue()   // permet de charger les fichiers de manière asynchrone
  .defer(d3.json, "us-states.json")
  .defer(d3.csv, "GrippeFrance2003-15.csv")
  .await(processData)
​
    function processData(error, regions, grippe) {
      
      // On affecte les données aux régions
      var min = 0
      var max = 0  
        for(var data of grippe) {
        var dataRegion = data["regions"];
        var value = d3.values(data);
​
        value.splice(0, 1);
        value.splice(value.length+1, 1);
                console.log(value.length)
        // Recherche de la région dans le GeoJson
        for (var j = 0; j < regions.features.length; j++) {
          var jsonRegion = regions.features[j].properties.nom;
          if (dataRegion == jsonRegion) {
            //On injecte la valeur de la région dans le json
            regions.features[j].properties.values = value;
            value_temp = value
            tempmax = d3.max(value_temp.map(Number))
            if (tempmax > max) {max=tempmax}
            break;
            }
          }
       }
      max = 2600;
            
      drawMap(regions, 0)
      
      // Valeurs possibles du slider
      var week_slider = d3.keys(grippe[0]);
      d3.select('#slider').attr("max", week_slider.length-2)
      
      // Récupération de la valeur
      function updateViz(value){
        d3.select("#semaine").html("Semaine du " + week_slider[value])
                drawMap(regions, value)
        } 
      
      function drawMap(regions, currentWeek) {
        carte = svg.selectAll("path")
          .data(regions.features);
​
        // Mise à jour de la carte
        carte
          .attr("class", "update")
          .style("fill", function(d) {
          try { var value1 = d.properties.values[currentWeek];
               
          }
          catch(err) { }
                    
          if (value1) {
            return color(value1);
          } else { 
            // si pas de valeur alors en gris
            return "#e5e5e5";
          }})
                    .on('mousemove', function(d) {
        
            // On met l'opacité à 0.2
            d3.select(this).style("opacity", "0.2");
​
          var mouse = d3.mouse(svg.node()).map(function(d) {
            return parseInt(d);
          })
        
          if(d.properties.values && d.properties.values[currentWeek]){
             
             tooltip.classed('hidden', false)
              .attr('style', 'left:' + (mouse[0] + 10) +
                    'px; top:' + (mouse[1] - 20) + 'px')
              .html(d.properties.nom + " : " + d.properties.values[currentWeek]);
          }
​
        })
        
        .on('mouseout', function() {
          tooltip.classed('hidden', true);
            // On remet l'opacité à 1 et on ajoute une transition comme fait dans le 2eme TP
          d3.select(this).transition().duration(200).style("opacity", "1");
​
        });
            
        
        // Première carte
                if (currentWeek == 0){
        carte.enter()
          .append("path")
          .attr("d", path)
          .attr("class", "enter")
              .style("fill", "##e5e5e5");
          }}
            
      
      d3.select("#slider").on("input", function() {
                updateViz(+this.value)
      })
      
      //Initialisation pour que le slider commence en date du 28/09/2003
      updateViz(1);
​
}
    // draw legend
  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .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("y", 40)
      .attr("width", 30)
      .attr("height", 18)
      .style("fill", color);
​
  // draw legend text
  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 50)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return Math.round(d);})
  
  svg.append("text")  
  .attr("x", (width / 2)) 
    .attr("y", 34 )
    .attr("text-anchor", "middle") 
    .style("font-size", "22px") 
    .style("text-decoration", "underline") 
    .attr("fill","black")
    .text(" Carte intéractive de l'évolution de la grippe en France de 2003 à 2015");
​
  </script>
</body>
    