TP4.2-grippe-france

forked from BrunoDumas's block: TP4-grippe-france

<!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>
  <div>
    <input id="slider" type="range" value="1" min="1" max="100" step="1" />
    <span id="week">Week 28/09/03</span>
  </div>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .region:hover{
      opacity: 0.5;
    }
    .hidden {
        display: none;
    }
    div.tooltip {
        color: #222;
        background-color: #fff;
        padding: .5em;
        text-shadow: #f5f5f5 0 1px 0;
        border-radius: 10px;
      	border: darkgrey solid 1px;
        opacity: 0.9;
        position: absolute;
    }
  </style>
</head>

<body>
  <script>
    var weekNames;
    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" ); 
    
    var tooltip = d3.select('body').append('div')
    	.attr('class', 'hidden tooltip');
    
    var projection = d3.geo.conicConformal()
    	.center([2.454071, 46.279229])
    	.scale(2700);

// On definit une echelle de couleur
		var color = d3.scale.quantile()  
    			.range(
            ['rgb(255,247,236)',
             'rgb(254,232,200)',
             'rgb(253,212,158)',
             'rgb(253,187,132)',
             'rgb(252,141,89)',
             'rgb(239,101,72)',
             'rgb(215,48,31)',
             'rgb(179,0,0)',
             'rgb(127,0,0)',
             'rgb(76,0,0)',
             'rgb(20,0,0)']
          );
    
    var path = d3.geo.path()
                 .projection(projection);
    
    var processData = function(error,francejson,grippedata) {
      weekNames = Object.keys(grippedata[0]);
      var numberofweeks = Object.keys(grippedata[0]).length - 1;
      
      // MinMax de la mort
      var minMax = d3.extent(grippedata.map(
        function(row){
          return Object.values(row).slice(1).map(function(val){
            return parseInt(val)
          })
        }
      )
      .reduce(function(a, b){
        return a.concat(b);
      }));
      
      // Équivaut à :
      /*
        var min = Number.MAX_VALUE;
        var max = 0;grippedata.forEach(function(d){
        Object.keys(d).forEach(function(k){
          if(k != "regions"){
            var parsed = parseInt(d[k]);
            if(parsed < min){
              min = parsed;
            }
            if(parsed > max){
              max = parsed;
            }
          }
        });
      });
      */
      
      color.domain(minMax);
      
      d3.select('#slider').attr("max", numberofweeks);
      
      
      for (var i = 0; i < grippedata.length; i++) {
        var dataValue = Object.values(grippedata[i]);
        var dataRegion = grippedata[i].regions;
        //Recherche de l'etat dans le GeoJSON
        if(dataRegion !== "France"){
          for (var j = 0; j < francejson.features.length; j++) {
            var jsonRegion = francejson.features[j].properties.nom;
            if (dataRegion == jsonRegion) {
              //On injecte la valeur de l'Etat dans le json
              francejson.features[j].properties.values = dataValue;

//Pas besoin de chercher plus loin
              break;
            }
          }
        }
      }
      display(francejson);
    };
    
    queue()   // permet de charger les fichiers de manière asynchrone
      .defer(d3.json, "regions.geojson")
      //.defer(d3.csv, "GrippeFrance2014.csv")
      .defer(d3.csv, "GrippeFrance2003-15.csv")
      .await(processData);
    
    d3.select("#slider").on("input", function() {
      updateViz(+this.value);
    });
    
    var updateViz = function(value){
      d3.select('#week').html("Week " + weekNames[value]);

refresh(value);
    };
    
    
    // Chargement des donnees
		var display = function(data) {
        g.selectAll("path")
            .data(data.features)
            .enter()
            .append("path")
            .attr("d", path)
        		.classed('region', true)
        		.style("stroke", "black")
        		.style("stroke-width", 1)
            .style("fill", function(d) {
          
                //on prend la valeur recupere plus haut
                var values = d.properties.values;

if (values && values[1]) {
                    return color(values[1]);
                } else { 
                    // si pas de valeur alors en gris
                    return "#e2e2e2";
                }
            })
        		.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 + "<br/>" + ((d.properties.values && d.properties.values[1])?d.properties.values[1]:"Aucune donnée"));
            })
          	.on('mouseout', function() {
              tooltip.classed('hidden', true);
            });
      
      			var legend = svg.selectAll(".legend")
              .data(color.range())
            	.enter().append("g")
              .attr("class", "legend")
              .attr("transform", function(d, i) { return "translate(0," + (20 + i * 20) + ")"; });

// draw legend colored rectangles
            legend.append("rect")
                .attr("x", 18)
                .attr("width", 18)
                .attr("height", 18)
                .style("fill", function(d){return d});

// draw legend text
            legend.append("text")
                .attr("x", 90)
                .attr("y", 9)
                .attr("dy", ".35em")
                .style("text-anchor", "end")
                .text(function(d) {return "< " + parseInt(color.invertExtent(d)[1]);})
        };
    
    var refresh = function(selectedWeek) {
        g.selectAll("path")
            .style("fill", function(d) {
          
                //on prend la valeur recupere plus haut
                var values = d.properties.values;

if (values && values[selectedWeek]) {
                    return color(values[selectedWeek]);
                } else { 
                    // si pas de valeur alors en gris
                    return "#e2e2e2";
                }
            })
        		
        		.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 + "<br/>" + ((d.properties.values && d.properties.values[selectedWeek])?d.properties.values[selectedWeek]:"Aucune donnée"));
            });
        };

</script>
</body>

Modified http://d3js.org/queue.v1.min.js to a secure url

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

https://d3js.org/queue.v1.min.js