TP4

forked from aurelient's block:

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.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>

var svg = d3.select( "body" )
                .append( "svg" )
                .attr( "width", width )
                .attr( "height", height );
    
    var tooltip = d3.select('body')
    								.append('div')
            				.attr('class', 'hidden tooltip');
    // Le mois par defaut
    var displayMonth = 10;
    
    // Une variable pour le slider  
    var x = d3.scale.linear()
    .domain([0, 11])
    .range([0, width/2])
    .clamp(true);

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

//Pas besoin de chercher plus loin
              break; 
          	}         
        	}               
      	}
                    
        //On set les couleurs
        svg.selectAll("path")
        	.data(json.features)
          .enter()
          .append("path")
          .attr("d", path)
          .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 + " " + d.properties.grippe2014[displayMonth]);
      	})
        .on('mouseout', function() {
        	tooltip.classed('hidden', true);
          d3.select(this).transition().duration(500)
            .style("fill", colorer);
      	})
        .on('mouseover', function() {
        	d3.select(this).transition().duration(500)
            .style("fill", "#a0a0a0");
      	});
    	});      
    });

</script>
</body>

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