TP5

forked from aurelient's block:

forked from Raphael-Diana's block: TP5-slider-HTML

<!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; }
    .region {
        fill: #000;
        stroke: #fff;
        stroke-width: 0.4px;
    }

.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="52" step="1" />
  	<span id="date">NA</span>
	</div>
  <script>
    
		var width = 850,
  			height = 600;

var svg = d3.select( "body" )
                .append( "svg" )
                .attr( "width", width )
                .attr( "height", height );
    
    var tooltip = d3.select('body')
    								.append('div')
            				.attr('class', 'hidden tooltip');
    
    // Une variable pour le nombre de semaines
    var numberOfWeeks = 0;
    
    // Une variable pour la semaine a afficher
    var displayedWeek = 1;
    
    // Une variable pour le slider

var projection = d3.geo.conicConformal()
                       .center([0, 44.74])
                       .scale(3000)
                       .translate([width/2, height/2]);

var path = d3.geo.path()
                 .projection(projection);
   
    // On definit une echelle de couleur
    var color = d3.scale.quantize()
    							.range(["#fff5f0","#fee0d2","#fcbba1","#fc9272",
"#fb6a4a","#ef3b2c","#cb181d","#99000d"]);
    
    // Un objet JSON pour contenir les regions avec les info de grippe
    var regionsGrippe = {};
    
    // Un tableau pour stocker les noms des colonnes correspondant a des dates
    var weeksDates = new Array();
    // Un tableau pour stocker les valeurs max de grippe
    var maxByWeek = new Array();
    // Un tableau pour stocker les valeurs min de grippe
    var minByWeek = new Array();
    // Une variable pour le maximum global
    var globalMax = 0;
    
    // Chargement des données
    queue()   // permet de charger les fichiers de manière asynchrone
  		.defer(d3.json, "regions.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) {
          // chargement des données de grippes
      
      		for (i = 0; i < grippedata.length; i++) {
          // Nom de l'etat
          var dataState = grippedata[i].region;       
          // Un tableau pour chaque date des données grippe
          var valueByDate = new Array();
          // Le nombre de semaines
          var numberOfDates = 0;
          // Les colonnes
          var headerNames = d3.keys(grippedata[0]);
          // On itere sur les mois
          headerNames.forEach(function(column) {         
            var date = dateFormat.parse(column);

//si la colonne est une date
            if(date != null) { 
              var grippeValue = parseFloat(grippedata[i][column]);
              numberOfDates ++;
              if (grippeValue > globalMax) {
                globalMax = grippeValue;
              }
              if(!maxByWeek[numberOfDates] || maxByWeek[numberOfDates] < 	grippeValue) {
                maxByWeek[numberOfDates] = grippeValue;
              	                 
              }
              if(!minByWeek[numberOfDates] || minByWeek[numberOfDates] > 	grippeValue) {                
                if(grippeValue < maxByWeek[numberOfDates]){
                  minByWeek[numberOfDates] = grippeValue;
                }
                // Si il n'y a pas suffisament de données
                else
                	minByWeek[numberOfDates] = maxByWeek[numberOfDates] - 1;
              	                 
              }
							weeksDates[numberOfDates] = date; 
              valueByDate[numberOfDates] =(parseFloat(grippeValue));          
            }
      		}); 
          
          // On met a jour le nombre de semaine si besoin
          if (numberOfDates > numberOfWeeks)
            numberOfWeeks = numberOfDates;
        
          //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.grippeByDate = valueByDate;

//Pas besoin de chercher plus loin
              break; 
          	}         
        	}               
      	};
      
      // On set le max du slider
      d3.select('#slider').attr("max", numberOfWeeks);

//color.domain([minByWeek[displayedWeek], maxByWeek[displayedWeek]]);
      color.domain([0, globalMax]);
      
      d3.select('#date').html(dateFormat(weeksDates[displayedWeek]));
      // Ajout du tooltip et des interactions
      svg.selectAll("path")
        	.data(francejson.features)
          .enter()
          .append("path")
          .attr("d", path)
        	.style("stroke", "grey") 
      		// colorer la map
        	.style("fill", colorer)

//Mise en place du tooltip
        	.attr('class', function(d) {
        		return 'region ' + d;
      		})
        	.attr('d', path)
        	.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 + " " + "</br>Grippe : " + (d.properties.grippeByDate ? String(d.properties.grippeByDate[displayedWeek]) : "Undefined"))
      	})
        .on('mouseout', function() {
        	tooltip.classed('hidden', true);
        	svg.selectAll("path")
        		.data(francejson.features)
          	.transition().duration(200)
        		.style("opacity", 1);
      	})
        .on('mouseover', function() {
        	var stateUnderMouse = this;
        	svg.selectAll("path")
        		.data(francejson.features)
          	.transition()
            .duration(200)
            .style('opacity',function () {
        			return (this === stateUnderMouse) ? 1.0 : 0.5;
    				});
      	});
      
      // On sauvegarde les fichier JSON modifié
      regionsGrippe = francejson;
			drawLegend();
            
    };
    
    // On definit une fonction pour colorer la carte
    var colorer = function(d) {    
      							var grippe = d.properties.grippeByDate;
            				if (grippe && color(grippe[displayedWeek])) {
                      	return color(grippe[displayedWeek]);
                    } else {
                      // si pas de valeur alors en gris
                      return "#ccc";
                    }
      						};
    
    // On ajoute un listener sur le slider
    d3.select("#slider").on("input", function() {
      displayedWeek = +this.value;
      console.log("slider update "+displayedWeek);
			updateViz(+this.value);
    });
    
    function updateViz(dateValue) {
      //color.domain([minByWeek[displayedWeek], maxByWeek[displayedWeek]]);
      d3.select('#date').html(dateFormat(weeksDates[displayedWeek]));
      drawMap(regionsGrippe, dateValue);     
    };
    
    // On définit une fonction pour mettre à jour la vue
    function drawMap(json, currentWeek) {
      carte = svg.selectAll("path").data(json.features);
      
      // code en cas de mise a jour de la carte / de changement de semaine
      carte.style("fill", colorer);  
    }
    
    function drawLegend(){
            // 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) { return (color.invertExtent(d));})
    };
    
    //Format de la date
    var dateFormat = d3.time.format('%d/%m/%y');
    var i = 0;

</script>
</body>

Modified http://d3js.org/queue.v1.min.js to a secure url

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

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