🏠 back to Observable

ES module that uses D3 Force to make a mind map

Hi,

I did a thing where I wanted a mind map discussion interface and D3 Force was the key. I wrote up an article on how D3 Force was a perfect and exciting solution to a difficult problem, at my creative software blog. https://peoplesfeelings.com/force-directed-layout-for-mind-map-interfaces/

Basically, I did an ES module that makes it easy to create a mind map interface that utilizes a force-directed layout. The force-directed layout works nicely for a mind map.

I also did a Twitter toolkit site that implements this mind map module, so you can visualize the reply tree of a tweet with it. That’s here: https://www.twidgel.com/map/

The module has some cool features, like it can update reactively, and the new items are appended to the diagram gracefully. So it can be used for a real-time interface.

The next step I want to do is to try to implement it in React. I may need to redo some things after I dig into that. For now I can say it works for REST apps, including ones that utilize async updates such as from a socket connection.

There are a couple issues that would arise for specific use cases, not sure if I should put those up on GH as todos, in case anyone wants to contribute?

I wanted to build this module before I knew about D3. I wanted to facilitate this kind of a discussion interface, which I think offers significant advantages over existing discussion interfaces. I describe that difference in another article, at my blog, which is linked to at the bottom of the one linked, above.

I can’t post more than 2 links but the Github is /peoplesfeelings/pfmindmap
The notebook is in there. The module implements Observable runtime.

4 Likes