https://github.com/gmamaladze/d3-dot-graph

This module provides D3js compatible library to parse and load files in graphviz DOT (.dot) (graph description language) format.
https://github.com/gmamaladze/d3-dot-graph

d3 d3js d3v4 dot graph-description-language graphviz java9-jigsaw

Last synced: 27 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/gmamaladze/d3-dot-graph
• Owner: gmamaladze
• License: mit
• Created: 2017-08-31T10:26:34.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2017-09-01T14:06:26.000Z (almost 7 years ago)
• Last Synced: 2024-02-25T06:33:17.286Z (4 months ago)
• Topics: d3, d3js, d3v4, dot, graph-description-language, graphviz, java9-jigsaw
• Language: HTML
• Homepage:
• Size: 114 KB
• Stars: 37
• Watchers: 8
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-graphviz.github.io - d3-dot-graph - This module provides D3js compatible library to parse and load files in graphviz DOT (.dot) (graph description language) format. (Content / Language Bindings)
• awesome-graphviz - d3-dot-graph - This module provides D3js compatible library to parse and load files in graphviz DOT (.dot) (graph description language) format. (Content / Language Bindings)

README

        
# d3-dot-graph

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

## why?

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

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

## example    

See sample `summary.dot` file generated by [jdeps][jdeps] visualised using [D3js][d3js] here: [index.html][example]

![](doc/digraph.png "Sample .dot file generated by jdeps visualised using D3js")

Inspired by Mike Bostock's [Mobile Patent Suits][mbostock]

## usage

```js

d3.dot(url, callback);

```

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

```html

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"}]

  //}  

});

```

## parser

The parser was generated using [PEG.js][pegjs]. The grammer is taken from here [cpettitt/graphlib-dot](https://github.com/cpettitt/graphlib-dot). Thanks to Chris Pettitt.

You can also use parser independently from loader and converter.

## build

```shell

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

```

[d3js]: https://www.d3js.org

[dot]: https://en.wikipedia.org/wiki/DOT_(graph_description_language)

[pegjs]: https://pegjs.org

[jpms]: http://openjdk.java.net/projects/jigsaw/spec/sotms

[jdeps]: https://docs.oracle.com/javase/9/tools/jdeps.htm

[graphviz]: http://www.graphviz.org

[mbostock]: http://bl.ocks.org/mbostock/1153292

[example]: https://cdn.rawgit.com/gmamaladze/d3-dot-graph/cf08847e/example/index.html