-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathBAN.html
60 lines (53 loc) · 1.3 KB
/
BAN.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
<head>
<script src="//unpkg.com/d3"></script>
<!--<script src="//unpkg.com/circlepack-chart"></script>-->
<script src="circlepack-chart.js"></script>
<style>
body { margin: 0 }
body { margin: 0 }
.circlepack-viz circle {
cursor: pointer;
stroke: lightgrey;
stroke-opacity: .4;
opacity: .65;
transition-property: stroke-opacity, opacity;
transition-duration: .4s;
}
.circlepack-tooltip {
display: none;
position: absolute;
max-width: 550px;
white-space: nowrap;
padding: 5px;
border-radius: 3px;
font: 12px sans-serif;
color: #eee;
background: rgba(0,0,0,0.65);
pointer-events: none;
}
.circlepack-viz text.light {
fill: #070707;
}
.label-container {
opacity: 1;
font-weight: bold;
position: sticky;
z-index: 1;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
const color = d3.scaleOrdinal(d3.schemePaired);
fetch('Oops.json').then(res => res.json()).then(data => {
const t = CirclePack()
.data(data)
.label('name')
.size('size')
.color((d, parent) => color(parent ? parent.data.name : null))
.tooltipContent((d, node) => `Size: <i>${node.value}</i><br>Provider: ${d.desc}<br>Tornode: ${d.tor}`)
(document.getElementById('chart'));
});
</script>
</body>