Skip to content

Instantly share code, notes, and snippets.

@keikhcheung
Last active December 7, 2017 11:19
Show Gist options
  • Save keikhcheung/5c615f8c679022fc7782d4ef039b706e to your computer and use it in GitHub Desktop.
Save keikhcheung/5c615f8c679022fc7782d4ef039b706e to your computer and use it in GitHub Desktop.
TP4-7-WeeklyData-20171207
license: mit
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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- UNNECESSARY <script src="https://d3js.org/topojson.v1.min.js"></script> -->
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
/* Add div.tooltip which contains info upon hovering*/
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>
<!-- Add weekly slider -->
<div>
<input id="slider" type="range" value="1" min="1" max="52" step="1" />
<span id="week">week</span>
</div>
<script>
var width = 700,
height = 580;
var svg = d3.select( "body" )
.append( "svg" )
.attr( "width", width )
.attr( "height", height )
// Add white boundry to region territories
.style("stroke", "#fff")
.style("stroke-width", "1px");
// Add var tooltip
// and append it to body
// and make tool tip contain .hidden tooltip
var tooltip = d3.select('body').append('div')
.attr("class", "hidden tooltip");
// d3.geo.albersUsa changed to d3.geoConicConformal()
var projection = d3.geoConicConformal()
.translate([width/2, height/2])
// Reposition and rescale of the map base layer
.center([2.454071, 46.279229]).scale(2800);
// On definie une echelle de couleur
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)"]);
var path = d3.geoPath() // d3.geo.path avec d3 version 3
.projection(projection);
// Chargement des donnees
d3.csv("GrippeFrance2014.csv", function(data) {
console.log(data) // Check link element denomination: .region
// Adjust colour range related to shown vairation scale
color.domain([0, 200]);
// OBSOLETE Set input domain for color scale
// OBSOLETE Link data min and max values to colour scheme
// OBSOLETE color.domain([
// OBSOLETE d3.min(data, function(d) { return d.value; }),
// OBSOLETE d3.max(data, function(d) { return d.value; })
// OBSOLETE ]);
// Inject data values in CSV table to D3 JavaScript object
d3.json("regions.json", function(json) {
console.log(json) // Check link element denomination: .properties.nom
for (var i = 0; i < data.length; i++) {
// Fetch all .region values which refer to region name
// and put them in var dataRegion
var dataRegion = data[i].region;
// OBSOLETE Fetch all values of column 'somme2014'
// OBSOLETE and put them in var dataValue
// OBSOLETEvar dataValue = parseFloat(data[i].somme2014);
// Fetch all values of columns concerning Nov 2014
// add them
// and put them in var dataValue
// OBSOLETE var dataValue = 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 dataValue = Object.values(data[i]);
// console.log(Object.values(data[i]))
// console.log(data[i])
var weeksArray = Object.keys(data[0]);
// console.log(Object.keys(data[0]))
//Recherche de l'etat dans le GeoJSON
for (var j = 0; j < json.features.length; j++) {
var jsonRegion = json.features[j].properties.nom;
if (dataRegion == jsonRegion) {
//On injecte la valeur de l'Etat dans le json
// OBSOLETE json.features[j].properties.value = dataValue;
// OBSOLETE console.log(dataValue)
json.features[j].properties.value = dataValue;
console.log(dataValue)
//Pas besoin de chercher plus loin
break;
}
}
}
// OBSOLETE MAP Paint <PATH>
/* svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("fill", function(d) {
//on prend la valeur recupere plus haut
var value = d.properties.value;
if (value) {
return color(value);
} else {
// si pas de valeur alors en gris
return "#ccc";
}
})*/
// NEW MAP
// Shaped under fx drawMap()
function drawMap(currentWeek) {
var carte = svg.selectAll("path")
.data(json.features);
// code en cas de mise a jour de la carte / de changement de semaine
carte
.attr("class", "update");
// update the elements
function updateViz(value) {
///console.log("update " + "value");
d3.select('#week').html(weeksArray[value]);
drawMap(value);
};
// code pour la creation de la carte quand les donnees sont chargees la 1e fois.
carte.enter()
.append("path")
.attr("class", "enter")
.attr("d", path)
.style("fill", function(d) {
//on prend la valeur recupere plus haut
var value = d.properties.value;
if (value) {
return color(value);
} else {
// si pas de valeur alors en gris
return "#ccc";
}
})
// When mouse hovers over a region
.on('mousemove', function(d) {
console.log(d) // Check element to show: .properties.nom AND .properties.value
var mouse = d3.mouse(svg.node()).map(function(d) {
// console.log(d)
return parseInt(d);
});
tooltip.classed('hidden', false)
// CSS modification
.attr('style', 'left:' + (mouse[0] + 15) + 'px; top:' + (mouse[1] - 35) + 'px')
// Add HTML string which concatenates needed text
// e.g. Bretagne: 71
.html(d.properties.nom + ": " + d.properties.value);
})
.on('mouseout', function() {
tooltip.classed('hidden', true);
});
// Slider eventListener
d3.select("#slider").on("input", function() {
updateViz(+this.value);
});
}
// Call fx drawMap()
drawMap();
});
});
</script>
</body>
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment