Built with blockbuilder.org
forked from BrunoDumas's block: TP4-grippe-france
forked from BrunoDumas's block: TP4.2-grippe-france
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<div>
<input id="slider" type="range" value="1" min="1" max="100" step="1" />
<span id="week">Week 28/09/03</span>
</div>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.region:hover{
opacity: 0.5;
}
.hidden {
display: none;
}
div.tooltip {
color: #222;
background-color: #fff;
padding: .5em;
text-shadow: #f5f5f5 0 1px 0;
border-radius: 10px;
border: darkgrey solid 1px;
opacity: 0.9;
position: absolute;
}
</style>
</head>
<body>
<script>
var weekNames;
var json;
var width = 700,
height = 580;
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" );
var tooltip = d3.select('body').append('div')
.attr('class', 'hidden tooltip');
var projection = d3.geo.conicConformal()
.center([2.454071, 46.279229])
.scale(2700);
// On definit une echelle de couleur
var color = d3.scale.quantile()
.range(
['rgb(255,247,236)',
'rgb(254,232,200)',
'rgb(253,212,158)',
'rgb(253,187,132)',
'rgb(252,141,89)',
'rgb(239,101,72)',
'rgb(215,48,31)',
'rgb(179,0,0)',
'rgb(127,0,0)',
'rgb(76,0,0)',
'rgb(20,0,0)']
);
var path = d3.geo.path()
.projection(projection);
var processData = function(error,francejson,grippedata) {
weekNames = Object.keys(grippedata[0]);
var numberofweeks = Object.keys(grippedata[0]).length - 1;
// MinMax de la mort
var minMax = d3.extent(grippedata.map(
function(row){
return Object.values(row).slice(1).map(function(val){
return parseInt(val)
})
}
)
.reduce(function(a, b){
return a.concat(b);
}));
// Équivaut à :
/*
var min = Number.MAX_VALUE;
var max = 0;grippedata.forEach(function(d){
Object.keys(d).forEach(function(k){
if(k != "regions"){
var parsed = parseInt(d[k]);
if(parsed < min){
min = parsed;
}
if(parsed > max){
max = parsed;
}
}
});
});
*/
color.domain(minMax);
d3.select('#slider').attr("max", numberofweeks);
for (var i = 0; i < grippedata.length; i++) {
var dataValue = Object.values(grippedata[i]);
var dataRegion = grippedata[i].regions;
//Recherche de l'etat dans le GeoJSON
for (var j = 0; j < francejson.features.length; j++) {
var jsonRegion = francejson.features[j].properties.nom;
if (dataRegion == jsonRegion) {
//On injecte la valeur de l'Etat dans le json
francejson.features[j].properties.value = dataValue;
//Pas besoin de chercher plus loin
break;
}
}
}
json = francejson;
display(francejson, 1);
};
queue() // permet de charger les fichiers de manière asynchrone
.defer(d3.json, "regions.geojson")
//.defer(d3.csv, "GrippeFrance2014.csv")
.defer(d3.csv, "GrippeFrance2003-15.csv")
.await(processData);
d3.select("#slider").on("input", function() {
updateViz(+this.value);
});
var updateViz = function(value){
d3.select('#week').html("Week " + weekNames[value]);
refresh(value);
};
// Chargement des donnees
var display = function(data, selectedWeek) {
var carte = g.selectAll("path")
carte.style("fill", function(d) {
//on prend la valeur recupere plus haut
var values = d.properties.value;
if (values && values[selectedWeek]) {
return color(values[selectedWeek]);
} else {
// si pas de valeur alors en gris
return "#e2e2e2";
}
})
.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.value && d.properties.value[selectedWeek])?d.properties.value[selectedWeek]:"Aucune donnée"));
});
carte
.data(data.features)
.enter()
.append("path")
.attr("d", path)
.classed('region', true)
.style("stroke", "black")
.style("stroke-width", 1)
.style("fill", function(d) {
//on prend la valeur recupere plus haut
var values = d.properties.value;
if (values && values[selectedWeek]) {
return color(values[selectedWeek]);
} else {
// si pas de valeur alors en gris
return "#e2e2e2";
}
})
.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.value && d.properties.value[selectedWeek])?d.properties.value[selectedWeek]:"Aucune donnée"));
})
.on('mouseout', function() {
tooltip.classed('hidden', true);
});
var legend = svg.selectAll(".legend")
.data(color.range())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + (20 + i * 20) + ")"; });
// draw legend colored rectangles
legend.append("rect")
.attr("x", 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d){return d});
// draw legend text
legend.append("text")
.attr("x", 90)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) {return "< " + parseInt(color.invertExtent(d)[1]);})
};
var refresh = function(selectedWeek) {
display(json, selectedWeek)
};
</script>
</body>
Modified http://d3js.org/queue.v1.min.js to a secure url
https://d3js.org/d3.v3.min.js
https://d3js.org/queue.v1.min.js