xxxxxxxxxx<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> <script> var width = 1000, height = 580; 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 var svg = d3.select( "body" ) .append( "svg" ) .attr( "width", width ) .attr( "height", height ); var slider = svg.append("g") .attr("class", "slider").attr("transform", "translate(" + 30 + "," + height / 2 + ")"); var x = d3.scaleLinear() .domain([0, 180]) .range([0, 150]) .clamp(true); slider.append("line") .attr("class", "track") .attr("x1", x.range()[0]) .attr("x2", x.range()[1]) .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); }) .attr("class", "track-inset") .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); }) .attr("class", "track-overlay") .call(d3.drag() .on("start.interrupt", function() { slider.interrupt(); }) .on("start drag", function() { hue(x.invert(d3.event.x)); })); slider.insert("g", ".track-overlay") .attr("class", "ticks") .attr("transform", "translate(0," + 18 + ")") .selectAll("text") .data(x.ticks(5)) .enter().append("text") .attr("x", x) .attr("text-anchor", "middle") .text(function(d) { return d + "°"; }); var handle = slider.insert("circle", ".track-overlay") .attr("class", "handle") .attr("r", 6);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