D3 Examples - Geo

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; }
    
    .tooltip {
        position: absolute;
        text-align: center;
        width: 60px;
        height: 12px;
        padding: 8px;
        margin-top: -20px;
        font: 15px sans-serif bold;
        
        pointer-events: none;
      }
    .slider {
        position: relative;
        top: 20px;
        left: 30px;
      }
​
      .slider-tray {
        position: absolute;
        width: 100%;
        height: 6px;
        border: solid 1px #ccc;
        border-top-color: #aaa;
        border-radius: 4px;
        background-color: #f0f0f0;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
      }
​
      .slider-handle {
        position: absolute;
        top: 3px;
      }
​
      .slider-handle-icon {
        width: 14px;
        height: 14px;
        border: solid 1px #aaa;
        position: absolute;
        border-radius: 10px;
        background-color: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        top: -7px;
        left: -7px;
      }
    
  </style>
</head>
​
<div>
  <input class="slider" type="range" value="1" min="1" max="52" step="1" />
  <span id="week">week</span>
</div>
​
<body>
  <script>
    var tooltip = d3.select("body").append("div")
                    .attr("class", "tooltip")
                    .style("opacity", 0);
    
        var width = 700,
          height = 580;
​
        var svg = d3.select( "body" )
        .append( "svg" )
          .attr( "width", width )
          .attr( "height", height );
    
    
        var color = d3.scaleOrdinal(d3.schemeCategory20c);
​
    var projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2800);
​
    var path = d3.geoPath() 
                 .projection(projection);
  
      
     d3.csv("GrippeFrance2014.csv", function(data) {
       
       
       color.domain([0, 2000]);
       
       d3.json("regions.json", function(json) {
      
         for (var i = 0; i < data.length; i++) {
           
           var dataRegion= data[i].region;
           
           var dataValue = parseFloat(data[i].somme2014);
          
           
           for (var j = 0; j < json.features.length; j++)  {
        
             var jsonRegion = json.features[j].properties.nom;
             
             if (dataRegion == jsonRegion) {
               json.features[j].properties.somme_2014 = dataValue; 
               break;
             }
​
               };
           
           svg.selectAll("path")
                 .data(json.features)
                 .enter()
                 .append("path")
                 .attr("d", path)
                 .style("stroke", "#fff")
                 .style("stroke-width", "1")
                 .style("fill", function(d) {
                 var value = d.properties.nom;
                 if (dataRegion == jsonRegion) {
                   return color(value);
                   }
                 })
             .on("mouseover", function(d){
             console.log(d.properties);
                   tooltip.transition()
                    .duration(0)
                    .style("opacity", .9);
                   tooltip.html(d.properties.somme_2014)
                     .style("left", (d3.event.pageX - 10) + "px")
                     .style("top", (d3.event.pageY - 10) + "px");
                 })
                .on("mouseout", function(d){
                  tooltip.transition()
                    .duration(0)
                    .style("opacity",0)});
        
};
         
         
    // encapsuler le dession 
      });   
        })
  </script>
</body>
​
    