-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathregistry.html
78 lines (67 loc) · 2.6 KB
/
registry.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
<head>
<title>Hilbert IPv4 Address Space Visualization</title>
<script src='https://unpkg.com/ip.js'></script>
<script src='https://unpkg.com/hilbert-chart'></script>
<!-- <script src='../../dist/hilbert-chart.js'></script>-->
<style>
body {
margin: 0;
text-align: center;
}
#ipv4-chart {
display: inline-block;
}
</style>
</head>
<body>
<div id='ipv4-chart'></div>
<script>
var stringToColor = (string, saturation = 85, lightness = 55) => {
let hash = 0;
for (let i = 0; i < string.length; i++) {
hash = string.charCodeAt(i) + ((hash << 5) - hash);
hash = hash & hash;
}
return `hsl(${(hash % 360)}, ${saturation}%, ${lightness}%)`;
}
fetch('../data/registry.json')
.then(response => response.json())
.then(data => {
let blockData = data.map((d, i) => {
return {
start: d[0],
length: d[1],
name: d[2],
color: {
'arin': 'cyan',
'ripencc': 'orange',
'apnic': 'blue',
'lacnic': 'green',
'afrinic': 'red',
'iana': 'white'
}[d[2]]
};
});
console.log(blockData);
const chart = HilbertChart({ useCanvas: true })
.hilbertOrder(12)
.data(blockData)
.valFormatter(ipFormatter)
.rangeLabel(d => d.name == 'iana' ? "Reserved" : '')
.rangeColor('color')
.rangePadding(0.0)
.showValTooltip(false)
.rangeTooltipContent(d => `<b>${d.name.toUpperCase()}</b>: ${prefixFormatter(d)}`)
.onRangeClick(d => chart.focusOn(d.start, d.length, 3000))
(document.getElementById('ipv4-chart'));
function ipFormatter(d) {
return new Ip.Addr(d * 256).toString();
}
function prefixFormatter(d) {
const ipRange = new Ip.Range(d.start * 256, d.start * 256 + d.length * 256 - 1),
prefixes = ipRange.toPrefixes();
return (prefixes.length === 1 ? prefixes[0] : ipRange).toString();
}
});
</script>
</body>