Force-based graph drawing in JavaScript

Today I woud like to show you a remake of my previous flash app, which I rewrote into HTML5. It is the force-based graph algorithm form my previous article.

HTML5 application

I rewrote AS3 into JavaScript, I used a HTML5 component <canvas> and it's methods for drawing the graphs. I also added controls for attraction - repulsion. You can send your graph to your friend, since the definition of the graph is attached to URL.

Check it out at g.ivank.net!

Widget for yor Webpage

You can insert your graph into your webpage, using <iframe> tag. Below is the grpah of a cube. You can drag the vertices and play with it.

Unlike the flash version, this works perfectly on iPad! :)

Old comments (closed because of spam)

21 Comments

  1. Jime said:

    hi there , this is amazing, well done, could you just tell me how did you add the attraction and the repulsion.

    also could you just provide me with the code please

    thanks

    September 9th, 2011
  2. Ivan Kuckir said:

    Hello, thank you :)

    Attraction and Repulsion are just coefficients (numbers), I divide or multiply other numbers by them, when computing the drawing.

    JavaScript is not compiled language, so you can see the code in source code of the page. But if you want to understand it, I recommend you to read a Wikipedia article about it.

    November 12th, 2011
  3. Yatko said:

    Amazingly cool and smooth ;)

    April 7th, 2012
  4. vicky mudgal said:

    awesome,,,

    April 7th, 2012
  5. Domitori said:

    wooohooo! i made fulleren C60
    60:1-2,2-3,3-4,4-5,5-6,6-1,6-7,7-8,8-9,9-10,10-5,7-8,10-11,11-12,12-4,1-13,13-14,14-7,3-15,15-16,16-17,17-2,9-18,18-19,19-20,20-8,17-21,21-22,22-13,23-15,23-24,24-12,20-25,25-26,26-14,26-27,27-28,28-22,18-29,29-30,30-11,30-31,31-32,32-24,31-33,33-34,34-29,34-35,35-36,36-19,36-37,37-38,38-25,38-39,39-27,21-40,40-41,41-28,41-42,42-43,43-39,43-44,44-45,45-37,16-46,46-47,47-40,42-48,48-49,49-47,46-50,50-51,51-23,51-52,52-32,44-53,53-48,49-54,54-50,54-55,55-56,56-52,58-55,33-60,56-60,58-53,60-57,57-59,59-35,57-58,59-45

    September 18th, 2012
  6. Domitori said:

    And here’s 4x4x4 cube
    64:1-2,1-5,1-17,2-3,2-6,2-6,2-18,3-4,3-7,3-19,4-8,4-20,5-6,5-9,5-21,6-7,6-10,6-22,7-8,7-11,7-23,8-12,8-24,9-10,9-13,9-25,10-11,10-14,10-26,11-12,11-15,11-27,12-16,12-28,13-14,13-29,14-15,14-30,15-16,15-31,16-32,17-18,17-21,17-33,18-19,18-22,18-34,19-20,19-23,19-35,20-24,20-36,21-22,21-25,21-37,22-23,22-26,22-38,23-24,23-27,23-39,24-28,24-40,25-26,25-29,25-41,26-27,26-30,26-42,27-28,27-31,27-43,28-32,28-44,29-30,29-45,30-31,30-46,31-32,31-47,32-48,33-34,33-37,33-49,34-35,34-38,34-50,35-36,35-39,35-51,36-40,36-52,37-38,37-41,37-53,38-39,38-42,38-54,39-40,39-43,39-55,40-44,40-56,41-42,41-45,41-57,42-43,42-46,42-58,43-44,43-47,43-59,44-48,44-60,45-46,45-61,46-47,46-62,47-48,47-63,48-64,49-50,49-53,50-51,50-54,51-52,51-55,52-56,53-54,53-57,54-55,54-58,55-56,55-59,56-60,57-58,57-61,58-59,58-62,59-60,59-63,60-64,61-62,62-63,63-64

    September 24th, 2012
  7. Ivan Kuckir said:

    Domitori: that is cool! Did you generated it with computer, or did you write it yourself? :D You must have a perfect memory and imagination!

    September 24th, 2012
  8. Domitori said:

    Both made by myself:D First was very hard to end. Second is easy to complete with pen and piece of paper. But i thinking about generating completed sequences. Was program on python for fully-linked graph (like 4:1-2,1-3,1-4,2-3,2-4,3-4).But it’s too easy. Maybe you got any interesting things to do? Wanna test my imagination and memory :D
    Is avatars generated?

    September 25th, 2012
  9. Ivan Kuckir said:

    I don’t know too much about interesting graphs or chemistry :( That’s why I am wondering each time somebody sends me some cool graph :)

    I was thinking aboud adding some database of graphs, but actually, anybody can make his own database and just attach links – http://g.ivank.net/#your_graph. It would be cool if some related programs offered an option for exporting graphs in “our notation”.

    Avatars are generated by gravatar.com, it is some hash of your nick.

    September 25th, 2012
  10. Sebastien said:

    > It would be cool if some related programs offered
    > an option for exporting graphs in “our notation”.

    Three months ago, I wrote some code to export a graph from the Sage open source math software into “your notation”. The code is under review here :

    http://trac.sagemath.org/sage_trac/ticket/13418

    Code reviewers are wondering if you would like to make your code open source?

    November 16th, 2012
  11. Ivan Kuckir said:

    Hey! That is cool! Thanks :)

    JavaScript is not compiled, so everybody can read what my is code doing (thus source is open).

    November 26th, 2012
  12. KSA said:

    This is really incredible! I made a Rhombicuboctahedron (http://en.wikipedia.org/wiki/Rhombicuboctahedron) (27 faces, 48 edges, 24 vertexes) on your page and I’m amazed how the program figures out where the points end up just by knowing which ones are connected.
    Here’s the Rhombicuboctahedron: http://g.ivank.net/#24:1-2,2-3,3-4,4-5,5-6,6-7,7-8,8-1,1-9,2-10,3-10,4-11,5-11,6-12,7-12,8-9,9-10,10-11,11-12,12-9,1-13,2-14,3-15,4-16,5-17,6-18,7-19,8-20,13-14,14-15,15-16,16-17,17-18,18-19,19-20,20-13,13-21,14-22,15-22,16-23,17-23,18-24,19-24,20-21,21-22,22-23,23-24,24-21

    SO COOL DUDE!

    January 20th, 2013
  13. KSA said:

    I have a suggestion, if possible. Make the dots in the back NOT overlap any lines in front of it. It makes the model confusing.

    January 21st, 2013
  14. Ivan Kuckir said:

    Hey KSA, thank you for your Rhombi thing, I added it to the main site :) BTW. I am doing my 3D animation with SVG, which doesn’t have any 3D features (I need Z-sorting) and I am afraid, that manual sorting in each frame may decrease the performance :( That’s why I just draw edges and after that I draw vertices.

    January 26th, 2013
  15. Un applet para dibujar grafos | :: ZTFNews.org said:

    [...] en Le blog-notes mathématique du coyote (más información aquí) Share this:StumbleUponDiggRedditMe gusta:Me gusta [...]

    March 10th, 2013
  16. Mark Johnstone said:

    This is amazing. Well done. I would however like to know how to add labels to vertices and edges? I am a linguistics student and I would like to use this tool to model relationships between words in languages.

    March 16th, 2013
  17. c trenor said:

    Great app which is a hit with my math students.

    Consider a specialized version to model molecules.

    Each ball has a diameter parameter, and each connection

    would have both a length and thickness parameter.

    ct

    May 8th, 2013
  18. Roshaan Riaz said:

    Hey man great work. I am impressed by your work. I want to make this graph all with these features in java. But unfortunately I could not find any learner or anything related in java to make it. I found jung libraries of java but due to lack of its tutorials I could not make a graph like it. I just want to ask you that can you help me in making it in java? just want some guide how to start it? mean is there any algorithm or anything?
    I will appreciate your help.

    June 25th, 2013
  19. Gus said:

    The Good Will Hunting problem solutions:

    10:1-2,1-3,1-4,1-5,1-6,1-7,1-8,1-9,1-10
    10:1-2,1-3,1-4,1-5,1-6,1-7,1-8,2-9,2-10
    10:1-2,1-3,1-4,1-5,1-6,1-7,2-8,2-9,2-10
    10:1-2,1-3,1-4,1-5,1-6,2-7,2-8,2-9,2-10
    10:1-2,2-3,1-4,1-5,1-6,1-7,2-8,3-9,3-10
    10:1-2,2-3,1-4,1-5,1-6,2-7,3-8,3-9,3-10
    10:1-2,2-3,1-4,1-5,1-6,2-7,2-8,3-9,3-10
    10:1-2,2-3,1-4,1-5,2-6,2-7,2-8,3-9,3-10
    10:1-2,2-3,3-4,1-5,1-6,2-7,3-8,4-9,4-10
    10:1-2,1-3,1-4,2-5,2-6,3-7,3-8,4-9,4-10

    January 18th, 2014
  20. Eugene said:

    And here’s a penis (I think, somebody should draw this):
    http://g.ivank.net/#22:1-2,2-3,3-4,4-5,5-6,6-7,7-8,8-9,9-10,10-11,11-12,12-1,1-7,2-13,13-14,14-15,15-16,16-17,17-18,18-19,19-20,20-21,21-22,22-12
    :)

    January 21st, 2014
  21. Danny Thomas said:

    ZQqPKa4jhEs

    February 21st, 2025