D3 Examples - Carte Grippe 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; }
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var width = 960,
          height = 500;
    
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
    
    var color = d3.scaleLinear().range(['#00f2ff','red']);
​
    
        var projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2800);
​
​
    var path = d3.geoPath() // d3.geo.path avec d3 version 3
                 .projection(projection);
    
  
    // div qui sera le tooltip
    // source : https://bl.ocks.org/d3noob/a22c42db65eb00d4e369
    var div = d3.select("body").append("div")   
    .attr("class", "tooltip")
    .style("position","absolute")
    .style("background-color","white")
    .style("border","1px solid lightgrey")
    .style("border-radius","2px")
    .style("opacity", 0);
    
    
// début json
d3.json("regions.json", function(json) {
​
​
// début csv
d3.csv("GrippeFrance2014.csv",function(data){
​
  // début forEach
  data.forEach(function(d){
    
    d.region = d.region // on récupère les régions
    d.somme2014 = +d.somme2014 // on récupère les sommes des cas de grippe
​
    // on parcourt toutes les données
    for(var i = 0; i < data.length; i++) {
      
      // si le nom de la région dans regions.json est le même 
      // que celui de la région dans GrippeFrance2014.csv
      if(d.region===json.features[i].properties.nom){
        
        // on ajoute la date: data["date"]
        json.features[i].properties.somme2014=d.somme2014
​
        
      }
      }
  })// fin function & forEach
  
    // définition du range et domain de color
    color.domain(d3.extent(data,function(d){return d.somme2014;}))
   
    
    svg.selectAll("path")
           .data(json.features)
           .enter()
           .append("path")
           .attr("d", path)
                 .style("fill",function(d){return color(d.properties.somme2014);})
                 .attr("stroke","black")
                 .attr("stroke-width",1)
    .on("mouseover", function(d) {      
            div.style("opacity", 1);        
            div.html(d.properties.nom + "<br/>"  + d.properties.somme2014)  
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY - 28) + "px");    
            })                  
        .on("mouseout", function(d) {       
            div.style("opacity", 0);    
        });;
​
});  // fin csv
;}) // fin json   
    
​
  </script>
</body>
​
    