vasturiano · January 31, 2024 10:29
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <head>
    <script src="//unpkg.com/3d-force-graph@1"></script>

    <link rel="stylesheet" href="style.css">
 </head>

 <body>
    <div id="3d-graph"></div>
    <button class="full-btn" onClick="useFull()">Full</button>

    <script src="index.js"></script>
 </body>
diff --git a/index.js b/index.js
 const Graph = ForceGraph3D()
    .nodeId('asn')
    .nodeVal('customerConeSize')
    .linkSource('src')
    .linkTarget('dst')
    .nodeAutoColorBy('country')
    .warmupTicks(200)
    .cooldownTicks(0) // Don't animate-in, jump to final state
    .nodeRelSize(1)
    .linkOpacity(0.07)
    .forceEngine('ngraph')
    (document.getElementById("3d-graph"));

 loadData('internet-topology-subset.json'); // Init

 //

 function useFull() {
    Graph.linkOpacity(0.03)
        .nodeResolution(3);

    loadData('internet-topology-full.json');
 }

 function loadData(url) {
    fetch(url).then(r => r.json()).then(data => {
        data.ases.forEach(as => { as.name = `AS${as.asn} - ${as.orgName} (${as.country})` }); // Add label

        Graph.graphData({
            nodes: data.ases,
            links: data.relationships
        });
    });
 }
diff --git a/internet-topology-full.json b/internet-topology-full.json
diff --git a/internet-topology-subset.json b/internet-topology-subset.json
diff --git a/preview.png b/preview.png
diff --git a/style.css b/style.css
diff --git a/thumbnail.png b/thumbnail.png
	<head>
	<script src="//unpkg.com/3d-force-graph@1"></script>

	<link rel="stylesheet" href="style.css">
	</head>

	<body>
	<div id="3d-graph"></div>
	<button class="full-btn" onClick="useFull()">Full</button>

	<script src="index.js"></script>
	</body>
	const Graph = ForceGraph3D()
	.nodeId('asn')
	.nodeVal('customerConeSize')
	.linkSource('src')
	.linkTarget('dst')
	.nodeAutoColorBy('country')
	.warmupTicks(200)
	.cooldownTicks(0) // Don't animate-in, jump to final state
	.nodeRelSize(1)
	.linkOpacity(0.07)
	.forceEngine('ngraph')
	(document.getElementById("3d-graph"));

	loadData('internet-topology-subset.json'); // Init

	//

	function useFull() {
	Graph.linkOpacity(0.03)
	.nodeResolution(3);

	loadData('internet-topology-full.json');
	}

	function loadData(url) {
	fetch(url).then(r => r.json()).then(data => {
	data.ases.forEach(as => { as.name = `AS${as.asn} - ${as.orgName} (${as.country})` }); // Add label

	Graph.graphData({
	nodes: data.ases,
	links: data.relationships
	});
	});
	}