Quotas départementaux dans les limites desquelles des dérogations aux interdictions de destruction peuvent être accordées par les préfets concernant les grands cormorans (Phalacrocorax carbo sinensis) pour la période 2016-2019.
Sources des données :
Tutoriel suivi: datavis.fr.
xxxxxxxxxx
<meta charset="utf-8">
<style>
.department {
cursor: pointer;
stroke: black;
stroke-width: .5px;
}
.department:hover {
stroke: #555;
stroke-width: 2px;
}
div.tooltip {
position: absolute;
opacity:0.8;
z-index:1000;
text-align:left;
border-radius:4px;
padding:8px;
color:#fff;
background-color:#000;
font: 12px sans-serif;
max-width: 300px;
}
#svg {
display: block;
margin: auto;
}
/* This product includes color specifications and designs developed by Cynthia Brewer (https://colorbrewer.org/). */
.YlOrRd .q0-9{fill:rgb(255,255,204)}
.YlOrRd .q1-9{fill:rgb(255,237,160)}
.YlOrRd .q2-9{fill:rgb(254,217,118)}
.YlOrRd .q3-9{fill:rgb(254,178,76)}
.YlOrRd .q4-9{fill:rgb(253,141,60)}
.YlOrRd .q5-9{fill:rgb(252,78,42)}
.YlOrRd .q6-9{fill:rgb(227,26,28)}
.YlOrRd .q7-9{fill:rgb(189,0,38)}
.YlOrRd .q8-9{fill:rgb(128,0,38)}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script type="text/javascript">
var width = 700, height = 550;
// Create a path object to manipulate geo data
var path = d3.geoPath();
// Define projection property
var projection = d3.geoConicConformal() // Lambert-93
.center([2.454071, 46.279229]) // Center on France
.scale(2600)
.translate([width / 2 - 50, height / 2]);
path.projection(projection); // Assign projection to path object
// Create the DIV that will contain our map
var svg = d3.select('body').append("svg")
.attr("id", "svg")
.attr("width", width)
.attr("height", height)
.attr("class", "YlOrRd");
// Append the group that will contain our paths
var deps = svg.append("g");
// Load GeoJSON data and run a function for each entry
d3.json('france.json', function(req, fr) {
var features = deps
.selectAll("path")
.data(topojson.feature(fr, fr.objects.departements).features)
.enter()
.append("path")
.attr('id', function(d) {return "d" + d.properties.code;})
.attr("d", path);
d3.csv("cormorans.csv", function(csv) {
// Quantile scales map an input domain to a discrete range, 0...max(population) to 1...9
var quantile = d3.scaleQuantile()
.domain([0, Math.sqrt(d3.max(csv, function(e) { return +e.total; }))])
.range(d3.range(9));
var legend = svg.append('g')
.attr('transform', 'translate(525, 150)')
.attr('id', 'legend');
legend.selectAll('.colorbar')
.data(d3.range(9))
.enter().append('svg:rect')
.attr('y', function(d) { return d * 20 + 'px'; })
.attr('height', '20px')
.attr('width', '20px')
.attr('x', '0px')
.attr("class", function(d) { return "q" + d + "-9"; });
var legendScale = d3.scaleSqrt()
.domain([0, d3.max(csv, function(e) { return +e.total; })])
.range([0, 9 * 20]);
var legendAxis = svg.append("g")
.attr('transform', 'translate(550, 150)')
.call(d3.axisRight(legendScale).ticks(6));
csv.forEach(function(e,i) {
var tooltip = "<b>Département : </b>" + e.departement + "<br>" + "<b>Total annuel : </b>" + e.total + "<br>";
if (e.total > 0) {
var tooltip = tooltip + "<b>Piscicultures : </b>" + e.piscicultures + "<br>" + "<b>Eaux libres : </b>" + e.eaux_libres + "<br>";
}
d3.select("#d" + e.numero)
.attr("class", function(d) { return "department q" + quantile(Math.sqrt(+e.total)) + "-9"; })
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html(tooltip)
.style("left", (d3.event.pageX + 30) + "px")
.style("top", (d3.event.pageY - 30) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
div.html("")
.style("left", "0px")
.style("top", "0px");
});
});
});
});
// Append a DIV for the tooltip
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
</script>
https://d3js.org/d3.v4.min.js
https://d3js.org/topojson.v2.min.js