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> |
