D3 Examples - TP5-PICARD

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;
    }
    #sliderDiv {
      
    }
  </style>
</head>
​
<body>
  <div id="sliderDiv">
  <input id="slider" type="range" value="1" min="1" max="100" step="1" />
  <span id="week"></span>
</div>
  <script>
    var height = 800;
    var width = 960;
    
    var svg = d3.select( "body" )
        .append( "svg" )
          .attr( "width", width )
          .attr( "height", height );
    
    //Gestion de la carte
    var projection = d3.geo.conicConformal().center([2.454071, 46.279229]).scale(3000).translate([width/2, height/2]);
    
    var path = d3.geo.path().projection(projection);
    
    var g = svg.append( "g" ); 
    
    //Gestions des couleurs
    var couleur = d3.scale.quantize()
    .range(["rgb(232,224,239)", "rgb(219,215,233)", "rgb(210,200,228)", "rgb(188,189,220)", "rgb(158,154,200)", "rgb(128,125,186)", "rgb(106,81,163)", "rgb(74,20,134)", "rgb(50, 10, 110)"]);
    
    //Tooltip
    var tooltip = d3.select('body').append('div')
            .attr('class', 'hidden tooltip');
    
    //Chargement des données
    queue()   // permet de charger les fichiers de manière asynchrone
        .defer(d3.json, "regions.geojson")
        .defer(d3.csv, "donnesComplet.csv")
        .await(processData);  // une fois les fichiers chargé, la fonction processData est appelée avec les fichiers en arguments
        function processData(error,francejson,grippedata) {
      
        //
        var max = -1;
        var min = 120000;
        var columnNames;
        var weekNumber;
        var currentWeek = 1;
        
        grippedata.forEach(function(data) {
                columnNames = Object.keys(data);
            });
        weekNumber = columnNames.length;
        d3.select('#slider').attr("max", weekNumber -1);
        d3.select('#week').html(columnNames[1]);
        
        
        //Calcul des valeurs minimums et maximales
        for(var i = 0; i < grippedata.length; i++) {
            for(var j = 1; j < columnNames.length; j++){
            if(grippedata[i][columnNames[j]] != null){
              if(parseInt(grippedata[i][columnNames[j]]) > max){
                max = parseInt(grippedata[i][columnNames[j]]);
              }
              if(parseInt(grippedata[i][columnNames[j]]) < min){
                min = parseInt(grippedata[i][columnNames[j]]);
              }
            }
          }
        }
        couleur.domain([min,max]);
​
        //On fusionne les donnees avec le GeoJSON
        for (var i = 1; i < grippedata.length; i++) {
          //Nom de l'etat
          var dataState = grippedata[i].regions;
          d3.select("#slider").on("input", function() {
            
                        currentWeek= this.value;
            d3.select('#week').html(columnNames[this.value]);
            drawMap(francejson, currentWeek);
          });
          
          //Recherche de l'etat dans le GeoJSON
          for (var j = 0; j < francejson.features.length; j++) {
            var jsonState = francejson.features[j].properties.nom;
            if (dataState == jsonState) {
              //On injecte la valeur de l'Etat dans le json
              francejson.features[j].properties.value = "";
              francejson.features[j].properties.value = Object.values(grippedata[i]);
              //Pas besoin de chercher plus loin
              break;
            }
          }
        }
        
        function drawMap(json, currentWeek) {
          carte = svg.selectAll("path")
                    .data(json.features);
          carte
            .attr("class", "update")
            .style("fill", function(d) {
                //on prend les valeurs recupere plus haut
                var value = null;
                if(typeof(d.properties.value) === "undefined"){
              }
                else{
                value = d.properties.value[currentWeek];
              }
              if (value) {
                return couleur(value);
              } else { 
                // si pas de valeur alors en gris
                return "silver";
              }
            })
            .on("mousemove", function(d){
                var value = "inconnu";
                if(typeof(d.properties.value) === "undefined"){
              }
                else{
                value = d.properties.value[currentWeek];
              }
                var mouse = d3.mouse(svg.node()).map(function(d) {
                        return parseInt(d);
              });
                tooltip.classed('hidden', false)
                .attr('style', 'left:' + (mouse[0] + 15) + 'px ; top:' +  (mouse[1] - 35) + 'px')
                .html(d.properties.nom + " : " + value);        
        
      })
          carte.enter()
            .append("path")
                    .attr("class", "enter")
            .attr("d", path)
            .style("fill", function(d) {
                //on prend les valeurs recupere plus haut
                var value = null;
                if(typeof(d.properties.value) === "undefined"){
              }
                else{
                value = d.properties.value[currentWeek];
              }
              if (value) {
                return couleur(value);
              } else { 
                // si pas de valeur alors en gris
                return "silver";
              }
            })
            .on("mousemove", function(d){
                var value = "inconnu";
                if(typeof(d.properties.value) === "undefined"){
              }
                else{
                value = d.properties.value[currentWeek];
              }
                var mouse = d3.mouse(svg.node()).map(function(d) {
                        return parseInt(d);
              });
                tooltip.classed('hidden', false)
                .attr('style', 'left:' + (mouse[0] + 15) + 'px ; top:' +  (mouse[1] - 35) + 'px')
                .html(d.properties.nom + " : " + value);        
        
                })
                .on("mouseout", function(d) {
                        tooltip.classed('hidden', true);
                    });
        }
        var legend = svg.selectAll(".legend")
            .data(couleur.range())
                .enter().append("g")
            .attr("class", "legend")
            .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
        
​
​
        //Dessine les rectangles
            legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", function(d){return d});
        //Ajoute le texte
        legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return "[" + parseInt(couleur.invertExtent(d)[0]) + " , " + parseInt(couleur.invertExtent(d)[1]) + "]";})
        
        //Ajout du carré gris "inconnu"
        var legendSup = svg.selectAll(".legend")
            .data(couleur.range()+ ["silver"]);
        legendSup.
        attr("x", width - 18)
        legendSup.enter().append("rect")
        .attr("x", width - 18)
        .attr("y", 180)
      .attr("width", 18)
      .attr("height", 18)
        .style("fill", "silver");
        
        legendSup.enter().append("text")
        .attr("x", width - 24)
      .attr("y", 189)
      .attr("dy", ".35em")
        .style("font-size", 20)
        .style("font-family", "times new roman")
      .style("text-anchor", "end")
      .text("Inconnu");
        
        drawMap(francejson, 1);
        g.selectAll("path")
            
    };
​
  </script>
</body>
​
    