Skip to content

Instantly share code, notes, and snippets.

@anouar009

anouar009/.block

Last active February 2, 2018 15:05
Show Gist options
  • Save anouar009/c14a98f31de30c55894c41e539a67ac0 to your computer and use it in GitHub Desktop.
Save anouar009/c14a98f31de30c55894c41e539a67ac0 to your computer and use it in GitHub Desktop.
Download ZIP
geo-map
Raw
.block
license: mit
Raw
README.md
Display the source blob
Display the rendered blob
Raw
france.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
GrippeFrance2014.csv
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
Raw
index.html
<!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;
}
.path:hover {
fill: #666;
}
.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>
<script>
var width = 700,
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 json;
var projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2800)
.translate([width / 2, height / 2])
var path = d3.geoPath() // d3.geo.path avec d3 version 3
.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)"
]);
function drawMap(month_visualisation, num_month, week_visualisation, num_week) {
//console.log(month_visualisation, num_month, week_visualisation, num_week);
d3.csv("GrippeFrance2014.csv", function(data) {
//Set input domain for color scale
color.domain([0, 2000]);
var column = Object.keys(data[0]);
json = d3.json("france.json", function(json) {
var maxValue = 0;
for (var i = 0; i < data.length; i++) {
var data_array = Object.values(data[i]);
//Nom du département
var dataState = data[i].region;
//Valeur associee au département
var dataValue = parseFloat(data[i].somme2014);
if (month_visualisation) {
if (num_month < 13 && num_month > 0) {
//color.domain([0, 200]);
for (var k = 0, somme = 0; k < column.length; k++) {
var month_value = column[k].substring(3, 5);
if (month_value == num_month) {
somme += parseInt(data[i][column[k]]);
}
dataValue = somme;
}
}
}
if (week_visualisation) {
if (num_week < 53 && num_week > 0) {
//color.domain([0, 200]);
dataValue = data_array[num_week]
}
}
console.log(parseInt(dataValue));
if (parseInt(dataValue) > parseInt(maxValue)) maxValue = parseInt(dataValue);
for (var j = 0; j < json.features.length; j++) {
var jsonState = json.features[j].properties.nom;
if (dataState == jsonState) {
json.features[j].properties.value = dataValue;
break;
}
}
}
if (maxValue > 100) color.domain([0, maxValue * 0.6]);
if (maxValue <= 100) color.domain([0, maxValue]);
if (maxValue <= 50) color.domain([0, maxValue * 1.2]);
carte = svg.selectAll("path")
.data(json.features)
carte.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";
};
}).on('mousemove', function(d) {
var mouse = d3.mouse(svg.node()).map(function(d) {
return parseInt(d);
});
if (d.properties.value) {
tooltip.classed('hidden', false)
.attr('style', 'left:' + (mouse[0] + 15) +
'px; top:' + (mouse[1] - 35) + 'px')
.html(d.properties.nom + " : " + d.properties.value);
} else {
tooltip.classed('hidden', false)
.attr('style', 'left:' + (mouse[0] + 15) +
'px; top:' + (mouse[1] - 35) + 'px')
.html(d.properties.nom + " : " + "Pas de donnée disponible");
}
})
.on('mouseout', function() {
tooltip.classed('hidden', true);
});;
carte.attr("class", "update").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";
};
}).on('mousemove', function(d) {
var mouse = d3.mouse(svg.node()).map(function(d) {
return parseInt(d);
});
if (d.properties.value) {
tooltip.classed('hidden', false)
.attr('style', 'left:' + (mouse[0] + 15) +
'px; top:' + (mouse[1] - 35) + 'px')
.html(d.properties.nom + " : " + d.properties.value);
} else {
tooltip.classed('hidden', false)
.attr('style', 'left:' + (mouse[0] + 15) +
'px; top:' + (mouse[1] - 35) + 'px')
.html(d.properties.nom + " : " + "Pas de donnée disponible");
}
})
.on('mouseout', function() {
tooltip.classed('hidden', true);
});;
console.log("Macx value" + maxValue);
});
});
}
drawMap();
function updateWeekSliderValue(val) {
document.getElementById('week').innerHTML = val;
document.getElementById("weekCheckbox").checked = true;
clickWeekCheckboxEvent(document.getElementById("weekCheckbox"));
updateViz(val, "w");
}
function updateMonthSliderValue(val) {
document.getElementById('month').innerHTML = val;
document.getElementById("monthCheckbox").checked = true;
clickMonthCheckboxEvent(document.getElementById("monthCheckbox"));
updateViz(val, "m");
}
function updateViz(value, periode) {
if (periode == "w") {
drawMap(false, null, true, parseInt(value));
}
if (periode == "m") {
drawMap(true, parseInt(value), false, null);
}
}
function clickMonthCheckboxEvent(checkbox) {
if (checkbox.checked) {
drawMap(true, parseInt(document.getElementById("monthSlider").value), false, null);
document.getElementById("yearCheckbox").checked = false;
document.getElementById("weekCheckbox").checked = false;
} else {
document.getElementById("yearCheckbox").checked = true;
drawMap(false, null, false, null);
}
}
function clickWeekCheckboxEvent(checkbox) {
if (checkbox.checked) {
drawMap(false, null, true, parseInt(document.getElementById("weekSlider").value));
document.getElementById("yearCheckbox").checked = false;
document.getElementById("monthCheckbox").checked = false;
} else {
document.getElementById("yearCheckbox").checked = true;
drawMap(false, null, false, null);
}
}
function clickYearCheckboxEvent(checkbox) {
if (checkbox.checked) {
drawMap(false, null, false, null);
document.getElementById("monthCheckbox").checked = false;
document.getElementById("weekCheckbox").checked = false;
} else {
document.getElementById("yearCheckbox").checked = true;
drawMap(false, null, false, null);
}
}
</script>
<div>
Visualisation par semaine <input id="weekCheckbox" type="checkbox" onclick="clickWeekCheckboxEvent(this);" />
<input id="weekSlider" type="range" value="1" min="1" max="52" step="1" oninput="updateWeekSliderValue(this.value);" />
<span id="week">1</span>
<br/><br/> Visualisation par mois <input id="monthCheckbox" type="checkbox" onclick="clickMonthCheckboxEvent(this);" />
<input id="monthSlider" type="range" value="1" min="1" max="12" step="1" oninput="updateMonthSliderValue(this.value);" />
<span id="month">1</span>
<br/><br/> Visualisation de l'année 2014 <input id="yearCheckbox" type="checkbox" onclick="clickYearCheckboxEvent(this);" checked/>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment