D3 Examples - TP4

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; }
    div.tooltip {
        color: #222;
        background-color: #fff;
        padding: .5em;
        text-shadow: #f5f5f5 0 1px 0;
        border-radius: 2px;
        opacity: 0.9;
        position: absolute;
    }
  </style>
    <div>
  <input id="slider" type="range" value="1" min="1" max="52" step="1" />
  <span id="week">05/01/14</span>
    </div>
​
</head>
​
<body>
​
  <script>
        var width = 700,
          height = 580;
​
        var svg = d3.select( "body" )
        .append( "svg" )
          .attr( "width", width )
          .attr( "height", height );
​
    var projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2800) // d3.geo.albersUsa avec d3 version 3
                .translate([width/2, height/2]);
​
    var path = d3.geoPath() // d3.geo.path avec d3 version 3
                 .projection(projection);
    
    var color = d3.scaleQuantize()
    .range(["rgb(237,248,233)", "rgb(186,228,179)","rgb(116,196,118)", "rgb(49,163,84)", "rgb(0,109,44)"]);
    
    var tooltip = d3.select('body').append('div')
            .attr('class', 'hidden tooltip');
    
    // Initiate an array to translate value from slider in date (useless)
    // var Translate = ["None", "05/01/14","12/01/14","19/01/14","26/01/14","02/02/14","09/02/14","16/02/14","23/02/14","02/03/14","09/03/14","16/03/14","23/03/14","30/03/14","06/04/14","13/04/14","20/04/14","27/04/14","04/05/14","11/05/14","18/05/14","25/05/14","01/06/14","08/06/14","15/06/14","22/06/14","29/06/14","06/07/14","13/07/14","20/07/14","27/07/14","03/08/14","10/08/14","17/08/14","24/08/14","31/08/14","07/09/14","14/09/14","21/09/14","28/09/14","05/10/14","12/10/14","19/10/14","26/10/14","02/11/14","09/11/14","16/11/14","23/11/14","30/11/14","07/12/14","14/12/14","21/12/14","28/12/14"]
    
    //console.log(Translate)
       
    d3.csv("GrippeFrance2014.csv", function(data) {
    color.domain([0, 300]);
    
        d3.json("https://lyondataviz.github.io/teaching/lyon1-m2/2017/data/regions.json", function(json) {
        
      
      for (var i = 0; i < data.length; i++)
      {
        //Nom de la region
        var dataRegion = data[i].region;
        
        //Valeur associee a la region pour 2014
        var dataValue = parseFloat(data[i].somme2014);
                
        // Fonction somme retournant la somme de 5 entiers (pour les 5 valeurs de novembre)
        function somme(n1, n2, n3, n4, n5)
        {
          return parseInt(n1)+parseInt(n2)+parseInt(n3)+parseInt(n4)+parseInt(n5)
        }
        
        // dans dataNovembre, la somme des valeurs pour Novembre
        var dataNovembre = somme(data[i]["02/11/14"],data[i]["09/11/14"],data[i]["16/11/14"],data[i]["23/11/14"],data[i]["30/11/14"])
        
        //console.log(dataNovembre)
        
        //console.log(document.getElementById('slider').value)*
        
        // Valeur pour la semaine en fonction de la valeur de base du slider. Pas réussi à faire en sorte que bouger le slider fasse bouger cette valeur et mette à jour la carte sans tout casser. (useless maintenant qu'on a compris le Object.values(data[i]) ^^")
          //var dataWeek = data[i][Translate[document.getElementById('slider').value]]
        //console.log(dataWeek)
          
        var dataWeek = (Object.values(data[i]))
        var weeksArray = Object.keys(data[0]);
        //console.log(dataWeek)
        //console.log(weeksArray)
        
        //Recherche de la region dans le GeoJSON
                for (var j = 0; j < json.features.length; j++)
        {
          var jsonRegion = json.features[j].properties.nom;
          if (dataRegion == jsonRegion)
          {
            //On injecte la valeur de la région dans le json en fonction de la valeur du slider
            // Ici, si on veut passer de par semaine à Novembre, ou a l'année complète, il suffit de remplacer par dataNovembre ou dataValue (changer alors la range des couleurs plus haut en conséquence, sinon tout sera vert foncé)
            json.features[j].properties.value = dataWeek[document.getElementById('slider').value];
            //Pas besoin de chercher plus loin
            break;
          }
        }
      }
      
      
        svg.selectAll("path")
            .data(json.features)
            .enter()
            .append("path")
            .attr("d", path)
          .style("fill", function(d) 
          {
              var value = d.properties.value;
                if (value) 
              {
                return color(value)
              } 
                else
              {
                return "#ccc";
              }
            })
        //Code pour le tooltip, quand on passe sur une région, affiche la région et la valeur correspondate. 
            .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] + 15) +
                                'px; top:' + (mouse[1] - 35) + 'px')
                        .html(d.properties.nom + " " + d.properties.value);
                })
           .on('mouseout', function() {
                    tooltip.classed('hidden', true);
                });
     
    function updateViz(value) 
    {
            console.log("update week " + value);
      console.log(weeksArray[value])
            d3.select('#week').html(weeksArray[value]);
            drawMap(value);
    }
    d3.select("#slider")
        .on("input", function() 
        {
        console.log(this.value)
                updateViz(+this.value);
        });
    
    function drawMap(currentWeek)
      {
      carte = svg.selectAll("path")
        .data(json.features)
​
      for (var i = 0; i < data.length; i++)
      {
        //Nom de la region
        var dataRegion = data[i].region;
        var dataWeek = (Object.values(data[i]))
        //var weeksArray = Object.keys(data[0]);
        //Recherche de la region dans le GeoJSON
                for (var j = 0; j < json.features.length; j++)
        {
          var jsonRegion = json.features[j].properties.nom;
          if (dataRegion == jsonRegion)
          {
            //On injecte la valeur de la région dans le json en fonction de la valeur du slider
            json.features[j].properties.value = dataWeek[document.getElementById('slider').value];
            //Pas besoin de chercher plus loin
            break;
          }
        }
      }
      svg.selectAll("path")
            .data(json.features)
            .attr("f", path)
            .style("fill", function(f) 
            {
                var value = f.properties.value;
                if (value)
                {
                return color(value)
                } 
                else
                {
                return "#ccc";
                }
      });
      }
      
      
    // (end of json function)
    })
    
        });
  </script>
​
</body>
​
​
    