Saturday, March 04, 2017

DOT (GV) Graph Definition Language

Playing around with graphing tools and ran across DOT (.GV) which meets the needs for simplicity that I have with a current side project. Just using this page to collect information in case it's useful to someone else.

GVEdit (Graphviz)
http://www.graphviz.org/

Helpful StackOverflow posting
http://stackoverflow.com/questions/6344318/pure-javascript-graphviz-equivalent

Graphviz in the Browser
http://www.webgraphviz.com/
Based on this JavaScript library
https://github.com/mdaines/viz.js

Google Charts Image Charts API also supports DOT for now... (deprecation notice)
https://developers.google.com/chart/image/docs/gallery/graphviz

As long as Google supports it, this is a no-brainer way to show DOT scripts in the browser.

Using Google Charts Image Charts API:

 https://chart.googleapis.com/chart?cht=gv&chl=digraph{node1[label="Root%20Node"][shape=box];node1->node2[dir=both][label="%202%20inches"];node2->{node3%20node4%20node5}[color=green]}&chrs=300x300  


This link is currently available to test DOT scripts using the Google Charts Image Charts API:
http://sandbox.kidstrythisathome.com/erdos/

DotViewer (Android App)
https://play.google.com/store/apps/details?id=com.woiapp.dotviewer

Some DOT shortcuts
Main Documentation Page
http://www.graphviz.org/Documentation.php
DOT Guide PDF Version
http://www.graphviz.org/pdf/dotguide.pdf
Polygon Shapes
http://www.graphviz.org/content/node-shapes#polygon
Attributes [attr=value]
http://www.graphviz.org/content/attrs
Special Characters
http://www.graphviz.org/doc/char.html
Colors Names
http://www.graphviz.org/content/color-names
Further related research into plotting dot language in the browser:

vis.js
http://visjs.org/

Import Data in the DOT Language
http://visjs.org/docs/network/#importDot

Supported shapes in vis.js (DOT has many more that are not currently supported): database, circle, ellipse, box, image, text, dot, star, triangle, triangleDown, square, icon

Useful comparison of Graph Libraries
https://anvaka.github.io/graph-drawing-libraries/#/all




No comments: