https://github.com/dianaow/network-explorer

A graph visualization tool built with React, Graphin, D3, and Ant Design
https://github.com/dianaow/network-explorer

ant-design antd antv data-visualization data-viz g6 graph-visualization graphs network-visualization react

Last synced: 5 months ago
JSON representation

A graph visualization tool built with React, Graphin, D3, and Ant Design

• Host: GitHub
• URL: https://github.com/dianaow/network-explorer
• Owner: dianaow
• License: mit
• Created: 2022-04-22T10:12:48.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2022-10-29T16:19:20.000Z (over 3 years ago)
• Last Synced: 2024-11-15T22:16:09.137Z (about 1 year ago)
• Topics: ant-design, antd, antv, data-visualization, data-viz, g6, graph-visualization, graphs, network-visualization, react
• Language: JavaScript
• Homepage: http://network-explorer.s3-website-ap-southeast-1.amazonaws.com/
• Size: 4.87 MB
• Stars: 5
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# Network Explorer: A Graph Visualization Tool built with G6/Graphin

### What is [Network Explorer](http://network-explorer.s3-website-ap-southeast-1.amazonaws.com/)?

It is a graph visualization tool built with React, Graphin, D3, and Ant Design. [Graphin](https://github.com/antvis/Graphin) is based on G6 and React and offers graph analysis ability out of the box. 

Network Explorer's purpose is to help users style and render graphs easily without code through a UI by importing a dataset or connecting to a database.

### Features

* Temporal visualization with a brushable timeline

* Customized nodes and edges styling

* Customized tooltip content

* Data filtering: Entity ID, Datetime, Degree

Landing page

![cover](/assets/cover.png)

Upload data and select options to customize output graph

![form](/assets/form.png)

Brushable timeline to filter data to highlight

![cover](/assets/timeline.png)

Select an entity to show its connections

![cover](/assets/entity.png)

### Development

```

npm install

npm run start

```

### Contribute

Check out issues for bug reports or feature suggestions. I greatly appreciate your help!