Nodes Collisions, Cost layout, SVG filters, user controlled forces,

I’m a big fan and user of Graphviz since a long time. No need to praise a world leading sw, yet, when I look a the Graphviz wish list, it revives an old feeling of frustration. I therefore decided to start a proof of concept implementation in this Graphysics project. No intention to compete nor recreate the wheel, rather starting from scratch to allow radical new concepts to evolve. My goal was first to check if some things are feasible or not, then provide boiler plates and patterns that would hopefully inspire other graph fans and enthusiasts.
In the readme, I provide a details about the ideas driving this project, I did my best to review existing web libraries but did not go through the depth of each.

a live demo is also available, and it’s possible to drag and drop some examples from the data folder.

Any feedback would be much appreciated, I would also be dedicated to share info with any one who would like to re use any of the concepts I show case in my project.


Thanks so much for sharing this, @wassfila! This is extremely cool, and I’m excited to find opportunities to incorporate this into my own projects.

One quick note: I originally tried opening this in Safari, which shows a blank page. Opening the Web Inspector, I saw the following error:

[Error] Unhandled Promise Rejection: TypeError: function is not a constructor (evaluating 'new CSSStyleSheet()')
	(anonymous function) (render.js:155)

Right now, that feature is available in about half of installed browsers: (including, apparently, the latest Safari, despite my personal experience)

You might want to consider adding a polyfill for stylesheet construction, or adding a message about browser support.

Thanks @mattt for the heads up. I admit, I went too experimental when it comes to style usage in js, I also wanted to avoid transpilers but then polyfills are the least I should do for proper project exposure.
I’m glad you liked it, I’ll look forward to help further in your projects.

I added a workaround for the main style that should work now, but I did not get it to run not even on Firefox yet, so I open an issue for the CSS construction. I understand now the limitation I set to myself of not using a transpiler, I think I have to look at that as using a polyfill is a use case that can be hardly solved otherwise.
In general, this is the first step on cross browsers compatibility, I did not had that on scope so far, so I’ll put it on the list and would be testing at least the main ones beside chrome which I use for the development.

1 Like

I’m getting more used to the forum I think it’s cool to have some gifs here
Just a warning, the layout feature of this project is experimental (not serious enough for now), but focus is more on the Nodes SVG interactivity which could be an excellent complement to Graphviz library.