Tp4

forked from aurelient's block:

forked from aurelient's block: Tp4

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.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;
    }
    
    
.ticks {
  font: 10px sans-serif;
}

.track,
.track-inset,
.track-overlay {
  stroke-linecap: round;
}

.track {
  stroke: #000;
  stroke-opacity: 0.3;
  stroke-width: 4px;
}

.track-inset {
  stroke: #ddd;
  stroke-width: 9px;
}

.track-overlay {
  pointer-events: stroke;
  stroke-width: 10px;
  stroke: transparent;
  cursor: crosshair;
}

.handle {
  fill: #fff;
  stroke: #000;
  stroke-opacity: 0.5;
  stroke-width:2px;
}

</style>
</head>

<body>

var color = d3.scaleQuantize() //On utilise scaleQuantize qui attribue une valeur du range aux valeurs sur le domaine défini plus loin
 	.range(['#ffffe5','#fff7bc','#fee391','#fec44f','#fe9929','#ec7014','#cc4c02','#993404','#662506']); //On choisit une palette de couleurs bien maladives

slider.transition() // Gratuitous intro!
    .duration(750)
    .tween("hue", function() {
      var i = d3.interpolate(0, 70);
      return function(t) { hue(i(t)); };
    });

function hue(h) {
  handle.attr("cx", x(h));
  svg.style("background-color", d3.hsl(h, 0.8, 0.8));
}
    
    var tooltip = d3.select('body').append('div')
            .attr('class', 'hidden tooltip');

var projection = d3.geoConicConformal() //
    									.translate([width/2, height/2])
    									.center([-5, 45.313061]).scale(2374);

var path = d3.geoPath() // d3.geo.path avec d3 version 3
                 .projection(projection);
    
   
    d3.csv("GrippeFrance2014.csv", function(data) {
      				var maxtemp = 0  //on créé une variable qui servira à avoir le nb max de grippés d'une région sur nov2014
              
      				//Ne pas oublier le parseFloat
      				var max = d3.max(data, function(d) { return parseFloat(d.somme2014); })
      				console.log(max)
              //On fixe le domaine sur lequel étaler notre range de couleurs
    					//color.domain([0,max]); //On fait partir notre domaine de 0 plutôt que min, notre palette partant du blanc

d3.json("francedept.json", function(json) {
      					svg.selectAll("path")
           					.data(json.features)
           					.enter()
          					.append("path")
           					.attr("d", path)
      							//On fusionne les donnees avec le GeoJSON des regions
      							for (var i = 0; i < data.length; i++) {
        								var datareg = data[i].region;
                      
                      	//C'est un peu sale, on peut faire mieux avec substring surement ?
                        var datasumnov2014 = 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"]);
                      var datasum2014 = data[i].somme2014
                      
                      	//on remplace maxtemp si cette région a plus de grippés que le max
                      	var maxtemp = d3.max([maxtemp,datasumnov2014]);
                      console.log(maxtemp)
                      
                        //Recherche de la region dans le GeoJSON
 												for (var j = 0; j < json.features.length; j++) {
														 var jsonregion = json.features[j].properties.nom;
														 if (datareg == jsonregion) {
 															//On injecte la valeur de la sommenov 2014 de la région dans le json
															 json.features[j].properties.sommenov2014 = datasumnov2014;
                               json.features[j].properties.somme2014 = datasum2014;
														 //Pas besoin de chercher plus loin dans la boucle
															 break;
										 					}
                          }
      								}
                color.domain([0,maxtemp]);
                svg.selectAll("path")
                		.style("fill", function(d) {
 										//on prend la valeur recuperee plus haut
 												var value = d.properties.sommenov2014;
 												if (value) {
 													return color(value);
 													} else {
 													// si pas de valeur alors en gris? oui gris est le mieux
 													return "#ccc";
 													}})
                		.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>" +"Malades en Novembre 2014 : "+d.properties.sommenov2014);
                				})
                .on('click',update)
                		.on('mouseout', function() {
                   			tooltip.classed('hidden', true);
               					});
                function update(){
                  color.domain([0,max]);
                  svg.selectAll("path")
                		.style("fill", function(d) {
                console.log(d.properties.somme2014)
 										//on prend la valeur recuperee plus haut
 												var value = d.properties.somme2014;
 												if (value) {
 													return color(value);
 													} else {
 													// si pas de valeur alors en gris? oui gris est le mieux
 													return "#ccc";
 													}})                  
                }
               			
               });
});
  </script>
</body>

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