tp_grippe

<!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; }
    div.tooltip {
        color: #222;
        background-color: #fff;
        padding: .5em;
        text-shadow: #f5f5f5 0 1px 0;
        border-radius: 2px;
        opacity: 0.9;
        position: absolute;
    }
    .hidden {
        display: none;
    }
  </style>
  
</head>

<body>
  
  <div>
    <input id="slider" type="range" value="1" min="1" max="52" step="1" />
    <span id="week">"05/01/14"</span>
  </div>
  <script>
        var svg = d3.select( "body" )
          .append( "svg" )
            .attr( "width", 700 )
            .attr( "height", 580 );
        var projection = d3.geoConicConformal()
          .center([2.454071, 46.279229])
          .scale(2505)
          .translate([700/2, 580*(0.9/2)])
        var path = d3.geoPath() 
            .projection(projection);
        var tooltip = d3.select('body').append('div')
            .attr('class', 'hidden tooltip');
        var slider = document.getElementById("slider");
        var output = document.getElementById("week");
        output.innerHTML = "05/01/14";
        slider.oninput = function() {
          output.innerHTML = this.value;
        }  
        color = d3.scaleQuantize()
            .range(["rgb(188,228,174)","rgb(160,210,115)",
                    "rgb(70,199,70)","rgb(35,117,35)"])
        d3.csv("GrippeFrance2014.csv", function(data) {
          columns = Object.keys( data[0] )
          var nb_col = columns.length
 
          var weeksArray = Object.keys(data[0]).slice(1);
          console.log(weeksArray)
          d3.json("regions.json", function(json) {
            for (var i = 0; i < data.length; i++) {
              var region = data[i].region;
              var sum_influenza = 0
              my_values = d3.values(data[i])
              for (var k = 1; k< nb_col-2;k++){
                sum_influenza+=+my_values[k]
              }
              for (var j = 0; j < json.features.length; j++){
                var json_region = json.features[j].properties.nom;
                if (region == json_region){
                  json.features[i].properties.sum_influenza=sum_influenza;
                  casted=Object.values(data[i]).slice(1)
                  for (var m = 0; m< casted.length;m++){
                    casted[m]= +casted[m]
                  }                 
                  json.features[j].properties.influ_by_week=casted;
                  break;
                }
              }
            }
            
            function drawMap(currentWeek) {
              
              color.domain([
                d3.min(data, function(d) { return d[weeksArray[currentWeek]]; }),
                d3.max(data, function(d) { return d[weeksArray[currentWeek]]; })
              ]);
              
              carte = svg.selectAll("path")
                .data(json.features);
              carte
                .attr("class", "update")
                .style("fill", function(d){
                    var influ_by_week = d.properties.influ_by_week
                    if (influ_by_week) {
                      return color(influ_by_week[currentWeek]);
                    }else{
                      return "#ccc";
                    }
                  })
                  .on('mousemove', function(d) {
                    var mouse = d3.mouse(svg.node()).map(function(d) {
                      return parseInt(d);
                    });
                    if (d.properties.influ_by_week){
                      tooltip.classed('hidden', false)
                        .attr('style', 'left:' + (mouse[0] + 15) +
                              'px; top:' + (mouse[1] - 35) + 'px')
              					.html(d.properties.nom+ " - "+
                              d.properties.influ_by_week[currentWeek]);
                    } else {
                      tooltip.classed('hidden', false)
                        .attr('style', 'left:' + (mouse[0] + 15) +
                              'px; top:' + (mouse[1] - 35) + 'px')
                        .html(d.properties.nom+ " - Unknown value.");
                    }
                  })
                  .on('mouseout', function() {
                    tooltip.classed('hidden', true);
                   });
                
              carte.enter()
                .append("path")
                .attr("class", "enter")
                .attr("d", path)
                .style("fill", function(d){
                  var influ_by_week = d.properties.influ_by_week
                  if (influ_by_week) {
                    return color(influ_by_week[0]);
                  }else{
                    return "#ccc";
                  }
                })
                .on('mousemove', function(d) {
                  //console.log(d.properties.influ_by_week)
                  var mouse = d3.mouse(svg.node()).map(function(d) {
                    return parseInt(d);
                  });
                  if (d.properties.influ_by_week){
                    tooltip.classed('hidden', false)
                      .attr('style', 'left:' + (mouse[0] + 15) +
                            'px; top:' + (mouse[1] - 35) + 'px')
                      .html(d.properties.nom+ " - "+ d.properties.influ_by_week[0]);
                  } else {
                    tooltip.classed('hidden', false)
                      .attr('style', 'left:' + (mouse[0] + 15) +
                            'px; top:' + (mouse[1] - 35) + 'px')
                      .html(d.properties.nom+ " - Unknown value.");
                  }
                  
                })
                .on('mouseout', function() {
                  tooltip.classed('hidden', true);
                 });
              }  
              drawMap(1)
              function updateViz(value){
                if (value<51){d3.select('#week').html(weeksArray[value]);
								} else {d3.select('#week').html("Total in 2014.")}
                
                drawMap(value);  
              }
              d3.select("#slider").on("input", function() {
                updateViz(+this.value);
              });
            })
        });
  </script>
</body>

https://d3js.org/d3.v4.min.js