Article updated Nov 2, 2021

Terms

• “Concept map” – a diagram where items are visually organized and relationships are illustrated by connecting lines.
• “Mind map” – a concept map with a single origin point.

Story

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.

Solution: the force-directed layout

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!

Pfmindmap

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

• draggable nodes
• zoom and pan
• anchored root node
• ballance of forces so diagram is organized and collected
• scalable to diagrams with very large numbers of nodes
• ability to add data continually, which enters gracefully
• handles window resizing
• convenience functions like freeze, untangle, zoom, and center view
• the implementing app provides an “item creator” function, which means that the developers of the implementing application can decide exactly how they want their diagram items to look
• the implementing app can include any data properties they want on the data objects for the diagram items, because it is their own item creator function that will populate the HTML elements with the data

Wrap up

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.

Notes

• This article refers to pfmindmap version 1.8.1
• There was at least one JS mindmap library I found, when researching libraries, that incorporated a force-directed layout, js-mindmap, though it didn’t seem suitable as a base for the use-cases I was targetting.

Links

• Pfmindmap Github
• Tweet Reply Map