TP 5: Donnees spatiales test2

forked from RomyRatolojanahary's block: TP 4: Donnees spatiales suite

<!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; }
    .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;
    }
  </style>
</head>

<body>
  <div>
  <input id="slider" type="range" value="1" min="1" max="100" step="1" />
  <span id="week">Semaine 28/09/03</span>
</div>
  <script>
		var width = 700,
  		  height = 580;

var svg = d3.select( "body" )
  		.append( "svg" )
		  .attr( "width", width )
		  .attr( "height", height );
    
    var tooltip = d3.select('body').append('div')
            .attr('class', 'hidden tooltip');
    
    var g = svg.append( "g" );

var projection = d3.geo.conicConformal().center([2.454071, 46.279229]).scale(3000)  //definition de la projection
    			.translate([width/2, height/2]) ;
           //on la décale pour qu'elle soit dans le même espace que notre svg
    			//.scale([500])

var path = d3.geo.path()           //mapping des données spatiales à la proj
                 .projection(projection);
    
    var color = d3.scale.quantize()  
    			.range(['rgb(247,252,245)','rgb(229,245,224)','rgb(199,233,192)','rgb(161,217,155)','rgb(116,196,118)','rgb(65,171,93)','rgb(35,139,69)','rgb(0,109,44)','rgb(0,68,27)','rgb(0,50,20)']);

queue()   // permet de charger les fichiers de manière asynchrone
  .defer(d3.json, "carteFrance.json")
  .defer(d3.csv, "GrippeFrance2003-15.csv")
  .await(processData);  // une fois les fichiers chargé, la fonction processData
                        // est appelée avec les fichiers en arguments
  
    
   
        
function processData(error,francejson,grippedata) {
 
  //ON initialise minValue et maxValue 
      var minValue = Infinity;
      var maxValue = -Infinity;
      weeksArray = Object.keys(grippedata[0]);

//Calcul de minValue et maxValue sur tout le tableau
      for (var i = 2; i < grippedata.length; i++) { //on ignore les 2 1eres lignes
        for (var j =1 ; j < weeksArray.length-1 ; j++){
             var k = weeksArray[j] //weeksArray [j] = semaine j
             if (grippedata[i][k]){
           if (parseFloat(grippedata[i][k]) > maxValue){
								 maxValue = parseFloat(grippedata[i][k])
               }
               if (parseFloat(grippedata[i][k]) < minValue){
                 minValue = parseFloat(grippedata[i][k])
               }
             }
        }
  }
        //on ajuste le domaine de couleurs
        color.domain([minValue, maxValue]);
        //console.log("minvalue "+minValue+" max "+maxValue)
        //calcul du nombre de semaines
        var numberofweeks = weeksArray.length - 1 //c1:regions
        d3.select('#slider').attr("max", numberofweeks)
        
        //On fusionne les donnees avec le GeoJSON
      for (var i = 0; i < grippedata.length; i++) {
        var dataRegion = grippedata[i].regions;
        
        var dataValue = Object.values(grippedata[i]);
        //Recherche de l'etat dans le GeoJSON
            for (var j = 0; j < francejson.features.length; j++) {
                var jsonRegion = francejson.features[j].properties.nom;
                if (dataRegion == jsonRegion) {
                    //On injecte la valeur de l'Etat dans le json
                    francejson.features[j].properties.value = dataValue;

//Pas besoin de chercher plus loin
                    break;
                }
            }
	
      }
  //on dessine la carte
  drawMap(francejson, 1);
}
    
    d3.select("#slider").on("input", function() {
	updateViz(+this.value);
});
    
    function updateViz(slider){
      d3.select('#week').html( "Semaine "+ weeksArray[slider]);
      drawMap("carteFrance.json",slider)
    }
    
    
    function drawMap(json, currentWeek) {
  var carte = g.selectAll("path")
  
       // code en cas de mise a jour de la carte / de changement de semaine
  carte
    .style("fill", function(d) {
                //on prend la valeur recuperee plus haut
                var value = d.properties.value;

if (value && value[currentWeek]) {
                    return color(value[currentWeek]);
                } else { 
                    // si pas de valeur alors en gris
                    return "#ccc";
                }
            })
  
  .on('mousemove', function(d) {
                    var mouse = d3.mouse(svg.node()).map(function(d) {
                        return parseInt(d);
                    });
    
                   var value = d.properties.value;
         						var valeuraffichee;
                    if (value && value[currentWeek]){
                      valeuraffichee = value[currentWeek];
                    }
         						else{
                      valeuraffichee = "Aucune donnée";
                    }
                    tooltip.classed('hidden', false)
                        .attr('style', 'left:' + (mouse[0] + 15) +
                                'px; top:' + (mouse[1] - 35) + 'px')
                        .html(d.properties.nom+ " : "+ valeuraffichee);
                })
                .on('mouseout', function() {
                    tooltip.classed('hidden', true);
                })
  .style("stroke", "#ccc"); 
      
  // code pour la creation de la carte quand les donnees sont chargees la 1e fois.
  carte.data(json.features)
    .enter()
    .append("path")
    //.attr("class", "enter")
    .attr("d", path)
    .style("fill", function(d) {
                //on prend la valeur recuperee plus haut
                var value = d.properties.value;

if (value && value[1]) {
                    return color(value[1]);
                } else { 
                    // si pas de valeur alors en gris
                    return "#ccc";
                }
            })
  .on('mousemove', function(d) {
                    var mouse = d3.mouse(svg.node()).map(function(d) {
                        return parseInt(d);
                    });
    
                   var value = d.properties.value;
         						var valeuraffichee;
                    if (value && value[1]){
                      valeuraffichee = value[1];
                    }
         						else{
                      valeuraffichee = "Aucune donnée";
                    }
                    tooltip.classed('hidden', false)
                        .attr('style', 'left:' + (mouse[0] + 15) +
                                'px; top:' + (mouse[1] - 35) + 'px')
                        .html(d.properties.nom+ " : "+ valeuraffichee);
                })
                .on('mouseout', function() {
                    tooltip.classed('hidden', true);
                });
      // draw legend
  var legend = svg.selectAll(".legend")
      .data(color.range())
      .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; })

// draw legend colored rectangles
  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", function(d){ return d;});

// draw legend text
  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) {
        var r = color.invertExtent(d);
        return "["+parseInt(r[0])+","+parseInt(r[1])+"]";
    });
 
        };
    
      
    
    
    
  </script>
</body>

https://d3js.org/d3.v3.min.js

https://d3js.org/queue.v1.min.js