TP5 Grippe Final

forked from aurelient's block:

forked from Rastignac's block: TP4

forked from Rastignac's block: TP4 suite (TP5)

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>
	<script src="https://d3js.org/queue.v1.min.js"></script>
<style>
  		.axis path,
  		.axis tick,
	  	.axis line {
	      	fill: none;
	      	stroke: #dddddd;
	  	}

.axis text {
	      	font-size: 12px;
	      	fill: #AAAAAA;
	      	font-weight: 400;
	  	}

.legendTitle {
	      	font-size: 14px;
	      	fill: #4F4F4F;
	      	font-weight: 300;
	  	}
		body {
		  	font-size: 1rem;
		  	font-family: 'Open Sans', sans-serif;
		  	font-weight: 400;
		  	fill: #8C8C8C;
		  	text-align: left;
		}
    .hidden {
        display: none;
    }
    div.tooltip {
        color: #000000;
        background-color: #fff9fa;
        padding: .2em;
        text-shadow: #f5f5f5 0 1px 0;
        border-radius: 2px;
        opacity: 0.85;
        position: absolute;
    }
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<div>
  <input id="slider" type="range" value="1" min="1" max="100" step="1" />
  <span id="semaine">semaine</span>
</div>
	
<body>
  <script>
		var width = 760,
  		  height = 500;
    
    var tooltip = d3.select('body').append('div')
            .attr('class', 'hidden tooltip');
    
		var svg = d3.select( "body" )
  		.append( "svg" )
		  .attr( "width", width )
		  .attr( "height", height );
    
    var g = svg.append( "g" ); 
    var max_feature = 0;
    var projection = d3.geo.conicConformal()
    			.translate([width/2, height/2])
    			.center([1.454071, 46.6]).scale(2700);
    
    var path = d3.geo.path()
                 .projection(projection);
    
     //Set input domain for color scale
    
     var color = d3.scale.linear()
        .domain([0,2000/4,2000])
        .range(["#f5d5d5","#d65656","#a5262a", "#450708"])
        .interpolate(d3.interpolateHcl);
          
    queue()   // permet de charger les fichiers de manière asynchrone
  .defer(d3.json, "us-states.json")
  .defer(d3.csv, "GrippeFrance2003-15.csv")
  .await(processData)

function processData(error, regions, grippe) {
      
      // On affecte les données aux régions
      var min = 0
      var max = 0  
    	for(var data of grippe) {
        var dataRegion = data["regions"];
        var value = d3.values(data);

value.splice(0, 1);
        value.splice(value.length+1, 1);
				console.log(value.length)
        // Recherche de la région dans le GeoJson
        for (var j = 0; j < regions.features.length; j++) {
          var jsonRegion = regions.features[j].properties.nom;
          if (dataRegion == jsonRegion) {
            //On injecte la valeur de la région dans le json
            regions.features[j].properties.values = value;
            value_temp = value
            tempmax = d3.max(value_temp.map(Number))
            if (tempmax > max) {max=tempmax}
            break;
            }
          }
       }
      max = 2600;
			
      drawMap(regions, 0)
      
      // Valeurs possibles du slider
      var week_slider = d3.keys(grippe[0]);
      d3.select('#slider').attr("max", week_slider.length-2)
      
      // Récupération de la valeur
      function updateViz(value){
      	d3.select("#semaine").html("Semaine du " + week_slider[value])
				drawMap(regions, value)
    	} 
      
      function drawMap(regions, currentWeek) {
        carte = svg.selectAll("path")
          .data(regions.features);

// Mise à jour de la carte
        carte
          .attr("class", "update")
          .style("fill", function(d) {
          try { var value1 = d.properties.values[currentWeek];
               
          }
          catch(err) { }
                    
          if (value1) {
            return color(value1);
          } else { 
            // si pas de valeur alors en gris
            return "#e5e5e5";
          }})
					.on('mousemove', function(d) {
        
        	// On met l'opacité à 0.2
        	d3.select(this).style("opacity", "0.2");

var mouse = d3.mouse(svg.node()).map(function(d) {
            return parseInt(d);
          })
        
          if(d.properties.values && d.properties.values[currentWeek]){
             
             tooltip.classed('hidden', false)
              .attr('style', 'left:' + (mouse[0] + 10) +
                    'px; top:' + (mouse[1] - 20) + 'px')
              .html(d.properties.nom + " : " + d.properties.values[currentWeek]);
          }

})
        
        .on('mouseout', function() {
          tooltip.classed('hidden', true);
        	// On remet l'opacité à 1 et on ajoute une transition comme fait dans le 2eme TP
          d3.select(this).transition().duration(200).style("opacity", "1");

});
        	
        
        // Première carte
				if (currentWeek == 0){
        carte.enter()
          .append("path")
          .attr("d", path)
          .attr("class", "enter")
              .style("fill", "##e5e5e5");
          }}
      		
      
      d3.select("#slider").on("input", function() {
				updateViz(+this.value)
      })
      
      //Initialisation pour que le slider commence en date du 28/09/2003
      updateViz(1);

}
    // draw legend
  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .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("y", 40)
      .attr("width", 30)
      .attr("height", 18)
      .style("fill", color);

// draw legend text
  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 50)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return Math.round(d);})
  
  svg.append("text")  
  .attr("x", (width / 2)) 
	.attr("y", 34 )
	.attr("text-anchor", "middle") 
	.style("font-size", "22px") 
	.style("text-decoration", "underline") 
	.attr("fill","black")
	.text(" Carte intéractive de l'évolution de la grippe en France de 2003 à 2015");

</script>
</body>

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

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

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

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

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