Design talk about the Graph View

When I look at the graph view in Obsidian I see possibility. I see huge untapped potential. I want this thread to be a discussion about what the graph view could be.

The purpose is to eventually distill this thread in a design document that could serve as inspiration for the developers and plug-in creators.

Right now, the graph view feels secondary to the main experience. I’m particularly interested in ways to make the graph view integral to the experience. To be able to navigate it, and sculpt it, and visualize meaningful pathways and patterns.

We’ll discuss everything from functionality to UI to possible implementation. We’ll also discuss the best way to present our ideas.

As a side project, I will look through all existing graph-related feature requests and compile a list of them for us to use as reference.

4 Likes

Graph Sculpting Operations

Seeing too many nodes at once is overwhelming. One of the most important things for making the graph functional is filtering, having the possibility to reduce the visible nodes to a manageable amount. Obsidian does a great job at filtering the graph through search. But even so, the result can be overwhelming. Here’s an example of a local graph view at depth 2:

All the visible information on the graph above is meaningful, thanks to the search, but there’s just too much of it. What’s needed, is the ability to interact with the graph on a node by node basis (and by selecting multiple nodes), to isolate the nodes that are most relevant in the moment, and to hide or fade those less relevant. I like to think of this process as graph sculpting.

Graph sculpting could be performed by a few basic operations:

  • Hiding Nodes
  • Folding Nodes
  • Fading Nodes

Hiding Nodes

Not much to say here. Every node you hide makes the remaining nodes more legible. Ideally, you should be able to see the hidden nodes at any time and selectively make nodes visible again.

Folding Nodes

On the local graph at depth 1. you see the nodes directly connected with the central node (level 1 nodes). At depth 2, you also see the nodes directly connected with the level 1 nodes (level 2 nodes).

Imagine you start from one local node on the graph. By clicking on it you unfold it, thus seeing its level 1 nodes.
By clicking on any of the level 1 nodes, you unfold it, thus seeing its level 1 nodes (which are level 2 relative to the initial node).
By clicking on any of the level 2 nodes, you unfold it, thus seeing its level 1 nodes (which are level 3 relative to the initial node).
And so on.

It’s the same principle as folding/unfolding blocks within notes, but at graph level.

Fading Nodes

When you hover the cursor over a node, the visual effect is beautiful:

I like to metaphorically think of it as foreground/background. Items in the foreground are normally visible; items in the background are faded. This could be a feature in itself. What’s beautiful about it is that you can see the context, but it does not clutter the view.

How this feature could work is by having the option, at any time, to persistently move nodes from the background to the foreground and vice versa.

Imagine if when I selected a note, only the central node and its level 1 nodes were in the foreground on the local graph, and the level 2 nodes and higher were in the background (faded). For me, this would be the ideal view when selecting a note:


Think of all these operations as tools, and the tools could be combined. I could choose to fold some nodes, hide others, and fade others, thus shape the graph into the most meaningful pattern possible.

2 Likes

Graph visualizing operations.

As a 67 yr old non-techie writer, I have been taking a crash course in Obsidian since I discovered it about a week ago. My first project is to develop a large number of concept definitions (words, basically, with each captured in a unique note). I’m following a specific genus/differentia philosophical model, which anchors concrete “things” (tree, house, red, etc.) to more general categories (plants, buildings, colors, etc.), more detailed things (oak tree, bungalow, crimson, etc.).

The reason I’m doing this is in order to get clearer on how our minds derive intangible concepts (property, value, morality, etc.). Wiki-links capture the relationships well. I’m using tags to specify general subject matter as well as whether a concept is surface-level, a generalization, an extension, or intangible.

Clearly, I’m dealing with a LOT of notes. In order to use this as a learning and teaching tool, I need to somehow influence where the notes show up on the graph. For example, the highest level category is “thing” or “existent.” Ideally, I could cause notes tagged with #Generalization to be pulled toward the top of the graph. This would cause notes such as oak tree → tree → plant → living organism → existent/thing to drift to the top. Likewise, I could have notes tagged with #Extension to be pulled toward the bottom of the graph. So, person → doctor → pediatrician → pediatric oncologist would be pulled toward the bottom. That would cause the whole conceptual structure to become shaped like a sort of jellyfish, with the most detailed extensions hanging at the bottom, and the “surface-level” concrete sorts of concepts floating around in the middle. Further, concepts tagged with #Intangible, etc. might “pull” notes containing them to the right. You get the idea.

This would make the whole structure quite useful for research, teaching, persuasion, and so forth. And that is not to mention helping individuals ensure the content of their minds is tied to reality somehow.

If anyone knows of a way to do this, I would really, really appreciate some pointers. Otherwise, I hope this suggestion makes it into the hopper for future development.

1 Like

Graph Navigation History

Imagine being able to trace on the big graph your navigation history over the course of a day.

Imagine seeing the big graph faded in the background at the end of the day, and imagine having the option to proceed chronologically through every node you accessed during the day. As you start tracing back your steps, a node comes to the foreground – the first note of the day. Then another node comes to the foreground, then another, and another, and another, until you reach the last node of the day. You’ve thus revealed the daily graph – consisting of all the nodes you navigated during the day –, with the rest of the graph faded in the background.

I can see it with mind’s eye, and it’s beautiful.

2 Likes

You could take a look at the breadcrumbs plugin.

1 Like

I personally would love to be able to graph my notes over time like a timeline of when they were made. That way I could start to organize things by how they’ve changed over the years.

If I may, I’d like to re-ping an idea I proposed for rendering the local note as different geometry. I think that would also help with being able to intuitively grasp where you are in the network.

Also, have you seen Eleanor’s write-up about the graph view?

Hi Chris.

This ties in nicely with something I’d suggested a while ago:


Thank you for the link to the article. I agree that the graph is not just a pretty gimmick, but I think it’s very far from what it could potentially be.

1 Like

From what I understand, you’d like to be able to create a hierarchical relationship between concept-notes (hierarchization) and to be able to display the hierarchy in a certain way (visualization).

The way this could work is by using tags for the levels of the hierarchy.

eg
#lvl1 – person
#lvl2 – doctor
#lvl3 – pediatrician
#lvl4 – pediatric oncologist

Someone else might use the structure differently.

eg
#lvl1 – the 20%, the most important, highest-leverage notes
#lvl2+ – the 80%

With the hierarchy established, there could be different ways of visualizing the structure (eg radial, stratified, etc). You might choose to visualize your system in the way you described it (I didn’t understand it very well). Someone else might use a different visualization method.

For instance, in terms of visualization, I’d like to be able to control what notes are displayed in the foreground (#lvl1) and which in the background (#lvl2+).