Network Examples

View all examples » View docs »
This small code example shows the easiest way to get a network up and running. This code has been taken from example 1. The working example is shown next to it. (click it to start interacting with it).
<div id="visualization"></div>
<script type="text/javascript">
    // create an array with nodes
    var nodes = [
        {id: 1, label: 'Node 1'},
        {id: 2, label: 'Node 2'},
        {id: 3, label: 'Node 3'},
        {id: 4, label: 'Node 4'},
        {id: 5, label: 'Node 5'}
    ];

    // create an array with edges
    var edges = [
        {from: 1, to: 2},
        {from: 1, to: 3},
        {from: 2, to: 4},
        {from: 2, to: 5}
    ];

    // create a network
    var container = document.getElementById('mynetwork');
    var data = {
        nodes: nodes,
        edges: edges
    };
    var network = new vis.Network(container, data, {});
</script>

All examples

basic usage
random nodes
images
shapes
social network
groups
selections
mobile friendly
sizing
multiline text
custom style
scalable images
dashed lines
dot language
playground
dynamic data
network info
fully random nodes clustering
scale free graph clustering
navigation
data manipulation
les miserables
hierarchical layout
hierarchical layout userdefined
physics configuration
static smooth curves
world cup network
world cup network performance
neighborhood highlight
importing from gephi
localization
hierarchical layout methods
animation
graphviz exampleScreenshots