Making a directed graph from a list of edges in javascript

Question

I have a list of edges where the it goes from key to value

so a => [x,y,z] meaning a is connected to x, to y and to z

I have a long list of these and I want to visualize it, preferably with javascript.

What are some known javascript packages that will do this painlessly (input edges, output graph via javascript)

Similar topic: http://stackoverflow.com/questions/1448319/recommendations-for-visualising-a-directed-graph-in-a-web-ui — user1205577, Mar 19 '13 at 11:37
Also checkout http://stackoverflow.com/questions/4646152/how-to-create-a-multiple-linked-directed-graph-with-javascript - they recommended jsPlumb (http://jsplumb.org/jquery/demo.html). — user1205577, Mar 19 '13 at 11:38

score 2 · Accepted Answer · answered Mar 19 '13 at 11:34

I would highly recommend d3.js, the API is intuitive and does an excellent job of visualising data. Some example outputs are available here (d3noob.org) and here (bl.ocks.org).

A basic walkthrough of a creating directed graph is available from d3noob.org here.

score 2 · Answer 2 · answered Mar 26 '13 at 15:59

You could try Cytoscape.js. It is a graph analysis and visualisation library in Javascript. http://cytoscape.github.com/cytoscape.js/

It even supports edges with endpoint markers (i.e. arrows), which are useful for directed graphs.

Disclaimer: I am involved in Cytoscape.js.

Making a directed graph from a list of edges in javascript

2 Answers2