Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mstefaniuk/graph-viz-d3-js
Graphviz web D3.js renderer
https://github.com/mstefaniuk/graph-viz-d3-js
animation dot graphviz javascript parse
Last synced: 27 days ago
JSON representation
Graphviz web D3.js renderer
- Host: GitHub
- URL: https://github.com/mstefaniuk/graph-viz-d3-js
- Owner: mstefaniuk
- License: mit
- Created: 2013-12-30T21:20:07.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-09-07T11:04:32.000Z (almost 7 years ago)
- Last Synced: 2024-04-24T13:28:03.311Z (2 months ago)
- Topics: animation, dot, graphviz, javascript, parse
- Language: JavaScript
- Homepage:
- Size: 11.1 MB
- Stars: 313
- Watchers: 19
- Forks: 38
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: License
Lists
- awesome-graphviz.github.io - graph-viz-d3-js - Bower component graphviz-d3-renderer renders Graphviz source in the browser with d3.js (Content / Language Bindings)
- awesome-stars - mstefaniuk/graph-viz-d3-js - Graphviz web D3.js renderer (JavaScript)
- awesome-graphviz - graph-viz-d3-js - Bower component graphviz-d3-renderer renders Graphviz source in the browser with d3.js (Content / Language Bindings)
README
Graphviz *dot* in your browser
==============================
Bower component `graphviz-d3-renderer` renders [Graphviz](http://graphviz.org) source in the browser with [d3.js](https://github.com/mbostock/d3).
Check it out on [Graphviz fiddling website](http://graphviz.it/).
[](https://travis-ci.org/mstefaniuk/graph-viz-d3-js)
[](https://coveralls.io/r/mstefaniuk/graph-viz-d3-js?branch=master)
[](https://gitter.im/mstefaniuk/graph-viz-d3-js)
Contents
--------
* `dot` parser with lax mode to verify Graphviz input
* `dot` mode for ACE editor
* stage data renderer with `d3.js`
Design
------
DOT parser is written in [PEG.js](https://github.com/dmajda/pegjs) has lax mode to parse source to the end with all errors.
[Graphviz](http://graphviz.org) is embedded in browser using [viz.js](https://github.com/mdaines/viz.js).
Instead of using SVG directly it uses `xdot` format and parses it. Data structure of the output is drawn using
[d3.js](https://github.com/mbostock/d3) with animations during rendering.
Usage
-----
To include it in your project simply use `Bower`:
```
bower install graphviz-d3-renderer --save
```
Note that it needs `require.js` to work. Before loading proper paths should be defined for renderer and its dependecies (`d3.js` and `worker` for `require.js` plugin):
```javascript
requirejs.config({
//By default load any module IDs from js/lib
baseUrl: 'js',
//except, if the module ID starts with "app",
//load it from the js/app directory. paths
//config is relative to the baseUrl, and
//never includes a ".js" extension since
//the paths config could be for a directory.
paths: {
d3: '/bower_components/d3/d3',
"dot-checker": '/bower_components/graphviz-d3-renderer/dist/dot-checker',
"layout-worker": '/bower_components/graphviz-d3-renderer/dist/layout-worker',
worker: '/bower_components/requirejs-web-workers/src/worker',
renderer: '/bower_components/graphviz-d3-renderer/dist/renderer'
}
});
```
Then you can inject it into you app:
```javascript
require(["renderer"],
function (renderer) {
dotSource = 'digraph xyz ...';
// initialize svg stage
renderer.init("#graph");
// update stage with new dot source
renderer.render(dotSource);
});
```
Now you can even zoom / drag your graph
```javascript
require(["renderer"],
function (renderer) {
dotSource = 'digraph xyz ...';
// initialize svg stage. Have to get a return value from renderer.init
// to properly reset the image.
zoomFunc = renderer.init({element:"#graph", extend:[0.1, 10]});
// update stage with new dot source
renderer.render(dotSource);
// for saving the image,
$('#copy-button').on('click', function(){
$('#copy-div').html(renderer.getImage({reset:true, zoomFunc:zoomFunc}));
});
// if do not need to reset the image before saving the image
$('#copy-button').on('click', function(){
$('#copy-div').html(renderer.getImage());
});
});
```
Roadmap
-------
* Test suite using Graphviz gallery examples (50% done)
* Improve animations with path tweening and concatenation of arrow heads with arrow arcs
* Custom `viz.js` compile with `xdot` output only to optimize size
Building and contributing
-------
To make controlled changes you need `node` and `grunt`. When you add a new feature you must cover it with unit tests.
```bash
> grunt build test
```
When everything is ready you can build also dist version (takes some time).
```bash
> grunt all
```
License
-------
Currently project is available on LGPL so you can use it unmodified in free or commercial projects. If you add improvements
to it you must share them.