{"id":15029288,"url":"https://github.com/anvaka/vivagraphjs","last_synced_at":"2025-05-14T01:06:13.423Z","repository":{"id":37406238,"uuid":"3003488","full_name":"anvaka/VivaGraphJS","owner":"anvaka","description":"Graph drawing library for JavaScript","archived":false,"fork":false,"pushed_at":"2024-08-30T06:14:55.000Z","size":2923,"stargazers_count":3759,"open_issues_count":114,"forks_count":426,"subscribers_count":179,"default_branch":"master","last_synced_at":"2024-10-29T11:39:40.338Z","etag":null,"topics":["graph","graph-algorithms","graph-drawing","layout-algorithm","ngraph","visualization","vivagraph","webgl"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anvaka.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2011-12-17T22:41:01.000Z","updated_at":"2024-10-25T03:45:38.000Z","dependencies_parsed_at":"2023-12-15T05:21:59.330Z","dependency_job_id":"2d52bf78-09fc-45d5-b668-1e4bbaad1e4d","html_url":"https://github.com/anvaka/VivaGraphJS","commit_stats":{"total_commits":424,"total_committers":20,"mean_commits":21.2,"dds":"0.061320754716981174","last_synced_commit":"2ce9b403871554c6cb7ca53ac589985179eb4fa2"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anvaka%2FVivaGraphJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anvaka%2FVivaGraphJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anvaka%2FVivaGraphJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anvaka%2FVivaGraphJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anvaka","download_url":"https://codeload.github.com/anvaka/VivaGraphJS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247934841,"owners_count":21020729,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["graph","graph-algorithms","graph-drawing","layout-algorithm","ngraph","visualization","vivagraph","webgl"],"created_at":"2024-09-24T20:10:13.814Z","updated_at":"2025-04-08T22:19:05.721Z","avatar_url":"https://github.com/anvaka.png","language":"JavaScript","readme":"VivaGraph [![build status](https://github.com/anvaka/VivaGraphJS/actions/workflows/tests.yaml/badge.svg)](https://github.com/anvaka/VivaGraphJS/actions/workflows/tests.yaml)\r\n==================================================\r\n**VivaGraphJS** is designed to be extensible and to support different\r\nrendering engines and layout algorithms. Underlying algorithms have been broken out into [ngraph](https://github.com/anvaka/ngraph).\r\n\r\nThe larger family of modules can be found by [querying npm for \"ngraph\"](https://www.npmjs.com/search?q=ngraph).\r\n\r\n[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/anvaka/VivaGraphJS?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge)\r\n\r\nEnough talking. Show me the demo!\r\n----------------------------------------------------\r\nSome examples of library usage in the real projects:\r\n\r\n* [Amazon Visualization](http://www.yasiv.com/amazon#/Search?q=graph%20drawing\u0026category=Books\u0026lang=US) Shows related products on Amazon.com, uses SVG as graph output\r\n* [Graph Viewer](http://www.yasiv.com/graphs#Bai/rw496) visualization of sparse matrices collection of the University of Florida. WebGL based.\r\n* [Vkontakte Visualization](http://www.yasiv.com/vk) friendship visualization of the largest social network in Russia [vk.com](https://vk.com). WebGL based.\r\n\r\nTo start using the library include `vivagraph.js` script from the [dist](https://github.com/anvaka/VivaGraphJS/tree/master/dist)\r\nfolder. The following code is the minimum required to render a graph with two nodes and one edge:\r\n\r\n```javascript\r\nvar graph = Viva.Graph.graph();\r\ngraph.addLink(1, 2);\r\n\r\nvar renderer = Viva.Graph.View.renderer(graph);\r\nrenderer.run();\r\n```\r\n\r\nThis will instantiate a graph inside `document.body`:\r\n\r\n![Simple graph](https://github.com/anvaka/VivaGraphJS/raw/master/packages/Images/mingraph.png)\r\n\r\nIf you want to render graph in your own DOM element:\r\n\r\n```javascript\r\nvar graph = Viva.Graph.graph();\r\ngraph.addLink(1, 2);\r\n\r\n// specify where it should be rendered:\r\nvar renderer = Viva.Graph.View.renderer(graph, {\r\n  container: document.getElementById('graphDiv')\r\n});\r\nrenderer.run();\r\n```\r\n\r\nThe code above adds a link to the graph between nodes `1` and `2`. Since nodes\r\nare not yet in the graph they will be created. It's equivalent to\r\n\r\n```javascript\r\nvar graph = Viva.Graph.graph();\r\ngraph.addNode(1);\r\ngraph.addNode(2);\r\ngraph.addLink(1, 2);\r\n\r\nvar renderer = Viva.Graph.View.renderer(graph);\r\nrenderer.run();\r\n```\r\n\r\nCustomization\r\n----------------------------------------------------\r\nVivaGraphJS is all about customization. You can easily change the appearance of\r\nnodes and links. You can also change the layouting algorithm and medium that\r\ndisplays elements of the graph. For example: The following code allows you to\r\nuse WebGL-based rendering, instead of the default SVG.\r\n\r\n```javascript\r\nvar graph = Viva.Graph.graph();\r\ngraph.addLink(1, 2);\r\n\r\nvar graphics = Viva.Graph.View.webglGraphics();\r\n\r\nvar renderer = Viva.Graph.View.renderer(graph,\r\n    {\r\n        graphics : graphics\r\n    });\r\nrenderer.run();\r\n```\r\n\r\n`graphics` class is responsible for rendering nodes and links on the page. And `renderer` orchestrates the process. To change nodes appearance tell `graphics` how to represent them. Here is an example of graph with six people who I follow at github:\r\n\r\n```javascript\r\nvar graph = Viva.Graph.graph();\r\n\r\n// Construct the graph\r\ngraph.addNode('anvaka', {url : 'https://secure.gravatar.com/avatar/91bad8ceeec43ae303790f8fe238164b'});\r\ngraph.addNode('manunt', {url : 'https://secure.gravatar.com/avatar/c81bfc2cf23958504617dd4fada3afa8'});\r\ngraph.addNode('thlorenz', {url : 'https://secure.gravatar.com/avatar/1c9054d6242bffd5fd25ec652a2b79cc'});\r\ngraph.addNode('bling', {url : 'https://secure.gravatar.com/avatar/24a5b6e62e9a486743a71e0a0a4f71af'});\r\ngraph.addNode('diyan', {url : 'https://secure.gravatar.com/avatar/01bce7702975191fdc402565bd1045a8?'});\r\ngraph.addNode('pocheptsov', {url : 'https://secure.gravatar.com/avatar/13da974fc9716b42f5d62e3c8056c718'});\r\ngraph.addNode('dimapasko', {url : 'https://secure.gravatar.com/avatar/8e587a4232502a9f1ca14e2810e3c3dd'});\r\n\r\ngraph.addLink('anvaka', 'manunt');\r\ngraph.addLink('anvaka', 'thlorenz');\r\ngraph.addLink('anvaka', 'bling');\r\ngraph.addLink('anvaka', 'diyan');\r\ngraph.addLink('anvaka', 'pocheptsov');\r\ngraph.addLink('anvaka', 'dimapasko');\r\n\r\n// Set custom nodes appearance\r\nvar graphics = Viva.Graph.View.svgGraphics();\r\ngraphics.node(function(node) {\r\n       // The function is called every time renderer needs a ui to display node\r\n       return Viva.Graph.svg('image')\r\n             .attr('width', 24)\r\n             .attr('height', 24)\r\n             .link(node.data.url); // node.data holds custom object passed to graph.addNode();\r\n    })\r\n    .placeNode(function(nodeUI, pos){\r\n        // Shift image to let links go to the center:\r\n        nodeUI.attr('x', pos.x - 12).attr('y', pos.y - 12);\r\n    });\r\n\r\nvar renderer = Viva.Graph.View.renderer(graph, {\r\n        graphics : graphics\r\n    });\r\nrenderer.run();\r\n```\r\n\r\nThe result is:\r\n\r\n![Custom nodes](https://github.com/anvaka/VivaGraphJS/raw/master/packages/Images/customNode.png)\r\n\r\n\r\nTuning layout algorithm\r\n----------------------------------------------------\r\nGraphs vary by their nature. Some graphs have hundreds of nodes and few edges (or links), some might connect every node with every other. Tuning the physics often helps get the best layout.\r\nConsider the following example:\r\n\r\n```javascript\r\nvar graphGenerator = Viva.Graph.generator();\r\nvar graph = graphGenerator.grid(3, 3);\r\nvar renderer = Viva.Graph.View.renderer(graph);\r\nrenderer.run();\r\n```\r\n\r\nGraph generators are part of the library, which can produce classic graphs.\r\n`grid` generator creates a grid with given number of columns and rows. But with\r\ndefault parameters the rendering is pretty ugly:\r\n\r\n![Grid 3x3 bad](https://github.com/anvaka/VivaGraphJS/raw/master/packages/Images/gridBad.png)\r\n\r\nLet's tweak the original code:\r\n\r\n```javascript\r\nvar graphGenerator = Viva.Graph.generator();\r\nvar graph = graphGenerator.grid(3, 3);\r\n\r\nvar layout = Viva.Graph.Layout.forceDirected(graph, {\r\n    springLength : 10,\r\n    springCoeff : 0.0005,\r\n    dragCoeff : 0.02,\r\n    gravity : -1.2\r\n});\r\n\r\nvar renderer = Viva.Graph.View.renderer(graph, {\r\n    layout : layout\r\n});\r\nrenderer.run();\r\n```\r\n\r\nNow the result is much better:\r\n\r\n![Grid 3x3](https://github.com/anvaka/VivaGraphJS/raw/master/packages/Images/gridGood.png)\r\n\r\nYou can tune values during simulation with `layout.simulator.springLength(newValue)`, `layout.simulator.springCoeff(newValue)`, etc. See all the values that you can tune in [this source file](https://github.com/anvaka/ngraph.physics.simulator/blob/master/index.js#L12).\r\n\r\nTuning layout algorithm is definitely one of the hardest part of using this library.\r\nIt has to be improved in future to simplify usage. Each of the force directed\r\nalgorithm parameters are described in the source code.\r\n\r\nDesign philosophy/roadmap\r\n-------------------------\r\n\r\nUntil version 0.7.x VivaGraph was a single monolithic code base. Starting from\r\n0.7.x the library is bundled from small npm modules into `Viva` namespace.\r\nAll these modules are part of a larger [ngraph](https://github.com/anvaka/ngraph)\r\nfamily. `ngraph` modules support rendering graphs into images, 3D rendering,\r\nintegration with [gephi](https://gephi.org/), pagerank calculation and many more.\r\n\r\nVersion 0.7 is a compromise between maximum backward compatibility and ngraph\r\nflexibility. Eventually I hope to further simplify API and provide interface\r\nfor custom builds.\r\n\r\nUpgrade guide\r\n-------------\r\n\r\nPlease refer the [upgrade guide](https://github.com/anvaka/VivaGraphJS/blob/master/docs/upgrade_guide.md) to see how to update older versions of the library to the latest one.\r\n\r\nLocal Build\r\n-----------\r\nRun the following script:\r\n```\r\ngit clone https://github.com/anvaka/VivaGraphJS.git\r\ncd ./VivaGraphJS\r\nnpm install\r\ngulp release\r\n```\r\nThe combined/minified code should be stored in ```dist``` folder.\r\n\r\nLooking for alternatives?\r\n-------------------------\r\n\r\nI'm trying to put up a list of all known graph drawing libraries.\r\nPlease [find it here](http://anvaka.github.io/graph-drawing-libraries/#/all)\r\n\r\nI need your feedback\r\n----------------------------------------------------\r\nDisclaimer: I wrote this library to learn JavaScript. By no means I pretend to\r\nbe an expert in the language and chosen approach to design may not be the optimal.\r\nI would love to hear your feedback and suggestions.\r\n\r\nThough I implemented this library from scratch, I went through many existing\r\nlibraries to pick the best (at my view) out of them. If you are evaluating libraries\r\nfor your project make sure to [check them out](http://anvaka.github.io/graph-drawing-libraries/#/all)\r\nas well.\r\n\r\nMy goal is to create highly performant javascript library, which serves in the\r\nfield of graph drawing. To certain extent I achieved it. But I have no doubt\r\nthere is much more to improve here.\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanvaka%2Fvivagraphjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanvaka%2Fvivagraphjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanvaka%2Fvivagraphjs/lists"}