Multi-dimensional force-directed layout using 3d-force-graph.
This graph reusable component uses D3-force-3d, an updated version of the D3 force physics engine, extended from the 2D standard to work in 3D or 1D. Internally instead of a d3-quadtree, this layout uses d3-octree to optimize three-dimensional indexing, or d3-binarytree for one-dimension.
Rendered using ThreeJS/WebGL.
Select different modes and cycle through various topological data sets using the controls on top.
forked from vasturiano's block: Multi-dimensional D3 force simulation
xxxxxxxxxx<head> <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="//unpkg.com/3d-force-graph@1"></script> <script src="data-set-loader.js"></script> <link rel="stylesheet" href="style.css"></head><body> <div class="dimensions-selector"> Dimensions: <input type="radio" name="num-dimensions" onChange="toggleDimensions(1)"> 1D <input type="radio" name="num-dimensions" onChange="toggleDimensions(2)" checked> 2D <input type="radio" name="num-dimensions" onChange="toggleDimensions(3)"> 3D </div> <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/qwest/4.4.5/qwest.min.js
https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.4/papaparse.min.js
https://unpkg.com/3d-force-graph@1