D3 Examples - TP5 : Grippe en France

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">Faire défiler les semaines</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)
            .translate([width/2, height/2]) ;
​
    var path = d3.geo.path()           // mapping des données spatiales à la proj
                 .projection(projection);
    
    var color = d3.scale.quantize()  
            .range(['rgb(247,251,255)','rgb(222,235,247)','rgb(198,219,239)','rgb(158,202,225)','rgb(107,174,214)','rgb(66,146,198)','rgb(33,113,181)','rgb(8,69,148)']);    
    
    queue()   // permet de charger les fichiers de manière asynchrone
            .defer(d3.json, "carte.json")
            .defer(d3.csv, "GrippeFrance2003-15.csv")
            .await(processData);  // une fois les fichiers chargés, la fonction processData
                                    // est appelée avec les fichiers en arguments    
    
    function processData(error, francejson, grippedata) {
            if (error) throw error;
        minimum = + Infinity ;
        maximum = - Infinity ;
        weekArray = Object.keys(grippedata[1]) ;
        for (var i = 1; i < grippedata.length; i++){
            for (var j = 1; j < (Object.keys(grippedata[1]).length -1); j++){
                    var a = parseFloat(grippedata[i][Object.keys(grippedata[1])[j]]) 
                    if (a < minimum) {
                        minimum = a ;              
                    }
                    if (a > maximum) {
                        maximum = a ;
                    }
            }
        }
        color.domain([minimum, maximum]);
        var numberofweeks = Object.keys(grippedata[1]).length -2 ;
        d3.select('#slider').attr("max", numberofweeks)
      
                // On fusionne les donnees avec le GeoJSON
        for (var i = 0; i < grippedata.length; i++) {
            // Nom de la region
                var dataRegion = grippedata[i].regions;
            // Valeur de la grippe
                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 la region dans le json
                    francejson.features[j].properties.value = dataValue;
                    // Pas besoin de chercher plus loin
                    break;
                }
            } 
        }
        drawMap(francejson, 1)
    }
    
        
    function updateViz(val){
        d3.select('#week').html("Semaine du " + weekArray[val]);
        drawMap("carte.json", val)
    }
    
    
    d3.select("#slider").on("input", function() {
                updateViz(+this.value);
        });
     
     
    function drawMap(json, currentWeek) {
            carte = svg.selectAll("path")
​
            // code en cas de mise a jour de la carte / de changement de semaine
                carte
            .style("fill", function(d) {
                // on prend la valeur recuperee plus haut
                var value = d.properties.value;
                if (value && value[currentWeek]) {
                    return color(value[currentWeek]);
                } else { 
                    // si pas de valeur alors en gris
                    return "#b7b7b7";
                }
            })
              
                .on('mousemove', function(d) {
                    var mouse = d3.mouse(svg.node()).map(function(d) {
                        return parseInt(d);
                    });
                    var variable = d.properties.value ; 
                if (variable && variable[currentWeek]){
                    b = variable[currentWeek] ;
                } else {
                        b = "Aucune donnée"  ;  
                }
          
                tooltip.classed('hidden', false)
                    .attr('style', 'left:' + (mouse[0] + 15) + 'px; top:' + (mouse[1] - 35) + 'px')
                    .html(d.properties.nom + " : " + b);
                })
                
            .on('mouseout', function() {
                    tooltip.classed('hidden', true);
                });
​
​
                // code pour la creation de la carte quand les donnees sont chargees la 1e fois.
            carte
                .data(json.features)
            .enter()
                    .append("path")
                    .attr("d", path)
                .style("stroke", "#b7b7b7")
            .style("fill", function(d) {
                // on prend la valeur recuperee plus haut
                var value = d.properties.value;
                if (value && value[currentWeek]) {
                    return color(value[currentWeek]);
                } else { 
                    // si pas de valeur alors en gris
                    return "#b7b7b7";
                }
            })
              
                .on('mousemove', function(d) {
                    var mouse = d3.mouse(svg.node()).map(function(d) {
                        return parseInt(d);
                    });
                    var variable = d.properties.value ; 
                if (variable && variable[currentWeek]){
                    b = variable[currentWeek] ;
                } else {
                        b = "Aucune donnée"  ;  
                }
          
                tooltip.classed('hidden', false)
                    .attr('style', 'left:' + (mouse[0] + 15) + 'px; top:' + (mouse[1] - 35) + 'px')
                    .html(d.properties.nom + " : " + b);
                })
                
            .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) { 
                        return "[" + parseInt(color.invertExtent(d)[0]) + ";" + parseInt(color.invertExtent(d)[1]) + "]" ;
            })
                d3.slider().axis(true).min(2003).max(2015).step(1)
      
    }
​
      
  
    
  </script>
</body>
​
​
    