https://github.com/arrow7000/graphs

🕸 Web app to allow users to create, manipulate and explore network graphs. Work in progress.
https://github.com/arrow7000/graphs

canvas network-graph physics typescript vector webpack

Last synced: 28 days ago
JSON representation

🕸 Web app to allow users to create, manipulate and explore network graphs. Work in progress.

• Host: GitHub
• URL: https://github.com/arrow7000/graphs
• Owner: Arrow7000
• Created: 2017-06-15T12:55:33.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-08-19T15:46:29.000Z (over 6 years ago)
• Last Synced: 2024-12-03T02:37:20.049Z (about 1 month ago)
• Topics: canvas, network-graph, physics, typescript, vector, webpack
• Language: TypeScript
• Homepage: https://aa-graphs.herokuapp.com/
• Size: 1.34 MB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Graphs

Tool for exploring and playing around with network graphs.

[![Click to go to app](readme/screenshot.png)](https://aa-graphs.herokuapp.com/)

## Technologies

- HTML5 Canvas

- TypeScript

- Webpack

## Techniques

- Quadtrees and Barnes-Hut approximation (inspired by [D3.js](https://github.com/d3/d3-force#many-body))

---

## Roadmap

- [ ] Decide on format for storing networks

- [x] Make canvas resize to size of viewport - maybe use requestAnimationFrame

- [ ] Optionally also 'zoom' in or out virtually depending on viewport size

- [x] Colour nodes and edges

- [x] Allow user to create new nodes

- [x] Allow user to create new edges between nodes (by clicking on node's edge and dragging to another one)

- [ ] Create import tool

- [ ] create connectors to interface with import tool - e.g. import friends list from FB or Twitter followers network

- [x] Create directed edges, with arrow to display direction

- [ ] Create dashboard

    - [ ] Allow user to save current state

    - [ ] Allow user to select from multiple saved states

    - [ ] Checkbox to display quadtrees

- [ ] Calculate tension of layout and reshuffle before render to get lowest-tensioned layout

- [ ] Make edge of viewport barrier for nodes, so unconnected ones can't escape