Improve graph display

[xplosionmind]

Having a graph which displays the connection among notes is great, but as of right now it's kind of limited, and it doesn't feel very ergonomic. A few ideas of improvements may be:

• Showing the current note at the center of the graph
• Resizing the graph to make all the content fit
• Simulating “forces” and attractions (as in Obsidian's graph, for example)

Inspiration

Some code for inspiration:

• https://github.com/hugcis/hugcis.github.io/tree/master/js

[Am3ra]

Would adding weight to notes with more connections be relevant?

[vlwkaos]

digital-garden-jekyll-template/_includes/notes_graph.html

Line 63 in ac70b2f

linksData.filter((l) => l.source === el.id || l.target === el.id)

I am a bit lazy to make a PR. so I will leave it here. During node update, indegree check condition is never true because l.source is an object not an id. So the correct condition should be l.source.id === el.id || l.target.id === el.id to match the created json file.

[adrien-perello]

On the Foam discord, someone managed to leverage the Foam graph (see here or here for an idea)

I get the code in this file.
https://github.com/foambubble/foam/blob/master/packages/foam-vscode/static/dataviz/graph.js

Add 2 libaries
<script src="//unpkg.com/force-graph"></script>
<script src="https://d3js.org/d3.v6.min.js%22%3E</script>

Then write a script to build graphData.

Maybe that's an idea?

[florhizome]

To me the question is if I’d want one global graph holding a lot of information (tags, maybe a cumulated attribute like relativity, possible a distinct type of reference for references to book/literature notes) that adapts to the site where it’s displayed and can be manipulated by the visitor with checkboxes or so, or having multiple graphs generated for distinct usages (between a “global view” that gives a useful quick overview on what’s on the site and a detailed, zoomed in “local view”) . I would not know how that would impact performance though. I think for visualization to be really useful long term it would benefit from such adaptability.

[manunamz]

I recommend using the force-graph APIs for this.

[chaosarium]

For inspiration, it looks like that the quartz template provides a much smoother graph experience (check out https://quartz.jzhao.xyz for demo). It was done using around 200 lines of JS https://github.com/jackyzha0/quartz/blob/hugo/assets/js/graph.js.

[candideu]

Has anyone been able to figure this out? I'm looking for a more fluid graph, similar to the one featured on the d3.js Disjoint force-directed graph demo and in Obsidian + Logseq.

I would also love to have a page-specific graph like Obsidian/Logseq, which either only displays the other notes connected to that note (related: #175):

OR displays the entire graph, but highlights its connected nodes, like what we currently see when hovering over the node: