Gnet is a JavaScript library for network graph visualization, developed by Goutham.
First I want to thank D3.js developers for creating such an amazing data visualization library. Gnet is build on top of D3.js for graph visualization and interaction. Even though it's build on D3.js it's very lightweight javascript library compared to D3.js. Also, Gnet is making use canvas feature of D3.js instead of traditional SVG. The big advantage of canvas over SVG is that you can create thousands of separate elements without it really affecting the performance.
This project is beta so I'm not recommending for production use.
Things I used.
A basic example of loading the network graph is shown below using Gnet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gnet</title>
</head>
<body>
<div id="container"></div>
</body>
<script src="gnet.min.js"></script>
<script src="main.js"></script>
</html>function main(){
const data = {
nodes: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }],
links: [
{
source: 1,
target: 2,
},
{
source: 2,
target: 3,
},
{
source: 3,
target: 4,
},
{
source: 4,
target: 2,
},
{
source: 3,
target: 5,
},
],
};
const graph = new Gnet("#container", {
width: "500",
height: "500",
nodeStyle: {
radius: 5,
color: "#48C9B0",
borderColor: "#fff",
},
linkStyle: {
color: "#aaa",
},
complete: (d) => {
console.log(d);
},
});
graph.addData(data);
graph.run();
}
main();that's it, simple right 😎
To build the library from source, clone the project from github.
$ git clone https://github.com/gouthams96/gnet.js.git
To install all the dependencies and build the library, run following commands in the root of the project.
$ cd gnet.js
$ npm install
Then, the project can be build running:
$ npm run build
Contributions to the Gnet.js is are very welcome!.