Awesome

d3-dot-graph

This module provides D3js compatible library to parse and load files in graphviz DOT (.dot) (graph description language) format.

why?

While working on Java Platform Module System migration projects coming with Java 9 (as of August 2017), I am heavily using jdeps which is generating DOT (.dot) files. These are usually visualised using dot tool of graphviz.

In most cases it is enough, but I wanted to have nicer D3js visualisation and interaction.

example

See sample summary.dot file generated by jdeps visualised using D3js here: index.html

Inspired by Mike Bostock's Mobile Patent Suits

usage

d3.dot(url, callback);

Usage is identical with well known d3.json([url], [callback]) or d3.csv([url], [callback]).

<script src="https://cdn.jsdelivr.net/gh/gmamaladze/d3-dot-graph@1.0.0/build/d3-dot-graph.min.js"></script>
<script>

d3.dot("/path/to/graph.dot", function(error, graph) {
  if (error) throw error;
  console.log(JSON.stringify(graph, null, true));
  //{
  //  "nodes": [ {"id": "Myriel"}, {"id": "Napoleon"}],
  //  "links": [ {"source": "Myriel"}, {"target": "Napoleon"}]
  //}  
});

</script>

parser

The parser was generated using PEG.js. The grammer is taken from here cpettitt/graphlib-dot. Thanks to Chris Pettitt.

You can also use parser independently from loader and converter.

build

npm install     #install dependencies and build
npm run build   #generate parser, and rollup

rollup -c -w (rollup --config --watch) #very convenient rolls the whenever sources are changed