helios-web

Test the preliminary version of Helios Web here:

	Light Version	Dark Version
No Density	Light	Dark
Density	Light & Density	Dark & Density

You an drag and drop your own network in gml, xnet or gexf formats.

Helios Web is a web-based library to visualize dynamic networks in real-time. Helios-web is under active development and aims to provide a simple API and optimized implementation to be integrated into other systems and render and layout large networks. This is the successor to the Networks 3D project and the Networks Web project.

Check out the demo https://filipinascimento.github.io/helios-web/docs/example/

Documentation now available at https://filipinascimento.github.io/helios-web/docs/api/

More demos:

Network	light	light+2D	dark	dark+2D	dark+blend	dark+blend+2D
Watts-Strogatz	light	light+2D	dark	dark+2D	dark+blend	dark+blend+2D
Facebook Egos	light	light+2D	dark	dark+2D	dark+blend	dark+blend+2D
Rewired Voronoi	light	light+2D	dark	dark+2D	dark+blend	dark+blend+2D
US Airports	light	light+2D	dark	dark+2D	dark+blend	dark+blend+2D
Global Airports	light	light+2D	dark	dark+2D	dark+blend	dark+blend+2D
Protein-protein	light	light+2D	dark	dark+2D	dark+blend	dark+blend+2D
Erdos collaboration	light	light+2D	dark	dark+2D	dark+blend	dark+blend+2D
Europe roads	light	light+2D	dark	dark+2D	dark+blend	dark+blend+2D
Wiki Sciences*	light	light+2D	dark	dark+2D	dark+blend	dark+blend+2D
Wiki Sciences (small)	light	light+2D	dark	dark+2D	dark+blend	dark+blend+2D
APS Citations*	light	light+2D	dark	dark+2D	dark+blend	dark+blend+2D
COVID Citations*	light	light+2D	dark	dark+2D	dark+blend	dark+blend+2D

* huge, may need a good CPU/GPU (press space to enable the layout algorithm)

Building

First install packages

npm install

Build

npm run build

Development and testing

To test the environment use npm run dev. Then go to http://localhost:8080/docs/example/ in your browser (or use the provided hostname and port).

Usage

To use it in your project you can load it as a module in modern browsers via skypack:

<script type="module">

import {Helios} from "https://cdn.skypack.dev/helios-web?min";
// Currently not working. please download and follow the build instructions.
// This will be fixed in the next release

// Nodes are dictionaries (any key can be used as node properties)
let nodes = {
  "0": {
    label: "Node 0",
  },
  "1": {
    label: "Node 1",
  },
  "2": {
    label: "Node 2",
  },
}

// Edges are arrays of node ids
let edges = [
  {
    source: "0",
    target: "1",
  },
  {
    source: "1",
    target: "2",
  },
  {
    source: "2",
    target: "0",
  }
];

let helios = new Helios({
		elementID: "netviz", // ID of the element to render the network in
		nodes: nodes, // Dictionary of nodes 
		edges: edges, // Array of edges
		use2D: false, // Choose between 2D or 3D layouts
	});

</script>

You can find a bare-minimal example at https://jsfiddle.net/yatk8jcb/14/ and a more advanced example at https://jsfiddle.net/filsilva/djfomsgw/69/ (Zachary's karate club network).

Full documentation is available at https://filipinascimento.github.io/helios-web/docs/api/

Helios web is also available as a npm package:

npm install helios-web

then you can use it in your project by importing using the same syntax as above:

import {Helios} from "helios-web";

//...