-
Notifications
You must be signed in to change notification settings - Fork 2
/
bubbles.html
63 lines (54 loc) · 1.76 KB
/
bubbles.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
<!doctype html>
<meta charset="utf-8">
<!-- load D3js -->
<script src="//d3plus.org/js/d3.js"></script>
<!-- load D3plus after D3js -->
<script src="//d3plus.org/js/d3plus.js"></script>
<!-- create container element for visualization -->
<div id="viz"></div>
<style>
@font-face {
font-family: "Righteous";
src: url(font/Righteous-Regular.ttf) format("truetype");
}
</style>
<script>
// sample data array
var font={"family":"Righteous","size":15,"align":"center","secondary":{"family":"Righteous"}};
var dep=1;
var ids=["type","country","partner"];
var country="json/77/impex_n_uk.json";
var visualization = d3plus.viz()
.container("#viz") // container DIV to hold the visualization
.type("bubbles") // visualization type
.size({"value":"inf","scale":d3.scale.linear()}) // key name to size bubbles
.font(font)
.legend(false)
.ui({"font":{"size":12},"value":[
{"method" : function(v){
country=v;
load(v);
},
"value" :[{"Hybrid":"json/77/impex_n_uk.json"},{"Import":"json/77i/impex_i_uk.json"},{"Export":"json/77e/impex_e_uk.json"},{"Normalized Hybrid":"json/77/nimpex_n_uk.json"},{"Normalized Import":"json/77i/nimpex_i_uk.json"},{"Normalized Export":"json/77e/nimpex_e_uk.json"}],
"label" : " ",
"type" : "drop"
},
{"method" :"size",
"value" :[{"Influence":"inf"},{"Importance":"imp"}],
"label" : " "
}
]})
function load(file){
d3.json(file, function(error, data) {
visualization
.data(data) // data to use with the visualization
.id(ids) // nesting keys
.depth(1)
.color(function(d){
return d[ids[d.d3plus.depth]];
})
.draw()
})
}
load(country);
</script>