I'm glad to see this, I'm doing some similar research right now.
It's pretty cool you've got all these things to work together, but wonder if these are the right choices for a stack. three.js isn't really very good with text nodes afair so if you plan to add more content it will be hard to render.
The normal candidate would be D3, which has great SVG support and a lot of ways to do force directed graphs. But you may not like the API, I always find it takes ages to work with - although it gives you fine grained control.
Another library I like a lot is cytoscape which has a JS version. It's a very sophisticated library for all kinds of graph exploration, but has imho a much easier to use API than threeJS. It allows direct DOM elements to be laid out. I've been using it for some conversation graph visualization experiments here (also a sankey using D3).
This was about combining react components with a network graph. Happy to share a repo link if you'd like dc.rik.ai/projects/convoai
For a network graph the force DAG view is good, but if you really mean "mind-map" maybe some other layout algo would be better? Did you look into any of the existing react libraries for mindmaps? There's a whole thing called mindmark, which is mindmaps in markdown. Kind of like mermaid format for mind maps. I am still looking for something quick to work with here myself.
Btw. I'm aware that three.js is not good at rendering text, that's why I'm creating the mind map nodes as sprites with canvas textures. The canvas textures contents are created using React components, so I can harness the full power of HTML/CSS to put any content I like in my graph.
Here's an early experiment I did with this technique:
The pink cube displays content rendered to a DOM node with React, including a bitmap image.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I'm glad to see this, I'm doing some similar research right now.
It's pretty cool you've got all these things to work together, but wonder if these are the right choices for a stack. three.js isn't really very good with text nodes afair so if you plan to add more content it will be hard to render.
The normal candidate would be D3, which has great SVG support and a lot of ways to do force directed graphs. But you may not like the API, I always find it takes ages to work with - although it gives you fine grained control.
Another library I like a lot is cytoscape which has a JS version. It's a very sophisticated library for all kinds of graph exploration, but has imho a much easier to use API than threeJS. It allows direct DOM elements to be laid out. I've been using it for some conversation graph visualization experiments here (also a sankey using D3).
This was about combining react components with a network graph. Happy to share a repo link if you'd like
dc.rik.ai/projects/convoai
For a network graph the force DAG view is good, but if you really mean "mind-map" maybe some other layout algo would be better? Did you look into any of the existing react libraries for mindmaps? There's a whole thing called mindmark, which is mindmaps in markdown. Kind of like mermaid format for mind maps. I am still looking for something quick to work with here myself.
Oh also I recommend looking into supabase!
Let us know your progress!
Thanks for the suggestions, I'll take a look!
Btw. I'm aware that three.js is not good at rendering text, that's why I'm creating the mind map nodes as sprites with canvas textures. The canvas textures contents are created using React components, so I can harness the full power of HTML/CSS to put any content I like in my graph.
Here's an early experiment I did with this technique:
The pink cube displays content rendered to a DOM node with React, including a bitmap image.