1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142
| <!DOCTYPE html>
<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 (http://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(3000)
.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);
var newData = data.filter(filterCriteria);
function filterCriteria(e) {
return e.preusuel == 'Pierre' || e.annais == 1980;
}
d3.csv("dpt2016.txt", 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.nombre; }))])
.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.nombre; })])
.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.dpt + "<br>" + "<b>Nbre naissance : </b>" + e.nombre + "<br>";
if (e.nombre > 0) {
var tooltip = tooltip + "<b>Prénom : </b>" + e.preusuel + "<br>" + "<b>Année : </b>" + e.annais + "<br>";
}
d3.select("#d" + e.dpt)
.attr("class", function(d) {return "department q" + quantile(Math.sqrt(+e.nombre)) + "-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> |
Partager