the d3 blocks citation dataset, from the readme-vis project, visualized with 3d-force-graph from @vastur
an iteration on the original example at https://github.com/vasturiano/3d-force-graph/blob/master/example/click-to-focus/index.html
in repo form at 3d-force-graph-experiments
<head>
<style> body { margin: 0; } </style>
<script src='//unpkg.com/3d-force-graph'></script>
<!--<script src='3d-force-graph.js'></script>-->
</head>
<body>
<div id='3d-graph'></div>
<script src='vis.js'></script>
</body>const elem = document.getElementById('3d-graph')
const Graph = ForceGraph3D()(elem)
.jsonUrl('blocks-citation-graph.json')
.nodeLabel(node => `${node.description} from ${node.user}`)
.nodeAutoColorBy('user')
.onNodeHover(node => (elem.style.cursor = node ? 'pointer' : null))
.onNodeClick(node => {
// Aim at node from outside it
const distance = 40
const distRatio = 1 + distance / Math.hypot(node.x, node.y, node.z)
Graph.cameraPosition(
{ x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, // new position
node, // lookAt ({ x, y, z })
3000 // ms transition duration
)
})