helios-web-dev v0.5.1
Helios Web
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/
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
npx snowpack build
Development and testing
To test the environment use npm start
or npx snowpack 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:
Note: MAJOR changes in version 0.5! Check 0.5 API Changes
<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).
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";
//...
0.5 API changes
- Added support for selectable edge picking via
pickeableEdges
- Zoom functtion now uses the same easing as the camera interpolator (this will be fixed when camera object is implemented)
- now, an DOM element can be used as input
for helios (
element
),elementID
can still be used. - Shaded nodes can be enabled/disabled on demand (
shadedNodes()
) - Global Opacity, Size and width (for edges) can be changed via:
nodesGlobalOpacityScale*
,nodesGlobalSizeScale*
,nodesGlobalOutlineWidthScale*
,edgesGlobalOpacityScale*
, andedgesGlobalWidthScale*
.- can be
Scale
corresponding to a multiplicative factor, orBase
, corresponding to additive factor
- can be
nodeOpacity
now sets opacity for individual nodes instead of all nodes (works likenodeColor
).
2 years ago