|
<!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> |
|
|
|
<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> |