forked from m0llyc00k/Thesis-2022
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex-bubble.html
112 lines (94 loc) · 3.24 KB
/
index-bubble.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: A simple packed Bubble Chart</title>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
/* No style rules here yet */
</style>
</head>
<body>
<script type="text/javascript">
dataset = {
"children": [{ "Name": "Codeine Dihydrocodeine", "Count": .10 },
{ "Name": "Pethidine", "Count": .125 },
{ "Name": "Tapentadol", "Count": .34 },
{ "Name": "Hydrocodone", "Count": .67 },
{ "Name": "Oxycodone", "Count": 1.5 },
{ "Name": "Methadone", "Count": 7.5 },
{ "Name": "Hydromorphone", "Count": 5 },
{ "Name": "Buprenorphine ", "Count": 80 },
{ "Name": "Morphine ", "Count": 1 },
{ "Name": "Fentanyl", "Count": 150 }
]
};
var dataIndex = 1;
var diameter = 1500;
var color = d3.scaleOrdinal(d3.schemeCategory20);
var xBuffer = 50;
var yBuffer = 750;
var lineLength = 1000;
var bubble = d3.pack(dataset)
.size([diameter, diameter])
.padding(50);
var svg = d3.select("body")
.append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");
var nodes = d3.hierarchy(dataset)
.sum(function(d) { return d.Count; });
var node = svg.selectAll(".node")
.data(bubble(nodes).descendants())
.enter()
.filter(function(d) {
return !d.children
})
.append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.y + "," + d.x + ")";
})
node.append("title")
.text(function(d) {
return d.Name;
});
node.append("circle")
.attr("r", function(d) {
return d.r;
})
.style("fill", function(d, i) {
return color(i);
});
node.append("text")
.attr("dy", ".2em")
.style("text-anchor", "middle")
.text(function(d) {
return d.data.Name.substring(0, d.r / 3);
})
.attr("font-family", "sans-serif")
.attr("font-size", function(d) {
return d.r / 8;
})
.attr("fill", "white");
svg.append("g").selectAll("circle")
.attr("cx", function(d, i) {
var spacing = lineLength / (eval("dataArray" + dataIndex).length);
return xBuffer + (i * spacing)
})
.attr("cy", yBuffer)
.attr("r", function(d, i) { return d });
//create axis line
svg.append("line")
.attr("x1", xBuffer)
.attr("y1", yBuffer)
.attr("x1", xBuffer + lineLength)
.attr("y2", yBuffer)
.style("stroke", "gray")
.style("stroke-width", 2);
d3.select(self.frameElement)
.style("height", diameter + "px");
</script>
</body>
</html>