D3 Examples - TP#4: grippe et régions françaises

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <style>
    body { 
      margin:0;
      position:fixed;
      top:0;right:0;bottom:0;left:0; 
      background-color: #0e2c33 
    }
        
    h1 {
      color: white
    }
​
    .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;
       }
​
​
    .ticks {
      font: 10px sans-serif;
    }
​
    .track,
    .track-inset,
    .track-overlay {
      stroke-linecap: round;
    }
​
    .track {
      stroke: #000;
      stroke-opacity: 0.3;
      stroke-width: 10px;
    }
​
    .track-inset {
      stroke: #ddd;
      stroke-width: 8px;
    }
​
    .track-overlay {
      pointer-events: stroke;
      stroke-width: 50px;
      stroke: transparent;
      cursor: crosshair;
    }
​
    .handle {
      fill: #fff;
      stroke: #000;
      stroke-opacity: 0.5;
      stroke-width: 1.25px;
    }
​
  </style>
​
​
</head>
​
<body>
​
  <script>
    // Feel free to change or delete any of the code you see in this editor!
​
    // Layout 
    var margin = {
        top: 20,
        bottom: 20,
        left: 20,
        right: 20
    },
        width = 960,
        height = 500;
​
​
    // Elements of SVG
    var title = d3.select('body').append('h1')
        .attr("class", "title")
​
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
​
    var slider = svg.append("g")
        .attr("class", "slider")
        .attr("transform", "translate(" + margin.top + "," + margin.left + ")");
​
    var map = svg.append("g")
        .attr("class", "map")
        .attr("transform", "translate(" + margin.top + "," + margin.left*2 + ")");
​
    var tooltip = d3.select('body').append('div')
        .attr('class', 'hidden tooltip');
​
    
​
    // Variables for maps
    var projection = d3.geoConicConformal()
        .center([2.4, 44.3])
        .scale(2000);
​
    var path = d3.geoPath() // mapping des donnees
            .projection(projection);
​
​
    // Variables for range.
    var color = d3.interpolateRdYlGn
    
    var x = d3.scaleLinear()
        .range([0, width])
        .clamp(true);
    
​
    // Others
    var fields = [],
        index = 0;
​
    var clean_data;
​
​
​
    d3.csv("GrippeFrance2014.csv", function(data) {
​
    // Set slider maximum.
        data["columns"].forEach(function(d){
            if (d !== "region" && d !== "somme2014"){
                fields.push(d)
            }
        })  
    
        x.domain([0, fields.length - 1])
​
    d3.json("regions.json", function(json) {
​
      for (var i = 0; i < data.length; i++) {
        var regionNom = data[i].region;
        var dataValue = data[i];
​
        //Recherche de la region dans le GeoJSON
        for (var j = 0; j < json.features.length; j++) {
          var regionProperties = json.features[j].properties;
          if (regionProperties.nom == regionNom) {
            //On injecte la valeur de l'Etat dans le json
            regionProperties.value = dataValue;
            //Pas besoin de chercher plus loin
            break;
          }
        }
      }
​
       
      //console.log("data");
      //console.log(data);
      //console.log("json");
      console.log(json);
​
      map.selectAll("g.map").data(json.features).enter()
        .append("path")
        .attr("d", path)
        .style("fill", "#ccc")
        .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]) +
                  'px; top:' + (mouse[1] + 30 ) + 'px')
​
          var value = d.properties.value;
          if (value){
            tooltip.html(d.properties.nom + ": " + d.properties.value[fields[index]] + " cases");
          } else {
            tooltip.html(d.properties.nom + ": unknown number");
          }
      })
        .on('mouseout', function() {
        tooltip.classed('hidden', true);
      });
​
​
      function print_map(index){
        var maxi = d3.max(data, function(d) { return +d[fields[index]]})
​
        map.selectAll("g.map > path")
          .transition()
          .style("fill", function(d,i){
            var value = d.properties.value;
            if (value){
              return color(1 - value[fields[index]]/maxi)
            } else {                 
              return "#ccc";            
            };
          })
        }
​
        slider.append("line")
            .attr("class", "track")
            .attr("x1", x.range()[0])
            .attr("x2", x.range()[1])
          .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
            .attr("class", "track-inset")
          .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
            .attr("class", "track-overlay")
            .call(d3.drag()
                .on("start.interrupt", function() {
                    console.log("oui");
                    slider.interrupt(); })
                .on("start drag", function() {
                        action_slider(x.invert(d3.event.x));
                        }));
​
​
        var handle = slider.insert("circle", ".track-overlay")
            .attr("class", "handle")
            .attr("r", 9);
​
        function action_slider(h) {
            handle.attr("cx", x(h));
            index = parseInt(h)
            print_map(index)
            title.html("Number of cases of flu on the " + fields[index]);
        }
​
        title.html("Number of cases of flu on the " + fields[index]);
​
        print_map(1);
​
    });
});
    
  </script>
</body>
​
​
    