fedicharter/dist/index.html
2023-10-02 15:39:47 +02:00

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", "social.alemi.dev");
}
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.nodes) {
if (graph.nodes[i].label === domain) graph.nodes[i].color = '#BF616A';
else graph.nodes[i].color = palette[Math.floor(Math.random() * palette.length)];;
}
const nodes = new vis.DataSet(graph.nodes);
const edges = new vis.DataSet(graph.vertices);
// create a network
const container = document.getElementById("netgraph");
const data = {
nodes: nodes,
edges: edges,
};
const options = { edges: { dashes: true, arrows: 'to' }, nodes: { mass: 3, color: "#bf616a", shape: "box" }};
const network = new vis.Network(container, data, options);
document.getElementById("loader").remove();
}))
</script>
</body>
</html>