3-dimensional representation of a force-directed iterative layout, using 3d-force-graph. This wrapper component uses ThreeJS/WebGL for rendering and ngraph for the 3D physics engine.
Cycle through various topological data sets using the button on the top-right.
forked from vasturiano's block: 3D Force-Directed Graph (ThreeJS)
xxxxxxxxxx
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="//unpkg.com/three-trackballcontrols-web@0.0.2/dist/three-trackballcontrols.min.js"></script>
<script src="//unpkg.com/forcelayout3d-web@0.0.1/dist/forcelayout3d.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/qwest/4.4.5/qwest.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/papaparse/4.1.4/papaparse.min.js"></script>
<script src="data-set-loader.js"></script>
<script src="3d-force-graph.js"></script>
<link rel="stylesheet" href="3d-force-graph.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="graph-data">
<span id="graph-data-description"></span>
<button class="toggle-data-btn" onClick="toggleData()">Show me something else</button>
</div>
<div id="3d-graph"></div>
<script src="index.js"></script>
</body>
Updated missing url //cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.4/papaparse.min.js to //cdnjs.cloudflare.com/ajax/libs/papaparse/4.1.4/papaparse.min.js
https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js
https://unpkg.com/three-trackballcontrols-web@0.0.2/dist/three-trackballcontrols.min.js
https://unpkg.com/forcelayout3d-web@0.0.1/dist/forcelayout3d.min.js
https://cdnjs.cloudflare.com/ajax/libs/qwest/4.4.5/qwest.min.js
https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.4/papaparse.min.js