mirror of
https://git.alemi.dev/fedicharter.git
synced 2024-11-14 12:59:20 +01:00
69 lines
2.1 KiB
HTML
69 lines
2.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<title>akkoma bubble network</title>
|
||
|
|
<script
|
||
|
|
type="text/javascript"
|
||
|
|
src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"
|
||
|
|
></script>
|
||
|
|
<style type="text/css">
|
||
|
|
body {
|
||
|
|
background: #111111;
|
||
|
|
}
|
||
|
|
#netgraph {
|
||
|
|
width: 100%;
|
||
|
|
height: 98vh;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="netgraph">
|
||
|
|
<h3 style="text-align: center;" id="loader"><font color="#BF616A">crunching fedi network data, be patient...</font></h3>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
let nodes_array = []
|
||
|
|
let edges_array = []
|
||
|
|
|
||
|
|
let domain;
|
||
|
|
const urlParams = new URLSearchParams(window.location.search);
|
||
|
|
const domainParam = urlParams.get('domain');
|
||
|
|
if (domainParam) {
|
||
|
|
domain = domainParam;
|
||
|
|
console.log("scanning domain " + domain);
|
||
|
|
} else {
|
||
|
|
domain = window.prompt("starting instance for charting", "ihatebeinga.live");
|
||
|
|
}
|
||
|
|
|
||
|
|
fetch(`https://api.alemi.dev/akkoma/bubble/crawl?domain=${domain}`)
|
||
|
|
.then((res) => res.json().then((graph) => {
|
||
|
|
const palette = [
|
||
|
|
'#81A1C1',
|
||
|
|
'#5B6EA3',
|
||
|
|
'#7468B0',
|
||
|
|
'#84508C',
|
||
|
|
'#AF875F',
|
||
|
|
'#EBCB8B',
|
||
|
|
'#2E8757',
|
||
|
|
'#05979A',
|
||
|
|
]
|
||
|
|
for (const i in graph[0]) {
|
||
|
|
if (graph[0][i].title === domain) { graph[0][i].color = '#BF616A' }
|
||
|
|
else { graph[0][i].color = palette[Math.floor(Math.random() * palette.length)] }
|
||
|
|
}
|
||
|
|
|
||
|
|
const nodes = new vis.DataSet(graph[0]);
|
||
|
|
const edges = new vis.DataSet(graph[1]);
|
||
|
|
|
||
|
|
// create a network
|
||
|
|
const container = document.getElementById("netgraph");
|
||
|
|
const data = {
|
||
|
|
nodes: nodes,
|
||
|
|
edges: edges,
|
||
|
|
};
|
||
|
|
const options = { edges: { dashes: true, arrows: 'to' }, nodes: { color: "#bf616a", shape: "box", scaling: { min: 1, max: 500, label: { enabled: true, min: 14, max: 56 }}}};
|
||
|
|
const network = new vis.Network(container, data, options);
|
||
|
|
}))
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|