TP5 : Grippe en France

forked from MelanieSalignat's block: TP4 : Grippe en France

<!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">Faire défiler les semaines</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)
    		.translate([width/2, height/2]) ;

// 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 "#b7b7b7";
                }
            })
              
       			.on('mousemove', function(d) {
          			var mouse = d3.mouse(svg.node()).map(function(d) {
              			return parseInt(d);
          			});
          			var variable = d.properties.value ; 
                if (variable && variable[currentWeek]){
                  	b = variable[currentWeek] ;
                } else {
                		b = "Aucune donnée"  ;  
                }
          
                tooltip.classed('hidden', false)
          			.attr('style', 'left:' + (mouse[0] + 15) + 'px; top:' + (mouse[1] - 35) + 'px')
          			.html(d.properties.nom + " : " + b);
       			})
       			
            .on('mouseout', function() {
           			tooltip.classed('hidden', true);
       			});

// code pour la creation de la carte quand les donnees sont chargees la 1e fois.
  			carte
        		.data(json.features)
          	.enter()
    				.append("path")
    				.attr("d", path)
        		.style("stroke", "#b7b7b7")
            .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 "#b7b7b7";
                }
            })
              
       			.on('mousemove', function(d) {
          			var mouse = d3.mouse(svg.node()).map(function(d) {
              			return parseInt(d);
          			});
          			var variable = d.properties.value ; 
                if (variable && variable[currentWeek]){
                  	b = variable[currentWeek] ;
                } else {
                		b = "Aucune donnée"  ;  
                }
          
                tooltip.classed('hidden', false)
          			.attr('style', 'left:' + (mouse[0] + 15) + 'px; top:' + (mouse[1] - 35) + 'px')
          			.html(d.properties.nom + " : " + b);
       			})
       			
            .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) { 
        				return "[" + parseInt(color.invertExtent(d)[0]) + ";" + parseInt(color.invertExtent(d)[1]) + "]" ;
      		})
          		d3.slider().axis(true).min(2003).max(2015).step(1)
      
    }

</script>
</body>

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

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