D3 Examples - Geo map with tooltip

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; }
  
  .region {
    fill: #000;
    stroke: #fff;
    stroke-width: 1px;
  }
  .region:hover {
    fill: #666;
  }
  .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>
  <div>
    <input id="slider" type="range" min="1" max="52" step="1" oninput="update(this.value);" value="1"  />   
    <input type="text" id="textInput" readonly="readonly" value="week : 1">
    </div>
  <script>    
    
    var margin = {top: 20, right: 10, bottom: 20, left: 10};
    
    var width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    
    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    // HTML tooltip element always exists
    var tooltip = d3.select('body').append('div')
        .attr('class', 'hidden tooltip');
    
   // Color scale
   var color = d3.scaleQuantize()
            .range(['#e5f5e0','#c7e9c0','#a1d99b','#74c476',
                                         '#41ab5d','#238b45']);
​
   // For color scale domain
   var min_value = Infinity, 
       max_value = 0;
   
   var g = svg.append( "g" ); 
   
   var projection = d3.geoConicConformal()
    .center([2.454071, 46.279229])
    .scale(2800);
   var path = d3.geoPath()
                .projection(projection);
   
   var tooltip = d3.select('body').append('div')
           .attr('class', 'hidden tooltip');
   
   var week_list = [], current_week = 1;
   
     d3.csv("GrippeFrance2014.csv", function(data) {
            
      // Retrive the list of weeks
      for(var i in data[0]){
        week_list.push(i)
      }      
      
      // Remove first and list items (not weeks)
      week_list.shift()
      week_list.pop()
      
      d3.json("regions.json", function(json) {
​
        for (var i = 0; i < data.length; i++) {
          var dataRegion = data[i].region;
​
          for (var j = 0; j < json.features.length; j++) {
            var jsonState = json.features[j].properties.nom;
            if (dataRegion == jsonState) {
              json.features[j].properties.value = data[j];
             
              if(data[j]) {
​
                // Retrive min/max
                week_list.forEach(function(c) {
                  min_value = Math.min(min_value, data[j][c])
                  max_value = Math.max(max_value, data[j][c]) 
​
                })
​
              }
              
              break;
            }
          }     
        }
        
        color.domain([min_value, max_value]);
​
        g.selectAll("path")
          .data(json.features)
          .enter().append("path").attr("d", path);
​
        var regions = svg.selectAll('.region')
        .data(json.features).enter();
​
        regions.append('path')
          .attr('class', function(d) {
            return 'nom' + d.properties.nom;
          })
          .attr('d', path)
            .attr("class", "region")
          .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+" : "+d.properties.value[week_list[current_week]]);
            })
          .on('mouseout', function() {
              tooltip.classed('hidden', true);
          });
        
        update();
​
      });
    });
    
    
function update(val = current_week){
  d3.select("#textInput").attr("value", "Week: " + week_list[val]);
  
  svg.selectAll('.region')
      .style("fill", function(d) {
​
            var value = 0;
​
            if(typeof week_list[val] !== "undefined" && typeof d.properties.value !== "undefined" && typeof d.properties.value[week_list[val]] !== "undefined")
            value = +d.properties.value[week_list[val]]
           
        if (value) {
          return color(value);
        } else { 
          // si pas de valeur alors en gris
          return "#cccccc";
        }
      })
  
}
   
  </script>
</body>
​
    