Interactive Map

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;
    }
    
    div.tooltip {
        color: #222;
        background-color: #fff;
        padding: .5em;
        text-shadow: #f5f5f5 0 1px 0;
        border-radius: 2px;
        opacity: 0.9;
        position: absolute;
    }
    
    .hidden {
        display: none;
    }
	</style>
</head>

<body>
  <script>
    var width = 700,
        height = 580;
    
    // Ajout de la palette de couleurs
    var color = d3.scaleLinear()
      .interpolate(d3.interpolateHcl)
      .range([d3.rgb("#abc1f1"), d3.rgb('#245cd5')]);
    
    var svg = d3.select( "body" )
      .append( "svg" )
      .attr( "width", width )
      .attr( "height", height );

var projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2800);

var path = d3.geoPath() // d3.geo.path avec d3 version 3
                 .projection(projection);
    
    var tooltip = d3.select('body').append('div')
    	.attr('class', 'hidden tooltip');
    
    d3.csv("GrippeFrance2014.csv", function(data) {
      color.domain([0, 250]);

d3.json("regions.json", function(json) {
        //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++){
            if(data[i].region == json.features[j].properties.nom){
              // Ajout des donnees au JSON
              Object.keys(data[i]).forEach(function(key) {
                // Pas besoin d'avoir deux fois la même donnée
                if(key !== "region"){
                  json.features[j].properties[key] = data[i][key]
                }
              });
            }
          }
        }
        
        svg.selectAll("path")
          .data(json.features)
          .enter()
          .append("path")
          .attr("d", path)
          .style("fill", function(d) {
            var value = 0;
            Object.keys(d.properties).forEach(function(key) {
              // On somme sur le mois de Novembre
              if(key.indexOf("/11/") !== -1){
                value += +d.properties[key];
              }
            });
          //if(value !==0){
          //  return(color(value))
          //}
          	return(value !==0 ? color(value):"");
        	})
        	.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(d.properties.nom)
        	})
          .on('mouseleave', function() {
          	tooltip.classed('hidden', true)
          });
      });
  });
  </script>
</body>

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