6 ms·

Show HN: GraphvizAnim, a tool to create animated graphs, based on graphviz

70 points by mapio 11y ago

benbjohnson 11y ago
I really like the idea of animating graphviz graphs. It definitely helps to make them clearer. I know it's a proof of concept but one suggestion would be to animate the line drawing itself. That's difficult if you're outputting a raster format but if you're feeling adventurous then you could output to SVG and draw the lines using the stroke-dashoffset trick: https://css-tricks.com/svg-line-animation-works/ https://css-tricks.com/svg-line-animation-works/
- mapio 11y ago
  The `gvanim.jupyter` module is actually using SVG, so that would be awesome! Would you like to contribute? I'll be glad to accept a pull request :) I have opened an issue https://github.com/mapio/GraphvizAnim/issues/3 https://github.com/mapio/GraphvizAnim/issues/3 to keep track of your suggestion.
Buetol 11y ago
This looks really similar to what you want to do but with d3 and interactive: http://maurizzzio.github.io/greuler/#/examples/dfs http://maurizzzio.github.io/greuler/#/examples/dfs (click "run algorithm")
- mapio 11y ago
  That's really nice! I like graphviz layouts because they use curved arcs (that sometimes make graphs look much better). How difficult would be to use it with d3?
  - tunesmith 11y ago
    The relevant algorithm is Sugiyama, and there's an unmaintained, but working plugin for d3 called dagre-d3.
    - mapio 11y ago
      Cool, I'm totally new to d3, but it seems very very interesting. It's nice to know that a good layout plugin is available. Thanks for the info!
- lifeisstillgood 11y ago
  I'm not complaining but interested - why does this not work on my iPhone? Safari does not support it? Phones in general do not provide some basic resource needed? I have usually dismissed JavaScript fails on iPhones as one of those things, but it is hard to argue with the idea that the mobile world is now the predominant platform?
  - mapio 11y ago
    If I open the GitHub page on my iPhone I can see the graph animating. It's just an animated gif, so it should not really be a problem of Javascript at all (there is none involved). On the other hand, if you are trying to use the Jupyter notebook, I've no idea if it works on iPhone. If you have a specific issue, can I please ask you to report it on GitHub Issues? Thanks!
minimaxir 11y ago
Coincidentally I released an experimental graph animation video using graph-tool for rendering and ffmpeg for conversion: https://www.youtube.com/watch?v=TywrMtBcgeI https://www.youtube.com/watch?v=TywrMtBcgeI The technique works well for engaging data visualization, although the code is somewhat tedious. Are the ImageMagick commands included in your Python module? I took a look and didn't see a way to create the GIF. (EDIT: found it; it is the gif() function in render.py. I am dumb)
- mapio 11y ago
  No, I am dumb and should comment the code (and provide few usage examples). I wrote it in a hurry yesterday night, it was just an hack and it ended up on the frontpage of HN.
  - venning 11y ago
    You are not dumb. Releasing un-commented code that works is still releasing code that works. This actually solves a problem I was having. Thanks for sharing it.
    - lifeisstillgood 11y ago
      Bravo
  - chris_wot 11y ago
    No, you are awesome. Thank you!
    - mapio 11y ago
      I'm flattered (and blushing) :-)
      - chris_wot 11y ago
        Anyone who puts up something so useful on GitHub and is so nice as to apologise for not commenting their code is pretty awesome and deserves to be thanked. Honestly, showing you my appreciation is the very least I can do. Keep being great!
chris_wot 11y ago
Probably off topic a bit - but is there any tool that will automatically analyze C++ code and create sequence diagrams?
- chris_wot 11y ago
  I'm going to answer my own question: https://github.com/animatedb/oovaide https://github.com/animatedb/oovaide

70 points by mapio 11y ago

I really like the idea of animating graphviz graphs. It definitely helps to make them clearer. I know it's a proof of concept but one suggestion would be to animate the line drawing itself. That's difficult if you're outputting a raster format but if you're feeling adventurous then you could output to SVG and draw the lines using the stroke-dashoffset trick: https://css-tricks.com/svg-line-animation-works/ https://css-tricks.com/svg-line-animation-works/

mapio 11y ago
The `gvanim.jupyter` module is actually using SVG, so that would be awesome! Would you like to contribute? I'll be glad to accept a pull request :) I have opened an issue https://github.com/mapio/GraphvizAnim/issues/3 https://github.com/mapio/GraphvizAnim/issues/3 to keep track of your suggestion.

Buetol 11y ago

This looks really similar to what you want to do but with d3 and interactive: http://maurizzzio.github.io/greuler/#/examples/dfs http://maurizzzio.github.io/greuler/#/examples/dfs (click "run algorithm")

mapio 11y ago
That's really nice! I like graphviz layouts because they use curved arcs (that sometimes make graphs look much better). How difficult would be to use it with d3?
- tunesmith 11y ago
  The relevant algorithm is Sugiyama, and there's an unmaintained, but working plugin for d3 called dagre-d3.
  - mapio 11y ago
    Cool, I'm totally new to d3, but it seems very very interesting. It's nice to know that a good layout plugin is available. Thanks for the info!
lifeisstillgood 11y ago
I'm not complaining but interested - why does this not work on my iPhone? Safari does not support it? Phones in general do not provide some basic resource needed? I have usually dismissed JavaScript fails on iPhones as one of those things, but it is hard to argue with the idea that the mobile world is now the predominant platform?
- mapio 11y ago
  If I open the GitHub page on my iPhone I can see the graph animating. It's just an animated gif, so it should not really be a problem of Javascript at all (there is none involved). On the other hand, if you are trying to use the Jupyter notebook, I've no idea if it works on iPhone. If you have a specific issue, can I please ask you to report it on GitHub Issues? Thanks!

minimaxir 11y ago

Coincidentally I released an experimental graph animation video using graph-tool for rendering and ffmpeg for conversion: https://www.youtube.com/watch?v=TywrMtBcgeI https://www.youtube.com/watch?v=TywrMtBcgeI The technique works well for engaging data visualization, although the code is somewhat tedious. Are the ImageMagick commands included in your Python module? I took a look and didn't see a way to create the GIF. (EDIT: found it; it is the gif() function in render.py. I am dumb)

mapio 11y ago
No, I am dumb and should comment the code (and provide few usage examples). I wrote it in a hurry yesterday night, it was just an hack and it ended up on the frontpage of HN.
- venning 11y ago
  You are not dumb. Releasing un-commented code that works is still releasing code that works. This actually solves a problem I was having. Thanks for sharing it.
  - lifeisstillgood 11y ago
    Bravo
- chris_wot 11y ago
  No, you are awesome. Thank you!
  - mapio 11y ago
    I'm flattered (and blushing) :-)
    - chris_wot 11y ago
      Anyone who puts up something so useful on GitHub and is so nice as to apologise for not commenting their code is pretty awesome and deserves to be thanked. Honestly, showing you my appreciation is the very least I can do. Keep being great!

chris_wot 11y ago

Probably off topic a bit - but is there any tool that will automatically analyze C++ code and create sequence diagrams?

chris_wot 11y ago
I'm going to answer my own question: https://github.com/animatedb/oovaide https://github.com/animatedb/oovaide