D3 Examples - GrippeFrance2003-2015

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>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
     .regions {
        fill: #000;
        stroke: #fff;
        stroke-width: 3px;
    }
    .regions:hover {
        fill: #666;
        stroke: #F00;
        stroke-width: 3px;
    }
    .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;
        border:2px solid #E74D35  ;
        box-shadow: 3px 3px 1px 0px rgba(0,0,0,0.75);
    }
    #titleAndLegend{
      font-family: 'Roboto', sans-serif;
    }
    path {/*important! on voit mieux les bordures des régions!!!*/
      stroke: black;
      stroke-width: 0.25px;
      fill: grey;
    }
  </style>
</head>
​
<body>
<div>
  <input id="slider" type="range" value="1" min="1" max="100" step="1" />
  <span id="week">week</span>
</div>
​
<script>
var width = 700,
height = 580;
var numberofweeks=0;
var displayValue = d3.format(",.0f");
var svg = d3.select( "body" )
    .append( "svg" )
  .attr( "width", width )
  .attr( "height", height );
​
// On rajoute un groupe
var g = svg.append( "g" ); 
​
var projection = d3.geo.conicConformal().translate([width/2, height/2])
            .center([2.454071, 46.279229]).scale(3100);
​
​
// On definie une echelle de couleur
var color = d3.scale.quantile().range(["rgb(237,248,233)","rgb(186,228,179)",
                                        "rgb(116,196,118)","rgb(49,163,84)",
                                        "rgb(0,109,44)"]);
​
var path = d3.geo.path().projection(projection);
​
​
var tooltip = d3.select('body').append('div')
        .attr('class', 'hidden tooltip');
var titleAndLegend = d3.select('body').append('div')
        .attr('id', 'titleAndLegend');
​
// permet de charger les fichiers de manière asynchrone  
queue().defer(d3.json, "regionfrance.json").defer(d3.csv, "GrippeFrance2003-15.csv").await(processData);
​
//
function processData(error,francejson,grippedata){
for (var i = 0; i < grippedata.length; i++) {
var dataState = grippedata[i].regions;
var table = d3.values(grippedata[i]);
for (var j = 0; j < francejson.features.length; j++) {
    var jsonState = francejson.features[j].properties.nom;             
    if (dataState == jsonState) {
       //On injecte la valeur de l'Etat dans le json
      francejson.features[j].values = table;
        break;
      }
  }
}
  
  var numberofweeks = Object.keys(grippedata[0]).length - 1;      
  d3.select('#slider').attr("max", numberofweeks)
  d3.select("#slider").on("input", function() {
    updateViz(+this.value,grippedata,francejson);
  });
​
  //c'est partie !!
  updateViz(1,grippedata,francejson);
  drawLegends();
};
​
/**
* les fonctions suivante sont utilisées dans la fonction processData
**/
function updateViz(value,grippedata,francejson){
//value:current number of weeks, total number of week=620
          var weeksArray = Object.keys(grippedata[0]);   
          var tweek = weeksArray[value ]
          d3.select('#week').html("week:"+tweek);
          drawMap(francejson,value,grippedata);
        
};
function drawMap(json, currentWeek,grippedata) {
  color.domain([ 
    d3.min(grippedata, function(d) { 
      var row = d3.values(d);
​
      if (typeof row != 'undefined'){
        var r = (row[currentWeek]=='')?0:row[currentWeek];
​
        return r;
      }
    }),
    d3.max(grippedata, function(d) { 
      var row = d3.values(d);
      
      if (typeof row != 'undefined'){
        var r = (row[currentWeek]=='')?0:row[currentWeek]; 
        return r;  
      }
    })
  ]);
  
   carte = svg.selectAll("path").data(json.features);
​
   carte.attr("class", "update") 
   .attr("d", path)
   .style("fill",function(d){   
     if(typeof d.values != 'undefined'){
        var value = (d.values[currentWeek]=='')?0:d.values[currentWeek];  
        if (value) {
          return color(value);
        } else {
          //Il n'ya pas de valeur donc color en gris
          return "#ccc";
        }
      }
    })
   .on('mousemove', function(d) {
      var v = d.values;
      var regionName = d.properties.nom;
      var mouse = d3.mouse(svg.node()).map(
        function(d) {
          return parseInt(d);
      });
      
      if (typeof v != 'undefined'){ 
        var nbMalade = (v[currentWeek]=='')?'indisponible':v[currentWeek];
        tooltip.classed('hidden', false)
                .attr('style', 'left:' + (mouse[0] + 15) +'px; top:' + (mouse[1] - 35) + 'px')
                .html(regionName + "- Nb malades :" + nbMalade);
      }
      //when we hover the region, it's opacity change
      d3.select(this).style('opacity',"0.5");
    })
   .on('mouseout', function() {     
       tooltip.classed('hidden', true);
        //when we hover the region, it's opacity change
        d3.select(this).style('opacity',"1");
    });   
  
   carte.enter().append("path")
        .attr("class", "enter")  
        .attr("d", path)
        .style("fill", function(d) {
          if(typeof d.values != 'undefined'){
            var value = (d.values[currentWeek]=='')?0:d.values[currentWeek]; 
            if (value) {
              return color(value);
            } else {
              return "#ccc";
            }
          }
        })
        .on('mousemove', function(d) {
            var v = d.values;
            var regionName = d.properties.nom
            var mouse = d3.mouse(svg.node()).map(
              function(d) {
                return parseInt(d);
            });
            if (typeof v != 'undefined')
            { 
              var nbMalade = (v[currentWeek]=='')?'Pas disponible':v[currentWeek]
              tooltip.classed('hidden', false).attr('style', 'left:' + (mouse[0] + 15) +
            'px; top:' + (mouse[1] - 35) + 'px')
                     .html(regionName + "- Nb malades : " + nbMalade  );
            }
            //when we hover the region, it's opacity change
            d3.select(this).style('opacity',"0.5");
        })
        .on('mouseout', function() {     
           tooltip.classed('hidden', true);
           d3.select(this).style('opacity',"1");
        });   
};
function drawLegends(){
  var legend = svg.selectAll(".legend")
                  .data(color.quantiles())
                  .enter().append("g")
                  .attr("class", "legend")
                  .attr("transform", function(d, i) { return "translate(0," + i * 22 + ")"; });
​
  legend.append("text")
        .attr("x", width - 24)
        .attr("y", 9)
        .attr("dy", ".30em")
        .style("text-anchor", "end")
        .text(function(d) { 
                if(Math.round(d) <=5){
                  final="très leger";
                }else if(Math.round(d) <=10){
                  final="leger";
                }else if(Math.round(d) <=15){
                  final="moyen";
                }else if(Math.round(d) <=20){
                  final="grave";
                }
                return final;
              }
        )
​
  legend.append("rect")
        .attr("x", width - 20)
        .attr("width", 20)
        .attr("height", 50)
        .style("fill", color);
​
  //we also draw a title under the svg
  d3.select("#titleAndLegend").append("h2").text("Etat de la grippe en France(2003-2015)").style('text-decoration',"underline");
  d3.select("#titleAndLegend").append("a")
  .attr("href", "https://goo.gl/M9CFkz")
  .html("Source:GrippeFrance2003-15.csv");
​
  d3.select("#titleAndLegend").append("p")
    .text("page projet: https://lyondataviz.github.io/teaching/lyon1-m2/tp5.html")
    .style("font-size","1.2em")
    .style('color',"#343030");
}
</script>
</body>
</html>
    