June 8, 2021
Force Directed Layout for Mind Map Interfaces

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.
A mind map, manually laid out at Lucidchart

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.

Mindomo
MindMeister

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.

D3 Force Tree from ObservableHQ.com

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.

D3.js

D3 (Data Driven Documents) is a JavaScript library for data visualization. It offers numerous kinds of charts and visualization features. It offers great modularization, so various pieces of functionality that can be chosen and combined. It also offers excellent performance and versatility, which is why it is one of the leaders in JS data visualization.

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.

twidgel.com/map
twidgel.com/map

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
  • node items are HTML elements provided by the implementing app, so their appearance is very customizable
  • the implementing app provides a populator function that populates the item elements with the item data, allowing developers to decide what data to include for items, and how to populate the item elements with it

Conclusion

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, take advantage of that ability, by their simulation of physics. The force-directed layout provides a tangible enhancement to the mind map interface, and helps to organize it in a natural-looking and compact way.

Notes

  • This article refers to pfmindmap version 1.4
  • There was at least one JS mindmap library I found 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

Related Articles

Share this page