Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pure JavaScript Graphviz equivalent [closed]

People also ask

What language does Graphviz use?

Graphviz consists of a graph description language named the DOT language and a set of tools that can generate and/or process DOT files: dot. a command-line tool to produce layered drawings of directed graphs in a variety of output formats, such as (PostScript, PDF, SVG, annotated text and so on). neato.

How do I use a DOT file in graphviz?

How do I use graphviz to convert this into an image? For windows: dl the msi and install; Find gvedit.exe in your programs list; Open . dot file in question; Click running person on toolbar; Go to graph -> settings ; change Output file type to file type of your liking and press ok..

What is graphviz in Linux?

GraphViz is a collection of tools for manipulating graph structures and generating graph layouts. Graphs can be either directed or undirected. GraphViz offers both graphical and command-line tools. A Perl interface also is available, but it is not covered here for reasons of generality.

Why is graphviz used?

Graphviz is an open-source python module that is used to create graph objects which can be completed using different nodes and edges. It is based on the DOT language of the Graphviz software and in python it allows us to download the source code of the graph in DOT language.


Take a look at this pure JavaScript implementation of a .dot canvas renderer:

http://ushiroad.com/jsviz/

The library is not documented -- the author definitely ought to publicize and document it more (I'll contact him to suggest he put it up on github, at the very least).

Update: code has been pushed to github: https://github.com/gyuque/livizjs

Update (14/2/2013): another contender has arisen! anybody interested in the subject should definitely take a look at Viz.js's example page and github repo.

Update (7/16/2020): (seven years later) http://webgraphviz.com/ is also great! :-)


After searching far and low I finally found the answer.

The solution was that someone cross compiled Graphviz to Javascript using llvm + emscripten. Here is the link:

http://viz-js.com/

The source can be found at: https://github.com/mdaines/viz.js

And to simply get a webpage up use:

var graphviz_text = ...;
document.body.innerHTML += Viz(graphviz_text, "svg");

After looking at all the options, I found viz.js (https://github.com/mdaines/viz.js/) based off of jsviz and graphviz.js to actually have an API usable from a webpage, and enough examples to understand.


One could try convert graphviz to javascript, just like it was done for the 'PDF reader' example: https://github.com/kripken/emscripten


This is not a ready-made graphviz replacement but d3.js is a library that can do various layouts from given data and would be a great platform to implement graphviz on.

Here's an example of force-directed layouts which is one form of what graphviz does.

Here's a speech about layouts with insanely awesome interactive slides.

To get to know the project, the tutorials are very good.


Here is a cross compilation of Graphviz to Javascript done using Emscripten

https://github.com/bpartridge/graphviz.js