FranceGrippe2014

forked from anonymous's block: FranceGrippe2014

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style> 
    body { margin:2;
      		 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.8;
        					position: absolute;
    						}

</style>
</head>

<body>
  
  <div>
  <input id="slider" type="range" value="52" min="1" max="52" step="1" />
  <span id="week"> Choix de la semaine </span>
	</div>
  
  
 <script> 
 
   
   // les variables
		var width = 960,
  		  height = 580;

var svg = d3.select( "body" ) // ajoute a l'objet "body" du DOM  un élément SVG avec
    	.append( "svg" )						// attributs width et height spécifiés. Cette opération
		  .attr( "width", width )			// est stockée dans une variable 'svg' qu'on va pouvoir
		  .attr( "height", height  );	// utiliser avec "svg.append("truc")..."
    
    // On rajoute un groupe englobant toute la visualisation pour plus tard
    
    var g = svg.append("g");
    
    // définit le type de projection sur plan 2D
    var projection = d3.geoConicConformal()
    									 .center([2.454071, 46.279229])
    									 .scale(2600);

var regionFormat = d3.geoPath() // la variable spécifiant le format des 'path' générés
                 				 .projection(projection);
    
    // On definit une echelle de couleur à l'affichage (via la fonction 'range')
		var color = d3.scaleQuantize()
									.range(["rgb(236,247,231)", 
              						"rgb(179,228,194)",
													"rgb(115,195,144)", 
              						"rgb(49,164,118)", 
              						"rgb(0,82,91)"])
             			.domain([0, 250]); // mettre [0, 350] pour un rendu comme le tp
     
     // couleur rouge entre les régions pour le fun
     var color2 = d3.scaleQuantize()
									.range(["rgb(255,255,255)", 
              						"rgb(255,255,255)",
													"rgb(186,184,94)", 
              						"rgb(184,85,55)", 
              						"rgb(163,43,0)"])
             			.domain([0, 253]); 
     
     
    var tooltip = d3.select('body') // définit l'ajout d'un élément 'div' au DOM
    								.append('div')  // et stocke ceci dans une variable
          					.attr('class', 'hidden tooltip');
     
     
  
    
    // on définit un domaine de couleurs    
    //color.domain([
				//d3.min(data, function(d) { return parseFloat(d.somme2014); }),
				//d3.max(data, function(d) { return parseFloat(d.somme2014); })
		//]);

d3.json("regions.json", function(json) {
    d3.csv("GrippeFrance2014.csv", function(data) { 
      
        var listeSemaines = Object.keys(data[0]);

function drawMap(w) {

//Ajout du nombre de malades sur le mois de novembre pour chaque région dans le 				 	//.json
				for (var j = 0; j < json.features.length; j++) {
				
 
           var NomRegion = json.features[j].properties.nom;
                   
          
           // récupération du nombre de malades du mois de novembre pour chaque NomRegion    
           for (var i = 0; i < data.length; i++) {   
             
               if (data[i].region == NomRegion) {
             			//On injecte la valeur de l'Etat dans le fichier 'json.features'
                 	
                 //json.features[j].properties.value = parseFloat(data[i].somme2014);
                 
             		 json.features[j].properties.value = Object.values(data[i])[w] ;
                       
                  
                  //  parseFloat(data[i]["02/11/14"])
                	//+ parseFloat(data[i]["09/11/14"])
                	//+ parseFloat(data[i]["16/11/14"])
                	//+ parseFloat(data[i]["23/11/14"])
                	//+ parseFloat(data[i]["30/11/14"]); 
                  //    }

//json.features[j].properties.recapAnnee = Object.values(data[i]);
                 
             			//Pas besoin de chercher plus loin
             			break;
          	   } // fin du if
         	 	} 	 // fin du for en 'i'      		 
    		}				 // fin du for en 'j'

// fonction d'affichage des régions avec niveaux de couleur selon le nombre de malades
   carte = g.selectAll("path") // sélectionne tout les éléments 'path' du SVG      
        		.data(json.features); // associe la i-eme ligne de la donnée "json.features"
 														 		 // au i-eme élément 'path' dans le SVG (meme si cet 															 				 // élément n'existe pas encore)  
        
        
        // code pour la creation de la carte quand les donnees sont chargees la 1e fois
       carte.enter() // permet de créer un nouvel élément 'path' pour chaque ligne de 			       						 // donnée non déjà affiliée à un 'path' existant: c'est le binding de 
      							 // donnée à des éléments du SVG, c'est une fonctionnalité de la 
        						 // méthode.data()
        		.append("path") // lance la création des éléments 'path' manquants 
       			.attr("class", "enter") // de classe 'enter'
        		.attr("d", regionFormat) // associe a chaque "path" une forme, désignée par son 																	   // attribut 'd', et qui est définie par 'regionFormat'
       			// d3.select(this) ?
       			.style("fill", function(d) { // applique un remplissage de chaque 'path' selon  																				 // le contenu de la ligne 'd' de la donnée  																			 				 // affiliée à chaque 'path'
           		
							var value = d.properties.value; //on prend la valeur recuperée plus haut

if (value) {return color(value);} 
           		else       {return "#ccc";} 			// si pas de valeur alors en gris							          
      			}) // fin du style
       			.attr("stroke", "white")
        		//.attr("stroke", function(d) { // ajout des marges entre régions (couleur + 																							// epaisseur)
           		
						//	var value = d.properties.valeur; 
           
						//	if (value) {return color2(value);} 
           	//	else       {return "white";} 	
          
      			//}) // fin du style) 
        		.attr("stroke-width", 1)
            .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 + " pour la semaine du Nouvel An" );
             }) // fin du onMouseMove
             .on('mouseout', function() {
                    tooltip.classed('hidden', true);
             }); // fin du onMouseOut
      
 
        
        
		
        
        
      // code en cas de mise a jour de la carte / de changement de semaine  	
    carte.attr("class", "update")  
    
    //ou bien d.properties.valeur <--- d.properties.recapAnnee[w]
    
       	 .style("fill", function(d) {            		
							var value = parseFloat(d.properties.value); 
           
							if (value) {return color(value);} 
           		else       {return "#ccc";} 								          
      		}) // fin du style
    
        		.attr("stroke", "white")
        		.attr("stroke-width", 1)
            .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 + " pour la semaine " + w );
             })
             .on('mouseout', function() {
                    tooltip.classed('hidden', true);
             });
  
  	} // fin de la fonction drawMap
  
      drawMap(52);
      
      // update the elements
			function updateViz(w) {
				//console.log("update semaine " + w);
        d3.select('#week').html("Semaine du " + listeSemaines[w] );
				drawMap(w);  
			}
  
      // Action lors d'un mouvement du slider
      d3.select("#slider").on("input", function() {
				console.log("slider");	
        updateViz(+ this.value);
			}); // fin du d3.select(slider)
   
      
   }); 		// fin du d3.csv
   });    // fin du d3.json
         
 
  
     
     
    
    
  </script>
</body>

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