D3 Examples - carte_france

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .province {
      stroke: #fff;
      stroke-width: 1px;
    }
    .province:hover {
      fill: #2C2C2C;
    }
    .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;
    }
​
​
    .ticks {
      font: 10px sans-serif;
    }
​
    .track,
    .track-inset,
    .track-overlay {
      stroke-linecap: round;
    }
​
    .track {
      stroke: #000;
      stroke-opacity: 0.3;
      stroke-width: 10px;
    }
​
    .track-inset {
      stroke: #ddd;
      stroke-width: 8px;
    }
​
    .track-overlay {
      pointer-events: stroke;
      stroke-width: 50px;
      stroke: transparent;
      cursor: crosshair;
    }
​
    .handle {
      fill: #fff;
      stroke: #000;
      stroke-opacity: 0.5;
      stroke-width: 1.25px;
    }
  </style>
</head>
​
<body>
  <div>
    <div>
      <input id="slider" type="range" value="1" min="1" max="52" step="1"/>
      <span id="week">Slider html</span>
      <br/>
      <span class="val_cx"/>
    </div>
    
  </div>
​
  <script>
    //AVANT PROPOS
    //Ce TP présente 2 sliders, un HTML comme demandé dans la partie bonus, un fait en D3 (trouvé sur le web puis adapté à ce tp). Les deux sliders ont le même effet sur la map. L'intérêt d'avoir deux sliders est faible, mais je voulais faire différents tests et puisque ca fonctionne je n'ai pas eu le coeur de l'enlever.
    
    
    var semaine_max = 52;
    var width = 700,
        height = 580,
        margin = {right: 50, left: 50};
​
    var tooltip = d3.select('body').append('div')
    .attr('class', 'hidden tooltip');
​
    var svg = d3.select( "body" )
    .append( "svg" )
    .attr( "width", width )
    .attr( "height", height );
​
    var json_modifie = "";
    var data_hs = "";
    
    var slider = svg.append("g")
    .attr("class", "slider")
    .attr("transform", "translate(" + margin.left + "," + height / 2 + ")");
​
    var projection = d3.geoConicConformal().center([2.454071,  46.279229]).scale(2000);
​
    json_grippe = "https://lyondataviz.github.io/teaching/lyon1-m2/2017/data/GrippeFrance2014.csv";
​
    var x = d3.scaleLinear()
    .domain([0, 52])
    .range([0, 200])
    .clamp(true);
​
    //Slider D3
    var slider = svg.append("g")
    .attr("class", "slider")
    .attr("transform", "translate(" + margin.left + "," + height / 2 + ")");
​
    //Slider HTML
    var snde_slider = d3.select('#slider');
    snde_slider.on("input", function() {
      updateMap(this.value);
      d3.select("#week").text("Slider html : semaine " + this.value);
    });
    
    //Slider D3
    slider.append("line")
      .attr("class", "track")
      .attr("x1", x.range()[0])
      .attr("x2", x.range()[1])
      .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
      .attr("class", "track-inset")
      .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
      .attr("class", "track-overlay")
      .call(d3.drag()
            .on("start.interrupt", function() { slider.interrupt(); })
            .on("start drag", function() { 
      handle.attr("cx", function(){
        var val = x(x.invert(d3.event.x));
        var coord_cx = val;
        coord_cx = parseInt(52 * coord_cx / 200);
        var a_ecrire = "";
        if(coord_cx == semaine_max){
          a_ecrire = "Somme des valeurs sur l'année 2014"
        }
        else{
          a_ecrire = "Slider D3 : semaine " + coord_cx;
        }
        d3.select(".val_cx").text(a_ecrire);
        updateMap(coord_cx);
        return val;});
    }));
​
    slider.insert("g", ".track-overlay")
      .attr("class", "ticks")
      .attr("transform", "translate(0," + 18 + ")")
      .selectAll("text")
      .data(x.ticks(10))
      .enter().append("text")
      .attr("x", x)
      .attr("text-anchor", "middle")
      .text(function(d) { return "s" + d; });
​
    var handle = slider.insert("circle", ".track-overlay")
    .attr("class", "handle")
    .attr("r", 9);
    
​
    /****************************************************/
    //Dessine la map pour le premier affichage
    //Au premier chargement, affiche la somme des valeurs de novembre
    drawMap(semaine_max);
        
    function drawMap(num_semaine){
      d3.csv(json_grippe, function(data) {
​
        d3.json("https://lyondataviz.github.io/teaching/lyon1-m2/2017/data/regions.json", function(json) {
​
          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)"]);
​
          //semaine 52 = somme de novembre (fin TP avant partie bonus)
          for (var i = 0; i < data.length; i++) {
            data[i].novSomme = 0;
            for (var k in data[i]) {
              if(k[3] == "1" && k[4] == "1"){
                data[i].novSomme += parseInt(data[i][k]);
              }
            }
          }
​
          data_hs = data;
          var arr_somme = [];
          for (var i = 0; i < data.length; i++) {
            arr_somme.push(parseInt(data[i].novSomme));
          }
​
          var max_somme = Math.max.apply(Math, arr_somme);
          var min_somme = Math.min.apply(Math, arr_somme);
​
          if(num_semaine == semaine_max){
            color.domain([-55, max_somme]);
          }
          else{
            color.domain([min_somme, max_somme]);
          }
​
          //On fusionne les donnees avec le GeoJSON des regions
          for (var i = 0; i < Object.keys(json.features).length; i++) {
            for (var j = 0; j < data.length; j++){
              if(json.features[i].properties.nom == data[j].region){
                json.features[i].properties.valeur = data[j].novSomme;
              }
            }
          }
          
          json_modifie = json;
          
          var path = d3.geoPath().projection(projection);
          var provinces = svg.selectAll(".province").data(json.features).enter();
​
          provinces.selectAll("path")
            .data(json.features)
            .enter()
            .append("path")
            .attr("d", path)
            .attr("fill", function(d, i){
            if(json.features[i].properties.valeur == undefined){
              return "grey";
            }
            var val = json.features[i].properties.valeur;
            return color(val);
          })            
            .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(i){
              var val = d.properties.nom + " : " + d.properties.valeur;
              if(d.properties.valeur == undefined){
                val =  d.properties.nom + " : /?\\";
              }
              return val;
            });
          })
            .on('mouseout', function() {
            tooltip.classed('hidden', true);
          });
​
        });
      });
    }
    
    /***************************************************/
    //Met à jour la map en actualisant le tooltip et la couleur, ne redessine pas toute la map
    //La semaine 52 indique la somme totale pour l'année 2014 de chaque région
    function updateMap(num_semaine){
      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 t = d3.transition()
      .duration(750)
      .ease(d3.easeLinear);
​
      svg.selectAll("path")
        //.data(json_modifie.features)
        .transition(t)
        .attr("fill", function(d, j){
​
        update_data_hs(num_semaine);
​
        //Actualisation du domaine de couleur
        var arr_somme = [];
        for (var i = 0; i < data_hs.length; i++) {
          arr_somme.push(parseInt(data_hs[i].novSomme));
        }
​
        var max_somme = Math.max.apply(Math, arr_somme);
        var min_somme = Math.min.apply(Math, arr_somme);
        color.domain([min_somme, max_somme]);
​
        var val = 0;
        if(d.properties.valeur != undefined){
          val = d.properties.valeur;
        }
        else return "grey";
        return color(val);
      });
      
      svg.selectAll("path")    
        .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(i){
          update_data_hs(num_semaine);
          var valeur = 0;
          for(var k = 0; k < Object.keys(data_hs).length - 1; k++){
            if(data_hs[k].region == d.properties.nom){
              valeur = data_hs[k].novSomme;
              break;
            }
          }
​
          if(valeur == 0){
            if(k < Object.keys(data_hs).length - 1)
                return data_hs[k].region + " : /?\\";
            else
              return " /?\\";
          }
          
          return data_hs[k].region + " : " + valeur;
        });
      })
        .on('mouseout', function() {
        tooltip.classed('hidden', true);
      });
    }
​
    
    /*************************************************************/
    //Met à jour les données de data en fonction de la semaine demandée
    function update_data_hs(num_semaine){
      //Récupère la valeur de chaque semaine
      for (var i = 0; i < data_hs.length; i++) {
        var weeksArray = Object.keys(data_hs[i]);
        //Le dernier element du tableau est "novSomme"
        weeksArray.pop();
        //Le premier element est "somme2014"
        weeksArray.splice(0, 1);
        data_hs[i].novSomme = data_hs[i][weeksArray[num_semaine]];
      }
    }
  </script>
</body>
​
    