Design talk about the Graph View

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

Semi-Transparent Grap-Settings Window

There could be an option to change the opacity of the graph-settings window, to be able to see the graph behind.

Options to change the speed of and pause the timelapse animation

I’d suggested a while an interactive timeline for the timelapse animation:

That would be ideal but quite difficult to implement, I imagine. What shouldn’t be that difficult to implement is the possibility to change the speed of and pause the timeline animation.

Let’s say you want to show the timeline animation in a presentation. You might choose to double or triple the speed (from a few predetermined options) to make it fit in the available time.

Option to set the timelapse animation as a screensaver

I don’t know how feasible this is, but it would be beautiful.

1 Like

Will add that it might be quite cool to have Saved Display Presets that you can switch around from on a dropdown menu.

2 Likes

Functional Groups

It would be beautiful if the groups were functional. That is, if they had additional functionality, like filtering the graph.

Imagine if you could hide or fade the nodes of a certain color, or all nodes except those of a certain color.

The way this could work is by having a Filtering button for each group. The button could open a menu that allows you to perform various operations.

1 Like

Option to bring highlighted nodes within the visible area

Let’s say I hover over a node, thus highlighting all nodes directly connected to it. But what if some of the highlighted nodes are off-screen? If I zoom out to see all the highlighted nodes, the node labels might become too small.

Possible solution: There could be an option that reconfigures the graph and brings all off-screen highlighted nodes within the visible area.

2 Likes

Eliminating Friction

There are two essential aspects to design:

  • Adding new features
  • Improving existing features (Optimization)

Both are important. From the perspective of User Experience (UX), one of the basic ways of improving existing features is by eliminating friction.

As concerns the graph view, certain features are functional, but the experience of using them could be improved.

For instance, the graph-filtering search could be much better.

  • When you search for a tag by typing tag:, the tag list is a mess, especially if you use nested tags, which makes it hard to find the desired tag (friction-point).
  • Unlike the main search field, the search history for the graph is not saved, so you have to go through the process described above every time (friction-point x2).

Ideally, you should be able to quickly switch between multiple graph filtering configurations. Improving the graph filtering experience requires both adding features (eg the option to save/load filter configurations) and removing friction.

The process of improving the graph experience could start with identifying and systematically eliminating friction points.

Ordering graph

Hi, what a wonderful tool.

On my concern, i spent a lot of time trying to find a tool wich can help me to do this work but with a graphic mode. Most of mindmapping are awfull because they only organized with level and we can’t work freely.

The only things wich miss me is the possibility to organized the nodes in the graphique mode . In this version we can do this, but nodes moves constantly. If we can have an option to freeze nodes that would be great.

What do you think about it ???

1 Like

Hi. That’s a wonderful idea which others have expressed as well.

I’d previously suggested having multiple view modes because the current random view can also be useful.

Persistent Graph Node Preview

When you hold Ctrl and hover over a graph node, you are shown a little preview window of the corresponding page. It would be beautiful if that window could be made persistent.

How this could work:

When you activate the node preview window option (maybe from the graph settings), a floating, resizable, and minimizable window appears on the graph. The window is initially empty (or displays a set page), but whenever you hover over (or select) a node, the node’s corresponding page is displayed in the preview window.

Went through the thread quickly so might have missed it, but a 3d graph view could be very useful (especially if certain tags can be assigned to certain dimensions)