Carte Grippe France

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

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