Discussion on: Drawing a Mind Map with Three.js and React

[Médéric Burlet]

why not use a force graph? That would be the best way to do it no?

vasturiano / three-forcegraph

Force-directed graph as a ThreeJS 3d object

ThreeJS Force-Directed Graph

A ThreeJS WebGL class to represent a graph data structure in a 3-dimensional space using a force-directed iterative layout Uses either d3-force-3d or ngraph for the underlying physics engine.

Quick start

import ThreeForceGraph from 'three-forcegraph'

or

var ThreeForceGraph = require('three-forcegraph')

or even

<script src="//unpkg.com/three-forcegraph"></script>

then

var myGraph = new ThreeForceGraph()
    .graphData(<myData>);

var myScene = new THREE.Scene();
myScene.add(myGraph);

...

// on animation frame
myGraph.tickFrame();

API reference

Method	Description	Default
graphData([data])	Getter/setter for graph data structure (see below for syntax details). Can also be used to apply incremental updates.	{ nodes: [], links: [] }
jsonUrl([url])	URL of JSON file to load graph data directly from, as an alternative to specifying graphData directly.
numDimensions([int])	Getter/setter for number of dimensions to run the force simulation on (1, 2 or 3).	3
dagMode([str])	Apply layout constraints based on

…

View on GitHub

For 2D you could use this:

vasturiano / force-graph

Force-directed graph rendered on HTML5 canvas

force-graph

Force-directed graph rendered on HTML5 canvas.

A web component to represent a graph data structure in a 2-dimensional canvas using a force-directed iterative layout Uses HTML5 canvas for rendering and d3-force for the underlying physics engine Supports canvas zooming/panning, node dragging and node/link hover/click interactions.

Check out the examples:

• Basic (source)
• Load JSON (source)
• Medium size graph (~4k elements) (source)
• Large size graph (~75k elements) (source)
• Text as nodes (source)
• Images as nodes (source)
• Directional links (using arrows) (source)
• Directional links (using moving particles) (source)
• Curved lines and self links (source)
• Text in links (source)
• Dash odd links (source)
• Highlight nodes/links (source)
• Multiple Node Selection (source)
• Auto-colored nodes/links (source)
• Custom node shapes (source)
• Zoom/pan viewport (source)
• Click…

View on GitHub

[Patrick Hund]

Thanks for the reply! I'll take a look at it. I don't think it can render React components as nodes of the graph, or can it? Ultimately, what I'm planning is that each node of the mind map/graph will be a social media post (text, picture, video, comment, etc.). Do you think I could pull that off with this library?

[Médéric Burlet]

Hey I don't think each node can be a react component as that will be pretty heavy. There is a react wrapper for the library mentioned. We use it to visualize a whole computer folder / file system.
If you update the datalist the graph will update dynamically with animations if wanted.

I think a mind map based off post would have much less posts than a whole filesysten.

For the react one here is the one we used.

vasturiano / react-force-graph

React component for 2D, 3D, VR and AR force directed graphs

react-force-graph

React bindings for the force-graph suite of components: force-graph (2D HTML Canvas), 3d-force-graph (ThreeJS/WebGL), 3d-force-graph-vr (A-Frame) and 3d-force-graph-ar (AR.js).

This module exports 4 React components with identical interfaces: ForceGraph2D, ForceGraph3D, ForceGraphVR and ForceGraphAR. Each can be used to represent a graph data structure in a 2 or 3-dimensional space using a force-directed iterative layout.

For dependency convenience, all of the components are also available as stand-alone packages: react-force-graph-2d, react-force-graph-3d, react-force-graph-vr and react-force-graph-ar.

Uses canvas/WebGL for rendering and d3-force-3d for the underlying physics engine Supports zooming/panning, node dragging and node/link hover/click interactions.

Check out the examples:

• Basic (source)
• Directional arrows (source)
• Directional moving particles (source)
• Auto-colored nodes/links (source)
• AR graph (source)
• 2D Text nodes (source)
• 3D Text nodes (source)
• Image nodes (source)
• Custom 2D node shapes (source…

View on GitHub

[Patrick Hund]

I'm definitely curious how quickly I will run into performance issues with my mind map with React components as sprite textures. We'll see…

[Médéric Burlet]

Sure

[Patrick Hund]

The tip to use the force-graph library was gold, I'm now using it in the latest version of my project. Check it out: dev.to/pahund/drawing-a-mind-map-w...

[Médéric Burlet]

Glad it helped! Looking forward to seeing more of the projects and if I have any tips I'll make sure to comment! That's what I love about IT all sharing ideas and tips to make projects better!

[Patrick Hund]

Should have listened to your advice right away 😂