Built with blockbuilder.org
Last active
December 10, 2017 22:04
-
-
Save Alsaxian/0b431aec384f90fa8b0010b3dc351f04 to your computer and use it in GitHub Desktop.
FanceGrippe2014
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
region | 05/01/14 | 12/01/14 | 19/01/14 | 26/01/14 | 02/02/14 | 09/02/14 | 16/02/14 | 23/02/14 | 02/03/14 | 09/03/14 | 16/03/14 | 23/03/14 | 30/03/14 | 06/04/14 | 13/04/14 | 20/04/14 | 27/04/14 | 04/05/14 | 11/05/14 | 18/05/14 | 25/05/14 | 01/06/14 | 08/06/14 | 15/06/14 | 22/06/14 | 29/06/14 | 06/07/14 | 13/07/14 | 20/07/14 | 27/07/14 | 03/08/14 | 10/08/14 | 17/08/14 | 24/08/14 | 31/08/14 | 07/09/14 | 14/09/14 | 21/09/14 | 28/09/14 | 05/10/14 | 12/10/14 | 19/10/14 | 26/10/14 | 02/11/14 | 09/11/14 | 16/11/14 | 23/11/14 | 30/11/14 | 07/12/14 | 14/12/14 | 21/12/14 | 28/12/14 | somme2014 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Alsace | 70 | 55 | 73 | 92 | 115 | 142 | 176 | 113 | 89 | 65 | 41 | 30 | 27 | 28 | 23 | 21 | 17 | 15 | 13 | 12 | 11 | 10 | 9 | 8 | 8 | 7 | 6 | 6 | 6 | 6 | 5 | 6 | 6 | 6 | 7 | 9 | 10 | 14 | 20 | 28 | 35 | 35 | 34 | 33 | 35 | 36 | 42 | 54 | 69 | 95 | 131 | 172 | 2176 | |
Aquitaine | 58 | 54 | 101 | 106 | 121 | 146 | 101 | 49 | 33 | 28 | 28 | 23 | 20 | 14 | 11 | 9 | 8 | 7 | 7 | 6 | 6 | 6 | 6 | 5 | 5 | 4 | 4 | 3 | 3 | 3 | 2 | 3 | 3 | 3 | 4 | 4 | 5 | 7 | 10 | 16 | 16 | 16 | 14 | 14 | 15 | 19 | 20 | 23 | 37 | 53 | 79 | 127 | 1465 | |
Auvergne | 61 | 57 | 64 | 91 | 135 | 184 | 183 | 150 | 114 | 78 | 54 | 39 | 27 | 21 | 19 | 17 | 17 | 16 | 14 | 12 | 12 | 12 | 11 | 11 | 10 | 9 | 9 | 8 | 8 | 8 | 8 | 8 | 8 | 7 | 7 | 7 | 7 | 8 | 10 | 11 | 13 | 16 | 17 | 21 | 22 | 20 | 20 | 21 | 27 | 29 | 47 | 67 | 1852 | |
Bourgogne | 38 | 34 | 35 | 51 | 76 | 106 | 112 | 94 | 64 | 46 | 29 | 23 | 18 | 14 | 11 | 10 | 9 | 8 | 7 | 7 | 6 | 6 | 5 | 5 | 4 | 4 | 4 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 2 | 2 | 3 | 3 | 4 | 8 | 11 | 15 | 14 | 13 | 12 | 13 | 13 | 15 | 19 | 24 | 33 | 40 | 1091 | |
Bretagne | 35 | 33 | 50 | 54 | 88 | 97 | 121 | 120 | 55 | 51 | 33 | 19 | 18 | 14 | 12 | 12 | 10 | 9 | 7 | 6 | 5 | 5 | 5 | 5 | 4 | 3 | 3 | 3 | 3 | 2 | 2 | 3 | 3 | 3 | 3 | 3 | 4 | 5 | 9 | 12 | 14 | 15 | 14 | 14 | 12 | 12 | 15 | 18 | 31 | 43 | 65 | 78 | 1260 | |
Centre | 40 | 36 | 37 | 72 | 97 | 99 | 121 | 91 | 52 | 34 | 28 | 21 | 17 | 14 | 10 | 10 | 8 | 7 | 6 | 5 | 5 | 4 | 4 | 4 | 4 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 4 | 6 | 9 | 13 | 14 | 15 | 16 | 16 | 14 | 13 | 14 | 16 | 24 | 46 | 63 | 88 | 1230 | |
Champagne-Ardenne | 47 | 49 | 45 | 50 | 85 | 130 | 165 | 153 | 116 | 76 | 50 | 36 | 27 | 20 | 17 | 15 | 14 | 12 | 10 | 9 | 9 | 8 | 7 | 7 | 6 | 6 | 5 | 5 | 5 | 4 | 4 | 4 | 3 | 3 | 3 | 3 | 3 | 3 | 4 | 5 | 9 | 13 | 20 | 22 | 21 | 22 | 23 | 29 | 30 | 41 | 52 | 74 | 1579 | |
Franche-Comte | 32 | 35 | 40 | 47 | 68 | 93 | 103 | 91 | 76 | 57 | 42 | 33 | 26 | 23 | 19 | 17 | 16 | 13 | 11 | 10 | 9 | 9 | 8 | 8 | 7 | 6 | 6 | 6 | 5 | 5 | 5 | 5 | 5 | 4 | 4 | 4 | 4 | 4 | 4 | 5 | 5 | 6 | 7 | 9 | 14 | 18 | 18 | 18 | 21 | 25 | 27 | 31 | 1164 | |
Ile-de-France | 44 | 40 | 68 | 116 | 164 | 258 | 194 | 103 | 54 | 38 | 30 | 22 | 18 | 14 | 11 | 9 | 8 | 5 | 5 | 4 | 4 | 4 | 3 | 2 | 1 | 2 | 2 | 2 | 2 | 2 | 2 | 3 | 4 | 4 | 3 | 5 | 10 | 17 | 19 | 28 | 28 | 26 | 25 | 24 | 26 | 36 | 41 | 70 | 84 | 107 | 175 | 267 | 2233 | |
Languedoc-Roussillon | 97 | 72 | 98 | 176 | 228 | 336 | 76 | 213 | 118 | 73 | 48 | 36 | 25 | 24 | 22 | 24 | 23 | 20 | 15 | 13 | 11 | 11 | 9 | 8 | 7 | 7 | 6 | 6 | 6 | 5 | 5 | 5 | 6 | 6 | 6 | 6 | 7 | 10 | 12 | 20 | 23 | 26 | 26 | 26 | 27 | 28 | 28 | 34 | 40 | 76 | 113 | 158 | 2501 | |
Lorraine | 47 | 43 | 53 | 77 | 96 | 152 | 119 | 102 | 87 | 51 | 31 | 26 | 17 | 18 | 17 | 16 | 15 | 13 | 11 | 10 | 9 | 8 | 7 | 6 | 5 | 5 | 4 | 4 | 3 | 3 | 3 | 3 | 2 | 2 | 2 | 2 | 3 | 4 | 6 | 14 | 18 | 20 | 25 | 23 | 24 | 22 | 24 | 33 | 41 | 56 | 85 | 119 | 1586 | |
Midi-Pyrenees | 38 | 28 | 44 | 66 | 96 | 123 | 117 | 73 | 37 | 22 | 15 | 8 | 6 | 5 | 4 | 5 | 4 | 4 | 4 | 3 | 3 | 3 | 2 | 2 | 2 | 2 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 2 | 2 | 3 | 6 | 7 | 7 | 6 | 6 | 7 | 7 | 8 | 11 | 12 | 17 | 29 | 43 | 63 | 961 | |
Nord-Pas-de-Calais | 85 | 69 | 94 | 119 | 146 | 170 | 167 | 119 | 72 | 50 | 39 | 34 | 38 | 38 | 36 | 31 | 27 | 24 | 20 | 19 | 17 | 16 | 15 | 13 | 12 | 11 | 10 | 10 | 9 | 8 | 8 | 8 | 8 | 10 | 11 | 15 | 17 | 24 | 32 | 40 | 42 | 38 | 39 | 36 | 32 | 39 | 55 | 65 | 105 | 129 | 180 | 180 | 2631 | |
Basse-Normandie | 38 | 38 | 40 | 55 | 72 | 92 | 92 | 72 | 57 | 43 | 35 | 26 | 21 | 18 | 14 | 13 | 12 | 11 | 10 | 8 | 8 | 7 | 6 | 5 | 5 | 4 | 4 | 4 | 4 | 4 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 4 | 4 | 7 | 9 | 11 | 12 | 12 | 13 | 13 | 13 | 20 | 33 | 51 | 70 | 1114 | |
Haute-Normandie | 32 | 23 | 25 | 37 | 64 | 105 | 124 | 94 | 55 | 30 | 21 | 15 | 13 | 12 | 11 | 8 | 6 | 5 | 4 | 4 | 3 | 3 | 3 | 2 | 2 | 2 | 2 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 2 | 4 | 6 | 7 | 8 | 9 | 9 | 10 | 11 | 14 | 25 | 52 | 98 | 972 | |
Pays de la Loire | 39 | 36 | 45 | 58 | 101 | 104 | 115 | 85 | 52 | 35 | 23 | 20 | 17 | 14 | 12 | 10 | 8 | 8 | 7 | 6 | 6 | 6 | 5 | 5 | 4 | 3 | 3 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 2 | 3 | 4 | 11 | 17 | 16 | 15 | 14 | 14 | 14 | 14 | 18 | 21 | 29 | 38 | 63 | 81 | 1217 | |
Picardie | 48 | 38 | 35 | 47 | 82 | 97 | 125 | 101 | 59 | 41 | 29 | 25 | 24 | 21 | 18 | 17 | 16 | 13 | 12 | 10 | 10 | 9 | 8 | 8 | 7 | 7 | 6 | 6 | 5 | 5 | 5 | 5 | 4 | 4 | 4 | 4 | 5 | 5 | 6 | 7 | 10 | 15 | 18 | 20 | 23 | 24 | 24 | 29 | 36 | 48 | 58 | 94 | 1377 | |
Poitou-Charentes | 33 | 31 | 36 | 48 | 82 | 99 | 95 | 63 | 36 | 27 | 20 | 16 | 12 | 11 | 9 | 8 | 7 | 6 | 6 | 5 | 5 | 5 | 5 | 4 | 4 | 4 | 3 | 3 | 3 | 3 | 3 | 2 | 2 | 2 | 2 | 2 | 2 | 3 | 3 | 6 | 9 | 11 | 12 | 12 | 12 | 13 | 12 | 15 | 17 | 27 | 48 | 75 | 979 | |
Provence-Alpes-Cote d'Azur | 76 | 85 | 106 | 180 | 255 | 405 | 353 | 189 | 118 | 86 | 32 | 24 | 20 | 13 | 11 | 11 | 9 | 7 | 6 | 5 | 4 | 4 | 4 | 4 | 2 | 2 | 2 | 2 | 2 | 2 | 3 | 2 | 3 | 3 | 3 | 3 | 5 | 11 | 12 | 13 | 16 | 18 | 22 | 25 | 20 | 27 | 26 | 40 | 57 | 85 | 148 | 203 | 2764 | |
Rhone-Alpes | 103 | 98 | 184 | 282 | 452 | 491 | 463 | 364 | 180 | 74 | 40 | 28 | 25 | 22 | 21 | 19 | 21 | 15 | 12 | 10 | 10 | 11 | 9 | 6 | 4 | 4 | 4 | 4 | 5 | 4 | 4 | 4 | 5 | 5 | 6 | 6 | 11 | 27 | 35 | 36 | 31 | 37 | 35 | 46 | 36 | 43 | 52 | 76 | 84 | 128 | 200 | 244 | 4116 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
body { margin:2; | |
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.8; | |
position: absolute; | |
} | |
</style> | |
</head> | |
<body> | |
<div> | |
<input id="slider" type="range" value="52" min="1" max="52" step="1" /> | |
<span id="week"> Choix de la semaine </span> | |
</div> | |
<script> | |
// les variables | |
var width = 960, | |
height = 580; | |
var svg = d3.select( "body" ) // ajoute a l'objet "body" du DOM un élément SVG avec | |
.append( "svg" ) // attributs width et height spécifiés. Cette opération | |
.attr( "width", width ) // est stockée dans une variable 'svg' qu'on va pouvoir | |
.attr( "height", height ); // utiliser avec "svg.append("truc")..." | |
// On rajoute un groupe englobant toute la visualisation pour plus tard | |
var g = svg.append("g"); | |
// définit le type de projection sur plan 2D | |
var projection = d3.geoConicConformal() | |
.center([2.454071, 46.279229]) | |
.scale(2600); | |
var regionFormat = d3.geoPath() // la variable spécifiant le format des 'path' générés | |
.projection(projection); | |
// On definit une echelle de couleur à l'affichage (via la fonction 'range') | |
var color = d3.scaleQuantize() | |
.range(["rgb(236,247,231)", | |
"rgb(179,228,194)", | |
"rgb(115,195,144)", | |
"rgb(49,164,118)", | |
"rgb(0,82,91)"]) | |
.domain([0, 250]); // mettre [0, 350] pour un rendu comme le tp | |
// couleur rouge entre les régions pour le fun | |
var color2 = d3.scaleQuantize() | |
.range(["rgb(255,255,255)", | |
"rgb(255,255,255)", | |
"rgb(186,184,94)", | |
"rgb(184,85,55)", | |
"rgb(163,43,0)"]) | |
.domain([0, 253]); | |
var tooltip = d3.select('body') // définit l'ajout d'un élément 'div' au DOM | |
.append('div') // et stocke ceci dans une variable | |
.attr('class', 'hidden tooltip'); | |
// on définit un domaine de couleurs | |
//color.domain([ | |
//d3.min(data, function(d) { return parseFloat(d.somme2014); }), | |
//d3.max(data, function(d) { return parseFloat(d.somme2014); }) | |
//]); | |
d3.json("regions.json", function(json) { | |
d3.csv("GrippeFrance2014.csv", function(data) { | |
var listeSemaines = Object.keys(data[0]); | |
function drawMap(w) { | |
//Ajout du nombre de malades sur le mois de novembre pour chaque région dans le //.json | |
for (var j = 0; j < json.features.length; j++) { | |
var NomRegion = json.features[j].properties.nom; | |
// récupération du nombre de malades du mois de novembre pour chaque NomRegion | |
for (var i = 0; i < data.length; i++) { | |
if (data[i].region == NomRegion) { | |
//On injecte la valeur de l'Etat dans le fichier 'json.features' | |
//json.features[j].properties.value = parseFloat(data[i].somme2014); | |
json.features[j].properties.value = Object.values(data[i])[w] ; | |
// 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"]); | |
// } | |
//json.features[j].properties.recapAnnee = Object.values(data[i]); | |
//Pas besoin de chercher plus loin | |
break; | |
} // fin du if | |
} // fin du for en 'i' | |
} // fin du for en 'j' | |
// fonction d'affichage des régions avec niveaux de couleur selon le nombre de malades | |
carte = g.selectAll("path") // sélectionne tout les éléments 'path' du SVG | |
.data(json.features); // associe la i-eme ligne de la donnée "json.features" | |
// au i-eme élément 'path' dans le SVG (meme si cet // élément n'existe pas encore) | |
// code pour la creation de la carte quand les donnees sont chargees la 1e fois | |
carte.enter() // permet de créer un nouvel élément 'path' pour chaque ligne de // donnée non déjà affiliée à un 'path' existant: c'est le binding de | |
// donnée à des éléments du SVG, c'est une fonctionnalité de la | |
// méthode.data() | |
.append("path") // lance la création des éléments 'path' manquants | |
.attr("class", "enter") // de classe 'enter' | |
.attr("d", regionFormat) // associe a chaque "path" une forme, désignée par son // attribut 'd', et qui est définie par 'regionFormat' | |
// d3.select(this) ? | |
.style("fill", function(d) { // applique un remplissage de chaque 'path' selon // le contenu de la ligne 'd' de la donnée // affiliée à chaque 'path' | |
var value = d.properties.value; //on prend la valeur recuperée plus haut | |
if (value) {return color(value);} | |
else {return "#ccc";} // si pas de valeur alors en gris | |
}) // fin du style | |
.attr("stroke", "white") | |
//.attr("stroke", function(d) { // ajout des marges entre régions (couleur + // epaisseur) | |
// var value = d.properties.valeur; | |
// if (value) {return color2(value);} | |
// else {return "white";} | |
//}) // fin du style) | |
.attr("stroke-width", 1) | |
.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.value + " pour la semaine du Nouvel An" ); | |
}) // fin du onMouseMove | |
.on('mouseout', function() { | |
tooltip.classed('hidden', true); | |
}); // fin du onMouseOut | |
// code en cas de mise a jour de la carte / de changement de semaine | |
carte.attr("class", "update") | |
//ou bien d.properties.valeur <--- d.properties.recapAnnee[w] | |
.style("fill", function(d) { | |
var value = parseFloat(d.properties.value); | |
if (value) {return color(value);} | |
else {return "#ccc";} | |
}) // fin du style | |
.attr("stroke", "white") | |
.attr("stroke-width", 1) | |
.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.value + " pour la semaine " + w ); | |
}) | |
.on('mouseout', function() { | |
tooltip.classed('hidden', true); | |
}); | |
} // fin de la fonction drawMap | |
drawMap(52); | |
// update the elements | |
function updateViz(w) { | |
//console.log("update semaine " + w); | |
d3.select('#week').html("Semaine du " + listeSemaines[w] ); | |
drawMap(w); | |
} | |
// Action lors d'un mouvement du slider | |
d3.select("#slider").on("input", function() { | |
console.log("slider"); | |
updateViz(+ this.value); | |
}); // fin du d3.select(slider) | |
}); // fin du d3.csv | |
}); // fin du d3.json | |
</script> | |
</body> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment