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 year ago
JSON representation

Quick and simple web based solution to visualize GraphMl network diagrams

• Host: GitHub
• URL: https://github.com/abhi5h3k/graphml-viewer
• Owner: Abhi5h3k
• Created: 2021-02-26T09:53:06.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2023-10-16T21:12:51.000Z (over 2 years ago)
• Last Synced: 2025-05-13T00:15:25.647Z (about 1 year ago)
• Topics: abhi5h3k, analytics, angular, cytoscape, cytoscapejs, d3, dashboard, dataanalytics, datavisualization, dataviz, force-direced, graph, graphml, network, networkanalysis, visualization-application
• Language: TypeScript
• Homepage:
• Size: 2.64 MB
• Stars: 46
• Watchers: 1
• Forks: 2
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

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.