carte_france_grippe

forked from aurelient's block:

forked from MilowB's block:

<!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>

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]);

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>

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