{"id":20012820,"url":"https://github.com/hijiangtao/force-directed-layout","last_synced_at":"2025-06-18T14:34:46.136Z","repository":{"id":83365682,"uuid":"87563277","full_name":"hijiangtao/Force-Directed-Layout","owner":"hijiangtao","description":"A Force Directed Layout work wrote in ES2015","archived":false,"fork":false,"pushed_at":"2017-07-07T08:54:15.000Z","size":431,"stargazers_count":23,"open_issues_count":1,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-04T21:35:39.328Z","etag":null,"topics":["es2015","force-directed-graphs","force-layout","graph","visualization"],"latest_commit_sha":null,"homepage":"https://hijiangtao.github.io/Force-Directed-Layout/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hijiangtao.png","metadata":{"files":{"readme":"README.md","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":"2017-04-07T15:57:52.000Z","updated_at":"2024-11-13T08:21:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"e4e2d48e-813f-44dd-8c3d-d29d09f85fbb","html_url":"https://github.com/hijiangtao/Force-Directed-Layout","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hijiangtao/Force-Directed-Layout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hijiangtao%2FForce-Directed-Layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hijiangtao%2FForce-Directed-Layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hijiangtao%2FForce-Directed-Layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hijiangtao%2FForce-Directed-Layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hijiangtao","download_url":"https://codeload.github.com/hijiangtao/Force-Directed-Layout/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hijiangtao%2FForce-Directed-Layout/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260570775,"owners_count":23029764,"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":["es2015","force-directed-graphs","force-layout","graph","visualization"],"created_at":"2024-11-13T07:33:27.750Z","updated_at":"2025-06-18T14:34:41.092Z","avatar_url":"https://github.com/hijiangtao.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Force Directed Layout\n\n[![codebeat badge](https://codebeat.co/badges/3c37f294-c4e8-44ae-bab0-e30710c364ef)](https://codebeat.co/projects/github-com-hijiangtao-force-directed-layout-master) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\n\n## Introduction\n\nForce Directed Layout is a JavaScript library to implement force-directed layout visualization, you can just import the module and code without install any other extra libraries. It is written using ES2015 modules, and provide users with two rendering approaches: SVG or Canvas. The convergence condition can be decided by total iteration time or minimal energy threshold.\n\nThere are already several similar libraries in the community, such as [D3](https://d3js.org/), [springy](https://github.com/dhotson/springy), etc. But why should I rewrote a new one? The motivation of this project is trying to create a visualization library by using ES2015. A more detailed explanation of the codes is put in comments, hope this work can help you more or less.\n\n![Force Directed Layout Demo](/assets/demo.png \"Force Directed Layout Demo\")\n\n## Details\n\n### Demo and codes\n\n* [Online Demo](https://hijiangtao.github.io/Force-Directed-Layout/)\n* [Main File](https://github.com/hijiangtao/Force-Directed-Layout/blob/master/src/forceLayout.js)\n\n### Project structure and library size\n\n* Structure of this project shows below, the main library files locate in `src` directory, `index.js` is the script file for demo page, `forceLayout.js` is the entrance file of this project;\n\n```\nForce-Directed-Layout\n├── default.css\n├── dist\n│   ├── home.js\n│   └── home.js.map\n├── index.html\n├── LICENSE\n├── package.json\n├── README.md\n├── README_zh.md\n├── src\n│   ├── data.js\n│   ├── Elements.js\n│   ├── forceLayout.js\n│   ├── index.js\n│   ├── Spring.js\n│   └── Vector.js\n└── webpack.config.js\n```\n\n* After converted by Babel, the pure library file (uncompressed) is 26.8 kB, the library file (uncompressed) which contains test dataset is 45.3 kB;\n\n### Force System: repulsion force, attraction force and centripetal force\n\nThe basic unit of system is composed of point and spring. The force of interaction between points is repulsion force, followed by [Coulomb's law](https://en.wikipedia.org/wiki/Coulomb%27s_law). The attraction force exists between two points linked with spring, followed by [Hooke's law](https://en.wikipedia.org/wiki/Hooke%27s_law).\n\n* In this project, the law of repulsion force is `F=Repusion*Mass_1*Mass_2/Math.pow(Dis*coulombDisScale, 2)`, which **Repusion** stands for [Coulomb's constant](https://en.wikipedia.org/wiki/Coulomb%27s_constant), **Mass** stands for point mass, **Dis** stands for the distance between responding two points. On the one hand, **coulombDisScale** (Distance coefficient constant) is added to balance the distance's calculation in screen pixel scales; on the other hand, **Mass** doesn't participate in real calucaltion since every input point is assigned with default mass of 1.0;\n* The law of attraction force is `F=Stiffness*Displacement`, which **Stiffness** is a constant factor characteristic of the spring, **Displacement** is small compared to the total possible deformation of the spring. Except for a state of equilibrium, `Displacement \u003e 0` stands for Elongation, `Displacement \u003c 0` stands for Compression;\n* To maintain the whole system's visibility in the page (screen), an entripetal force caused by a center point is added, the law is `F=Repulsion/100` (unproved), which **Repusion** is Coulomb's constant, 100 is set according to the visualization's performance but not proved yet;\n\n### Rendering approaches\n\n* SVG Method: Each Node and Edge will be contained in a DOM (Path or Circle, SVG specifically); THe DOM's position will be updated when Node and Edge update its state each time;\n* Canvas Method: Initialize Canvas first, then empty it each time before you update the Canvas with whole system's objects;\n\n### Reference \n\n* Before develop the library, I read the codes of [springy](https://github.com/dhotson/springy) repository, mainly focused on data structure and Edge/Node state updating part, the similar logic could be found in this library;\n* I had a further understanding of Function's encapsulation and the concept of Force-Directed Layout by reading the following materials: [d3-force](https://github.com/d3/d3-force) - D3 wiki, [Force-Directed Drawing Algorithms](https://cs.brown.edu/~rt/gdhandbook/chapters/force-directed.pdf) (wrote by Stephen, etc.) and related Wikipedia items;\n* No more other extra libraries is need for this library's development and running;\n* Data based on character coappearence in Victor Hugo's *Les Misérables*, compiled by [Donald Knuth](http://www-cs-faculty.stanford.edu/~uno/sgb.html), a similar project developed by Mike Bostock can be accessed [here](https://bl.ocks.org/mbostock/4062045).\n\n## Configurations\n\n* Run the webpack and get the `home.js` (stored in `dist` directory), you can see the example with `index.html` (A basic http server is needed, you can use [http-server](https://github.com/indexzero/http-server)). The main library file is `forceLayout.js`, which is developed in ES6 Grammar, however, you can import the class and develop freely.\n* The Data format for rendering shows below:\n\n```\nlet data = {\n  \"nodes\": [\n    {\"id\": \"DataId\", \"group\": 1},\n    ...\n  ],\n  \"edges\": [\n    {\"source\": \"Node1\", \"target\": \"Node2\", \"value\": 1},\n    ...\n  ]\n}\n```\n\n*Tips on data format: nodes / edges are required fields for defining the properties of nodes and edges, but the array length is unrestricted; in each item of nodes, `id` field is required, other are optional; in each item of edges, `source, target` and `value` fields are required, other are optional.*\n\n* TBD\n\n## Other language\n\n[中文文档](./README_zh.md)\n\n### TBD\n\nTBD\n\nJoe\n\n2017.4\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhijiangtao%2Fforce-directed-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhijiangtao%2Fforce-directed-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhijiangtao%2Fforce-directed-layout/lists"}