What's an easy way to create interactive graphics like the one found in the graph view of Obsidian?

[fallen perch]

There's this app called obsidian and it's used for taking notes, making checklists, etc. and one of its special features is a thing called "graph view". In essence, every note you make creates a dot on a blank canvas, a "node", and clicking on it takes you to the note it refers to. However, you can also create references in the note to another note. This will, in graph view, draw a line between the two notes.

It's really great for things like mindmaps, storyboarding, etc. What I want to know is if there is an easy way to make something similar to this in JavaScript. I tried searching for some libraries and such, but the closest I got was just a bunch of scatter plot libraries.

My aim is to be able to:

1. Create nodes
2. Link them together
3. Do so procedurally

Is there any kind of library for this kind of stuff?

Forgot to mention I'd also like to add tooltips to these nodes about what is contained within. Like, it will display a checklist or something like that

[trim tendon]

I haven't tried this, but it seems like what you are looking for: https://gojs.net/latest/

[fallen perch]

I see. I'll have a look later

[crystal geyser]

Otherwise I've got a simple example using canvas, but really not very sophisticated.
I might add some changes like considering node"size" etc in future.
It also currently only works for one root (hierarchical data object)

[trim tendon]

If you are referring to the project that you shared before, it's not quite the same thing. Your project only handles the lines. What the OP is asking for is a way to make something like a mindmap. The lines actually connect pieces of information that can be clicked on for more details and the user can add more points with data. So your project is a partial implementation but doesn't do the whole thing that is needed.

[crystal geyser]

Nope, I'm not referring to the particles 🙂

[trim tendon]

OK

[crystal geyser]

from a (nested) data object

hmmm... but might still not be what they're searching for 🤔 as it represents an object's data-relations, not a node-list

[fallen perch]

Oh, nice. That example works well.

I might need to find a way to structure it differently, but it is good

[crystal geyser]

It's just a playfile for now and I'm working on a way to generate the tree-structure whatever data-object you use it for... If you wouldn't need it immediately; I#d report back when I customised it to work more generic.

[fallen perch]

You don't have to go that far bro, this already helps a lot