D3 Examples - France Grippe

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    .province {
        stroke: #fff;
        stroke-width: 1px;
    }
    .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="0" min="0" max="51" step="1"/>
  <span id="week" >1</span>
  <br>
  <input id="player" type="button" value="play">
</div>
<script>
        var width = 700,
          height = 580;
​
        var svg = d3.select( "body" )
        .append( "svg" )
          .attr( "width", width )
          .attr( "height", height );
​
    var projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2800);
​
    var path = d3.geoPath() // d3.geo.path avec d3 version 3
                 .projection(projection);
    
    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)"]);
    
    var tooltip = d3.select('body').append('div')
            .attr('class', 'hidden tooltip');
    var maxVal, currmaxVal;
  
    d3.csv("GrippeFrance2014.csv", function(data) {
                //Set input domain for color scale
        var weeksArray = Object.keys(data[0]).slice(1,53);
        
        //console.log(weeksArray)
                
            d3.json("dataset.json", function(json) {
          //On fusionne les donnees avec le GeoJSON
            for (var i = 0; i < data.length; i++) {
            //Nom de l'etat
      
            var dataState = data[i].region;
         
            //Valeur associee a l'etat
            var dataValue = parseFloat(data[i].somme2014);
​
            //Recherche de l'etat dans le JSON
            for (var j = 0; j < json.features.length; j++) {
                var jsonState = json.features[j].properties.nom;
                //console.log(jsonState)
                if (dataState == jsonState) {
                    //On injecte la valeur de l'Etat dans le json
                    json.features[j].properties.value = Object.values(data[i]).slice(1,53);
                                        currmaxVal = d3.max(json.features[j].properties.value, function(v){return parseFloat(v);})
                    maxVal = d3.max([currmaxVal, maxVal])
                    
                                        
                    //Pas besoin de chercher plus loin
                    break;
                }
            }       
        }
          color.domain([0,maxVal]);
                    //console.log(json.features)
          var timer;
          var duration =500;
          drawMap(0);//drawing map.
          
          function drawMap(value){
            var week = value;
            d3.select('#week').html(weeksArray[week]);
            
            carte = svg.selectAll("path")
              .data(json.features);
​
            // code en cas de mise a jour de la carte / de changement de semaine
             
          var vals = []
          
          for(k = 0; k < json.features.length;k++){
            if (json.features[k].properties.value){
                vals.push(json.features[k].properties.value[week])
            }
          }
             
             carte.enter()
               .append("path")
               .attr("class", "enter")
               .attr("d", path)
               
            
            var provinces = svg.selectAll('.province')
                .data(json.features).enter();
            
            provinces.append('path')
            .attr('class', function(d) {
                    return 'region ' + d.properties.nom;
                })
                .attr('d', path)
                    .style("stroke", "#fff")
                    .style("fill", function(d) {
               //on prend la valeur recupere plus haut
               var value = d.properties.value;
               if (value) {
                 return color(value[week]);
               } 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(function() {
                var value = d.properties.value;
                if(value){return d.properties.nom.concat(": ".concat(d.properties.value[week]));}
                else{
                  return d.properties.nom.concat(": No Data");
                }});
                })
                .on('mouseout', function() {
                    tooltip.classed('hidden', true);
                });
            
           }
          
          
            function rollViz(){//this function was created to change automatically the date after some time
                            var val = d3.select("#slider").node().value;
              if(val == 51){
                d3.select("#slider").node().value = 0;
              }else{
                d3.select("#slider").node().value++
              }
              drawMap(d3.select("#slider").node().value);
              timer = setTimeout(rollViz, duration);//uncomment if you want the map to change by itself.
            }
          
          function updateViz(value){
                drawMap(value);
            }
            
          d3.select("#slider").on("input", function() {
            //clearTimeout(timer);//cancelling the setTimeout if it exists
            drawMap(this.value);
           console.log(this.value); //d3.select("#player").attr("value","play");//setting the play button value to "play".
            //updateViz(this.value);
          });
          
          d3.select("#player").on("click",function(){
            if(this.value == "play"){
              d3.select("#player").attr("value","pause");
              timer = setTimeout(rollViz, duration); 
            }else{
              clearTimeout(timer);
              d3.select("#player").attr("value","play");
            }
          });
        });
    });
    
        
​
  </script>
</body>
​
    