[Poll] Which color/animation style for directed graphs do you prefer?

[xamidi]

Three interactive animations are featured at xamidi.github.io/interactive-svg-graphs/.

Hints to handle the animations

• Move your mouse cursor over different elements to reveal or highlight all similar elements.
• The light bulb (💡) does this for everything at once.

[xamidi]

I updated the images based on feedback to contain gray edges by default: xamidi/interactive-svg-graphs@06cc927

Note that you can always change your vote.

In case you preferred an old version over all new options, please let me know. I think taking away some color was a good idea — they looked a little messy before.

[wolfspyre]

ALL of this feedback comes from a place of:

HOLY CRAP THIS IS COOL.

I adapted most of these repeating svgs (and made a few) to be programatically colored and use them as page backgrounds (there’s prolly a better way to do it than i am)
and generate these terrible svg donut charts
programatically

and so I understand just how frustrating and cool this is :) i’ve a lot of respect for what you made….

the links behave a little oddly on mobile. touching any of the items results in a redirect to the child diagram, and you have to navigate back to see the color change…
this is a hard thing to address, as is, …
however, you could do something like have an adjacent set of circles, which can trigger the color change associated with mouseover/hover that occurs when one hovers but doesn’t click on the nodes …. but without the href link… so a click/touch would just toggle the focus/color effects… thus making the illustration more intuitively intractable for a larger subset of use cases..

perhaps defaulting to those being hidden or moved beneath the main element if the viewer has hover, or something?

you could also have the arrows/paths react to the click/touch event as just color/focus shift and not link to a different thing …

idk how nerdy you wanna get with this… but if wonder if representing some aspect of the underlying data relationship via animation timings, or perhaps just leveraging a sequential transition would help you illustrate the relationships in a more dynamic and potentially delightful fashion….

again, i’m NOT saying the juice is worth the squeeze here…. hell, i’m not even sure this is a good idea!! but it’s where my head went when playing with it and figured i’d share my $.03 :)

take this opinion as salted as you feel appropriate :)

again, very cool stuff, thanks for sharing!!!

[xamidi]

I adapted most of these repeating svgs (and made a few) to be programatically colored and use them as page backgrounds (there’s prolly a better way to do it than i am) [...]

and so I understand just how frustrating and cool this is :) i’ve a lot of respect for what you made….

Thank you for the nice feedback! 😊
There are some neat svg background patterns in your list. Do they come with a license?

the links behave a little oddly on mobile. touching any of the items results in a redirect to the child diagram, and you have to navigate back to see the color change… [...]

I noticed, but I added the links only to show that they are not working in GitHub Flavored Markdown.

The final image I have in mind is supposed to have a small data table next to it, where corresponding cells are then highlighted according to the input. Also note that the links only cover vertices, but neither edges nor labels, so one can still test on mobile how it reacts on which input.

[wolfspyre]

the original starter svgs I used came from the hero patterns collection which is CreativeCommons. I rewrote them (not going to assert improvement :) ) to be programatically manipulatable.

my use case is, as you can tell, hugo staticsite enrichment, and the base theme i used leveraged tailwind for styling…

the resulting contortions involve some helper template voodoo of questionable quality . to transmute declarations like ‘red-200’ into something usable… an then create uniquely named copies of the original images with their unique attributes set
jpanther/congo#770

so… depending on the specifics of what you wanna lift, either mit or cc