https://github.com/tyn1998/ppi-galaxy

(life_tree --> ppi_resilience) --> ppi-data-provider --> ppi-galaxy*
https://github.com/tyn1998/ppi-galaxy

graph ngraph react visualizations

Last synced: 10 months ago
JSON representation

(life_tree --> ppi_resilience) --> ppi-data-provider --> ppi-galaxy*

• Host: GitHub
• URL: https://github.com/tyn1998/ppi-galaxy
• Owner: tyn1998
• License: mit
• Created: 2021-05-13T06:15:23.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2021-05-31T12:42:10.000Z (over 4 years ago)
• Last Synced: 2025-02-10T09:30:47.752Z (about 1 year ago)
• Topics: graph, ngraph, react, visualizations
• Language: JavaScript
• Homepage:
• Size: 14.6 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# PPI Galaxy

Visualization of protein-protein interactions of 1840 species.

This visualization project is a part of [my-graduation-project](https://github.com/tyn1998/my-graduation-project), and it is totally inspired by and based on [pm](https://github.com/anvaka/pm) and [ngraph](https://github.com/anvaka/ngraph), the amazing works of [anvaka](https://github.com/anvaka/). Thank you, anvaka!

# Screenshots

- Welcome Page

![welcomePage](./screenshots/welcomePage.png)

- Galaxy Page

![galaxyPage](./screenshots/galaxyPage.png)

- Compare Page

![comparePage](./screenshots/comparePage.png)

# Feature

- Interactive

  - welcome page

    - scroll down and there is a mini [tree of life](https://en.wikipedia.org/wiki/Tree_of_life), double click 

      the end node of a certain branch to visit corresponding galaxy page

  - galaxy page

    - use keyboard and mouse to explore the galaxy

    - search nodes by name and click to locate

    - click a node and all linked nodes are shown in a list

  - compare page

    - double click node in scatter chart to visit corresponding galaxy page

- Rich statistics

  - species information (left-top corner box)

  - node information (right-bottom box)

# Behind the scene

anvaka provided an elegant way to make presenting large graph smoothly in web browser happen. The secret is to separate layout-computing part (i.e. computing each point's (x, y, z) position in browser ) from the whole presenting process. The browser just renders the graph with its layout file that has already been generated.

If you want to use your own graph, just see [your-own-graph](https://github.com/anvaka/pm#your-own-graphs).