TP4 fini

forked from aurelient'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;
    }

.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;
    }
  </style>
</head>

<body>

var g = svg.append("g");

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)"
      ]);
    
    //Coordonnées pour la carte de France
    var projection = d3.geoConicConformal().center([2.454071,
        46.279229
      ])
      .scale(
        2800);

//d3.geoPath avec d3 version 4
    var path = d3.geoPath() // d3.geo.path avec d3 version 3
      .projection(projection);

//variable tooltip
    var tooltip = d3.select('body').append('div')
      .attr('class', 'hidden tooltip');

//Affichage contenu de la région en fonction de la semaine
    function known(d, week) {
      if (d.properties.tab != undefined) {
        var val = d.properties.tab[week];
      }
      return val
    };

//Chargement de la grippe (renommée par souci de simplification)
    d3.csv("grippe.csv", function(data) {
      
      //min et max ne fonctionnent pas, donc valeurs par défaut
      //Set input domain for color scale
      color.domain([0, 200
        //d3.min(data, function(d) { return d.value; }),
        //d3.max(data, function(d) { return d.value; })
      ]);
      
      var weeksArray = Object.keys(data[0]);
      
      var France;
      
      //partie 4
      //chargement des régions de France
      d3.json("regions.json", function(json) {

d3.select('#week').html(Object.keys(data[0])[1]);
        d3.select("#slider").on("input", function() {
          updateViz(+this.value);
        });
        
        //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) {
            
            //find name dataRegion in json file 
            var jsonRegion = json.features[j].properties.nom;
            
            if (data[i].region == jsonRegion) {
              
              json.features[j].properties.tab = Object.values(data[i]);
              //stop because result found
              break;
            }
          }
        }

// UPDATE : week and map 
        function updateViz(val) {
          d3.select('#week').html(weeksArray[val]);
          drawMap(val);
        };

France = json

g.selectAll("path")
          .data(json.features)
          .enter()
          .append("path")
          .attr("d", path);

drawMap(1);
      });

//draw map
      function drawMap(value) {
        
        carte = g.selectAll("path")
          .data(France.features)
          .on('mousemove', function(d) {
          
            var mouse = d3.mouse(g.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/>" + known(d, value));
          })
          .on('mouseout', function() {
            tooltip.classed('hidden', true);
          });

//update map 
        carte
          .attr("class", "update")
          .style("fill", function(d) {
          
            // get value found above
            var tab = d.properties.tab;
          
            if (tab) {
              
              return color(tab[value]);
              
            } else {
              // if no value matching, other color 
              return "#ccc";
              
            }

// draw map for the 1st time 
            carte.selectAll("path")
              .enter()
              .data(France.features)
              .append("path")
              .attr("class", "enter")
              .attr("d", path)
              .style("fill", function(d) {
              
                // get value found above
                var tab = d.properties.tab;
              
                if (tab) {
                  
                  return color(tab[value]);
                  
                } else {
                  // if no value matching, other color 
                  return "#ccc";
                }

})
          })
      }
    });
  </script>
</body>

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