How to illustrate multigraphs in Javascript? [closed]

Question

Closed. This question is seeking recommendations for software libraries, tutorials, tools, books, or other off-site resources. It does not meet Stack Overflow guidelines. It is not currently accepting answers.

We don’t allow questions seeking recommendations for software libraries, tutorials, tools, books, or other off-site resources. You can edit the question so it can be answered with facts and citations.

Closed 5 years ago.

The community reviewed whether to reopen this question 3 years ago and left it closed:

Original close reason(s) were not resolved

Improve this question

This question is looking for a practical and easy way for drawing multigraphs using Javascript.

First of all look at this question. None of those libraries support Multigraphs (or Pseudographs ). I mean I can't generate graphs like this:

Some Multigraph

Is there any jQuery plugin (or javascript library) out there for this purpose ?

I thought i can use WolframAlpha's API and use its images, something like this:

enter image description here

but it have lots of problem:

I can't move nodes or add remove edges interactively.
Only 2000 API calls per month. Not enough.
I can't produce large or intermediate graphs.
They are really ugly!

Please help me if you know some javascript library in order to draw Multigraphs, or anyway to produce such graphs (something like Dracula Graph Library but with ability to draw Multigraphs).

yes its needed for a website about mathematics and i want to interactively generate multigraphs from users input data. — Michel Gokan Khan
– Michel Gokan Khan, Commented Nov 29, 2011 at 10:30
For the record, a number of the libraries listed in the question linked do support multigraphs, at least now. — Andrew
– Andrew, Commented Feb 15, 2021 at 23:33

Michel Gokan Khan · Accepted Answer · 2022-01-11 06:32:37Z

12

Cytoscape.JS supports multigraphs, is pure Javascript, and uses the new HTML 5 Canvas for performance. Its design intent is general purpose graph visualization/manipulation.

https://js.cytoscape.org/

edited Jan 11, 2022 at 6:32

Michel Gokan Khan

2,6734 gold badges32 silver badges57 bronze badges

answered Jan 11, 2013 at 19:04

Developer

3063 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Helder Pereira · Accepted Answer · 2016-06-30 11:13:52Z

5

If you are allowed to use Google Charts API you may refer to this

http://code.google.com/apis/chart/image/docs/gallery/graphviz.html

Example:

https://chart.googleapis.com/chart?cht=gv&chl=graph{C_0--H_0[type=s];C_0--H_1[type=s];C_0--H_2[type=s];C_0--C_1[type=s];C_1--H_3[type=s];C_1--H_4[type=s];C_1--H_5[type=s]}

graph

edited Jun 30, 2016 at 11:13

Helder Pereira

5,7713 gold badges39 silver badges55 bronze badges

answered Nov 29, 2011 at 10:05

Prashant Bhate

11.2k9 gold badges51 silver badges84 bronze badges

1 Comment

Michel Gokan Khan Over a year ago

@parashant-bhate: great suggestion. it supports Multigraphs too. It will be perfect if I could make it more interactive. Like click over nodes in order to delete them or move node or delete edges by clicking over them. thanks again

Konstantin Pribluda · Accepted Answer · 2011-11-29 10:05:41Z

3

I'm affraid you will have to do some development yourself. Raphael.js is pretty capable in creating and manipulating svg - would be good starting point

answered Nov 29, 2011 at 10:05

Konstantin Pribluda

12.3k1 gold badge33 silver badges38 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:09:38Z

3

Some of those graph visualization libraries (mentioned in this question) DO support Multigraphs and allow dragging/placement of nodes

jsplumb: http://jsplumb.org/jquery/stateMachineDemo.html

possibly http://js-graph-it.sourceforge.net/ may support multigraphs.

but as far as your issue

4- Its really ugly!

These may not appeal to your aesthetic.

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Jan 17, 2012 at 16:19

Nate-

1471 silver badge9 bronze badges

Comments

tmaximini · Accepted Answer · 2012-04-26 17:49:48Z

2

I think paper.js (http://paperjs.org) will get you also pretty close.

answered Apr 26, 2012 at 17:49

tmaximini

8,4937 gold badges50 silver badges69 bronze badges

Comments

cantdutchthis · Accepted Answer · 2014-01-27 10:57:40Z

2

You might want to check this one out: www.d3js.org

You'd have to do a lot yourself (make your own SVG and such), but the library is very powerful.

edited Jan 27, 2014 at 10:57

answered Aug 15, 2012 at 19:02

cantdutchthis

35.2k17 gold badges80 silver badges116 bronze badges

Comments

andreapavan · Accepted Answer · 2011-11-29 09:55:33Z

1

I recently used Graphviz to draw the connections between some authors pubblications. Graphviz is open source graph visualization software. The Graphviz layout programs take descriptions of graphs in a simple text language, and make diagrams in useful formats, such as images and SVG for web pages, PDF or Postscript for inclusion in other documents; or display in an interactive graph browser.

For example i used a simple DOT file to write all the connection between the authors and I produced a PNG file.

http://www.graphviz.org/

Here there is all the documentation that you need and in the gallery section you can see a lot of output example.

Hoping it could be helpful.

answered Nov 29, 2011 at 9:55

andreapavan

6971 gold badge7 silver badges24 bronze badges

1 Comment

Michel Gokan Khan Over a year ago

thanks, but i want interactivity generate graphs via user input in my webpage.

Sebastian · Accepted Answer · 2014-01-17 08:03:09Z

In a commercial scenario, take a look at yFiles for HTML:

It easily supports multi-graphs and does not look too ugly, I believe:

Multi-graphs - laid out automatically using yFiles for HTML

^{(These graphs have been laid out automatically, manual placement is also possible.)}

Of course this is a matter of taste, so if you don't like the look, you can change any aspect of the visualization, like in the style tutorial.

The API offers full interactive editing capabilities and being a pure client-side solution, of course there is no API call count limit.

Large graphs are still a problem with todays' Javascript engines, but only if "large" means more than thousands of elements. With virtualization (considering only what is currently visible in the viewport during rendering), you can get good performance with thousands of elements.

Disclaimer: I work for the company that creates the library, on SO/SE, however I do not represent my employer. My posts and comments are my own.

Mark Jin · Accepted Answer · 2017-10-02 20:45:33Z

1

You can check jsnetworkx (http://jsnetworkx.org/)

It is a js version of python graph library which supports multi-graph. It has a draw function which visualizes the graph using D3.js. It is available for both browser and node.js.

edited Oct 2, 2017 at 20:45

answered Oct 2, 2017 at 18:31

Mark Jin

2,9913 gold badges27 silver badges39 bronze badges

Comments

Jan Jongboom · Accepted Answer · 2011-11-29 10:00:11Z

0

Best bet would be to render them on the server (or use it as an applet) with JGraphT.

answered Nov 29, 2011 at 10:00

Jan Jongboom

27.5k10 gold badges85 silver badges121 bronze badges

3 Comments

Michel Gokan Khan Over a year ago

i want a "javascipt" library ... JGraphT is a Java library.

Jan Jongboom Over a year ago

I know, but there are no javascript libraries for that. As you already pointed out that you might just wanted to use Wolfram API which spits out images, this could be a viable solution.

Michel Gokan Khan Over a year ago

I don't know why I'm insist not to use flash or applets ... now I'm working on @Konstantin's solution and do the development by myself. Of course after finishing development I'll make it fully open source. Thanks anyway.

Collectives™ on Stack Overflow

How to illustrate multigraphs in Javascript? [closed]

10 Answers 10

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

3 Comments

Linked

Related