Article updated Nov 2, 2021
I wanted to build a mind map discussion interface for a debate website. A mind map is well-suited to the debate use case because a debate begins with a “motion,” the thing being debated. So, the diagram would have one root node, and branches of discussion would extend outward from it. It would help users keep track of the various branches, review the overall conversation, and have thorough and productive discussions.
I researched existing mind map/concept map libraries and found that there were none that did what I was looking for. I wanted an automatically generated mind map that looks like ones that humans draw, efficiently filling the space and easy to follow. Most mind map visualizer JS libraries I found made charts that look like tournament brackets.
Those are cool and useful but they don’t look like what I had in mind. Because I was focused on the use case of a discussion interface, making the best use of screen space was important.
I knew it must be possible to achieve a close-fitting tree that branches in a way not constrained by a preference for the vertical and horizontal directions.
I was puzzling over how to do this when I saw a “Force Tree” visualization on ObservableHQ. It’s a D3 Force demo with hierarchical data. I saw that the force-directed layout is what I needed. It produces branching that is circular and organic. It looks like a plant in a 2 dimensional space.
The force-directed layout is a 2D physics simulation. D3 Force’s “many body” force can attract or repel. There is also a link force. By setting the “many body” force to repel, and including a link force between connected nodes, the diagram organizes itself!
I had been thinking about how to achieve collisions, ballance, and organization, but I hadn’t realized that what I needed was a 2d physics simulation!
I built a JS module, pfmindmap, to produce the discussion interface I wanted. It utilizes D3, as well as Observable, a JS runtime that gives D3 a data-flow environment to operate in.
Below are screenshots from the Twidgel Tweet Reply Map, a tool that visualizes Twitter conversations and that implements pfmindmap.
Pfmindmap provides the boilerplate feature-set for a force-directed mind map discussion interface. It does the work of getting these features to work together, and provides developers an easy way to create a mind map interface. The core feature set includes
Data visualization provides insight by conveying more, visually. The visual cortex of the human brain does advanced processing and is especially good at processing physical spaces and objects. Data visualization, in general, takes advantage of that ability. Force layouts, in particular, do so by their simulation of physics. The force-directed layout provides a tangible enhancement to the mind map interface, and helps to organize it in an organic and compact way.