Design talk about the Graph View

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

What would be your ideal default graph view?

For me, it would be a selection of the most important (highest-leverage) notes. Most of them would be faded in the background and some would be visible in the foreground (those I want to keep on top of my mind).

Filter as You Type Graph Search

I often find myself looking for a particular node on the graph. I wish there was an option to filter the graph as you type. Filtering could use the foreground/background graph display mode: the filtered nodes are displayed in the foreground, and the rest of the nodes are displayed faded in the background.

There could be an additional search field specifically for finding nodes on the graph.

2 Likes

From what I read here, it sounds like many of us would like the graph view to become a configurable map rather than just a graph. With a map, all these aspects can be assigned a meaning and so would be presented consistently each time the map is viewed.

  • Location in X and Y direction based on distance from some concept or tag.
  • Color of the nodes.
  • Size and shape of the nodes.

Those all sound like what we expect to find when looking at a map.

5 Likes

Graph View Modes

There are multiple possible perspectives here:

  • Map View – Fixed view, like a constellation in the sky. This creates a sense of familiarity because the “skymarks” have a fixed possition.

  • Random View – This is useful because every time you open the graph you see different juxtapositions, hence possible connections you can make between nodes.

  • Node-Centered View – You could designate a node as the center of the graph, so all other nodes would be displayed in relation to it. There would be two structures, one within the other: nodes connected with the central node (directly or indirectly) form the inner structure; nodes not connected with the inner node form the outer structure.

All of them could be useful / fun to use. And there could be others I haven’t thought of.

4 Likes

Random Node Selection

I love randomness, so I’d love to be able to randomly select nodes on the graph – so without opening them.

Imagine you see the graph faded in the background. There could be an option called select x random nodes, where x is customizable.

  • If x=1, the option makes a random node come to the foreground.
  • If x=2, the option makes two random nodes come to the foreground.
  • If x=5, the option makes five random nodes come to the foreground.

Node Selection Operations

By that, I mean operations that select nodes on the graph, where the selected nodes are displayed in the foreground, and the rest of the graph is faded in the background.

Random node selection is an example of one such operation. But there are others as well.

For instance, let’s say you want to select on the graph all nodes with a particular tag. Imagine if you could do this from the tag pane. With an option activated, clicking on a tag in the tag pane would select on the graph all nodes with that tag.

1 Like

Graph Minimap

Let’s say you have a page with its local graph open in the right sidebar. And let’s say you open the big graph. When you do, the local graph remains empty in the sidebar:

I’d suggested a while ago a minimap option for the graph:

What if the minimap view appeared in the local graph area when viewing the big graph?

So you’d see the big graph, and in the right sidebar, you’d see the minimap: a representation of the big graph faded in the background, and only the nodes visible on-screen on the big graph displayed in the foreground within a rectangle proportional to the screen. If you zoomed in/out the big graph, the size of the rectangle would decrease/increase on the minimap.

1 Like

Two graph filtering modes:

  • Subtraction Filtering – When you search for something on the graph, the graph is filtered to show only the nodes that meet the search criteria. This is the default.
  • Selection Filtering – The nodes that meet the search criteria are displayed in the foreground while the rest of the graph is faded in the background. It’s beautiful to be able to see the graph in the background, as context.

There could be an option to use both at the same time: you could make the visible graph smaller with subtraction filtering, and bring a set of nodes to the foreground with selection filtering.

2 Likes

When you hover over a link, you are shown a preview window. What if it also highlighted the node on the local graph, as if you hovered the cursor over it?

2 Likes

Foreground/Background Mode: Some notes are visible in the foreground, and the rest of the graph is faded in the background – visually similar to the current action of hovering the cursor over a graph node.

I’d love such a mode of visualizing the graph. I’ve been thinking of possible ways to implement it. Here’s one:

There are two search fields:

  • filtering search – filters the graph (the current search field)
  • fading search – fades the graph; when you search for something, those nodes are visible in the foreground, and the rest of the nodes are faded.

The two searches would work in tandem. You could filter the big graph, and then fade all but a selection of nodes from the filtered graph.

1 Like

Hi! Excellent topic.

I think what you’re proposing might be the solution that I was looking for: how to visualize a complex and customizable historical chronology.

I’m researching a topic in global history and the nature of my job requires that I maintain awareness over a variety of events that occur simultaneously in different parts of the world. With Obsidian I was able to find two solutions to this challenge:

  • Nested Tags, for example: #Year/XIX/1871; #Year/XIX/1872; #Year/XIX/1873; or #Year/XVIII/1788; #Year/XVIII/1789; #Year/XVIII/1790 and so on
  • Event-notes, for example: 1701_War of the Spanish Succession_1714; 1713_Peace of Utrecht_1715; 1756_Seven Years War_1763; and so on

I like this system because it allows me to have two types of chronology, one in the tag list and another in the “Event-notes” folder that is ordered by year.

Now, if I could customize the graph view as you are proposing, I would have a very interesting upgrade to my chronology. I could finally create a timeline with the year- tags placed side by side and the Event-notes connecting to them in the surroundings. Event-notes could still have a force of approximation according to links and back-links, but the most relevant force of approximation would be the chronology line connected with the tags. Your “foreground- background” proposal would also solve the problem of event notes overlapping in years that are crammed with events.

Functional Local Graph for the Big Graph

When you access the big graph, the local graph area is empty. It would be beautiful to be able to select nodes on the big graph (so without opening them) and for them to be displayed in the local graph.

1 Like

Global Local Graph

What if there was an option for the local graph to display not just the selected note but all currently open notes?

So if I opened two notes, I’d see both on the local graph.
If I opened three notes, I’d see all three on the local graph.
etc.

1 Like

Local and Global Filters for the Local Graph

There could be a global and a local filter for the local graph.

Let’s say you want a particular page to have a different filter than the default. There could be an option to add an override search field – which would appear on top of the default search field. Whenever you want to return to the default, you could close or disable the override.


Filtered Links

By filtered links I mean links that temporarily apply a search filter to the local graph on the linked page when visiting the link.

  • Normal Link: [[link|name]] - Takes you to the page.

  • Filtered Link: [[link|name|local graph search query]] - Takes you to the page, and the local graph is temporarily filtered with the search query.

Functionally, a temporary search field could appear on top of the existing search fields. That filter would visible only on that specific instance of the page. When that instance of the page is closed, the filter would disappear with it (so the temporary filter would be active only when you open the page from the filtered link).

This means you could have two instances of the same page with different filters applied.

Integration of the Local and Global Graph

The idea is to be able to easily access the settings for the local graph from the global graph and vice versa.

While thinking about how to achieve this, an idea struck me. In the video game Diablo 3, when you hover over an item, you are shown how it compares to the item you have equipped, as a side-by-side window.

Something similar in flavor could work for Obsidian as well. There could be an option that opens the local graph menu from the global graph and vice versa. The two menus would be displayed side by side, something like this:

There could be an option to “synchronize” them, thus mirroring the actions from one to the other. So if you, say, open the Groups in one, you also open the Groups in the other. If you modify a setting in one, you also modify it in the other.

There could also be an option to copy all the settings of one to the other.

Graph Legend

I’m very interested in User Experience (UX). A tool I like to use is what I call NOA (Number Of Actions) – the number of actions it takes to perform an operation. The more actions it takes, the more friction is created.

For instance, I’d like to be able to quickly change graph filters with complex queries to view the graph from multiple perspectives. Right now, it takes so many actions, so the friction is so high, that I rarely change views.

One possible solution:

Think of the legend of a map. One notable characteristic of the legend is that it’s always visible. Imagine if the legend of a map was functional, that is, if it allowed you to show or hide certain features on the map. These would be 1-action operations.

Something similar could work for the graph view. There could be a customizable legend-like section where you could add the operations you perform most often (maybe with drag-and-drop from the Graph Settings), which would allow you to perform them in 1 action.

4 Likes