Built with blockbuilder.org
forked from JulesSauvinet's block: Grippe en France de 2003 à 2015
xxxxxxxxxx
<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; }
.regions {
}
.regions:hover {
fill: #666;
}
.hidden {
display: none;
}
.enter {
}
.update {
}
div.tooltip {
color: #222;
background-color: #fff;
padding: .5em;
text-shadow: #f5f5f5 0 1px 0;
border-radius: 2px;
opacity: 0.9;
position: absolute;
}
#weekdiv {
position: absolute;
left :25px;
top :40px;
}
.axis path,
.axis tick,
.axis line {
fill: none;
stroke: none;
}
.axis text {
font-size: 12px;
fill: #AAAAAA;
font-weight: 400;
}
.legendTitle {
font-size: 14px;
fill: #4F4F4F;
font-weight: 300;
}
</style>
</head>
<body>
<script>
var width = 700,
height = 580;
var svg = d3.select( "body" )
.append( "svg" )
.attr( "width", width )
.attr( "height", height );
var projection = d3.geo.conicConformal().center([2.454071, 46.279229]).scale(3000)
.translate([width/2, height/2]);
var path = d3.geo.path()
.projection(projection);
var color = d3.scale.linear()
.interpolate(d3.interpolateHcl)
.range(['rgb(204,255,204)', 'rgb(0,102,0)']);
var tooltip = d3.select('body').append('div')
.attr('class', 'hidden tooltip');
var nbweeks = 0;
var weeks = [];
function updateViz(value, data){
d3.select('#week').html(weeks[value-1]);
//on met a jour la carte
drawMap(value-1, data);
}
function drawMap(currentWeek, regions) {
var carte = svg.selectAll("path")
.data(regions.features);
// code en cas de mise a jour de la carte / de changement de semaine
carte
.attr("class", "update regions")
.style("fill", function(d) {
var color = fillRegions(d,currentWeek);
return color;
}).on('mousemove', function(d) {
fillTooltip(d, currentWeek);
})
.on('mouseout', function() {
tooltip.classed('hidden', true);
});
// code pour la creation de la carte quand les donnees sont chargees la 1e fois.
carte.enter()
.append("path")
.attr("class", function(d,i){
return "enter regions";
})
.attr("d", path)
.style("fill", function(d) {
var color = fillRegions(d,currentWeek);
return color;
})
.style("stroke", "black")
.style("stroke-width", "1px")
.on('mousemove', function(d) {
fillTooltip(d, currentWeek);
})
.on('mouseout', function() {
tooltip.classed('hidden', true);
});
carte.exit().remove();
}
//met a jour les tooltip quand on survole une région
function fillTooltip(d, currentWeek){
var mouse = d3.mouse(svg.node()).map(function(d) {
return parseInt(d);
});
var toDisplay = d.properties.nom + " : </br>"
if (d.properties.grippe){
if (!d.properties.grippe[currentWeek])
toDisplay+="Cas de grippe la semaine du " + weeks[currentWeek] + " : " + "Non défini";
else
toDisplay+= "Cas de grippe la semaine du " + weeks[currentWeek] + " : " + d.properties.grippe[currentWeek+1];
}
else {
toDisplay+="Pas de données sur la grippe pour cette région";
}
tooltip.classed('hidden', false)
.attr('style', 'left:' + (mouse[0] + 15) +
'px; top:' + (mouse[1] - 35) + 'px')
.html(toDisplay);
}
//met a jour les couleurs des régions selon la semaine choisie
function fillRegions(d, currentWeek){
if (d.properties.grippe){
if (d.properties.grippe[currentWeek+1]){
var value = parseFloat(d.properties.grippe[currentWeek+1]);
return color(value);
}
else{
return 'lightgrey';
}
}
else {
return 'lightgrey';
}
}
//traitement des données en asynchrone
function processData(error,regionsdata,grippedata) {
var i =0;
for (var week in grippedata[0]) {
if (week !== "regions" && week !== "somme2014"){
weeks.push(week);
nbweeks++;
}
i++;
}
d3.select('#slider').attr("max", nbweeks);
d3.select('#week').html(weeks[0]);
//On fusionne les donnees de grippe avec les données de map
for (var i = 0; i < grippedata.length; i++) {
for (var j = 0; j < regionsdata.features.length; j++) {
if (regionsdata.features[j].properties.nom === grippedata[i].regions){
regionsdata.features[j].properties.grippe = Object.values(grippedata[i]);
}
}
}
var min=Number.MAX_VALUE;
var max=0;
//trouve la valeur max et la valeur min du nombre de cas de grippe
for (var i = 0; i < grippedata.length; i++) {
for (var week in grippedata[i]) {
if (week !== "regions" && week !== "somme2014"){
var grippeUnit = parseInt(grippedata[i][week]);
if (grippeUnit <min){
min = grippeUnit;
}
if (grippeUnit >max){
max = grippeUnit;
}
}
}
}
color.domain([min, max]);
//construction de la première map
drawMap(1, regionsdata);
//insertion du slider
d3.select("#slider").on("input", function() {
updateViz(+this.value, regionsdata);
});
//construction de la légende
var legend = svg.append("g")
.attr("class", "legend")
.attr("transform", function(d, i) {
return "translate(0," + i * 20 + ")";
});
//construit le petit carré gris de la légende pour les valeurs ND
legend.append("rect").attr("x", 30).attr("y", height-95).attr("width", 18).attr("height", 18).style("fill",'lightgrey');
//ajoute la légende du petit carré gris
legend.append("text") .attr("x", 80).attr("y", height-86).attr("dy", ".35em").style("text-anchor", "end").text("ND");
//construit le gradient de couleur de la légende
var defs = svg.append("defs");
var linearGradient = defs.append("linearGradient")
.attr("id", "linear-gradient")
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "100%")
.attr("y2", "0%");
linearGradient.append("stop")
.attr("offset", "0%")
.attr("stop-color", color(min)); //light green
linearGradient.append("stop")
.attr("offset", "100%")
.attr("stop-color", color(max)); //dark green
//dessine le gradient de couleur
var gradientWidth = 140;
legend.append("rect")
.attr("class", "legendRect")
.attr("x", 30)
.attr("y", height-130)
.attr("rx", 8/2)
.attr("width", gradientWidth)
.attr("height", 10)
.style("fill", "url(#linear-gradient)");
var xScale = d3.scale.linear()
.range([30, 30+gradientWidth])
.domain([min,max] );
//défini l'axe de la légende
var xAxis = d3.svg.axis()
.orient("bottom")
.ticks(3)
.tickFormat(function(d) { console.log(d);return d; })
.scale(xScale);
//place l'axe de la légende
legend.append("g")
.attr("class", "axis")
.attr("transform", "translate(5," + (height-125) + ")")
.call(xAxis);
//ajoute un titre a la legende
legend.append("text")
.attr("class", "legendTitle")
.attr("x", 100)
.attr("y", height-140)
.style("text-anchor", "middle")
.text("Cas de grippe");
};
//lance le traitement des données en asynchrone
queue()
.defer(d3.json, "regions.json")
.defer(d3.csv, "GrippeFrance2003-15.csv")
.await(processData);
</script>
<div id="weekdiv">
<input id="slider" type="range" value="1" min="1" max="100" step="1" />
<span id="week"></span>
</div>
</body>
https://d3js.org/d3.v3.min.js
https://d3js.org/queue.v1.min.js