Graphviz in your browser through the new D3 plugin d3-graphviz

[magjac]

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.

[magneticnorth]

Nice! Happy to see it's in d3.v4 too.

On Thu, Aug 24, 2017 at 12:35 PM, Magnus Jacobsson <notifications@github.com

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 .

[Pike]

You mention @mstefaniuk's graph-viz-d3-js on your readme. Do you have a comparison between the two approaches?

[magjac]

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