Built with blockbuilder.org
Last active
December 7, 2017 08:08
-
-
Save Hakkahi/4c47f47b1cad5775f1e9329851b42937 to your computer and use it in GitHub Desktop.
TP_4
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: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; | |
} | |
</style> | |
</head> | |
<body> | |
<div> | |
<input id="slider" type="range" value="1" min="1" max="52" step="1" /> | |
<span id="week">week</span> | |
</div> | |
<script> | |
var width = 850, | |
height = 580; | |
var svg = d3.select( "body" ) | |
.append( "svg" ) | |
.attr( "width", width ) | |
.attr( "height", height ); | |
var tooltip = d3.select('body') | |
.append('div') | |
.attr('class', 'hidden tooltip'); | |
var projection = d3.geoConicConformal() | |
.center([2.454071, 46.279229]) | |
.scale(2500); | |
var path = d3.geoPath() | |
.projection(projection); | |
var color = d3.scaleQuantize() | |
.range( | |
[ | |
"rgb(237,248,233)", | |
"rgb(186,228,179)", | |
"rgb(116,196,118)", | |
"rgb(49,163,84)", | |
"rgb(0,109,44)" | |
]); | |
d3.csv("GrippeFrance2014.csv", function(data) { | |
color.domain([0, 200]); | |
var weeksArray = Object.keys(data[0]); | |
var franceJson | |
d3.json("france.json", function(json) { | |
//On fusionne les donnees avec le GeoJSON | |
for (var i = 0; i < data.length; i++) { | |
for (var j = 0; j < json.features.length; j++) { | |
var jsonRegion = json.features[j].properties.nom; | |
if (data[i].region == jsonRegion) { | |
//json.features[j].properties.value = dataValue; | |
json.features[j].properties.values = Object.values(data[i]); | |
break; | |
} | |
} | |
} | |
franceJson = json | |
d3.select('#week').html(Object.keys(data[0])[1]); | |
d3.select("#slider").on("input", function() { | |
updateViz(+this.value); | |
}); | |
svg.selectAll("path") | |
.data(json.features) | |
.enter() | |
.append("path") | |
.attr("d", path); | |
drawMap(1) | |
}); | |
function updateViz(value) { | |
console.log("update " + "value"); | |
d3.select('#week').html(weeksArray[value]); | |
drawMap(value); | |
} | |
function drawMap(currentWeek) { | |
carte = svg.selectAll("path") | |
.data(franceJson.features); | |
// code en cas de mise a jour de la carte / de changement de semaine | |
carte.attr("class", "update") | |
.style("fill", function(d) { | |
var values = d.properties.values; | |
if (values && values[currentWeek]) { | |
return color(values[currentWeek]); | |
} | |
else { | |
// si pas de valeur alors en gris | |
return "#ccc"; | |
} | |
}) | |
.on('mousemove', function(d) { | |
var displayValue | |
if (d.properties.values){ | |
displayValue = d.properties.values[currentWeek] | |
} | |
else{ | |
displayValue = "undefined" | |
} | |
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>" + displayValue); | |
}) | |
.on('mouseout', function() { | |
tooltip.classed('hidden', true); | |
}); | |
// code pour la creation de la carte quand les donnees sont chargees la 1e fois. | |
carte.selectAll("path") | |
.enter() | |
.data(franceJson.features) | |
.append("path") | |
.attr("class", "enter") | |
.style("fill", function(d) { | |
var values = d.properties.values; | |
// on vérifie que la région et la valeur associée à la semaine existent | |
if (values && values[currentWeek]) { | |
return color(values[currentWeek]); | |
} else { | |
// si pas de valeur alors coloration en gris | |
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>" + d.properties.values[currentWeek]); | |
}) | |
.on('mouseout', function() { | |
tooltip.classed('hidden', true); | |
}); | |
} | |
}); | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment