3D force-simulated version of Internet Interactive Map, showing AS relationships for approximately 3k ASes in the Internet core. ASes have a volume proportional to the size of their customer cone and are color-coded by continent. Rendered using 3d-force-graph.
-
-
Save willzjc/d9c8e17ae360f6b2629f96a16f97aa73 to your computer and use it in GitHub Desktop.
3D Internet Topology
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <script src="//unpkg.com/3d-force-graph@1"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/qwest/4.4.5/qwest.min.js"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <button class="full-btn" onClick="useFull()">Full</button> | |
| <div id="3d-graph"></div> | |
| <script src="index.js"></script> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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) { | |
| qwest.get(url).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 | |
| }); | |
| }); | |
| } |
This file has been truncated, but you can view the full file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
View raw
(Sorry about that, but we can’t show files that are this big right now.)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment