Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/abhi5h3k/graphml-viewer

Quick and simple web based solution to visualize GraphMl network diagrams
https://github.com/abhi5h3k/graphml-viewer

abhi5h3k analytics angular cytoscape cytoscapejs d3 dashboard dataanalytics datavisualization dataviz force-direced graph graphml network networkanalysis visualization-application

Last synced: about 1 month ago
JSON representation

Quick and simple web based solution to visualize GraphMl network diagrams

Awesome Lists containing this project

README 

        
# 🔥GraphMl Viewer🔥  



[![Abhishek LinkedIn](https://img.shields.io/badge/Abhishek-LinkedIn-blue.svg?style=for-the-badge)](https://www.linkedin.com/in/abhi5h3k/) [![Abhishek StackOverflow](https://img.shields.io/badge/Abhishek-StackOverflow-orange.svg?style=for-the-badge)](https://stackoverflow.com/users/6870223/abhi?tab=profile)



![image](https://user-images.githubusercontent.com/37928721/119217835-8d4a9e00-bafa-11eb-9898-01e247c7ef67.png)



## Demo

[graphml viewer](http://graphml.devabhi.in/)



![graphml viwere](https://media.giphy.com/media/LwkeSCUlNhOy3nM1as/giphy.gif)



## 3D graph visualization:

![3d Graph](https://media.giphy.com/media/IoKispirVCq6xKNRv7/giphy.gif)



## Try multiple Layout

![graph layouts](https://media.giphy.com/media/wNcpUmV4ocNXjffEUH/giphy.gif)



## Hierarchical Layout

![Herarchical layout](https://media.giphy.com/media/sjc4dutBAFxEFsINsE/giphy.gif)



## Spring layout with node color based on attribute

![spring layout](https://media.giphy.com/media/jFe7C9zbDdIhbDyCeE/giphy.gif)



## change node shape:

**Possible shapes :** "ellipse", "triangle", "round-triangle", "rectangle", "round-rectangle", "bottom-round-rectangle", "cut-rectangle", "barrel", "rhomboid", "diamond", "round-diamond", "pentagon", "round-pentagon", "hexagon", "round-hexagon", "concave-hexagon", "heptagon", "round-heptagon", "octagon", "round-octagon", "star", "tag", "round-tag", "vee"



1. Automatically from 24 node shapes



![node shape](https://media.giphy.com/media/COodpc4lZRaUkSXB1Z/giphy.gif)



2. Set from node data, need to have 'node_shape' key in node data



![node shape from data](https://media.giphy.com/media/bGPlREECBu1DIHDzhZ/giphy.gif)



## Show node background Image:

![node background image](https://media.giphy.com/media/CiGICN8sGsnuUOIKgU/giphy.gif)

1. Require **image** key in node data with image url as value 

2. You can download a sample GraphMl from [graphml viewer](https://github.com/Abhi5h3k/graphml-viewer/blob/main/sample/mahabharat_family_tree_abhi.graphml) to check how to modify graphml data for image and url



## Load GraphMl

1. Drag and drop multiple graphml files / click browse for files



![load graphm](https://media.giphy.com/media/kTTcgB33vQJacQ5yXK/giphy.gif)



## check graph analytics

![graph anaytics](https://media.giphy.com/media/47eSarzujmoFzcfKZl/giphy.gif)



## check n degree neighbour

1. click on node

2. select focus from top right icons

3. now you will get 2 additional icons to expand and contract the neighbours

4. click again on focus icon to retun to main graph



![check n degree neighbour ](https://media.giphy.com/media/cx4TpwKlxo8yexXKIK/giphy.gif)



## Hover on node to see node neighbours

![node neighbour](https://media.giphy.com/media/7OtmVY2R0ZrlbkJ8dU/giphy.gif)



## search node using node attribute (like : id, name)

![search node](https://media.giphy.com/media/nI5QXamuZd1pFNoVBB/giphy.gif)



## Export / view graph data (node data and edge data)

![export graph as table](https://media.giphy.com/media/QpnPqP4B8zozo0MtXL/giphy.gif)



## Capture and Download graph images/ json /graphml

![export graph images or json or graphml](https://media.giphy.com/media/CtOE4N84ekyMgJ0Aw6/giphy.gif)



## Using Lasso tool to select nodes and edges

1. Double click on empty graph area and start lasso drawing from 3rd click



![method one for lasso](https://media.giphy.com/media/Ikd3a4OT3qu9M1zv6P/giphy.gif)



2. select lasso from right menu for style and click on empty graph area to start drawing



![method 2 for lasso](https://media.giphy.com/media/0qGO8v8wy5J0QUzVvE/giphy.gif)



## Remove graph

![remove graph](https://media.giphy.com/media/qKoFwiwOwsP9lMA3av/giphy.gif)



## load and switch between multiple graphml files

![switch graphml](https://media.giphy.com/media/ZYgtaTloSPG9xuQKrP/giphy.gif)



## setup

1. clone repo

2. last tested:

   	Angular CLI: 8.3.29

	Node: 14.20.1

	OS: win32 x64

	Angular: 8.2.14

3. npm install

4. ng serve



## Development server



Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.



## Build



Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.



## Further help



To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).



## Authors



* **Abhishek Bhardwaj** - *Stackoverflow profile* - [Stackoverflow profile](https://stackoverflow.com/users/6870223/abhi?tab=profile)

			  *Linkedin profile* - [Linkedin profile](https://www.linkedin.com/in/abhishek-bhardwaj-b16764166)



## License



This project is opensource, Kindly maintain the proper credits for author and contributers.



This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.4.