Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nenuadrian/d3-html5-canvas-graph-network
Example code on how to create and interact with a network of nodes in a canvas element, a graph, using the D3 javascript library which is mainly build for SVG. Presumably Canvas should be faster in most cases.
https://github.com/nenuadrian/d3-html5-canvas-graph-network
canvas canvas-element d3 d3js drawing-app graph graphs html5 javascript js
Last synced: 7 days ago
JSON representation
Example code on how to create and interact with a network of nodes in a canvas element, a graph, using the D3 javascript library which is mainly build for SVG. Presumably Canvas should be faster in most cases.
- Host: GitHub
- URL: https://github.com/nenuadrian/d3-html5-canvas-graph-network
- Owner: nenuadrian
- Created: 2015-08-09T15:51:23.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-03-10T16:33:41.000Z (over 8 years ago)
- Last Synced: 2024-04-14T07:19:12.518Z (7 months ago)
- Topics: canvas, canvas-element, d3, d3js, drawing-app, graph, graphs, html5, javascript, js
- Language: HTML
- Homepage:
- Size: 2.93 KB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# D3-HTML5-Canvas-Graph-Network
Example code on how to create and interact with a network of nodes in a canvas element, a graph, using the D3 javascript library which is mainly build for SVG. Presumably Canvas should be faster in most cases.
However, on my tests on Android, the speed is improved but it's still laggy as Android does not properly support some web technologies. Everything works just that it will skip frame rates.
On laptops, desktops, iOS, etc, it runs very smoothly.
The code also bounds the nodes to the inside of the canvas in a bounding box.
Moreover, D3 transitions are possible thanks to the fact that we'll be generating DOM elements for D3 to run on, outside of the canvas, and then use their attributes on draw.
I'm using the RandomGraph JS library to generate graph data conveniently.