Skip to content

Instantly share code, notes, and snippets.

@pierreelliott
Last active December 4, 2019 19:48
Show Gist options
  • Save pierreelliott/d78a45e188882a559692ab408f0ed936 to your computer and use it in GitHub Desktop.
Save pierreelliott/d78a45e188882a559692ab408f0ed936 to your computer and use it in GitHub Desktop.
Dataviz-TP3
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.v5.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.region { stroke-width: 1; stroke: white}
.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;
}
input {
width: 100%;
display: inline-block
}
</style>
</head>
<body>
<div>
<span>Semaine courante : </span><span id="week">Somme2014</span>
<input id="slider" type="range" value="1" min="1" max="53" step="1" />
</div>
<script>
var width = 800,
height = 780;
var svg = d3.select( "body" )
.append( "svg" )
.attr( "width", width )
.attr( "height", height );
// On rajoute un groupe englobant toute la visualisation pour plus tard
var g = svg.append( "g" );
// Autres projections : geoMercator, geoNaturalEarth1, ...
// https://github.com/d3/d3-geo/blob/master/README.md
var projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2300);
// On definit une echelle de couleur
// via https://observablehq.com/@d3/color-schemes?collection=@d3/d3-scale-chromatic
var color = d3.scaleQuantize()
.range(["#edf8e9","#bae4b3","#74c476","#31a354","#006d2c"]);
var path = d3.geoPath()
.projection(projection);
// Chargement des donnees
d3.csv("GrippeFrance2014.csv").then(function(data) {
//Set input domain for color scale
color = getColor(color, data.map(d => d.somme2014));
d3.json("regions.json").then(function(json) {
//On fusionne les donnees avec le GeoJSON
data.map(data_i => {
json.features.map(feature => {
var jsonState = feature.properties.nom;
if (data_i.region == jsonState) {
//On injecte la valeur de l'Etat dans le json
feature.properties.values = Object.values(data_i);
}
});
});
var weeksArray = Object.keys(data[0]);
updateViz(weeksArray.length - 1);
d3.select("#slider").on("input", function() {
updateViz(+this.value);
});
// update the elements
function updateViz(value) {
color = getColor(color, data.map(d => d[weeksArray[value]]))
d3.select('#week').html(weeksArray[value]);
drawMap(g, json.features, value);
}
});
});
function drawMap(svg, data, currentWeek) {
var tooltip = d3.select('body').append('div')
.attr('class', 'hidden tooltip');
var carte = svg.selectAll("path")
.data(data);
// code en cas de mise a jour de la carte / de changement de semaine
carte
.attr("class", "update region")
.style("fill", function(d) {
//on prend la valeur recupere plus haut
var value = getValue(d.properties.values, currentWeek);
return value ? color(value): "#ccc";
})
// code pour la creation de la carte quand les donnees sont chargees la 1e fois.
carte.enter()
.append("path")
.attr("class", "enter region")
.attr("d", path)
.style("fill", function(d) {
//on prend la valeur recupere plus haut
var value = getValue(d.properties.values, currentWeek);
return value ? color(value): "#ccc";
})
.on("mouseover", function(d) {
var elem = d3.select(this);
elem.style("fill", d3.rgb(elem.style("fill")).darker(0.5));
})
.on('mousemove', function(d) {
// on recupere la position de la souris
var mousePos = d3.mouse(this);
// on affiche le toolip
tooltip.classed('hidden', false)
// on positionne le tooltip en fonction de la position de la souris
.attr('style', 'left:' + (mousePos[0] + 15) +
'px; top:' + (mousePos[1] - 35) + 'px')
// on affiche le nom de l'etat et sa valeur (ou un message d'erreur)
.html(`${d.properties.nom} :
${getValue(d.properties.values, currentWeek) || '<i>Non renseigné</i>'}`);
})
.on('mouseout', function() {
// on cache le tooltip
tooltip.classed('hidden', true);
var elem = d3.select(this);
elem.style("fill", d3.rgb(elem.style("fill")).brighter(0.5));
});
}
function getValue(values, week) {
return values ? values[week] : undefined;
}
function getColor(colorFunction, array) {
return colorFunction.domain([
d3.min(array, function(d) { return +d; }),
d3.max(array, function(d) { return +d; })
]);
}
</script>
</body>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
state value
Alabama 1.1791
Arkansas 1.3705
Arizona 1.3847
California 1.7979
Colorado 1.0325
Connecticut 1.3209
Delaware 1.4345
Florida 1.6304
Georgia 1.3891
Iowa 1.5297
Idaho 1.4285
Illinois 1.5297
Indiana 1.4220
Kansas 1.0124
Kentucky 0.9403
Louisiana 0.9904
Maine 1.3877
Maryland 1.2457
Massachusetts 1.1458
Michigan 1.1058
Minnesota 1.2359
Missouri 1.0212
Mississippi 1.1306
Montana 0.8145
North Carolina 1.3554
North Dakota 1.0278
Nebraska 1.1619
New Hampshire 1.0204
New Jersey 1.2831
New Mexico 0.8925
Nevada 0.9640
New York 1.1327
Ohio 1.2075
Oklahoma 0.7693
Oregon 1.3154
Pennsylvania 1.0601
Rhode Island 1.4192
South Carolina 1.1247
South Dakota 1.0760
Tennessee 0.7648
Texas 0.8873
Utah 0.9638
Virginia 0.9660
Vermont 1.0762
Washington 1.1457
Wisconsin 1.1130
West Virginia 0.5777
Wyoming 0.5712
Display the source blob
Display the rendered blob
Raw
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