D3 Examples - TP4_dataviz

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <link rel="stylesheet" type="text/css" href="stylesheets/d3.slider.css" media="screen" />
  <script src="javascripts/d3.slider.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;
    }
  </style>
</head>
​
<body>
  <div>
    <input id="sliderMin" type="range" value="1" min="1" max="13" step="1" />
    <span id="weekBegin">Wed Jan 01 2014 To </span>
    <br/>
    <input id="sliderMax" type="range" value="13" min="1" max="13" step="1" />
    <span id="weekEnd">Thu Jan 01 2015</span>
  </div>
  <script>
    
        var width = 700,
          height = 580;
​
    var premierSemaine = 1, derniereSemaine = 13;
​
        var svg = d3.select( "body" )
        .append( "svg" )
          .attr( "width", width )
          .attr( "height", height );
​
    var projection = d3.geoConicConformal()
      .center([0, 46])
      .scale(3000)
      .translate([width / 2, height / 2]);
​
    var path = d3.geoPath() // d3.geo.path avec d3 version 3
                 .projection(projection);
   
    var tooltip = d3.select('body').append('div')
            .attr('class', 'hidden tooltip');
    
    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 json;
​
    d3.csv("GrippeFrance2014.csv", function(data) {
                
        var min = 5000;
        var max = 0;
        d3.json("regions_france.json", function(dataJson) {
          json = dataJson;
          //On fusionne les donnees avec le GeoJSON des regions
          for (var i = 0; i < data.length; i++) {
            for(var j = 0; j<json.features.length; j++){
              
              if(json.features[j].properties.nom == data[i].region){
                var value = parseInt(data[i].somme2014);
                if(value >= max) max = value;
                if(value <= min) min = value;
                json.features[j].properties.somme = value;
                json.features[j].properties.values = data[i];
              }
              
            }
          }
          
          color.domain([min/2,max]);
          
          svg.selectAll(".path").data(json.features)
            .enter().append("path")
            .attr("d", path)
            .style("fill", function(d) {
               //on prend la valeur recuperee plus haut
               var value = d.properties.somme;
               if (value) {
                    return color(value);
               } 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(d.properties.nom + " : " + d.properties.somme)
                .style('opacity', '0.9');
            })
            .on('mouseout', function() {
              tooltip.classed('hidden', true).style('opacity', '0');
            });
        });
    });
​
    // Il faut une petite fonction qui retourne les dimanche entre deux dates
    function dimanche_entre_deux_dates(firstDate, lastDate){
      // Pour recuperer le prochain dimanche
      firstDate.setDate(firstDate.getDate()-firstDate.getDay()); 
      var response = new Array();
      var i = 0;
      while(firstDate<lastDate && i<10000){
        i++;
        var j = firstDate.getDate();
        var jj = return_with_two_car(""+j);
        var m = firstDate.getMonth()+1;
        var mm = return_with_two_car(""+m);
        var yy = "" + firstDate.getFullYear()%100;
        response.push(jj+"/"+mm+"/"+yy);
        firstDate.setDate(j+7);
      }
      return response;
    }
    
    function return_with_two_car(string_number){
      if(string_number.length == 1){
        return "0" + string_number;
      }
      return string_number;
    }
​
    function calcul_somme_in_dates(stringDates, data){
      var sum = 0;
      for(var indice = 0; indice < stringDates.length; indice++){
        if(data[stringDates[indice]]){
          val = parseInt(data[stringDates[indice]]);
          sum = sum + val;
      }
      }
      return sum;
    }
​
    // when the input range changes update the circle 
    d3.select("#sliderMin").on("input", function() {
      premierSemaine = (+this.value);
      min_max_ordoner();
      mise_a_jour();
      d3.select("#weekBegin").text((new Date(2014, premierSemaine-1, 1).toDateString('mmddyy')) + " To ");
    });
​
    // when the input range changes update the circle 
    d3.select("#sliderMax").on("input", function() {
      derniereSemaine = (+this.value);
      min_max_ordoner();
      mise_a_jour();
      d3.select("#weekEnd").text((new Date(2014, derniereSemaine-1, 1).toDateString('mmddyy')));
    });
​
    function min_max_ordoner(){
      if(premierSemaine>derniereSemaine){
        var tmp  = premierSemaine; premierSemaine = derniereSemaine; derniereSemaine = tmp;
      }
      return;
    }
​
    function mise_a_jour(){
      var dateBegin = new Date(2014, premierSemaine-1, 2);
      var dateEnd = new Date(2014, derniereSemaine-1, 1);
      var stringDates = dimanche_entre_deux_dates(dateBegin,dateEnd);
      var taille = json.features.length;
      for(var other = 0; other < taille; other++){
        if(json.features[other].properties.values){
          var value = calcul_somme_in_dates(stringDates, json.features[other].properties.values);
          json.features[other].properties.somme = value;
        }
      }
​
      //color.domain([min/2,max]);
      
       svg.selectAll(".path").data(json.features)
            .enter().append("path")
            .attr("d", path)
            .style("fill", function(d) {
               //on prend la valeur recuperee plus haut
               var value = d.properties.somme;
               if (value) {
                    return color(value);
               } 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(d.properties.nom + " : " + d.properties.somme)
                .style('opacity', '0.9');
            })
            .on('mouseout', function() {
              tooltip.classed('hidden', true).style('opacity', '0');
            });
    }
​
  </script>
</body>
​
    