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 branched in a way not constrained by a preference for the vertical and horizontal directions.

Solution: the force-directed layout

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.

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 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.

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.

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.

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 continuously, 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 easily decide what data to include for items, and how to populate the item elements with it

Conclusion

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.

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