Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codeout/inet-henge
Generate d3.js based Network Diagram from JSON data.
https://github.com/codeout/inet-henge
Last synced: 22 days ago
JSON representation
Generate d3.js based Network Diagram from JSON data.
- Host: GitHub
- URL: https://github.com/codeout/inet-henge
- Owner: codeout
- License: mit
- Created: 2016-06-14T12:04:06.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2024-08-27T05:14:14.000Z (3 months ago)
- Last Synced: 2024-09-27T16:17:46.683Z (about 2 months ago)
- Language: TypeScript
- Homepage:
- Size: 4.63 MB
- Stars: 257
- Watchers: 28
- Forks: 38
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# inet-henge.js
inet-henge.js generates d3.js based Auto Layout Network Diagram from JSON data.
inet-henge helps you draw it by calculating coordinates automatically, placing nodes and links in SVG format.Each object is draggable and zoomable.
![stone-henge](https://c3.staticflickr.com/6/5480/11307043746_b3b36ccf34_h.jpg)
All you have to do are:
1. Define nodes identified by name
2. Define links by specifying both end nodes
3. Show in a browser. That's it.JSON example:
```json
{
"nodes": [
{ "name": "A" },
{ "name": "B" }
],"links": [
{ "source": "A", "target": "B" }
]
}
```## Getting Started
```zsh
npm install inet-henge# or
git clone https://github.com/codeout/inet-henge.git
```Then host the root directory in your favorite web server.
```
ruby -run -e httpd . -p 8000
```Now you can see `http://localhost:8000/example`.
```
python -m SimpleHTTPServer # python2
python -m http.server # python3or
php -S 127.0.0.1:8000
```are also available to start a web server.
## Demo
- [Shownet 2017 Network](https://codeout.github.io/inet-henge/shownet2017.html)
- [Shownet 2016 Network](https://codeout.github.io/inet-henge/shownet2016.html)## Usage
In example [here](example/shownet.html), load related assets at first:
- d3.js v3
- cola.js
- :warning: **It doesn't support d3.js v4** :warning:
- inet-henge.js```html
```define a blank container:
```html
```
and render your network diagram:
```html
new Diagram("#diagram", "shownet.json").init("interface");
```
Object is also acceptable:
```html
const data = {
"nodes": [{ "name": "A" }, { "name": "B" }],
"links": [{ "source": "A", "target": "B" }]
};
new Diagram("#diagram", data).init("interface");