-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathcoicop_sunburst_5.html
126 lines (102 loc) · 4.33 KB
/
coicop_sunburst_5.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
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="shortcut icon" type="image/png" href="https://raw.githubusercontent.com/eurostat/eurostat.js/master/img/favicon.png"/>
<title>COICOP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/eurostat/[email protected]/d3-sunburst.js"></script>
<script src="https://cdn.jsdelivr.net/gh/eurostat/[email protected]/js/colorbrewer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/json-stat.js"></script>
<script src="https://cdn.jsdelivr.net/gh/eurostat/[email protected]/js/lib.js"></script>
<script src="https://cdn.jsdelivr.net/gh/eurostat/[email protected]/js/eurostat-lib.js"></script>
<script src="https://cdn.jsdelivr.net/gh/eurostat/[email protected]/js/pr-eurostat-lib.js"></script>
<script src="https://cdn.jsdelivr.net/gh/eurostat/[email protected]/js/pr-coicop-dict.js"></script>
<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;
font-size: 80%;
}
table,th,td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
#timeslider label {
position: absolute;
width: 20px;
margin-top: 20px;
margin-left: -10px;
text-align: center;
}
.ui-widget {
font-size: 90% !important;
}
</style>
</head>
<body>
<div id="sunburst" style="float: left; margin-right: 20px;"></div>
<script>
(function($, EstLib) {
$(function() {
d3.csv("https://raw.githubusercontent.com/eurostat/eurostat.js/master/assets/data/coicop.csv", function(error, data) {
if (error) throw error;
//remove CPs
for(var i=0; i<data.length; i++) data[i].code = data[i].code.replace("CP","");
//index data
data = EstLib.index(data,"code");
var codes = Object.keys(data);
//link to father
for(i=0; i<codes.length; i++){
var childCode = codes[i];
if( ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S"].indexOf(childCode.substring(childCode.length-1, childCode.length)) != -1 ) continue;
var father = data[childCode.substring(0, childCode.length-1)];
if(father) data[childCode].father = father;
//else console.log(childCode);
}
//link to children
for(i=0; i<codes.length; i++) {
var child = data[codes[i]];
if(!child.father) continue;
if(!child.father.children) child.father.children = [];
child.father.children.push(child);
}
data["00"].children = [data["01"],data["02"],data["03"],data["04"],data["05"],data["06"],data["07"],data["08"],data["09"],data["10"],data["11"],data["12"]];
data = data["00"];
//colors
var color = colorbrewer.Set3[12];
var coicopToColor = function(coicop){
var fam = coicop.substring(0,2);
if(fam==="00") return;
return color[+fam-1];
};
var sb = d3.sunburst()
.fontSize( function(depth){ return [1,20,13,12,11][depth]; } )
.fontFill( function(depth){ return ["#fff","#444","#444","#666","#666"][depth]; } )
.labelRotationParameter( function(depth){ return [1,1,0.5,1,1][depth]; } )
.labelRemovalParameter( function(depth){ return [1,0.1,0.2,0.2,0.2][depth]; } )
.setmouseover( function(code){
d3.select("#arc"+code).attr("fill","red");
//TODO show text
})
.setmouseout( function(code){
d3.select("#arc"+code).attr("fill",sb.codeToColor()(code));
//TODO hide text
})
.codesHierarchy(data)
.radius(500)
.codeToColor(coicopToColor)
;
//TODO build description text element
//var description = d3.select("#arc"+code);
//TODO show text for lower levels ?
});
});
}(jQuery, window.EstLib = window.EstLib || {} ));
</script>
</body>
</html>