MOTHBALLED-graphviz
MOTHBALLED-graphviz copied to clipboard
ellson
Graphviz in your browser through the new D3 plugin d3-graphviz
I've developed a new plugin for D3, d3-graphviz. I'd be honored if you would like to list it on your Resources page.
The plugin is based on Viz.js and adds:
- Animated transition of one graph into another
- Edge path tweening
- Node shape tweening
- Fade-in and fade-out of entering and exiting nodes and edges
- Panning & zooming of the generated graph
See this small demo.
Apologies for posting "advertisement" here. It's because of https://github.com/ellson/graphviz/issues/1270.
Nice! Happy to see it's in d3.v4 too.
On Thu, Aug 24, 2017 at 12:35 PM, Magnus Jacobsson <[email protected]
wrote:
I've developed a new plugin for D3, d3-graphviz https://github.com/magjac/d3-graphviz. I'd be honored if you would like to list it on your Resources http://www.graphviz.org/content/resources page.
The plugin is based on Viz.js https://github.com/mdaines/viz.js and adds:
- Animated transition of one graph into another
- Edge path tweening
- Node shape tweening
- Fade-in and fade-out of entering and exiting nodes and edges
- Panning & zooming of the generated graph
See this small demo http://bl.ocks.org/magjac/4acffdb3afbc4f71b448a210b5060bca.
Apologies for posting "advertisement" here. It's because of #1270 https://github.com/ellson/graphviz/issues/1270.
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/ellson/graphviz/issues/1275, or mute the thread https://github.com/notifications/unsubscribe-auth/ACtWz0eymd1TiVuYoiEk3IPtXTRR5zaAks5sbaZRgaJpZM4PBoQB .
You mention @mstefaniuk's graph-viz-d3-js on your readme. Do you have a comparison between the two approaches?
Both graph-viz-d3-js and d3-graphviz uses Viz.js to do the layout. While graph-viz-d3-js uses xdot output from Viz.js which it parses and generates an SVG from it, d3-graphviz uses SVG output directly from Viz.js.
The SVG from graph-viz-d3-js has a different structure than what Graphviz produces, while d3-graphviz produces exactly the same SVG as Viz.js (and Graphviz, since Viz.js is Graphviz translated to Javascript as I understand it).
@mstefaniuk also provides an online DOT editor and viewer through graphviz.it. The d3-graphviz plugin has no such feature.
Both approaches have:
- Rendering of SVG graphs from DOT source
- Animated transition of one graph into another
- Fade-in and fade-out of entering and exiting nodes and edges
- Panning & zooming of the generated graph
In graph-viz-d3-js:
- User customizable transitions per graph category
- A web worker to do the computational intensive layout in
In d3-graphviz:
- Single user customizable transition for the whole graph
- User customizable attributer between the layout and rendering stage (possibly graph-viz-d3-js also has this)
- Edge path tweening
- Node shape tweening
- Produces exactly the same SVG as Viz.js (and Graphviz)
- Full support for current and future DOT constructs automatically through Viz.js
- A true D3 plugin