{"id":13557284,"url":"https://github.com/plotly/dash-cytoscape","last_synced_at":"2025-10-20T16:10:17.170Z","repository":{"id":41203373,"uuid":"143769302","full_name":"plotly/dash-cytoscape","owner":"plotly","description":"Interactive network visualization in Python and Dash, powered by Cytoscape.js","archived":false,"fork":false,"pushed_at":"2024-05-20T11:56:22.000Z","size":71797,"stargazers_count":577,"open_issues_count":67,"forks_count":122,"subscribers_count":28,"default_branch":"main","last_synced_at":"2024-05-21T12:13:31.264Z","etag":null,"topics":["bioinformatics","biopython","computational-biology","cytoscape","cytoscapejs","dash","data-science","graph-theory","network-graph","network-visualization","plotly","plotly-dash"],"latest_commit_sha":null,"homepage":"https://dash.plot.ly/cytoscape","language":"Python","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/plotly.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"plotly","custom":"https://plotly.com/products/consulting-and-oem/"}},"created_at":"2018-08-06T18:47:06.000Z","updated_at":"2024-05-27T11:10:19.219Z","dependencies_parsed_at":"2023-01-24T01:45:55.960Z","dependency_job_id":"e9bea247-aec5-4d9a-a945-4ec2296e2389","html_url":"https://github.com/plotly/dash-cytoscape","commit_stats":{"total_commits":370,"total_committers":20,"mean_commits":18.5,"dds":0.5540540540540541,"last_synced_commit":"b070ded38961c076c1d339c906ffc0a71b4e2a80"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plotly%2Fdash-cytoscape","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plotly%2Fdash-cytoscape/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plotly%2Fdash-cytoscape/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plotly%2Fdash-cytoscape/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/plotly","download_url":"https://codeload.github.com/plotly/dash-cytoscape/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246993093,"owners_count":20865934,"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":["bioinformatics","biopython","computational-biology","cytoscape","cytoscapejs","dash","data-science","graph-theory","network-graph","network-visualization","plotly","plotly-dash"],"created_at":"2024-08-01T12:04:15.550Z","updated_at":"2025-10-20T16:10:17.151Z","avatar_url":"https://github.com/plotly.png","language":"Python","readme":"# Dash Cytoscape [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/plotly/dash-cytoscape/blob/master/LICENSE) [![PyPi Version](https://img.shields.io/pypi/v/dash-cytoscape.svg)](https://pypi.org/project/dash-cytoscape/)\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://dash.plotly.com/project-maintenance\"\u003e\n    \u003cimg src=\"https://dash.plotly.com/assets/images/maintained-by-plotly.png\" width=\"400px\" alt=\"Maintained by Plotly\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\n[![CircleCI](https://circleci.com/gh/plotly/dash-cytoscape.svg?style=svg)](https://circleci.com/gh/plotly/dash-cytoscape)\n\nA Dash component library for creating interactive and customizable networks in Python, wrapped around [Cytoscape.js](http://js.cytoscape.org/).\n\n![usage-stylesheet-demo](https://raw.githubusercontent.com/plotly/dash-cytoscape/master/demos/images/usage-stylesheet-demo.gif)\n\n-   🌟 [Medium Article](https://medium.com/@plotlygraphs/introducing-dash-cytoscape-ce96cac824e4)\n-   📣 [Community Announcement](https://community.plotly.com/t/announcing-dash-cytoscape/19095)\n-   💻 [Github Repository](https://github.com/plotly/dash-cytoscape)\n-   📚 [User Guide](https://dash.plotly.com/cytoscape)\n-   🗺 [Component Reference](https://dash.plotly.com/cytoscape/reference)\n-   📺 [Webinar Recording](https://www.youtube.com/watch?v=snXcIsCMQgk)\n\n## Getting Started in Python\n\n### Prerequisites\n\nMake sure that dash and its dependent libraries are correctly installed:\n\n```commandline\npip install dash\n```\n\nIf you want to install the latest versions, check out the [Dash docs on installation](https://dash.plotly.com/installation).\n\n### Usage\n\nInstall the library using `pip`:\n\n```\npip install dash-cytoscape\n```\n\nIf you wish to use the CyLeaflet mapping extension, you must install the optional `leaflet` dependencies:\n\n```\npip install dash-cytoscape[leaflet]\n```\n\nCreate the following example inside an `app.py` file:\n\n```python\nimport dash\nimport dash_cytoscape as cyto\nfrom dash import html\n\napp = dash.Dash(__name__)\napp.layout = html.Div([\n    cyto.Cytoscape(\n        id='cytoscape',\n        elements=[\n            {'data': {'id': 'one', 'label': 'Node 1'}, 'position': {'x': 50, 'y': 50}},\n            {'data': {'id': 'two', 'label': 'Node 2'}, 'position': {'x': 200, 'y': 200}},\n            {'data': {'source': 'one', 'target': 'two','label': 'Node 1 to 2'}}\n        ],\n        layout={'name': 'preset'}\n    )\n])\n\nif __name__ == '__main__':\n    app.run(debug=True)\n```\n\n![basic-usage](https://raw.githubusercontent.com/plotly/dash-cytoscape/master/demos/images/basic-usage.gif)\n\n### External layouts\n\nYou can also add external layouts. Use the `cyto.load_extra_layouts()` function to get started:\n\n```python\nimport dash\nimport dash_cytoscape as cyto\nfrom dash import html\n\ncyto.load_extra_layouts()\n\napp = dash.Dash(__name__)\napp.layout = html.Div([\n    cyto.Cytoscape(...)\n])\n```\n\nCalling `cyto.load_extra_layouts()` also enables generating SVG images.\n\n## Getting Started in R\n\n### Prerequisites\n\n```R\ninstall.packages(c(\"devtools\", \"dash\"))\n```\n\n### Usage\n\nInstall the library using devtools:\n\n```\ndevtools::install_github(\"plotly/dash-cytoscape\")\n```\n\nCreate the following example inside an `app.R` file:\n\n```R\nlibrary(dash)\nlibrary(dashHtmlComponents)\nlibrary(dashCytoscape)\n\napp \u003c- Dash$new()\n\napp$layout(\n  htmlDiv(\n    list(\n      cytoCytoscape(\n        id = 'cytoscape-two-nodes',\n        layout = list('name' = 'preset'),\n        style = list('width' = '100%', 'height' = '400px'),\n        elements = list(\n          list('data' = list('id' = 'one', 'label' = 'Node 1'), 'position' = list('x' = 75, 'y' = 75)),\n          list('data' = list('id' = 'two', 'label' = 'Node 2'), 'position' = list('x' = 200, 'y' = 200)),\n          list('data' = list('source' = 'one', 'target' = 'two'))\n        )\n      )\n    )\n  )\n)\n\napp$run_server()\n```\n\n## Documentation\n\nThe [Dash Cytoscape User Guide](https://dash.plotly.com/cytoscape/) contains everything you need to know about the library. It contains useful examples, functioning code, and is fully interactive. You can also use the [component reference](https://dash.plotly.com/cytoscape/reference/) for a complete and concise specification of the API.\n\nTo learn more about the core Dash components and how to use callbacks, view the [Dash documentation](https://dash.plotly.com/).\n\nFor supplementary information about the underlying Javascript API, view the [Cytoscape.js documentation](http://js.cytoscape.org/).\n\n## Contributing\n\nMake sure that you have read and understood our [code of conduct](CODE_OF_CONDUCT.md), then head over to [CONTRIBUTING](CONTRIBUTING.md) to get started.\n\n### Testing\n\nInstructions on how to run [tests](CONTRIBUTING.md#tests) are given in [CONTRIBUTING.md](CONTRIBUTING.md).\n\n## License\n\nDash, Cytoscape.js and Dash Cytoscape are licensed under MIT. Please view [LICENSE](LICENSE) for more details.\n\n## Contact and Support\n\nSee https://plotly.com/dash/support for ways to get in touch.\n\n## Acknowledgments\n\nHuge thanks to the Cytoscape Consortium and the Cytoscape.js team for their contribution in making such a complete API for creating interactive networks. This library would not have been possible without their massive work!\n\nThe Pull Request and Issue Templates were inspired from the\n[scikit-learn project](https://github.com/scikit-learn/scikit-learn).\n\n## Gallery\n\n### Dynamically expand elements\n\n[Code](usage-elements.py) | [Demo](https://dash-gallery.plotly.host/cytoscape-elements)\n![View usage-elements on Github](demos/images/usage-elements-demo.gif)\n\n### Interactively update stylesheet\n\n[Code](usage-stylesheet.py) | [Demo](https://dash-gallery.plotly.host/cytoscape-stylesheet)\n![View usage-stylesheet on Github](demos/images/usage-stylesheet.gif)\n\n### Automatically generate interactive phylogeny trees\n\n[Code](demos/usage-phylogeny.py) | [Demo](https://dash-gallery.plotly.host/cytoscape-phylogeny/)\n![View usage-phylogeny on Github](demos/images/usage-phylogeny.gif)\n\n### Create your own stylesheet\n\n[Code](usage-advanced.py) | [Demo](https://dash-gallery.plotly.host/cytoscape-advanced)\n![View usage-advanced on Github](demos/images/usage-advanced.gif)\n\n### Use event callbacks\n\n[Code](usage-events.py) | [Demo](https://dash-gallery.plotly.host/cytoscape-events)\n![View usage-events on Github](demos/images/usage-events.gif)\n\n### Use external layouts\n\n[Code](demos/usage-elements-extra.py)\n![View usage-elements-extra on Github](demos/images/usage-elements-extra.gif)\n\n### Use export graph as image\n\n[Code](demos/usage-image-export.py)\n![View usage-image-export on Github](demos/images/usage-image-export.gif)\n\n### Make graph responsive\n\n[Code](demos/usage-responsive-graph.py)\n![View usage-responsive-graph on Github](demos/images/usage-responsive-graph.gif)\n\nFor an extended gallery, visit the [demos' readme](demos/README.md).\n","funding_links":["https://github.com/sponsors/plotly","https://plotly.com/products/consulting-and-oem/"],"categories":["Python","Dash","Software","data-science","Libraries"],"sub_categories":["Python"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplotly%2Fdash-cytoscape","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplotly%2Fdash-cytoscape","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplotly%2Fdash-cytoscape/lists"}