{"id":13597435,"url":"https://github.com/filipinascimento/helios-web","last_synced_at":"2025-04-06T16:11:46.691Z","repository":{"id":55874032,"uuid":"402504394","full_name":"filipinascimento/helios-web","owner":"filipinascimento","description":"A web-based framework to visualize dynamic networks in real-time.","archived":false,"fork":false,"pushed_at":"2025-01-25T06:28:07.000Z","size":47972,"stargazers_count":70,"open_issues_count":7,"forks_count":13,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-30T11:07:39.410Z","etag":null,"topics":["3d","complex-networks","network","visualization"],"latest_commit_sha":null,"homepage":"","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/filipinascimento.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":"2021-09-02T17:19:41.000Z","updated_at":"2025-03-05T21:02:35.000Z","dependencies_parsed_at":"2022-08-15T08:20:27.324Z","dependency_job_id":"f5a07e30-11d3-4cd6-9de3-82d3fa2e6702","html_url":"https://github.com/filipinascimento/helios-web","commit_stats":{"total_commits":90,"total_committers":2,"mean_commits":45.0,"dds":"0.022222222222222254","last_synced_commit":"ae652565b0163fcb5ebb35303cc22c76009c378f"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filipinascimento%2Fhelios-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filipinascimento%2Fhelios-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filipinascimento%2Fhelios-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filipinascimento%2Fhelios-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/filipinascimento","download_url":"https://codeload.github.com/filipinascimento/helios-web/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247509222,"owners_count":20950232,"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":["3d","complex-networks","network","visualization"],"created_at":"2024-08-01T17:00:32.945Z","updated_at":"2025-04-06T16:11:46.667Z","avatar_url":"https://github.com/filipinascimento.png","language":"JavaScript","funding_links":[],"categories":["Libraries, Softwares"],"sub_categories":[],"readme":"\n\u003cp float=\"left\"\u003e\n\u003cimg width=\"50%\" style=\"max-width:450px\" alt=\"Helios-Web\" src=\"https://github.com/filipinascimento/helios-web/raw/main/media/helios-web-logo.svg\"\u003e\n\u003cimg width=\"25%\" alt=\"Helios Web demo\" src=\"https://github.com/filipinascimento/helios-web/raw/main/media/WS_very_low.gif\"\u003e\n\u003c/p\u003e\n\n\u003c!-- Create a table centered text saying use Helios-Web experimental version here. Just drag and drop your gml, xnet or gexf file. Then it should point to Dark and Light versions as columns and with Density and without density as rows. All links should point to  http://heliosweb.io/docs/example/?advanced --\u003e\nTest the preliminary version of Helios Web here:\n\n|         | Light Version | Dark Version |\n|---------|---------------|--------------|\n| No Density | [Light](http://heliosweb.io/docs/example/?advanced) | [Dark](http://heliosweb.io/docs/example/?advanced\u0026dark) |\n| Density | [Light \u0026 Density](http://heliosweb.io/docs/example/?advanced\u0026density) | [Dark \u0026 Density](http://heliosweb.io/docs/example/?advanced\u0026dark\u0026density) |\n\nYou an drag and drop your own network in gml, xnet or gexf formats.\n\n\nHelios Web is a web-based library to visualize dynamic networks in real-time. Helios-web is under active development and aims to provide a simple API and optimized implementation to be integrated into other systems and render and layout large networks. This is the successor to the [Networks 3D project](https://filipinascimento.github.io/networks3d/) and the [Networks Web project](https://filipinascimento.github.io/software/networksweb/).\n\nCheck out the demo https://filipinascimento.github.io/helios-web/docs/example/\n\nDocumentation now available at https://filipinascimento.github.io/helios-web/docs/api/\n\nMore demos:\n\n| Network | light | light+2D | dark | dark+2D | dark+blend | dark+blend+2D |\n| ------- | ----- | -------- | ---- | ------- | ---------- | ------------- |\n| Watts-Strogatz | [light](https://filipinascimento.github.io/helios-web/docs/example/?network=WS_10000_10_001) | [light+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=WS_10000_10_001\u0026use2d) | [dark](https://filipinascimento.github.io/helios-web/docs/example/?network=WS_10000_10_001\u0026dark) | [dark+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=WS_10000_10_001\u0026dark\u0026use2d) | [dark+blend](https://filipinascimento.github.io/helios-web/docs/example/?network=WS_10000_10_001\u0026dark\u0026additive) | [dark+blend+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=WS_10000_10_001\u0026dark\u0026additive\u0026use2d) |\n| Facebook Egos | [light](https://filipinascimento.github.io/helios-web/docs/example/?network=Facebook_combined) | [light+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=Facebook_combined\u0026use2d) | [dark](https://filipinascimento.github.io/helios-web/docs/example/?network=Facebook_combined\u0026dark) | [dark+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=Facebook_combined\u0026dark\u0026use2d) | [dark+blend](https://filipinascimento.github.io/helios-web/docs/example/?network=Facebook_combined\u0026dark\u0026additive) | [dark+blend+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=Facebook_combined\u0026dark\u0026additive\u0026use2d) |\n| Rewired Voronoi | [light](https://filipinascimento.github.io/helios-web/docs/example/?network=RVOR) | [light+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=RVOR\u0026use2d) | [dark](https://filipinascimento.github.io/helios-web/docs/example/?network=RVOR\u0026dark) | [dark+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=RVOR\u0026dark\u0026use2d) | [dark+blend](https://filipinascimento.github.io/helios-web/docs/example/?network=RVOR\u0026dark\u0026additive) | [dark+blend+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=RVOR\u0026dark\u0026additive\u0026use2d) |\n| US Airports | [light](https://filipinascimento.github.io/helios-web/docs/example/?network=USairport_2010) | [light+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=USairport_2010\u0026use2d) | [dark](https://filipinascimento.github.io/helios-web/docs/example/?network=USairport_2010\u0026dark) | [dark+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=USairport_2010\u0026dark\u0026use2d) | [dark+blend](https://filipinascimento.github.io/helios-web/docs/example/?network=USairport_2010\u0026dark\u0026additive) | [dark+blend+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=USairport_2010\u0026dark\u0026additive\u0026use2d) |\n| Global Airports | [light](https://filipinascimento.github.io/helios-web/docs/example/?network=Airports) | [light+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=Airports\u0026use2d) | [dark](https://filipinascimento.github.io/helios-web/docs/example/?network=Airports\u0026dark) | [dark+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=Airports\u0026dark\u0026use2d) | [dark+blend](https://filipinascimento.github.io/helios-web/docs/example/?network=Airports\u0026dark\u0026additive) | [dark+blend+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=Airports\u0026dark\u0026additive\u0026use2d) |\n| Protein-protein | [light](https://filipinascimento.github.io/helios-web/docs/example/?network=bio-dmela) | [light+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=bio-dmela\u0026use2d) | [dark](https://filipinascimento.github.io/helios-web/docs/example/?network=bio-dmela\u0026dark) | [dark+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=bio-dmela\u0026dark\u0026use2d) | [dark+blend](https://filipinascimento.github.io/helios-web/docs/example/?network=bio-dmela\u0026dark\u0026additive) | [dark+blend+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=bio-dmela\u0026dark\u0026additive\u0026use2d) |\n| Erdos collaboration | [light](https://filipinascimento.github.io/helios-web/docs/example/?network=ca-Erdos992) | [light+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=ca-Erdos992\u0026use2d) | [dark](https://filipinascimento.github.io/helios-web/docs/example/?network=ca-Erdos992\u0026dark) | [dark+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=ca-Erdos992\u0026dark\u0026use2d) | [dark+blend](https://filipinascimento.github.io/helios-web/docs/example/?network=ca-Erdos992\u0026dark\u0026additive) | [dark+blend+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=ca-Erdos992\u0026dark\u0026additive\u0026use2d) |\n| Europe roads | [light](https://filipinascimento.github.io/helios-web/docs/example/?network=road-euroroad) | [light+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=road-euroroad\u0026use2d) | [dark](https://filipinascimento.github.io/helios-web/docs/example/?network=road-euroroad\u0026dark) | [dark+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=road-euroroad\u0026dark\u0026use2d) | [dark+blend](https://filipinascimento.github.io/helios-web/docs/example/?network=road-euroroad\u0026dark\u0026additive) | [dark+blend+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=road-euroroad\u0026dark\u0026additive\u0026use2d) |\n| Wiki Sciences\\* | [light](https://filipinascimento.github.io/helios-web/docs/example/?network=Wiki_Science) | [light+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=Wiki_Science\u0026use2d) | [dark](https://filipinascimento.github.io/helios-web/docs/example/?network=Wiki_Science\u0026dark) | [dark+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=Wiki_Science\u0026dark\u0026use2d) | [dark+blend](https://filipinascimento.github.io/helios-web/docs/example/?network=Wiki_Science\u0026dark\u0026additive) | [dark+blend+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=Wiki_Science\u0026dark\u0026additive\u0026use2d) |\n| Wiki Sciences (small) | [light](https://filipinascimento.github.io/helios-web/docs/example/?network=Wiki_Science_Filtered) | [light+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=Wiki_Science_Filtered\u0026use2d) | [dark](https://filipinascimento.github.io/helios-web/docs/example/?network=Wiki_Science_Filtered\u0026dark) | [dark+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=Wiki_Science_Filtered\u0026dark\u0026use2d) | [dark+blend](https://filipinascimento.github.io/helios-web/docs/example/?network=Wiki_Science_Filtered\u0026dark\u0026additive) | [dark+blend+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=Wiki_Science_Filtered\u0026dark\u0026additive\u0026use2d) |\n| APS Citations\\* | [light](https://filipinascimento.github.io/helios-web/docs/example/?network=APS) | [light+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=APS\u0026use2d) | [dark](https://filipinascimento.github.io/helios-web/docs/example/?network=APS\u0026dark) | [dark+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=APS\u0026dark\u0026use2d) | [dark+blend](https://filipinascimento.github.io/helios-web/docs/example/?network=APS\u0026dark\u0026additive) | [dark+blend+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=APS\u0026dark\u0026additive\u0026use2d) |\n| COVID Citations\\* | [light](https://filipinascimento.github.io/helios-web/docs/example/?network=COVID) | [light+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=COVID\u0026use2d) | [dark](https://filipinascimento.github.io/helios-web/docs/example/?network=COVID\u0026dark) | [dark+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=COVID\u0026dark\u0026use2d) | [dark+blend](https://filipinascimento.github.io/helios-web/docs/example/?network=COVID\u0026dark\u0026additive) | [dark+blend+2D](https://filipinascimento.github.io/helios-web/docs/example/?network=COVID\u0026dark\u0026additive\u0026use2d) |\n\n\n\\* huge, may need a good CPU/GPU  (press space to enable the layout algorithm)\n\n\n## Building\n\nFirst install packages\n```bash\nnpm install\n```\n\nBuild\n```bash\nnpm run build\n```\n\n# Development and testing\nTo test the environment use `npm run dev`.\nThen go to `http://localhost:8080/docs/example/` in your browser (or use the provided hostname and port).\n\n# Usage\nTo use it in your project you can load it as a module in modern browsers via skypack:\n\n```html\n\u003cscript type=\"module\"\u003e\n\nimport {Helios} from \"https://cdn.skypack.dev/helios-web?min\";\n// This will be fixed in the next release\n\n// Nodes are dictionaries (any key can be used as node properties)\nlet nodes = {\n  \"0\": {\n    label: \"Node 0\",\n  },\n  \"1\": {\n    label: \"Node 1\",\n  },\n  \"2\": {\n    label: \"Node 2\",\n  },\n}\n\n// Edges are arrays of node ids\nlet edges = [\n  {\n    source: \"0\",\n    target: \"1\",\n  },\n  {\n    source: \"1\",\n    target: \"2\",\n  },\n  {\n    source: \"2\",\n    target: \"0\",\n  }\n];\n\nlet helios = new Helios({\n\t\telementID: \"netviz\", // ID of the element to render the network in\n\t\tnodes: nodes, // Dictionary of nodes \n\t\tedges: edges, // Array of edges\n\t\tuse2D: false, // Choose between 2D or 3D layouts\n\t});\n\n\u003c/script\u003e\n```\nYou can find a bare-minimal example at https://jsfiddle.net/yatk8jcb/14/ and a more advanced example at https://jsfiddle.net/filsilva/djfomsgw/69/ (Zachary's karate club network).\n\nFull documentation is available at https://filipinascimento.github.io/helios-web/docs/api/\n\nHelios web is also available as a npm package:\n\n```bash\nnpm install helios-web\n```\nthen you can use it in your project by importing using the same syntax as above:\n```javascript\nimport {Helios} from \"helios-web\";\n\n//...\n\n```\n\n# Citing Helios-Web\n\nIf you use Helios-Web in your research, please include the following citation in your publication:\n\n```text\nSilva, F.N. (2023). Helios-Web (Version 0.7.9) [Computer software].\nGitHub. http://heliosweb.io. https://doi.org/10.5281/zenodo.8251049\n```\n\nNote: A paper on Helios-Web is in progress. We will provide an updated citation once the paper is published.\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilipinascimento%2Fhelios-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffilipinascimento%2Fhelios-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilipinascimento%2Fhelios-web/lists"}