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 branched in a way not constrained by a preference for the vertical and horizontal directions.
I was trying to work out how to write the algorithm for placement 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 the key. In the D3 Force demo I saw the natural organization of second-level replies being outside the first-level reply zone, with the parents being nearer to their parents. 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 puzzling over how to achieve collisions, ballance, and organization, but I hadn’t realized that what I needed was a 2d physics simulation!
This was a big piece done. I no longer needed a placement algorithm.
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.
The pfmindmap interface is resilient. The simulation reaches equilibrium, moving items to their best place. It handles all different “shapes” of data sets, fitting them efficiently in a small space.
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
D3 Force is powerful. Data visualization makes things apparent that are otherwise invisible. It provides insight by conveying more visually and in a way that is more readable. The visual cortex of the human brain evolved to be good at processing physical spaces and objects. Force layouts take advantage of that ability.