Topic Map Navigation ​

If you see this on the Topic Map, click it to learn about how the map was created. If you see this on a content page, click on it to open the Topic Map.

The nature of jottings is that they are jottings: Slips of paper with random notes on them. You can structure them in some way. You might use different colors like I did on the side bar by having categories:

• Overview
• The Basics
• Site Functions
• Stray Parts
• and Glossary

Also a full text search can be helpful.

I had a hunch that there is also valuable information in the dependencies between the single jottings. That they may be disjoint, but not really unconnected.

This is the primary idea of the Topic Map.

The Model ​

Jottings consist of multiple pages that have multiple sections. Each section can contain hyperlinks to information in other sections. Wouldn't it be interesting to see a visualization of that graph?

The topics Vite plugin builds the topic map model as shown in . It finds the sections on all pages and records the hyperlinks between them. Not every single section defines a topic for the topic map. Only the first sections of pages and sections that are explicitly marked as topics by a short additional description are part of the topic map. Isolated topics, i.e. topics with no mapped internal links, are automatically connected to the Unrelated topic 😉.

The Presentation ​

Each Topic has as attributes a heading, a description, and an URL to the start section. This results in a presentation where the URL is used as a hyperlink to the jotting that describes the topic.

The graph is drawn using the Cytoscape.js library. This is one of the few parts of this website that are not pre-rendered. For optimization of load times, see this jotting about asynchronous components in Vue.

The graph is drawn with hidden edges. To make the direct neighborhood of a topic more obvious, the current topic is drawn with a large font, and all topics that are more than one hop away are drawn with a very small font. The combined effect is similar to a fish eye's view, but closely related nodes might still be farther apart on the canvas. Selecting a node brings it and its immediate neighbors into focus. Nodes that are no longer in focus are pushed into the background. This way, you can easily maneuver through the entire graph by clicking the medium sized nodes.

There is also a slight color coding that separates the glossary nodes from the main content nodes. Speaking about glossary nodes: There are plenty of links in the jottings that point to glossary pages, as these are automatically inserted. The resulting edges to glossary topics are ignored in the topic map, as they would turn the graph into a hairball.