{"id":13522300,"url":"https://github.com/dhotson/springy","last_synced_at":"2025-05-14T08:07:44.815Z","repository":{"id":872303,"uuid":"612950","full_name":"dhotson/springy","owner":"dhotson","description":"A force directed graph layout algorithm in JavaScript","archived":false,"fork":false,"pushed_at":"2024-06-06T21:13:41.000Z","size":590,"stargazers_count":1886,"open_issues_count":29,"forks_count":237,"subscribers_count":42,"default_branch":"master","last_synced_at":"2025-05-10T10:45:17.238Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://getspringy.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dhotson.png","metadata":{"files":{"readme":"README.mkdn","changelog":null,"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":"2010-04-16T02:19:49.000Z","updated_at":"2025-03-22T11:21:06.000Z","dependencies_parsed_at":"2024-11-12T21:00:24.108Z","dependency_job_id":"750f029b-e70a-4a0d-bd44-ffb94b186c9c","html_url":"https://github.com/dhotson/springy","commit_stats":{"total_commits":108,"total_committers":24,"mean_commits":4.5,"dds":0.5555555555555556,"last_synced_commit":"9654b64f85f7f35220eaafee80894d33a00ef5ac"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhotson%2Fspringy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhotson%2Fspringy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhotson%2Fspringy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhotson%2Fspringy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dhotson","download_url":"https://codeload.github.com/dhotson/springy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254101557,"owners_count":22014908,"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":[],"created_at":"2024-08-01T06:00:45.334Z","updated_at":"2025-05-14T08:07:39.807Z","avatar_url":"https://github.com/dhotson.png","language":"JavaScript","readme":"Springy\n====\n\nA force directed graph layout algorithm in JavaScript.\n\n[http://getspringy.com/](http://getspringy.com/)\n\nWhat is this?\n----\n\nSpringy is a force directed graph layout algorithm.\n\nSo what does this 'force directed' stuff mean anyway? Excellent question!\n\nIt basically means that it uses some real world physics to try and\nfigure out how to show a network graph in a nice way.\n\nTry to imagine it as a bunch of springs connected to each other.\n\n\nDemo\n----\n\n[basic](http://dhotson.github.com/springy/demo.html)\n| [simplified API](http://dhotson.github.com/springy/demo-simple.html)\n| [JSON API](http://dhotson.github.com/springy/demo-json.html)\n\n\nGetting Started\n----\n\nspringy.js by itself is quite plain and doesn't include any code to do rendering\nor drag and drop etc. It's just for calculating the layout.\n\nThe drawing and interaction stuff is mostly up to you.\n\nHowever, I've written a little helper jQuery plugin called springyui.js\nto help get you started. It's got a semi-decent default renderer and some\nhalf assed drag and drop.\n\nBasic Usage\n----\n\nSee [demo.html](http://dhotson.github.com/springy/demo.html) for the way to\nadd nodes and edges to graph and springyui.js for the rendering example.\n\nSpringy 1.1+ supports simplified API for adding nodes and edges, see\n[demo-simple.html](http://dhotson.github.com/springy/demo-simple.html):\n\n    var graph = new Springy.Graph();\n    graph.addNodes('mark', 'higgs', 'other', 'etc');\n    graph.addEdges(\n        ['mark', 'higgs'],\n        ['mark', 'etc'],\n        ['mark', 'other']\n    );\n\nSpringy 1.2+ also accepts JSON, see\n[demo-json.html](http://dhotson.github.com/springy/demo-json.html):\n\n    graphJSON = {\n      \"nodes\": [\"mark\", \"higgs\", \"other\", \"etc\"],\n      \"edges\": [\n        [\"mark\", \"higgs\"],\n        [\"mark\", \"etc\"],\n        [\"mark\", \"other\"]\n      ]\n    };\n\n    var graph = new Springy.Graph();\n    graph.loadJSON(graphJSON);\n\n\nAdvanced Drawing\n----\n\nIf you're keen to do your own custom drawing, you'll need to know a few\nthings before you get started.\n\nThis is the basic graph API, you can create nodes and edges etc.\n\n    // make a new graph\n    var graph = new Springy.Graph();\n\n    // make some nodes\n    var node1 = graph.newNode({label: '1'});\n    var node2 = graph.newNode({label: '2'});\n\n    // connect them with an edge\n    graph.newEdge(node1, node2);\n\nSo now to draw this graph, lets make a layout object:\n\n    var layout = new Springy.Layout.ForceDirected(graph, 400.0, 400.0, 0.5);\n\nI've written a Renderer class, which will handle the rendering loop.\nYou just need to provide some callbacks to do the actual drawing.\n\n    var renderer = new Springy.Renderer(layout,\n      function clear() {\n        // code to clear screen\n      },\n      function drawEdge(edge, p1, p2) {\n        // draw an edge\n      },\n      function drawNode(node, p) {\n        // draw a node\n      }\n    );\n\nNow, just start the rendering loop:\n\n    renderer.start();\n\n\nFurther Reading\n----\n\nHave a look at the code in springy.js.\nSeriously, it's not very much code and it should be pretty easy to understand.\n\nPlease let me know if anything is unclear. Feedback is welcome.\n\n\nAcknowledgements\n----\n\nThanks to [Lachlan Donald](http://github.com/lox) for his helpful suggestions and\nfeedback.\n","funding_links":[],"categories":["Javascript Libraries","JavaScript","Layout Algorithm"],"sub_categories":["Layouting"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdhotson%2Fspringy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdhotson%2Fspringy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdhotson%2Fspringy/lists"}