Built with blockbuilder.org
xxxxxxxxxx
<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; }
div.tooltip {
color: #222;
background-color: #fff;
padding: .5em;
text-shadow: #f5f5f5 0 1px 0;
border-radius: 2px;
opacity: 0.9;
position: absolute;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div>
<input id="slider" type="range" value="1" min="1" max="52" step="1" />
<span id="week">"05/01/14"</span>
</div>
<script>
var svg = d3.select( "body" )
.append( "svg" )
.attr( "width", 700 )
.attr( "height", 580 );
var projection = d3.geoConicConformal()
.center([2.454071, 46.279229])
.scale(2505)
.translate([700/2, 580*(0.9/2)])
var path = d3.geoPath()
.projection(projection);
var tooltip = d3.select('body').append('div')
.attr('class', 'hidden tooltip');
var slider = document.getElementById("slider");
var output = document.getElementById("week");
output.innerHTML = "05/01/14";
slider.oninput = function() {
output.innerHTML = this.value;
}
color = d3.scaleQuantize()
.range(["rgb(188,228,174)","rgb(160,210,115)",
"rgb(70,199,70)","rgb(35,117,35)"])
d3.csv("GrippeFrance2014.csv", function(data) {
columns = Object.keys( data[0] )
var nb_col = columns.length
var weeksArray = Object.keys(data[0]).slice(1);
console.log(weeksArray)
d3.json("regions.json", function(json) {
for (var i = 0; i < data.length; i++) {
var region = data[i].region;
var sum_influenza = 0
my_values = d3.values(data[i])
for (var k = 1; k< nb_col-2;k++){
sum_influenza+=+my_values[k]
}
for (var j = 0; j < json.features.length; j++){
var json_region = json.features[j].properties.nom;
if (region == json_region){
json.features[i].properties.sum_influenza=sum_influenza;
casted=Object.values(data[i]).slice(1)
for (var m = 0; m< casted.length;m++){
casted[m]= +casted[m]
}
json.features[j].properties.influ_by_week=casted;
break;
}
}
}
function drawMap(currentWeek) {
color.domain([
d3.min(data, function(d) { return d[weeksArray[currentWeek]]; }),
d3.max(data, function(d) { return d[weeksArray[currentWeek]]; })
]);
carte = svg.selectAll("path")
.data(json.features);
carte
.attr("class", "update")
.style("fill", function(d){
var influ_by_week = d.properties.influ_by_week
if (influ_by_week) {
return color(influ_by_week[currentWeek]);
}else{
return "#ccc";
}
})
.on('mousemove', function(d) {
var mouse = d3.mouse(svg.node()).map(function(d) {
return parseInt(d);
});
if (d.properties.influ_by_week){
tooltip.classed('hidden', false)
.attr('style', 'left:' + (mouse[0] + 15) +
'px; top:' + (mouse[1] - 35) + 'px')
.html(d.properties.nom+ " - "+
d.properties.influ_by_week[currentWeek]);
} else {
tooltip.classed('hidden', false)
.attr('style', 'left:' + (mouse[0] + 15) +
'px; top:' + (mouse[1] - 35) + 'px')
.html(d.properties.nom+ " - Unknown value.");
}
})
.on('mouseout', function() {
tooltip.classed('hidden', true);
});
carte.enter()
.append("path")
.attr("class", "enter")
.attr("d", path)
.style("fill", function(d){
var influ_by_week = d.properties.influ_by_week
if (influ_by_week) {
return color(influ_by_week[0]);
}else{
return "#ccc";
}
})
.on('mousemove', function(d) {
//console.log(d.properties.influ_by_week)
var mouse = d3.mouse(svg.node()).map(function(d) {
return parseInt(d);
});
if (d.properties.influ_by_week){
tooltip.classed('hidden', false)
.attr('style', 'left:' + (mouse[0] + 15) +
'px; top:' + (mouse[1] - 35) + 'px')
.html(d.properties.nom+ " - "+ d.properties.influ_by_week[0]);
} else {
tooltip.classed('hidden', false)
.attr('style', 'left:' + (mouse[0] + 15) +
'px; top:' + (mouse[1] - 35) + 'px')
.html(d.properties.nom+ " - Unknown value.");
}
})
.on('mouseout', function() {
tooltip.classed('hidden', true);
});
}
drawMap(1)
function updateViz(value){
if (value<51){d3.select('#week').html(weeksArray[value]);
} else {d3.select('#week').html("Total in 2014.")}
drawMap(value);
}
d3.select("#slider").on("input", function() {
updateViz(+this.value);
});
})
});
</script>
</body>
https://d3js.org/d3.v4.min.js