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; }
   .region:hover {
        fill: #969696;
    }
    .hidden {
        display: none;
    }
    div.tooltip {
        color: #222;
        background-color: #fff;
        padding: .5em;
        text-shadow: #f5f5f5 0 1px 0;
        border-radius: 3px;
        opacity: 0.9;
        position: absolute;
    }
  </style>
</head>
​
<body>
<div>
  <input id="slider" type="range" value="1" min="1" max="52" step="1"  />
  <span id="week"> 1 week</span>
</div>
  <script>
  
    d3.select("#slider").on("input", function() {
        d3.select('#week').html( this.value+" week" );
        changeColor(this.value);
        });
  
    
        var width = 700,
          height = 580;
​
        var svg = d3.select( "body" )
        .append( "svg" )
          .attr( "width", width )
          .attr( "height", height );
     var g = svg.append( "g" ); 
​
    var projection = d3.geoConicConformal()
                        .center([2.454071, 46.279229])
                    .scale(2800);
​
    var path = d3.geoPath() // d3.geo.path avec d3 version 3
                 .projection(projection);
    // On definie une echelle de couleur
        var color = d3.scaleLinear()  
                .range(["rgb(239,247,231)",
                  "rgb(30,142,0)"]);
    
     var tooltip = d3.select('body').append('div')
            .attr('class', 'hidden tooltip');
    
            d3.csv("GrippeFrance2014.csv", function(data) {
                //Set input domain for color scale
                color.domain([
                    d3.min(data, function(d) {
            return parseInt(d["05/01/14"]);
          }), 
                    d3.max(data, function(d) { 
            return parseInt(d["05/01/14"]); 
          })
                ]);
      
            d3.json("regions.json", function(json) {
          
          //On fusionne les donnees avec le GeoJSON
            for (var i = 0; i < data.length; i++) {
            //Nom de l'etat
            var dataRegion = data[i].region;
            
            //Valeur associee a l'etat
            var dataValue = parseFloat(data[i].somme2014);
            
            var tabData = Object.values(data[i]);
​
            //Recherche de l'etat dans le GeoJSON
            for (var j = 0; j < json.features.length; j++) {
                var jsondataRegion = json.features[j].properties.nom;
                if (dataRegion == jsondataRegion) {
                    //On injecte la valeur de l'Etat dans le json
                    json.features[j].properties.value = tabData;
                                        
                    //Pas besoin de chercher plus loin
                    break;
                }
            }       
        }
        g.selectAll("path")
            .data(json.features)
            .enter()
            .append("path")
            .attr("d", path)
            .style("fill", function(d) {
                //on prend la valeur recupere plus haut
                var value = d.properties.value
                if (value) {
                    return color(value[1]);
                } else { 
                    // si pas de valeur alors en gris
                    return "#ccc";
                }
            });
           g.selectAll("path")
                .attr('class', function(d) {
                    return 'region ' + d.properties.CODE;
                })
                .attr('d', path)
                .on('mousemove', function(d) {
             
                            var week = d3.select('#slider').attr("value")
                    if (d.properties.value != null){
                      var value=d.properties.value[week]
                    }
                    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() {
                    tooltip.classed('hidden', true);
                });
        });
    });
    
    function changeColor(v){
       g.selectAll("path")
      .style("fill", function(d) {
                //on prend la valeur recupere plus haut
                var value = d.properties.value
                if (value) {
                    return color(value[v]);
                } else { 
                    // si pas de valeur alors en gris
                    return "#ccc";
                }
            });
      
      setTimeout(drawMap(v),1000);
    }
    function drawMap(v){
      d3.csv("GrippeFrance2014.csv", function(data) {
        var keys = Object.keys( data[0] );
        var week=keys[v]
                //Set input domain for color scale
                color.domain([
                    d3.min(data, function(d) {
            return parseInt(d[week]);
          }), 
                    d3.max(data, function(d) { 
            return parseInt(d[week]); 
          })
                ]);
      });
    }
    
​
   
       
  </script>
</body>
​
    