forked from eurostat/EurostatVisu
-
Notifications
You must be signed in to change notification settings - Fork 0
/
population_map.html
151 lines (129 loc) · 6.35 KB
/
population_map.html
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
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="img/favicon.png"/>
<title>European population map</title>
<style>
body {
font-family: "Myriad Pro", Myriad, MyriadPro-Regular,
'Myriad Pro Regular', MyriadPro, 'Myriad Pro', "Liberation Sans",
"Nimbus Sans L", "Helvetica Neue", vegur, Vegur, Helvetica, Arial,
sans-serif;
}
#bck { fill: LightSteelBlue; }
.bn { fill: none; stroke-linecap: round; stroke-linejoin: round }
.bn_0 { stroke: #777; stroke-width: 1px; }
.bn_1 { stroke: none; }
.bn_2 { stroke: none; }
.bn_3 { stroke: none; }
.bn_oth { stroke: #444; stroke-width: 1px; }
.cntrg { fill: lightgray; }
.cntrg:hover { fill: darkgray; }
.cntbn { fill: none; stroke: #777; stroke-width: 1px; stroke-linecap:round; stroke-linejoin:round }
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="js/json-stat.js"></script>
<script src="js/lib.js"></script>
<script src="js/eurostat-lib.js"></script>
</head>
<body>
<svg id="map"></svg>
<div id="tooltip"></div>
<script>
//http://d3-legend.susielu.com/
//https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.9.0/d3-legend.min.js
//get url parameters for projection, level and size
var width = EstLib.getParameterByName("s") || 800,
height = width,
nutsLvl = EstLib.getParameterByName("lvl") || "3",
time = EstLib.getParameterByName("time") || "2014",
proj = EstLib.getParameterByName("proj") || "laea",
//build svg
svg = d3.select("#map").attr("width", width-10).attr("height", height-130),
//background rectangle
bckRect = svg.append("rect").attr("id","bck").attr("x",0).attr("y",0).attr("width", width).attr("height", height),
//drawing group
g = svg.append("g").attr("transform","translate(-5,-65)"),
//path function
path = d3.geoPath().projection(null),
lg="en",
//info
tooltip = EstLib.tooltip()
;
//build color scale
var colors = [];
for(var t=0; t<=1; t+=1/7) colors.push(d3.interpolateYlOrRd(t));
$.when(
//get nuts geometries
$.ajax({url:"https://rawgit.com/jgaffuri/Nuts2json/gh-pages/json/topojson/"+proj+"/"+width+"px/NUTS_lvl"+nutsLvl+".json"}),
//get population data
$.ajax({url:EstLib.getEstatDataURL("demo_r_d3dens",{time:time})}, lg)
).then(function(nuts,data) {
data=data[0]; nuts=nuts[0];
data = JSONstat(data).Dataset(0);
//draw countries
g.append("g").selectAll("path").data(topojson.feature(nuts, nuts.objects.cntrg).features).enter()
.append("path").attr("d", path)
.attr("class", "cntrg")
.on("mouseover", function(rg) { tooltip.mouseover(rg.properties.cna); })
.on("mousemove", function() { tooltip.mousemove(); })
.on("mouseout", function() { tooltip.mouseout(); })
g.append("g").selectAll("path").data(topojson.feature(nuts, nuts.objects.cntbn).features).enter()
.append("path").attr("d", path)
.attr("class", "cntbn");
//get nuts regions
var nutsRG = topojson.feature(nuts, nuts.objects.nutsrg).features;
//link values and build values list for color legend
var values=[];
for(var i=0; i<nutsRG.length; i++){
var rg = nutsRG[i];
var value = data.Data({geo: rg.properties.id});
if(!value || !value.value) continue;
rg.properties.val = value.value;
values.push(+value.value);
}
var scale = d3.scaleQuantile().domain(values).range(colors);
scale.quantiles();
//draw regions
g.append("g").selectAll("path").data(nutsRG).enter()
.append("path").attr("d", path)
.attr("fill", function(rg){
if(!rg.properties.val) return "lightgray";
return scale(+rg.properties.val);
})
.on("mouseover", function(rg) {
var rg_ = d3.select(this);
rg_.attr("fill___", rg_.style("fill"));
rg_.style("fill","purple");
tooltip.mouseover("<b>"+rg.properties.na+"</b><br>"+rg.properties.val+" people/km²");
})
.on("mousemove", function() { tooltip.mousemove(); })
.on("mouseout", function() {
var rg_ = d3.select(this);
rg_.style("fill",rg_.attr("fill___"));
tooltip.mouseout();
});
//draw borders
//TODO do not draw the ones with stroke:none
var bn = topojson.feature(nuts, nuts.objects.nutsbn).features;
bn.sort(function(bn1,bn2){ return bn2.properties.lvl - bn1.properties.lvl; });
g.append("g").selectAll("path").data(bn).enter()
.append("path").attr("d", path)
.attr("class", function(bn){
bn = bn.properties;
//eu=EU_FLAG,efta=EFTA_FLAG,cc=CC_FLAG,lvl=STAT_LEVL_,oth=OTHR_CNTR_
var cl = ["bn","bn_"+bn.lvl];
if(bn.oth==="T") cl.push("bn_oth");
return cl.join(" ");
});
}
);
</script>
</body>