Comparison of Graph Drawing Options for the Physics Derivation Graph

navigation / documentation overview / design choices / Graph drawing comparison

Recommendation: Read the user documentation and FAQ first. This page assumes familiarity with the jargon used in the Physics Derivation Graph.

Constraints: Graph drawing that is free and open source. (See Design Principles.)

d3js and graphviz are currently used.

See https://en.wikipedia.org/wiki/Diagramming_software

https://jsplumbtoolkit.com/

https://github.com/jsplumb/community-edition

Used by https://pythontutor.com/visualize.html#mode=display

Write-up: https://pg.ucsd.edu/publications/Online-Python-Tutor-web-based-program-visualization_SIGCSE-2013.pdf

https://gephi.org/gephi-lite/

See https://github.com/allofphysicsgraph/task-tracker/issues/65

Gephi has a web interface that provides intuitive interactive creation of nodes and edges

Gephi uses a custom format, https://gexf.net/, and Neo4j has a plugin for exporting to gexf: https://neo4j.com/labs/apoc/4.2/export/gephi/
https://neo4j.com/labs/apoc/5/import/gexf/

https://gojs.net/latest/

As of Oct 2020, 3 year distribution: $3,495

open source, free browser-based graph rendering

See https://stackoverflow.com/questions/7034/graph-visualization-library-in-javascript

JS-Graph-It

http://js-graph-it.sourceforge.net/index.html

Cytoscape

http://cytoscape.github.io/cytoscape.js/

https://github.com/cytoscape/cytoscape.js

supports pictures as nodes: http://jsbin.com/kahar/6/edit

Dracula

http://www.graphdracula.net/

supports PNG and SVG as nodes, see http://www.graphdracula.net/documentation/

Canviz

https://code.google.com/p/canviz/

ArborJS

http://arborjs.org/

force-directed layout algorithm

SigmaJS

http://sigmajs.org/

D3JS

http://d3js.org/

JointJS

http://jointjs.com/download

Springy

https://github.com/dhotson/springy

http://dhotson.github.io/springy/demo.html

arbor

https://github.com/samizdatco/arbor

Gilad

http://giladlotan.com/html5-interactive-directed-graph/

large graph viz HTML5

https://gitorious.org/web-based-large-graph-visualization-with-html-5/web-based-large-graph-visualization-with-html-5/source/HEAD:

JSPlumbToolkit

http://jsplumbtoolkit.com/demo/home/dom.html

GraphViz

produces static output (cannot be manipulated through GUI)

https://en.wikipedia.org/wiki/Graphviz

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

http://www.graphviz.org/

Gephi

meant for analysis of graph properties, not graph manipulation

https://gephi.org/

https://gephi.org/users/supported-graph-formats/

GEXF, GDF, GML, GraphML, Pajek NET, GraphViz DOT, CSV, UCINET DL, Tulip TPL, Netdraw VNA, Spreadsheet

pictures as nodes:

https://gephi.org/plugins/image-preview/

yEd

good for editing the visual graph. Offers multiple layout options

https://en.wikipedia.org/wiki/YEd

http://www.yworks.com/en/products_yed_download.html

works with GraphML

pictures (SVG) as nodes:

http://yed.yworks.com/support/qa/48/how-can-i-use-my-own-node-symbols-in-yed

http://yed.yworks.com/support/qa/7/can-i-use-latex-to-format-labels

Dia

doesn't support force-based layout.

http://live.gnome.org/Dia/

http://projects.gnome.org/dia/

https://en.wikipedia.org/wiki/Dia_(software)

Calligra Flow (formerly Kivio)

https://en.wikipedia.org/wiki/Calligra_Flow

http://www.calligra.org/get-calligra/

Processing

Example of Pre-existing graph: http://www.openprocessing.org/visuals/?visualID=9379

would need to use pictures for nodes instead of Latex

See https://github.com/allofphysicsgraph/proofofconcept/tree/gh-pages/sandbox/processing

NetworkX

See NetworkX on database options

Bokeh

Bokeh seems to support Latex via MathJax (see https://docs.bokeh.org/en/latest/docs/user_guide/styling.html#adding-mathematical-notations) but not for node labels on graphs.

https://docs.bokeh.org/en/latest/docs/reference/models/graphs.html