![]() I used to be a HUGE fan of Gephi - it was easy to use, had a pretty intuitive UI, generated all sorts of handy SNA metrics, etc. The current package, RCyjs, provides programmatic control of cytoscape.js from an R session using the BrowserViz base class. Graphlytic Desktop is a free Neo4j Desktop application installed in just a few clicks. solution of partial differential equations is the main driver of DUNE's While Cytoscape and Gephi are popular tools, there is a broad spectrum of alternatives available. I am still looking for something quick to work with here myself.Graph rendering is done with the Cytoscape.js library which allows us to render tens of thousands of nodes and hundreds of thousands of relationships. Kind of like mermaid format for mind maps. Happy to share a repo link if you'd likeįor 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. This was about combining react components with a network graph. I've been using it for some conversation graph visualization experiments here (also a sankey using D3). It allows direct DOM elements to be laid out. It's a very sophisticated library for all kinds of graph exploration, but has imho a much easier to use API than threeJS. But you may not like the API, I always find it takes ages to work with - although it gives you fine grained control.Īnother library I like a lot is cytoscape which has a JS version. The normal candidate would be D3, which has great SVG support and a lot of ways to do force directed graphs. 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. It's pretty cool you've got all these things to work together, but wonder if these are the right choices for a stack. I'm glad to see this, I'm doing some similar research right now. I think next time, I'll see if I can add interactivity: it would be cool if I could add new mind map nodes and remove existing ones. So here you have it, my mind map rendered as a force directed graph: I had to overwrite the function that calculates the position of the links with graph.linkPositionUpdate, just to set the z position to make the links appear behind the nodes by default, they were rendered in front.To fix these scale issues, I also had to adjust my renderToSprite function so that it scales down the sprites to ⅙ size.I had to set the scale of the graph to tiny ( 0.005), otherwise my mind map nodes would have been very small because the whole graph is so big.I have to render the mind map nodes, that are created through my MindMapNode React component asynchronously, hence the Promise.all call that renders all of them in one go and stores them in the data, to be pulled out again in graph.nodeThreeObject.To use three-forcegraph, I have to reformat the JSON file with my mind map data:Įnter fullscreen mode Exit fullscreen mode Note quite what I'm aiming at, but I think I can make this work for me.ĭev.to user crimsonmed pointed me to an implementation of force-directed graphs for three.js: three-forcegraph – thanks Médéric! This is what it looks like (with tons and tons of nodes): Typically, these systems combine attractive forces between adjacent vertices with repulsive forces between all pairs of vertices, in order to seek a layout in which edge lengths are small while vertices are well-separated. In force-based layout systems, the graph drawing software modifies an initial vertex placement by continuously moving the vertices according to a system of forces based on physical metaphors related to systems of springs or molecular mechanics. This one seems to be the most appropriate for drawing a mind map: To calculate the position of the nodes so that the don't overlap is a nontrivial problem.Ī Facebook friend pointed me to the wikipedia article about graph drawing (thanks, Stefan!). ![]() I ultimately want my mind map to be potentially hundreds of levels deep and have thousands of nodes. It is renders mind maps with a depth of two levels, and already it becomes clear that drawing a graph like this is not easy (it is mathematically speaking a graph). I've been thinking about the solution I have this far. ![]() In the previous part I, part II and part III, I've found out how to render React components on sprites in three.js and connect them with lines to make up a mind map that's nested two levels deep. Follow me if you're interested in what I've learned along the way about building web apps with React, Tailwind CSS, Firebase, Apollo/GraphQL, three.js and TypeScript. I'm building a social media network and collaboration tool based on mind maps, documenting my work in this series of blog posts. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |