D3 Examples - geographic

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; 
    }
    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>
<div>
  <input id="slider" type="range" value="1" min="1" max="52" step="1" />
  <span id="week">week</span>
</div>
<body>
  <script>
        var width = 700,
          height = 580;
​
        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');   
    // On definie une echelle de couleur
        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)"]);
   
    
    d3.csv("GrippeFrance2014.csv", function(data) {
      color.domain([0,50])
      //console.log(data);
      d3.json("regions.json", function(json) {
        //console.log(json);
        var reg = RegExp("^[0-9]{2}/09/14$");
        for (var i = 0; i < data.length; i++) {
          var dataValue = parseFloat(data[i].somme2014);
          var novemberValue = 0;
          for(date in data[i]){
            if(date.match(reg)){
              novemberValue += +data[i][date] 
            }
          }
          
          var weeksValues = Object.values(data[i]);
          for( var j in json.features){
            var feature = json.features[j];
            if(feature.properties.nom == data[i].region){
                            json.features[j].properties.value = dataValue;
              json.features[j].properties.november = novemberValue
              json.features[j].properties.weeksValues = weeksValues ;
              
            }
          }      
        }
        var weeksArray = Object.keys(data[0]);
        
        
        
        var drawMap = function(currentWeek){
          carte = svg.selectAll("path")
                            .data(json.features);
          
          coloring = function(d){
              return d.properties.weeksValues? color(d.properties.weeksValues[currentWeek]) : "#ccc" ;
            };
          
          carte.transition()
            .duration(100)
                        .attr("class","update")
            .style("fill", coloring);
          
          carte.enter()
            .append("path")
            .attr("d", path)
            .style("fill", coloring)
            .on("mouseenter", function(d){
              var selector = svg.selectAll("path").filter(function(e){
                return e == d ;
              }) ;
              selector.style(
                "fill", 
                function(d){ return d3.color(selector.style("fill")).brighter(0.5)}
              ) ;
            })
            .on('mousemove', function(d) {
              var mouse = d3.mouse(svg.node()).map(function(d) {
                return d;
              });
              tooltip.classed('hidden', false)
              .attr('style', 'left:' + (mouse[0] + 15) +
                    'px; top:' + (mouse[1] - 35) + 'px')
              .html(d.properties.nom);
            })
            .on('mouseout', function(d) {
              tooltip.classed('hidden', true);
              var selector = svg.selectAll("path").filter(function(e){
                  return e == d ;
              }) ;
              selector.style("fill", coloring) ;
            });
            
          }
​
          var updateViz = function(val){
            d3.select('#week').html(weeksArray[val]);
            drawMap(val);
          };
          d3.select("#slider").on("input", function() {
            updateViz(+this.value);
          });
            drawMap(1);
      })
   })
    
​
  </script>
​
</body>
​
​
    