Initial import of Graph (formerly Network visualization)

12 years ago · eef61aa4da
--- a/Jakefile.js
+++ b/Jakefile.js
@ -66,6 +66,7 @@ task('build', {async: true}, function () {
            './src/component/groupset.js',

            './src/timeline.js',
            './src/graph/graph.js',

            './src/module/exports.js'
        ],
--- a/examples/graph/01_basic_usage.html
+++ b/examples/graph/01_basic_usage.html
@ -0,0 +1,45 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
    <title>Graph | Basic usage</title>

    <script type="text/javascript" src="../../vis.js"></script>
 </head>

 <body>

 <div id="mygraph"></div>

 <script type="text/javascript">
    // create an array with nodes
    var nodes = [
        {id: 1, text: 'Node 1'},
        {id: 2, text: 'Node 2'},
        {id: 3, text: 'Node 3'},
        {id: 4, text: 'Node 4'},
        {id: 5, text: '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}
    ];

    // specify options
    var options = {
        width: '400px',
        height: '400px'
    };

    // create a graph
    var graph = new vis.Graph(document.getElementById('mygraph'));

    // draw the graph with the created data and options
    graph.draw(nodes, edges, options);
 </script>

 </body>
 </html>
--- a/examples/graph/02_random_nodes.html
+++ b/examples/graph/02_random_nodes.html
@ -0,0 +1,105 @@

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
    <title>Graph | Random nodes</title>

    <style type="text/css">
        body {
            font: 10pt sans;
        }
    </style>

    <script type="text/javascript" src="../../vis.js"></script>

    <script type="text/javascript">
        var nodes = null;
        var edges = null;
        var graph = null;

        function draw() {
            nodes = [];
            edges = [];
            var connectionCount = [];

            // randomly create some nodes and edges
            var nodeCount = document.getElementById('nodeCount').value;
            for (var i = 0; i < nodeCount; i++) {
                nodes.push({
                    'id': i,
                    'text': String(i)
                });

                connectionCount[i] = 0;

                // create edges in a scale-free-graph way
                if (i == 1) {
                    var from = i;
                    var to = 0;
                    edges.push({
                        'from': from,
                        'to': to
                    });
                    connectionCount[from]++;
                    connectionCount[to]++;
                }
                else if (i > 1) {
                    var conn = edges.length * 2;
                    var rand = Math.floor(Math.random() * conn);
                    var cum = 0;
                    var j = 0;
                    while (j < connectionCount.length && cum < rand) {
                        cum += connectionCount[j];
                        j++;
                    }

                    var from = i;
                    var to = j;
                    edges.push({
                        'from': from,
                        'to': to
                    });
                    connectionCount[from]++;
                    connectionCount[to]++;
                }
            }

            // specify options
            var options = {
                width: '600px',
                height: '600px',
                edges: {
                    length: 50
                },
                stabilize: false
            };

            // create a graph
            graph = new vis.Graph(document.getElementById('mygraph'));

            // draw data
            graph.draw(nodes, edges, options);

            // add event listeners
            vis.events.addListener(graph, 'select', function(params) {
                document.getElementById('selection').innerHTML =
                        'Selection: ' + JSON.stringify(graph.getSelection());
            });
        }
    </script>
 </head>

 <body onload="draw();">

 <form onsubmit="draw(); return false;">
    <label for="nodeCount">Number of nodes:</label>
    <input id="nodeCount" type="text" value="25" style="width: 50px;">
    <input type="submit" value="Go">
 </form>
 <br>

 <div id="mygraph"></div>

 <p id="selection"></p>
 </body>
 </html>
--- a/examples/graph/03_images.html
+++ b/examples/graph/03_images.html
@ -0,0 +1,78 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
    <title>Graph | Images</title>

    <style type="text/css">
        body {font: 10pt arial;}
    </style>

    <script type="text/javascript" src="../../vis.js"></script>

    <script type="text/javascript">
        var nodes = null;
        var edges = null;
        var graph = null;

        var DIR = 'img/refresh-cl/';
        var LENGTH_MAIN = 150;
        var LENGTH_SUB = 50;

        // Called when the Visualization API is loaded.
        function draw() {
            // Create a data table with nodes.
            nodes = [];

            // Create a data table with links.
            edges = [];

            nodes.push({id: 1, text: 'Main', image: DIR + 'Network-Pipe-icon.png', style: 'image'});
            nodes.push({id: 2, text: 'Office', image: DIR + 'Network-Pipe-icon.png', style: 'image'});
            nodes.push({id: 3, text: 'Wireless', image: DIR + 'Network-Pipe-icon.png', style: 'image'});
            edges.push({from: 1, to: 2, length: LENGTH_MAIN});
            edges.push({from: 1, to: 3, length: LENGTH_MAIN});

            for (var i = 4; i <= 7; i++) {
                nodes.push({id: i, text: 'Computer', image: DIR + 'Hardware-My-Computer-3-icon.png', style: 'image'});
                edges.push({from: 2, to: i, length: LENGTH_SUB});
            }

            nodes.push({id: 101, text: 'Printer', image: DIR + 'Hardware-Printer-Blue-icon.png', style: 'image'});
            edges.push({from: 2, to: 101, length: LENGTH_SUB});

            nodes.push({id: 102, text: 'Laptop', image: DIR + 'Hardware-Laptop-1-icon.png', style: 'image'});
            edges.push({from: 3, to: 102, length: LENGTH_SUB});

            nodes.push({id: 103, text: 'graph drive', image: DIR + 'Network-Drive-icon.png', style: 'image'});
            edges.push({from: 1, to: 103, length: LENGTH_SUB});

            nodes.push({id: 104, text: 'Internet', image: DIR + 'System-Firewall-2-icon.png', style: 'image'});
            edges.push({from: 1, to: 104, length: LENGTH_SUB});

            for (var i = 200; i <= 201; i++ ) {
                nodes.push({id: i, text: 'Smartphone', image: DIR + 'Hardware-My-PDA-02-icon.png', style: 'image'});
                edges.push({from: 3, to: i, length: LENGTH_SUB});
            }

            // specify options
            var options = {
                width: '600px',
                height: '600px',
                stabilize: false   // stabilize positions before displaying
            };

            // create a graph
            graph = new vis.Graph(document.getElementById('mygraph'));

            // draw data
            graph.draw(nodes, edges, options);
        }
    </script>
 </head>

 <body onload="draw()">

 <div id="mygraph"></div>

 </body>
 </html>
--- a/examples/graph/04_shapes.html
+++ b/examples/graph/04_shapes.html
@ -0,0 +1,73 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
    <title>Graph | Shapes</title>

    <style type="text/css">
        body {
            font: 10pt arial;
        }
    </style>

    <script type="text/javascript" src="../../vis.js"></script>

    <script type="text/javascript">
        var nodes = null;
        var edges = null;
        var graph = null;

        function draw() {
            nodes = [
                {id: 1, text: 'circle', style: 'circle', group: 'group_x'},
                {id: 2, text: 'circle', style: 'circle', group: 'group_x'},
                {id: 3, text: 'database', style: 'database', group: 'group_x'},
                {id: 4, text: 'rect', style: 'rect', group: 'group_x'}
            ];

            edges = [
                {from: 3, to: 1, style: 'arrow', width: 1},
                {from: 1, to: 4, style: 'moving-dot', width: 1},
                {from: 1, to: 2, style: 'moving-arrows', width: 2}
            ];

            var mainId = 5;
            nodes.push({id: mainId, text: 'styles\nand\nsizes', style: 'rect', group: 'group_main'});
            var styles = ['dot', 'square', 'triangle', 'triangleDown', 'star'];
            var id = 6;
            for (var size = 1; size < 4; size++) {
                var groupId = id;
                nodes.push({id: id, text: 'size ' + size, style: 'rect', group: 'group' + size});
                edges.push({from: mainId, to: groupId, color: 'gray', width: size});
                id++;

                for (var i in styles) {
                    if (styles.hasOwnProperty(i)) {
                        nodes.push({id: id, value: size, text: styles[i], style: styles[i], group: 'group' + size});
                        edges.push({from: groupId, to: id, color: 'gray', width: size});
                        id++;
                    }
                }
            }

            // specify options
            var options = {
                width:  '780px',
                height: '600px',
                stabilize: false
            };

            // Instantiate our graph object.
            graph = new vis.Graph(document.getElementById('mygraph'));

            // Draw our graph with the created data and options
            graph.draw(nodes, edges, options);
        }
    </script>
 </head>

 <body onload="draw()">
 <div id="mygraph"></div>

 <div id="info"></div>
 </body>
 </html>
--- a/examples/graph/05_social_network.html
+++ b/examples/graph/05_social_network.html
@ -0,0 +1,96 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
    <title>Graph | Social Network</title>

    <style>
        body {font: 10pt arial;}
    </style>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="../../vis.js"></script>

    <script type="text/javascript">
        var nodes = null;
        var edges = null;
        var graph = null;

        var DIR = 'img/soft-scraps-icons/';

        google.load('visualization', '1');

        // Set callback to run when API is loaded
        google.setOnLoadCallback(drawVisualization);

        // Called when the Visualization API is loaded.
        function drawVisualization() {
            // Create a data table with nodes.
            nodes = new google.visualization.DataTable();
            nodes.addColumn('number', 'id');
            nodes.addColumn('string', 'text');   // optional
            nodes.addColumn('string', 'image');  // optional
            nodes.addColumn('string', 'style');   // optional

            // Create a data table with links.
            edges = new google.visualization.DataTable();
            edges.addColumn('number', 'from');
            edges.addColumn('number', 'to');
            edges.addColumn('number', 'value');  // optional
            edges.addColumn('string', 'color');  // optional
            edges.addColumn('number', 'length');  // optional

            // create people
            nodes.addRow([1, 'Algie', DIR + 'Smiley-Angry-icon.png', 'image']);
            nodes.addRow([2, 'Alston', DIR + 'Smiley-Grin-icon.png', 'image']);
            nodes.addRow([3, 'Barney', DIR + 'User-Administrator-Blue-icon.png', 'image']);
            nodes.addRow([4, 'Coley', DIR + 'User-Administrator-Green-icon.png', 'image']);
            nodes.addRow([5, 'Grant', DIR + 'User-Coat-Blue-icon.png', 'image']);
            nodes.addRow([6, 'Langdon', DIR + 'User-Coat-Green-icon.png', 'image']);
            nodes.addRow([7, 'Lee', DIR + 'User-Coat-Red-icon.png', 'image']);
            nodes.addRow([8, 'Merlin', DIR + 'User-Executive-Green-icon.png', 'image']);
            nodes.addRow([9, 'Mick', DIR + 'User-Preppy-Blue-icon.png', 'image']);
            nodes.addRow([10, 'Tod', DIR + 'User-Preppy-Red-icon.png', 'image']);

            // create connections
            var color = '#BFBFBF';
            var len = 100; // pixels
            var len = undefined;
            edges.addRow([2, 8, 3, color, len]);
            edges.addRow([2, 9, 5, color, len]);
            edges.addRow([2, 10, 1, color, len]);
            edges.addRow([4, 6, 8, color, len]);
            edges.addRow([5, 7, 2, color, len]);
            edges.addRow([4, 5, 1, color, len]);
            edges.addRow([9, 10, 2, color, len]);
            edges.addRow([2, 3, 6, color, len]);
            edges.addRow([3, 9, 4, color, len]);
            edges.addRow([5, 3, 1, color, len]);
            edges.addRow([2, 7, 4, color, len]);

            // specify options
            var options = {
                width:  '600px',
                height: '600px',
                backgroundColor: {
                    fill: '#F3F3F3'
                }
            };

            // Instantiate our graph object.
            graph = new vis.Graph(document.getElementById('mygraph'));

            // Draw our graph with the created data and options
            graph.draw(nodes, edges, options);
        }
    </script>
 </head>

 <body>
 <div id="mygraph"></div>
 <p>
    Icons: <a href="http://www.deleket.com/" target="_blank">Scrap Icons by Deleket</a>
 </p>

 <div id="info"></div>
 </body>
 </html>
--- a/examples/graph/06_groups.html
+++ b/examples/graph/06_groups.html
@ -0,0 +1,140 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
    <title>Graph | Groups</title>

    <style>
        body {font: 10pt arial;}
    </style>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="../../vis.js"></script>

    <script type="text/javascript">
        var nodes = null;
        var edges = null;
        var graph = null;

        google.load('visualization', '1');

        // Set callback to run when API is loaded
        google.setOnLoadCallback(draw);

        // Called when the Visualization API is loaded.
        function draw() {
            // Create and populate a data table.
            nodes = new google.visualization.DataTable();
            nodes.addColumn('number', 'id');
            nodes.addColumn('string', 'text');
            nodes.addColumn('number', 'group');

            edges = new google.visualization.DataTable();
            edges.addColumn('number', 'from');
            edges.addColumn('number', 'to');
            edges.addColumn('number', 'length');
            edges.addColumn('string', 'color');
            var color = 'gray';
            var len = undefined;

            // randomly create some nodes
            var nodeCount = parseInt(document.getElementById('nodeCount').value);
            var nodeOffset = 0;
            var groupMin = 0;
            var groupMax = parseInt(document.getElementById('groupCount').value);
            var group = groupMin;
            var groupLeader = new Array(); // will contain the node id with the most links of each group
            while (group < groupMax) {
                // randomly create some nodes
                var i = 0;
                var cols = parseInt(Math.sqrt(nodeCount));
                var connectionCount = new Array();
                while (i < nodeCount) {
                    nodes.addRow([i + nodeOffset, i + nodeOffset + '', group]);
                    connectionCount[i] = 0;

                    // create links in a scale-free-graph way
                    if (i == 1) {
                        var from = i;
                        var to = 0;
                        edges.addRow([from + nodeOffset, to + nodeOffset, len, color]);
                        connectionCount[from]++;
                        connectionCount[to]++;
                    }
                    else if (i > 1) {
                        var conn = (i - 1) * 2;
                        var rand = Math.floor(Math.random() * conn);
                        var cum = 0;
                        var j = 0;
                        while (j < connectionCount.length && cum < rand) {
                            cum += connectionCount[j];
                            j++;
                        }

                        var from = i;
                        var to = j;
                        edges.addRow([from + nodeOffset, to + nodeOffset, len, color]);
                        connectionCount[from]++;
                        connectionCount[to]++;
                    }

                    i++;
                }

                // calculate the node with the most number of connections
                var leader = 0;
                for (c in connectionCount) {
                    if (connectionCount[c] > connectionCount[leader])
                        leader = parseInt(c);
                }

                if (group > groupMin) {
                    // connect to the leader of this group to the leader of a random other group
                    var from = leader + nodeOffset;
                    var to = groupLeader[groupMin + parseInt(Math.random() * (group - groupMin))];
                    edges.addRow([from, to, len, color]);
                }

                // add this leader to the list
                groupLeader[group] = leader + nodeOffset;

                nodeOffset += nodeCount;
                group++;
            }

            // specify options
            var options = {
                width:  '600px',
                height: '600px',
                stabilize: false,
                nodes: {
                    style: 'dot'
                },
                edges: {
                    length: 50
                }
            };

            // Instantiate our graph object.
            graph = new vis.Graph(document.getElementById('mygraph'));

            // Draw our graph with the created data and options
            graph.draw(nodes, edges, options);
        }
    </script>
 </head>

 <body>
 <form onsubmit= "javascript: draw(); return false;">
    Number of groups:
    <input type="text" value="6" id="groupCount" style="width: 50px;">
    Number of nodes per group:
    <input type="text" value="7" id="nodeCount" style="width: 50px;">
    <input type="submit" value="Go">
 </form>
 <br>

 <div id="mygraph"></div>

 <div id="info"></div>
 </body>
 </html>
--- a/examples/graph/08_selections.html
+++ b/examples/graph/08_selections.html
@ -0,0 +1,67 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
    <title>Graph | Selections</title>

    <script type="text/javascript" src="../../vis.js"></script>
 </head>

 <body>

 <div id="mygraph"></div>
 <div id="info"></div>

 <script type="text/javascript">
    // create an array with nodes
    var nodes = [
        {id: 1, text: 'Node 1'},
        {id: 2, text: 'Node 2'},
        {id: 3, text: 'Node 3'},
        {id: 4, text: 'Node 4'},
        {id: 5, text: '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}
    ];

    // specify options
    var options = {
        width: '400px',
        height: '400px'
    };

    // create a graph
    var graph = new vis.Graph(document.getElementById('mygraph'));

    // draw the graph with the created data and options
    graph.draw(nodes, edges, options);

    // add event listener
    function onSelect() {
        var selection = graph.getSelection();

        var info = 'selection: ';
        selection.forEach(function (s) {
            info += s.row + ' ';
        });

        document.getElementById('info').innerHTML += info + '<br>';
    }
    vis.events.addListener(graph, 'select', onSelect);

    // set initial selection (row based, zero-based)
    var selection = [
        {'row': 2},
        {'row': 3},
        {'row': 4}
    ];
    graph.setSelection(selection);
 </script>

 </body>
 </html>
--- a/examples/graph/16_scalable_images.html
+++ b/examples/graph/16_scalable_images.html
@ -0,0 +1,82 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
    <title>Graph | Scalable images</title>

    <style type="text/css">
        body {
            font: 10pt arial;
        }
    </style>

    <script type="text/javascript" src="../../vis.js"></script>

    <script type="text/javascript">
        var DIR = 'img/soft-scraps-icons/';

        var nodes = null;
        var edges = null;
        var graph = null;

        // Called when the Visualization API is loaded.
        function draw() {
            // create people.
            // value corresponds with the age of the person
            var DIR = 'img/soft-scraps-icons/';
            nodes = [
                {id: 1, value: 2, style: 'image', text: 'Algie', title: 'Algie (2 years old)', image: DIR + 'Smiley-Angry-icon.png'},
                {id: 2, value: 31, style: 'image', text: 'Alston', title: 'Alston (31 years old)', image: DIR + 'Smiley-Grin-icon.png'},
                {id: 3, value: 12, style: 'image', text: 'Barney', title: 'Barney (12 years old)', image: DIR + 'User-Administrator-Blue-icon.png'},
                {id: 4, value: 16, style: 'image', text: 'Coley', title: 'Coley (16 years old)', image: DIR + 'User-Administrator-Green-icon.png'},
                {id: 5, value: 17, style: 'image', text: 'Grant', title: 'Grant (17 years old)', image: DIR + 'User-Coat-Blue-icon.png'},
                {id: 6, value: 15, style: 'image', text: 'Langdon', title: 'Langdon (15 years old)', image: DIR + 'User-Coat-Green-icon.png'},
                {id: 7,  value: 6, style: 'image', text: 'Lee', title: 'Lee (6 years old)', image: DIR + 'User-Coat-Red-icon.png'},
                {id: 8,  value: 5, style: 'image', text: 'Merlin', title: 'Merlin (5 years old)', image: DIR + 'User-Executive-Green-icon.png'},
                {id: 9, value: 30, style: 'image', text: 'Mick', title: 'Mick (30 years old)', image: DIR + 'User-Preppy-Blue-icon.png'},
                {id: 10, value: 18, style: 'image', text: 'Tod', title: 'Tod (18 years old)', image: DIR + 'User-Preppy-Red-icon.png'}
            ];

            // create connetions between people
            // value corresponds with the amount of contact between two people
            edges = [
                {from: 2, to: 8, value: 3, title: '3 emails per week'},
                {from: 2, to: 9, value: 5, title: '5 emails per week'},
                {from: 2, to: 10,value: 1, title: '1 emails per week'},
                {from: 4, to: 6, value: 8, title: '8 emails per week'},
                {from: 5, to: 7, value: 2, title: '2 emails per week'},
                {from: 4, to: 5, value: 1, title: '1 emails per week'},
                {from: 9, to: 10,value: 2, title: '2 emails per week'},
                {from: 2, to: 3, value: 6, title: '6 emails per week'},
                {from: 3, to: 9, value: 4, title: '4 emails per week'},
                {from: 5, to: 3, value: 1, title: '1 emails per week'},
                {from: 2, to: 7, value: 4, title: '4 emails per week'}
            ];

            // specify options
            var options = {
                width:  '600px',
                height: '600px',
                nodes: {
                    widthMin: 20,  // min width in pixels
                    widthMax: 100  // max width in pixels
                },
                edges: {
                    color: 'lightgray'
                }
            };

            // Instantiate our graph object.
            graph = new vis.Graph(document.getElementById('mygraph'));

            // Draw our graph with the created data and options
            graph.draw(nodes, edges, options);
        }
    </script>
 </head>

 <body onload="draw()">
 <div id="mygraph"></div>

 <div id="info"></div>
 </body>
 </html>
--- a/examples/graph/19_dot_language.html
+++ b/examples/graph/19_dot_language.html
@ -0,0 +1,37 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Graph | DOT Language</title>

    <script type="text/javascript" src="../../vis.js"></script>

    <style type="text/css">
        html, body, #graph {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
 </head>
 <body>
 <div id="graph"></div>

 <script type="text/javascript">
    // create a network view
    var graph = new vis.Graph(document.getElementById('graph'));

    // parse data in DOT-notation
    var dot = 'digraph {node[shape=circle]; 1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
    var data = vis.Graph.util.DOTToGraph(dot);

    // draw the data
    graph.draw(data.nodes, data.edges, data.options);

    // resize the network when window resizes
    window.onresize = function () {
        graph.redraw()
    };
 </script>
 </body>
 </html>
--- a/examples/graph/20_dot_language_playground.html
+++ b/examples/graph/20_dot_language_playground.html
@ -0,0 +1,212 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Graph | DOT language playground</title>

    <script type="text/javascript" src="../../vis.js"></script>

    <style type="text/css">
        body, html {
            font: 10pt sans;
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            color: #4d4d4d;
        }

        #frame {
            width: 100%;
            height: 99%;
        }
        #frame td {
            padding: 10px;
        }
        #error {
            color: red;
        }

        #data {
            float: left;
            width: 100%;
            height: 100%;
            border: 1px solid #d3d3d3;
        }

        #graph {
            float: left;
            width: 100%;
            height: 100%;
        }

        textarea.example {
            display: none;
        }
    </style>
 </head>
 <body>

 <table id="frame">
    <col width="50%">
    <col width="50%">
    <tr>
        <td colspan="2" style="height: 50px;">
            <h1>Directed graph from data in DOT language</h1>
            <div>
                <a href="javascript: drawExample('example1')">example 1</a>
                <a href="javascript: drawExample('example2')">example 2</a>
                <a href="javascript: drawExample('example3')">example 3</a>
            </div>
            <div>
                <br>
                <button id="draw">Draw</button>
                <span id="error"></span>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <textarea id="data"></textarea>
        </td>
        <td>
            <div id="graph"></div>
        </td>
    </tr>
 </table>

 <script type="text/javascript">
    var graph, data;

    var btnDraw = document.getElementById('draw');
    var txtData = document.getElementById('data');
    var txtError = document.getElementById('error');
    btnDraw.onclick = draw;

    // resize the graph when window resizes
    window.onresize = function () {
        graph.redraw()
    };

    // parse and draw the data
    function draw () {
        try {
            // create a graph
            graph = new vis.Graph(document.getElementById('graph'));

            txtError.innerHTML = '';

            // parse the data from DOT-notation
            data = vis.Graph.util.DOTToGraph(txtData.value);

            // draw the data in the graph view
            var options = data.options;
            options.width = '100%';
            //options.links.length = options.links.length;
            options.height = '100%';
            //options.nodes.radius = 20;
            //options.links.width = 2;
            graph.draw(data.nodes, data.edges, options);
        }
        catch (err) {
            // set the cursor at the position where the error occurred
            var match = /\(char (.*)\)/.exec(err);
            if (match) {
                var pos = Number(match[1]);
                if(txtData.setSelectionRange) {
                    txtData.focus();
                    txtData.setSelectionRange(pos, pos);
                }
            }

            // show an error message
            txtError.innerHTML =  err.toString();
        }
    }

    /**
     * Draw an example
     * @param {String} id HTML id of the textarea containing the example code
     */
    function drawExample(id) {
        txtData.value = document.getElementById(id).value;
        draw();
    }
 </script>

 <textarea id="example1" class="example">
 digraph {
    node [style=circle fontSize=16]
    edge [length=100, color=gray, fontColor=black]

    A -> A[text=0.5];
    B -> B[text=1.2] -> C[text=0.7] -- A;
    B -> D;
    D -> B;
    D -> C;
    D -> E[text=0.2];
    F -> F;
    A [
        fontColor=red,
        borderColor=red,
        backgroundColor=white,
        highlightColor=white
    ]
 }
 </textarea>

 <textarea id="example2" class="example">
 digraph topology
 {
    node[shape=circle fontSize=12]
    edge[length=170 fontSize=12]
    "10.0.255.1" -> "10.0.255.3"[label="1.000"];
    "10.0.255.1" -> "10.0.255.2"[label="1.000"];
    "10.0.255.1" -> "10.0.255.2"[label="1.000"];
    "10.0.255.1" -> "10.0.255.3"[label="1.000"];
    "10.0.255.2" -> "10.0.255.1"[label="1.000"];
    "10.0.255.2" -> "10.0.255.3"[label="1.000"];
    "10.0.255.3" -> "10.0.255.1"[label="1.000"];
    "10.0.255.3" -> "10.0.255.2"[label="1.000"];
    "10.0.255.3" -> "10.0.3.0/24"[label="HNA", style=solid];
    "10.0.3.0/24"[shape=rect];
    "10.0.255.2" -> "10.0.2.0/24"[label="HNA"];
    "10.0.2.0/24"[shape=rect];
    "10.0.255.1" -> "10.0.1.0/24"[label="HNA"];
    "10.0.1.0/24"[shape=rect];
 }
 </textarea>

 <textarea id="example3" class="example">
 digraph G  {
    // note: not all attributes are recognized and supported by Network
    //       unrecognized attributes are ignored

    node[width=.25,height=.375,fontsize=15]
    node [style=filled fillcolor=#F1AAF0]
    0-> 0 ;
    1-> 1 ;
    2-> 2 ;
    3-> 3 ;
    4-> 4 ;
    5-> 5 ;
    6-> 6 ;
    7-> 5 ;
    8-> 8 ;
    9-> 9 ;
    10-> 10 ;
    11-> 10 ;
    12-> 12 ;
    13-> 5 ;
    14-> 10 ;
    15-> 0 ;
 }
 </textarea>

 <script>

    // draw example1 now
    drawExample('example1');
 </script>

 </body>
 </html>
--- a/examples/graph/img/refresh-cl/Hardware-Fax-icon.png
+++ b/examples/graph/img/refresh-cl/Hardware-Fax-icon.png
--- a/examples/graph/img/refresh-cl/Hardware-Laptop-1-icon.png
+++ b/examples/graph/img/refresh-cl/Hardware-Laptop-1-icon.png
--- a/examples/graph/img/refresh-cl/Hardware-Mobile-Phone-icon.png
+++ b/examples/graph/img/refresh-cl/Hardware-Mobile-Phone-icon.png
--- a/examples/graph/img/refresh-cl/Hardware-My-Computer-3-icon.png
+++ b/examples/graph/img/refresh-cl/Hardware-My-Computer-3-icon.png
--- a/examples/graph/img/refresh-cl/Hardware-My-PDA-02-icon.png
+++ b/examples/graph/img/refresh-cl/Hardware-My-PDA-02-icon.png
--- a/examples/graph/img/refresh-cl/Hardware-My-PDA-04-icon.png
+++ b/examples/graph/img/refresh-cl/Hardware-My-PDA-04-icon.png
--- a/examples/graph/img/refresh-cl/Hardware-My-PDA-05-icon.png
+++ b/examples/graph/img/refresh-cl/Hardware-My-PDA-05-icon.png
--- a/examples/graph/img/refresh-cl/Hardware-My-Phone-Picture-icon.png
+++ b/examples/graph/img/refresh-cl/Hardware-My-Phone-Picture-icon.png
--- a/examples/graph/img/refresh-cl/Hardware-Printer-Blue-icon.png
+++ b/examples/graph/img/refresh-cl/Hardware-Printer-Blue-icon.png
--- a/examples/graph/img/refresh-cl/Misc-Scanner-default-icon.png
+++ b/examples/graph/img/refresh-cl/Misc-Scanner-default-icon.png
--- a/examples/graph/img/refresh-cl/Network-Drive-icon.png
+++ b/examples/graph/img/refresh-cl/Network-Drive-icon.png
--- a/examples/graph/img/refresh-cl/Network-Internet-Connection-icon.png
+++ b/examples/graph/img/refresh-cl/Network-Internet-Connection-icon.png
--- a/examples/graph/img/refresh-cl/Network-Pipe-icon.png
+++ b/examples/graph/img/refresh-cl/Network-Pipe-icon.png
--- a/examples/graph/img/refresh-cl/System-Firewall-2-icon.png
+++ b/examples/graph/img/refresh-cl/System-Firewall-2-icon.png
--- a/examples/graph/img/refresh-cl/System-Globe-icon.png
+++ b/examples/graph/img/refresh-cl/System-Globe-icon.png
--- a/examples/graph/img/refresh-cl/license.txt
+++ b/examples/graph/img/refresh-cl/license.txt
@ -0,0 +1,14 @@
 Refresh Cl icon set

 http://www.iconarchive.com/show/refresh-cl-icons-by-tpdkdesign.net.html
 http://www.iconarchive.com/artist/tpdkdesign.net.html

 Artist: TpdkDesign.net
 License: Free for non-commercial use.

 Name: TpdkDesign.net
 URL: http://www.tpdkdesign.net
 Available for custom work: No
 Default License: Free for non-commercial use.
 Commercial usage: Not allowed

--- a/examples/graph/img/soft-scraps-icons/Document-icon24.png
+++ b/examples/graph/img/soft-scraps-icons/Document-icon24.png
--- a/examples/graph/img/soft-scraps-icons/Document-icon32.png
+++ b/examples/graph/img/soft-scraps-icons/Document-icon32.png
--- a/examples/graph/img/soft-scraps-icons/Document-icon48.png
+++ b/examples/graph/img/soft-scraps-icons/Document-icon48.png
--- a/examples/graph/img/soft-scraps-icons/Email-icon24.png
+++ b/examples/graph/img/soft-scraps-icons/Email-icon24.png
--- a/examples/graph/img/soft-scraps-icons/Email-icon32.png
+++ b/examples/graph/img/soft-scraps-icons/Email-icon32.png
--- a/examples/graph/img/soft-scraps-icons/Email-icon48.png
+++ b/examples/graph/img/soft-scraps-icons/Email-icon48.png
--- a/examples/graph/img/soft-scraps-icons/Folder-icon24.png
+++ b/examples/graph/img/soft-scraps-icons/Folder-icon24.png
--- a/examples/graph/img/soft-scraps-icons/Folder-icon32.png
+++ b/examples/graph/img/soft-scraps-icons/Folder-icon32.png
--- a/examples/graph/img/soft-scraps-icons/Folder-icon48.png
+++ b/examples/graph/img/soft-scraps-icons/Folder-icon48.png
--- a/examples/graph/img/soft-scraps-icons/Folder-icon64.png
+++ b/examples/graph/img/soft-scraps-icons/Folder-icon64.png
--- a/examples/graph/img/soft-scraps-icons/Smiley-Angry-icon.png
+++ b/examples/graph/img/soft-scraps-icons/Smiley-Angry-icon.png
--- a/examples/graph/img/soft-scraps-icons/Smiley-Grin-icon.png
+++ b/examples/graph/img/soft-scraps-icons/Smiley-Grin-icon.png
--- a/examples/graph/img/soft-scraps-icons/User-Administrator-Blue-icon.png
+++ b/examples/graph/img/soft-scraps-icons/User-Administrator-Blue-icon.png
--- a/examples/graph/img/soft-scraps-icons/User-Administrator-Green-icon.png
+++ b/examples/graph/img/soft-scraps-icons/User-Administrator-Green-icon.png
--- a/examples/graph/img/soft-scraps-icons/User-Coat-Blue-icon.png
+++ b/examples/graph/img/soft-scraps-icons/User-Coat-Blue-icon.png
--- a/examples/graph/img/soft-scraps-icons/User-Coat-Green-icon.png
+++ b/examples/graph/img/soft-scraps-icons/User-Coat-Green-icon.png
--- a/examples/graph/img/soft-scraps-icons/User-Coat-Red-icon.png
+++ b/examples/graph/img/soft-scraps-icons/User-Coat-Red-icon.png
--- a/examples/graph/img/soft-scraps-icons/User-Executive-Green-icon.png
+++ b/examples/graph/img/soft-scraps-icons/User-Executive-Green-icon.png
--- a/examples/graph/img/soft-scraps-icons/User-Preppy-Blue-icon.png
+++ b/examples/graph/img/soft-scraps-icons/User-Preppy-Blue-icon.png
--- a/examples/graph/img/soft-scraps-icons/User-Preppy-Red-icon.png
+++ b/examples/graph/img/soft-scraps-icons/User-Preppy-Red-icon.png
--- a/examples/graph/img/soft-scraps-icons/license.txt
+++ b/examples/graph/img/soft-scraps-icons/license.txt
@ -0,0 +1,12 @@
 Scrap Icons by Deleket

 http://www.iconarchive.com/show/soft-scraps-icons-by-deleket.html


 Artist: Deleket (Jojo Mendoza) (Available for custom work)
 License: CC Attribution-Noncommercial-No Derivate 3.0

 http://creativecommons.org/licenses/by-nc-nd/3.0/

 Commercial usage: Allowed (Author Approval required -> Visit artist homepage for details).

--- a/src/graph/graph.js
+++ b/src/graph/graph.js
--- a/src/module/exports.js
+++ b/src/module/exports.js
@ -28,7 +28,8 @@ var vis = {
        TimeAxis: TimeAxis
    },

    Timeline: Timeline
    Timeline: Timeline,
    Graph: Graph
 };

 /**
--- a/vis.js
+++ b/vis.js
--- a/vis.min.js
+++ b/vis.min.js