D3 Examples - RegionalFlu

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; }
  </style>
</head>
​
​
<style>
    .hidden {
        display: none;
    }
    div.tooltip {
        color: #222;
        background-color: #ddd;
        padding: .5em;
        text-shadow: #f5f5f5 0 1px 0;
        border-radius: 2px;
        opacity: 0.9;
        position: absolute;
    }
</style>
​
<body>
  <div>
    <input id="slider" type="range" value="1" min="1" max="100" step="1" />
    <span id="week">week</span>
  </div>
  <script>
    function process_data(error, france_json, grippe_csv) {
      
      // detection of min and max of grippe values to define the color domain
      var grippe_min = 999999, grippe_max = 0;
      for (var i = 0; i < grippe_csv.length; i++) {
        if (grippe_csv[i].regions === "France") { continue; }
        for (var key in grippe_csv[i]) {
          if (key === "regions") { continue; }
          var val = parseFloat(grippe_csv[i][key]);
          if (val > grippe_max) { grippe_max = val; }
          if (val < grippe_min) { grippe_min = val; }
        }
      }
      //console.log("grippe_min:", grippe_min, ", grippe_max:", grippe_max);
      var color_gray = "d3d3d3";  // wink, wink ;)
      var color_range = ["rgb(237,248,233)", "rgb(186,228,179)",
                         "rgb(116,196,118)", "rgb(49,163,84)", "rgb(0,109,44)"]
      var color = d3.scale.quantize().range(color_range)
      color.domain([grippe_min, grippe_max / 4]); // real max is too high
      
      
      // detection of the number of weeks to adjust the slider's size      
      var count = 0;
      for (var key in grippe_csv[0]) {
        if (key != "regions") { count += 1; }
      }
      //console.log(count)
      d3.select('#slider').attr("min", 1).attr("max", count)
      
      
      // definition of the svg, path and co.
      var width = 700, height = 580;
      var svg = d3.select( "body" ).append("svg")
                  .attr("width", width )
                  .attr("height", height );
      var projection = d3.geo.conicConformal()
                         .center([6, 46])
                         .scale(3000);
      var path = d3.geo.path().projection(projection);
      var tooltip = d3.select('body').append('div')
                      .attr('class', 'hidden tooltip');
      
      
      // injection of all the values in the json
      for (var i = 0; i < grippe_csv.length; i++) {
        // local variables for the names and values
        var region_name = grippe_csv[i].regions;
        var region_vals = grippe_csv[i]
​
        // search for the matching region in the json
        for (var j = 0; j < france_json.features.length; j++) {
          if (region_name == france_json.features[j].properties.nom) {
            france_json.features[j].properties.region_vals = region_vals;
            break;  // no need to go any further
          }  // undefined values are kept and will be labelled "no data" later
        }       
      }
​
​
      // creation of the svg
      svg.selectAll("path")
        .data(france_json.features)
        .enter()
        .append("path")
        .attr("d", path)
        .on('mousemove', function(d) {
          var mouse = d3.mouse(svg.node())
                        .map(function(d) { return parseInt(d); });
          var value = d.properties.region_vals !== undefined ?
                                    d.properties.region_vals[week_date] :
                                    "";  // unknown regions: Limousin & co.
          
          tooltip.classed('hidden', false)
            .attr('style', 'left:' + (mouse[0] + 10) + 'px;' +
                           'top:' + (mouse[1] - 20) + 'px')
            .html(d.properties.nom + ": " + (value ? value : "no data"));
​
          d3.select(this).style("fill", "red"); 
        })
        .on('mouseout', function() {
          tooltip.classed('hidden', true);
​
          d3.select(this).style("fill", function(d) {
            var value = d.properties.region_vals !== undefined ?
                                    d.properties.region_vals[week_date] :
                                    "";  // unknown regions: Limousin & co.
            return value ? color(value) : color_gray;
          })
        });
      
​
      // creation of the legend
      var legend = svg.append("g").attr("class", "legend");
      function add_legend_field(legend, idx, color, label) {
        var shift = 20
        legend.append("rect")
          .attr("x", 10)
          .attr("y", idx * shift)
          .attr("width", 20)
          .attr("height", 20)
          .style("fill", color);
        legend.append("text")
          .attr("x", 40)
          .attr("y", idx * shift + 15)
          .text(function(d) { return label;})
      }
      add_legend_field(legend, 0, color_gray, "no data");
      for (var i = 0; i < color_range.length; i++) {
        add_legend_field(legend, i + 1, color_range[i], "level " + (i + 1));
      }
      
      
      // update function
      function update_viz(w) {
        // update of the week label
        week_date = Object.keys(grippe_csv[0])[w];
        var pattern = /(\d{2})\/(\d{2})\/(\d{2})/
        var dt = new Date(week_date.replace(pattern, '20$3-$2-$1'));
        var week_str = dt.getUTCFullYear() + "-"
                       + dt.getMonth()+ "-"
                       + dt.getDate();
        //console.log(week_date)
        d3.select('#week').html(week_str);  // update week label
        
        // update of the region colors
        svg.selectAll("path").style("fill", function(d) {
          var value = d.properties.region_vals !== undefined ?
                                    d.properties.region_vals[week_date] :
                                    "";  // unknown regions: Limousin & co.
          return value ? color(value): color_gray;
        });
      }
      d3.select("#slider").on("input", function() {
        update_viz(+this.value); 
      });
      
      
      // first run
      var origin = 596
      d3.select('#slider').attr("value", origin)
      update_viz(origin);
    }
    
    
    queue()   // asynchronous loading of the files
      .defer(d3.json, "france.json")
      .defer(d3.csv, "GrippeFrance2003-15.csv")
      .await(process_data);
    
  </script>
</body>
​
    