D3 Examples - Visualization of France's spreading of sickness 2

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://d3js.org/queue.v1.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>
​
<body>
  <div>
    <input id="slider" type="range" value="1" min="1" max="100" step="1" />
    <span id="week">week</span>
    </div>
  <script>
    
    /*
    ------------------- Variables initialization
    */
        var width = 700,
          height = 560;
    
        var svg = d3.select( "body" )
        .append( "svg" )
          .attr( "width", width )
          .attr( "height", height );
    
    var g = svg.append("g");
​
    var projection = d3.geo.conicConformal()
                .translate([width/1.6, height/2.5])
                .center([2.454071, 46.279229]).scale(3000);
​
    var path = d3.geo.path()
                 .projection(projection);
    
    var tooltip = d3.select('body').append('div')
                            .attr('class', 'hidden tooltip');
    
    var color = d3.scale.quantize()  
    .range(["rgb(237,248,233)", 
            "rgb(186,228,179)",
            "rgb(116,196,118)", 
            "rgb(49,163,84)", 
            "rgb(0,109,44)"]);
    /*
    ------------------- Loading data
    */
    queue()   // allow to load files asynchronically
      .defer(d3.json, "regions.geojson")
        // Uncomment loaded file
      .defer(d3.csv, "GrippeFrance2014.csv")
        //.defer(d3.csv, "GrippeFrance2003-15.csv")
      .await(processData);
    
    var numberOfWeeks;
   
    // Initializing function
    function processData(error, regions, grippes) {  
      
      // Getting total number of weeks in data 
      // thanks to headings
      var entete = Object.keys(grippes[0]);
      numberOfWeeks = entete.length;
​
      // Programming slider to display correct number of states
      d3.select('#slider').attr("max", numberOfWeeks);
      
      // Initializing visualization to display first week
      updateValue(grippes, regions, 1);
      
      // Initializing color domain for first week
      updateColorDomain(grippes, 1);
      
      // Creating map with first week data (thanks to updateValue())
      initializingMap(regions);
      
      // Function creating the Legend of the map
      displayingLegend();
​
      // Relays move on slider
      d3.select("#slider").on("input", function() {
            update(grippes, regions, this.value);
      });                                   
    }
    
    // Function controlling update
    update = function(grippes, regions, value) {
      updateValue(grippes, regions, value);
      updateColorDomain(grippes,value);
      creatingMap(regions);
      displayingLegend();
    }
    
    // Update the value displayed on the map
    updateValue = function(grippes, regions, value) {
      for(var i = 0; i<grippes.length;i++){
        var dataRegion = grippes[i].region;
        for (var j = 0; j<regions.features.length; j++) {
          if (dataRegion == regions.features[j].properties.nom) {
            // The involved value is always stored in the properties.value of the Region object
            regions.features[j].properties.value = Object.values(grippes[i])[value];
            break;
          }
        }
      }
    }
    
    // Update the color domain of the map
    updateColorDomain = function(grippes, value) {
      // Getting global min and max value
        var min = d3.min(grippes, function(d) { return parseFloat(d[Object.keys(grippes[0])[value]])});    
        var max = d3.max(grippes, function(d) { return parseFloat(d[Object.keys(grippes[0])[value]])})
      // console.log(min + "  "  + max);
      // Initiating color domain to an internal between min and max values
      color.domain([min, max]);  
    }
    
    // First initialization of the map --> special treatment because the elements of
    // the map are created here whereas they are updated later on
    initializingMap = function(regions) {
      g.selectAll("path")
        .data(regions.features)
        .enter()
        .append("path")
        .attr("d", path)
        .style("fill", function(d) {
            if (d.properties.value) {
              return color(d.properties.value);
            }
            else {
              return "#ccc";
            }
        })
      // Treatment of mouse events
      .on('mousemove', function(d) {
            var mouse = d3.mouse(svg.node()).map(function(d) {
            return parseInt(d);
            });
            if (d.properties.value != undefined) {
            tooltip.classed('hidden', false)
              .attr('style', 'left:' + (mouse[0] + 15) +
                    'px; top:' + (mouse[1] - 35) + 'px')
              .html(d.properties.nom + " : " + d.properties.value);
           }
            else {
            tooltip.classed('hidden', false)
              .attr('style', 'left:' + (mouse[0] + 15) +
                    'px; top:' + (mouse[1] - 35) + 'px')
              .html(d.properties.nom);
          }
         })
      .on('mouseout', function() {
          tooltip.classed('hidden', true);
      });
    }
    
    // Creating elements of the legend
    displayingLegend = function() {
      // Select legend elements already present in the DOM
      var legend = svg.selectAll(".legend").data(color.range())
      // Removing these elements to create the new adapted legend
      legend.remove();
      
      // Creating new legend elements
      legend = svg.selectAll(".legend")
      .data(color.range())
        .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
      
      // Adding rectangles filled with corresponding color
        legend.append("rect")
                .attr("x", width - 18)
                .attr("width", 18)
                .attr("height", 18)
                .style("fill", function(d) { return d;});
​
        // Adding corresponding text
        legend.append("text")
            .attr("x", width - 24)
            .attr("y", 9)
            .attr("dy", ".35em")
            .style("text-anchor", "end")
            .text(function(d) { 
                            return "["+(color.invertExtent(d)).map(function( num ){
                        return parseInt( num, 10 ) })+"]"}) 
    }
    
    // Updating the map with corresponding values
    creatingMap = function(regions) {
      g.selectAll("path")
        .data(regions.features)
        .attr("class", "update")
        .attr("d", path)
        .style("fill", function(d) {
            if (d.properties.value) {
              return color(d.properties.value);
            }
            else {
              return "#ccc";
            }
        })
      .on('mousemove', function(d) {
            var mouse = d3.mouse(svg.node()).map(function(d) {
            return parseInt(d);
            });
            if (d.properties.value != undefined) {
            tooltip.classed('hidden', false)
              .attr('style', 'left:' + (mouse[0] + 15) +
                    'px; top:' + (mouse[1] - 35) + 'px')
              .html(d.properties.nom + " : " + d.properties.value);
           }
            else {
            tooltip.classed('hidden', false)
              .attr('style', 'left:' + (mouse[0] + 15) +
                    'px; top:' + (mouse[1] - 35) + 'px')
              .html(d.properties.nom);
          }
         })
      .on('mouseout', function() {
          tooltip.classed('hidden', true);
      });
    }
    
  </script>
</body>
​
    