Built with blockbuilder.org
forked from aurelient's block:
forked from aurelient's block:
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>
<script>
var width = 700,
height = 580;
// Ajout de la palette de couleurs
var color = d3.scaleLinear()
.interpolate(d3.interpolateHcl)
.range([d3.rgb("#abc1f1"), d3.rgb('#245cd5')]);
var svg = d3.select( "body" )
.append( "svg" )
.attr( "width", width )
.attr( "height", height );
var projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2800);
var path = d3.geoPath() // d3.geo.path avec d3 version 3
.projection(projection);
var tooltip = d3.select('body').append('div')
.attr('class', 'hidden tooltip');
d3.csv("GrippeFrance2014.csv", function(data) {
color.domain([0, 250]);
d3.json("regions.json", function(json) {
//On fusionne les donnees avec le GeoJSON des regions
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < json.features.length; j++){
if(data[i].region == json.features[j].properties.nom){
// Ajout des donnees au JSON
Object.keys(data[i]).forEach(function(key) {
// Pas besoin d'avoir deux fois la même donnée
if(key !== "region"){
json.features[j].properties[key] = data[i][key]
}
});
}
}
}
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("fill", function(d) {
var value = 0;
Object.keys(d.properties).forEach(function(key) {
// On somme sur le mois de Novembre
if(key.indexOf("/11/") !== -1){
value += +d.properties[key];
}
});
//if(value !==0){
// return(color(value))
//}
return(value !==0 ? color(value):"");
})
.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)
})
.on('mouseleave', function() {
tooltip.classed('hidden', true)
});
});
});
</script>
</body>
https://d3js.org/d3.v4.min.js