bugfixes, start of reorganisation of examples

9 years ago · 0d32566e39
--- a/dist/vis.js
+++ b/dist/vis.js
--- a/docs/network/interaction.html
+++ b/docs/network/interaction.html
@ -88,7 +88,7 @@ var options = {
    dragView: true,
    hideEdgesOnDrag: false,
    hideNodesOnDrag: false,
    hoverEnabled: false,
    hover: false,
    keyboard: {
      enabled: false,
      speed: {x: 10, y: 10, zoom: 0.02},
@ -123,7 +123,7 @@ network.setOptions(options);
        <tr><td>dragView</td>               <td class="mid">Boolean</td>            <td class="mid"><code>true</code></td>      <td>When true, the view can be dragged around by the user.</td></tr>
        <tr><td>hideEdgesOnDrag</td>        <td class="mid">Boolean</td>            <td class="mid"><code>false</code></td>     <td>When true, the edges are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
        <tr><td>hideNodesOnDrag</td>        <td class="mid">Boolean</td>            <td class="mid"><code>false</code></td>     <td>When true, the nodes are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
        <tr><td>hoverEnabled</td>           <td class="mid">Boolean</td>            <td class="mid"><code>false</code></td>     <td>When true, the nodes use their hover colors when the mouse moves over them.</td></tr>
        <tr><td>hover</td>                  <td class="mid">Boolean</td>            <td class="mid"><code>false</code></td>     <td>When true, the nodes use their hover colors when the mouse moves over them.</td></tr>
        <tr class='toggle collapsible' onclick="toggleTable('optionTable','keyboard', this);"><td><span parent="keyboard" class="right-caret"></span> keyboard</td>               <td class="mid">Object or Boolean</td>   <td class="mid"><code>Object</code></td>    <td>When true, the keyboard shortcuts are enabled with the default settings. For further customization, you can supply an object.</td></tr>
        <tr parent="keyboard" class="hidden"><td class="indent">keyboard.enabled</td>       <td class="mid">Boolean</td>            <td class="mid"><code>false</code></td>     <td>Toggle the usage of the keyboard shortcuts. If this option is not defined, it is set to true if any of the properties in this object are defined.</td></tr>
        <tr parent="keyboard" class="hidden"><td class="indent">keyboard.speed.x</td>       <td class="mid">Number</td>             <td class="mid"><code>1</code></td>         <td>The speed at which the view moves in the x direction on pressing a key or pressing a navigation button.</td></tr>
--- a/examples/network/04_shapes.html
+++ b/examples/network/04_shapes.html
@ -1,76 +0,0 @@
 <!doctype html>
 <html>
 <head>
  <title>Network | Shapes</title>
  <style type="text/css">
    #mynetwork {
      width: 800px;
      height: 600px;
      border: 1px solid lightgray;
    }
  </style>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript">
    var nodes = null;
    var edges = null;
    var network = null;
    function draw() {
      nodes = [
        {id: 1, label: 'circle',  shape: 'circle',  group: 'group_x'},
        {id: 2, label: 'ellipse', shape: 'ellipse', group: 'group_x'},
        {id: 3, label: 'database',shape: 'database',group: 'group_x'},
        {id: 4, label: 'box',     shape: 'box',     group: 'group_x'},
        {id: 5, label: 'diamond', shape: 'diamond', group: 'group_x'}
      ];
      edges = [
        {from: 3, to: 1, arrows: 'to'},
        {from: 1, to: 4, dashes: true},
        {from: 1, to: 2, dashes: true, arrows: 'to, from'},
        {from: 1, to: 5, arrows: 'middle'}
      ];
      var mainId = 6;
      nodes.push({id: mainId, label: 'shapes and\nsizes', shape: 'box', group: 'group_main'});
      var shapes = ['dot', 'square', 'triangle', 'triangleDown', 'star','diamond'];
      var id = 7;
      for (var size = 1; size < 4; size++) {
        var groupId = id;
        nodes.push({id: id, label: 'size ' + size, shape: 'box', group: 'group' + size});
        edges.push({from: mainId, to: groupId, color: 'gray', width: size});
        id++;
        for (var i = 0; i < shapes.length; i++) {
          nodes.push({id: id, value: size, label: shapes[i], shape: shapes[i], group: 'group' + size});
          edges.push({from: groupId, to: id, color: 'gray', width: size});
          id++;
        }
      }
      // create a network
      var container = document.getElementById('mynetwork');
      var data = {
        nodes: nodes,
        edges: edges
      };
      var options = {};
      network = new vis.Network(container, data, options);
    }
  </script>
  <script src="../googleAnalytics.js"></script>
 <body onload="draw()">
 <p>
  Nodes can have all sorts of shapes, colors and sizes. Edges can be drawn solid or dashed, and can have one or multiple arrows.
 </p>
 <div id="mynetwork"></div>
 <div id="info"></div>
 </body>
 </html>
--- a/examples/network/06_groups.html
+++ b/examples/network/06_groups.html
@ -1,171 +0,0 @@
 <!doctype html>
 <html>
 <head>
  <title>Network | Groups</title>
  <style>
    body {
        color: #d3d3d3;
        font: 12pt arial;
        background-color:#222222;
    }
    #mynetwork {
      width: 600px;
      height: 600px;
      border: 1px solid #444444;
      background-color:#222222;
    }
  </style>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript">
    var nodes = null;
    var edges = null;
    var network = null;
    var nodesData = null;
    function destroy() {
      if (network !== null) {
        network.destroy();
        network = null;
      }
    }
    function draw() {
      destroy();
      var from, to;
      nodes = [];
      edges = [];
      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 = []; // 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 = [];
        while (i < nodeCount) {
          nodes.push({
            id: i + nodeOffset,
            label: String(i + nodeOffset),
            group: group
          });
          connectionCount[i] = 0;
          // create links in a scale-free-network way
          if (i == 1) {
            from = i;
            to = 0;
            edges.push({
              from: from + nodeOffset,
              to: to + nodeOffset,
              length: len
            });
            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++;
            }
            from = i;
            to = j;
            edges.push({
              from: from + nodeOffset,
              to: to + nodeOffset,
              length: len
            });
            connectionCount[from]++;
            connectionCount[to]++;
          }
          i++;
        }
        // calculate the node with the most number of connections
        var leader = 0;
        for (var c in connectionCount) {
          if (connectionCount.hasOwnProperty(c)) {
            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
          from = leader + nodeOffset;
          to = groupLeader[groupMin + parseInt(Math.random() * (group - groupMin))];
          edges.push({
            from: from,
            to: to,
            length: len
          });
        }
        // add this leader to the list
        groupLeader[group] = leader + nodeOffset;
        nodeOffset += nodeCount;
        group++;
      }
      nodesData = new vis.DataSet(nodes);
      // create a network
      var container = document.getElementById('mynetwork');
      var data = {
        nodes: nodesData,
        edges: edges
      };
      var options = {
        nodes: {
            shape: 'dot',
            size: 30,
            font: {
              size: 32,
              color: '#ffffff'
            },
            borderWidth: 2
        },
        edges : {
          width: 2
        }
      };
      network = new vis.Network(container, data, options);
    }
  </script>
  <script src="../googleAnalytics.js"></script>
 </head>
 <body onload="draw()">
 <p>
  Apply styling to groups of nodes.
 </p>
 <form onsubmit= "javascript: draw(); return false;">
  Number of groups: <input type="text" value="10" id="groupCount" style="width: 50px;">
  Number of nodes per group: <input type="text" value="3" id="nodeCount" style="width: 50px;">
  <input type="submit" value="Go">
 </form>
 <br>
 <div id="mynetwork"></div>
 </body>
 </html>
--- a/examples/network/categories/01_basic_usage.html
+++ b/examples/network/categories/01_basic_usage.html
--- a/examples/network/categories/02_random_nodes.html
+++ b/examples/network/categories/02_random_nodes.html
--- a/examples/network/categories/05_social_network.html
+++ b/examples/network/categories/05_social_network.html
--- a/examples/network/categories/07_selections.html
+++ b/examples/network/categories/07_selections.html
--- a/examples/network/categories/09_scaling.html
+++ b/examples/network/categories/09_scaling.html
--- a/examples/network/categories/10_multiline_text.html
+++ b/examples/network/categories/10_multiline_text.html
--- a/examples/network/categories/11_styling.html
+++ b/examples/network/categories/11_styling.html
--- a/examples/network/categories/12_arrows.html
+++ b/examples/network/categories/12_arrows.html
--- a/examples/network/categories/13_dashed_lines.html
+++ b/examples/network/categories/13_dashed_lines.html
--- a/examples/network/categories/14_dot_language.html
+++ b/examples/network/categories/14_dot_language.html
--- a/examples/network/categories/15_dot_language_playground.html
+++ b/examples/network/categories/15_dot_language_playground.html
--- a/examples/network/categories/16_dynamic_data.html
+++ b/examples/network/categories/16_dynamic_data.html
--- a/examples/network/categories/17_network_info.html
+++ b/examples/network/categories/17_network_info.html
--- a/examples/network/categories/18_fully_random_nodes_clustering.html
+++ b/examples/network/categories/18_fully_random_nodes_clustering.html
--- a/examples/network/categories/19_scale_free_graph_clustering.html
+++ b/examples/network/categories/19_scale_free_graph_clustering.html
--- a/examples/network/categories/20_navigation.html
+++ b/examples/network/categories/20_navigation.html
--- a/examples/network/categories/22_les_miserables.html
+++ b/examples/network/categories/22_les_miserables.html
--- a/examples/network/categories/23_hierarchical_layout.html
+++ b/examples/network/categories/23_hierarchical_layout.html
--- a/examples/network/categories/24_hierarchical_layout_userdefined.html
+++ b/examples/network/categories/24_hierarchical_layout_userdefined.html
--- a/examples/network/categories/25_physics_configuration.html
+++ b/examples/network/categories/25_physics_configuration.html
--- a/examples/network/categories/26_staticSmoothCurves.html
+++ b/examples/network/categories/26_staticSmoothCurves.html
--- a/examples/network/categories/27_world_cup_network.html
+++ b/examples/network/categories/27_world_cup_network.html
--- a/examples/network/categories/28_world_cup_network_performance.html
+++ b/examples/network/categories/28_world_cup_network_performance.html
--- a/examples/network/categories/29_neighbourhood_highlight.html
+++ b/examples/network/categories/29_neighbourhood_highlight.html
--- a/examples/network/categories/30_importing_from_gephi.html
+++ b/examples/network/categories/30_importing_from_gephi.html
--- a/examples/network/categories/31_manipulation_and_localization.html
+++ b/examples/network/categories/31_manipulation_and_localization.html
--- a/examples/network/categories/32_hierarchicaLayoutMethods.html
+++ b/examples/network/categories/32_hierarchicaLayoutMethods.html
--- a/examples/network/categories/33_animation.html
+++ b/examples/network/categories/33_animation.html
--- a/examples/network/categories/35_label_stroke.html
+++ b/examples/network/categories/35_label_stroke.html
--- a/examples/network/categories/37_label_alignment.html
+++ b/examples/network/categories/37_label_alignment.html
--- a/examples/network/categories/39_newClustering.html
+++ b/examples/network/categories/39_newClustering.html
--- a/examples/network/categories/edgeStyles/smooth.html
+++ b/examples/network/categories/edgeStyles/smooth.html
@ -0,0 +1,115 @@
 <!doctype html>
 <html>
 <head>
  <title>Network | Static smooth curves</title>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    #mynetwork {
      width: 400px;
      height: 400px;
      border: 1px solid lightgray;
    }
  </style>
  <script src="../googleAnalytics.js"></script>
 </head>
 <body>
 <h2>Static smooth curves</h2>
 <div style="width:700px; font-size:14px; text-align: justify;">
    All the smooth curves in the examples so far have been using dynamic smooth curves. This means that each curve has a
    support node which takes part in the physics simulation. For large networks or dense clusters, this may not be the ideal
    solution. To solve this, static smooth curves have been added. The static smooth curves are based only on the positions of the connected
    nodes. There are multiple ways to determine the way this curve is drawn. This example shows the effect of the different
    types. <br /> <br />
    Drag the nodes around each other to see how the smooth curves are drawn for each setting. For animated system, we
    recommend only the continuous mode. In the next example you can see the effect of these methods on a large network. Keep in mind
    that the direction (the from and to) of the curve matters.
    <br /> <br />
 </div>
 <p>
  Smooth curve type:
  <select id="dropdownID">
    <option value="continuous" selected="selected">continuous</option>
    <option value="discrete">discrete</option>
    <option value="diagonalCross">diagonalCross</option>
    <option value="straightCross">straightCross</option>
    <option value="horizontal">horizontal</option>
    <option value="vertical">vertical</option>
    <option value="curvedCW">curvedCW</option>
    <option value="curvedCCW">curvedCCW</option>
  </select>
 </p>
 <p>
  Roundness (0..1): <input type="range" min="0" max="1" value="0.5" step="0.05" style="width:200px" id="roundnessSlider"> <input id="roundnessScreen" value="0.5"> (0.5 is max roundness for continuous, 1.0 for the others)
 </p>
 <div id="mynetwork"></div>
 <script type="text/javascript">
  var dropdown = document.getElementById("dropdownID");
  dropdown.onchange = update;
  var roundnessSlider = document.getElementById("roundnessSlider");
  roundnessSlider.onchange = update;
  var roundnessScreen = document.getElementById("roundnessScreen");
  // create an array with nodes
  var nodes = [
    {id: 1, label: 'Node 1'},
    {id: 2, label: 'Node 2', x:150, y:130, allowedToMoveX: true, allowedToMoveY: true}
  ];
  // create an array with edges
  var edges = [
    {from: 1, to: 2, style:"arrow"}
  ];
  // create a network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {
    physics:{
      barnesHut: {
        gravitationalConstant:0,
        springConstant:0,
        centralGravity: 0
      }
    },
    edges: {
      smooth: {
        dynamic: false,
        type: '1'
      }
    }
  };
  var network = new vis.Network(container, data, options);
  function update() {
    var type = dropdown.value;
    var roundness = parseFloat(roundnessSlider.value);
    roundnessScreen.value = roundness;
    var options = {
      edges: {
        smooth: {
          type: type,
          roundness: roundness
        }
      }
    };
    network.setOptions(options);
  }
  update();
 </script>
 </body>
 </html>
--- a/examples/network/categories/edgeStyles/styles.html
+++ b/examples/network/categories/edgeStyles/styles.html
@ -0,0 +1,55 @@
 <!doctype html>
 <html>
 <head>
  <title>Network | Basic usage</title>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    #mynetwork {
      width: 600px;
      height: 400px;
      border: 1px solid lightgray;
    }
  </style>
 </head>
 <body>
 <p>
  Create a simple network with some nodes and edges.
 </p>
 <div id="mynetwork"></div>
 <script type="text/javascript">
  // create an array with nodes
  var nodes = new vis.DataSet([
    {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 = new vis.DataSet([
    {from: 1, to: 3},
    {from: 1, to: 2},
    {from: 2, to: 4},
    {from: 2, to: 5}
  ]);
  // create a network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {};
  var network = new vis.Network(container, data, options);
 </script>
 <script src="../googleAnalytics.js"></script>
 </body>
 </html>
--- a/examples/network/categories/index.html
+++ b/examples/network/categories/index.html
--- a/examples/network/categories/nodeStyles/HTML_in_Nodes.html
+++ b/examples/network/categories/nodeStyles/HTML_in_Nodes.html
@ -16,8 +16,8 @@
    </style>
    <script type="text/javascript" src="../../dist/vis.js"></script>
    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../../../../dist/vis.js"></script>
    <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var nodes = null;
@ -29,13 +29,13 @@
        var LENGTH_SUB = 50;
        var data = '<svg xmlns="http://www.w3.org/2000/svg" width="243" height="65">' +
        var data = '<svg xmlns="http://www.w3.org/2000/svg" width="390" height="65">' +
            '<rect x="0" y="0" width="100%" height="100%" fill="#7890A7" stroke-width="20" stroke="#ffffff" ></rect>' +
            '<foreignObject x="15" y="10" width="100%" height="100%">' +
            '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
            '<em>I</em> like' +
            ' <em>I</em> am' +
            '<span style="color:white; text-shadow:0 0 20px #000000;">' +
            'cheese</span>' +
            ' HTML in SVG!</span>' +
            '</div>' +
            '</foreignObject>' +
            '</svg>';
@ -71,7 +71,7 @@
            network = new vis.Network(container, data, options);
        }
    </script>
    <script src="../googleAnalytics.js"></script>
    <script src="../../../googleAnalytics.js"></script>
 </head>
 <body onload="draw()">
--- a/examples/network/categories/nodeStyles/circular_images.html
+++ b/examples/network/categories/nodeStyles/circular_images.html
@ -15,8 +15,8 @@
    }
  </style>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="../../../../dist/vis.js"></script>
  <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript"> 
    var DIR = 'img/soft-scraps-icons/';
@ -29,7 +29,7 @@
    function draw() {
      // create people.
      // value corresponds with the age of the person
      var DIR = 'img/indonesia/';
      var DIR = '../../img/indonesia/';
      nodes = [
        {id: 1,  shape: 'circularImage', image: DIR + '1.png'},
        {id: 2,  shape: 'circularImage', image: DIR + '2.png'},
@ -76,7 +76,7 @@
      var options = {
        nodes: {
          borderWidth:4,
            size:30,
          size:30,
 	      color: {
            border: '#222222',
            background: '#666666'
@ -90,10 +90,11 @@
      network = new vis.Network(container, data, options);
    }
  </script>
  <script src="../googleAnalytics.js"></script>
  <script src="../../../googleAnalytics.js"></script>
 </head>
 <body onload="draw()">
 <div id="mynetwork"></div>
 </body>
 </html>
--- a/examples/network/categories/nodeStyles/colors.html
+++ b/examples/network/categories/nodeStyles/colors.html
@ -0,0 +1,57 @@
 <!doctype html>
 <html>
 <head>
  <title>Network | Basic usage</title>
  <script type="text/javascript" src="../../../../dist/vis.js"></script>
  <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    #mynetwork {
      width: 600px;
      height: 400px;
      border: 1px solid lightgray;
    }
  </style>
 </head>
 <body>
 <p>
  Create a simple network with some nodes and edges.
 </p>
 <div id="mynetwork"></div>
 <script type="text/javascript">
  // create an array with nodes
  var nodes = new vis.DataSet([
    {id: 1, label:'html color', color: 'red'},
    {id: 2, label:'rgb color', color: 'rgb(200,12,31)'},
    {id: 3, label:'hex color', color: '#ff00dd'},
    {id: 4, label:'rgba color', color: 'rgba(230,53,94,0.5)'},
    {id: 5, label:'colorObject', color: {background:'red', border:'blue'}},
    {id: 6, label:'colorObject + highlight', color: {background:'orange', border:'blue',highlight:{background:'red',border:'blue'}}},
    {id: 7, label:'colorObject + highlight + hover', color: {background:'orange', border:'blue',highlight:{background:'red',border:'blue'},hover:{background:'white',border:'red'}}}
  ])
  // create an array with edges
  var edges = new vis.DataSet([
    {from: 1, to: 3},
    {from: 1, to: 2},
    {from: 2, to: 4},
    {from: 2, to: 5}
  ]);
  // create a network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {interaction:{hover:true}};
  var network = new vis.Network(container, data, options);
 </script>
 <script src="../../../googleAnalytics.js"></script>
 </body>
 </html>
--- a/examples/network/categories/nodeStyles/customGroups.html
+++ b/examples/network/categories/nodeStyles/customGroups.html
@ -0,0 +1,134 @@
 <!doctype html>
 <html>
 <head>
    <title>Network | Custom Groups</title>
    <style>
        body {
            color: #d3d3d3;
            font: 12pt arial;
            background-color: #222222;
        }
        #mynetwork {
            width: 800px;
            height: 800px;
            border: 1px solid #444444;
            background-color: #222222;
        }
    </style>
    <script type="text/javascript" src="../../../../dist/vis.js"></script>
    <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <script src="../../../googleAnalytics.js"></script>
 </head>
 <body>
 <div id="mynetwork"></div>
 <script type="text/javascript">
    var color = 'gray';
    var len = undefined;
    var nodes = [
        {id: 0, label: "0", group: 'source'},
        {id: 1, label: "1", group: 'icons'},
        {id: 2, label: "2", group: 'icons'},
        {id: 3, label: "3", group: 'icons'},
        {id: 4, label: "4", group: 'icons'},
        {id: 5, label: "5", group: 'icons'},
        {id: 6, label: "6", group: 'icons'},
        {id: 7, label: "7", group: 'icons'},
        {id: 8, label: "8", group: 'icons'},
        {id: 9, label: "9", group: 'icons'},
        {id: 10, label: "10", group: 'mints'},
        {id: 11, label: "11", group: 'mints'},
        {id: 12, label: "12", group: 'mints'},
        {id: 13, label: "13", group: 'mints'},
        {id: 14, label: "14", group: 'mints'},
        {id: 15, group: 'dotsWithLabel'},
        {id: 16, group: 'dotsWithLabel'},
        {id: 17, group: 'dotsWithLabel'},
        {id: 18, group: 'dotsWithLabel'},
        {id: 19, group: 'dotsWithLabel'},
        {id: 20, label: "diamonds", group: 'diamonds'},
        {id: 21, label: "diamonds", group: 'diamonds'},
        {id: 22, label: "diamonds", group: 'diamonds'},
        {id: 23, label: "diamonds", group: 'diamonds'},
    ];
    var edges = [
        {from: 1, to: 0},
        {from: 2, to: 0},
        {from: 4, to: 3},
        {from: 5, to: 4},
        {from: 4, to: 0},
        {from: 7, to: 6},
        {from: 8, to: 7},
        {from: 7, to: 0},
        {from: 10, to: 9},
        {from: 11, to: 10},
        {from: 10, to: 4},
        {from: 13, to: 12},
        {from: 14, to: 13},
        {from: 13, to: 0},
        {from: 16, to: 15},
        {from: 17, to: 15},
        {from: 15, to: 10},
        {from: 19, to: 18},
        {from: 20, to: 19},
        {from: 19, to: 4},
        {from: 22, to: 21},
        {from: 23, to: 22},
        {from: 23, to: 0},
    ]
    // create a network
    var container = document.getElementById('mynetwork');
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {
        nodes: {
            shape: 'dot',
            size: 20,
            font: {
                size: 15,
                color: '#ffffff'
            },
            borderWidth: 2
        },
        edges: {
            width: 2
        },
        groups: {
            diamonds: {
                color: {background:'red',border:'white'},
                shape: 'diamond'
            },
            dotsWithLabel: {
                label: "I'm a dot!",
                shape: 'dot',
                color: 'cyan'
            },
            mints: {color:'rgb(0,255,140)'},
            icons: {
                shape: 'icon',
                icon: {
                    face: 'FontAwesome',
                    code: '\uf0c0',
                    size: 50,
                    color: 'orange'
                }
            },
            source: {
                color:{border:'white'}
            }
        }
    };
    network = new vis.Network(container, data, options);
 </script>
 </body>
 </html>
--- a/examples/network/categories/nodeStyles/groups.html
+++ b/examples/network/categories/nodeStyles/groups.html
@ -0,0 +1,119 @@
 <!doctype html>
 <html>
 <head>
    <title>Network | Groups</title>
    <style>
        body {
            color: #d3d3d3;
            font: 12pt arial;
            background-color: #222222;
        }
        #mynetwork {
            width: 800px;
            height: 800px;
            border: 1px solid #444444;
            background-color: #222222;
        }
    </style>
    <script type="text/javascript" src="../../../../dist/vis.js"></script>
    <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css"/>
    <script src="../../../googleAnalytics.js"></script>
 </head>
 <body>
 <div id="mynetwork"></div>
 <script type="text/javascript">
    var color = 'gray';
    var len = undefined;
    var nodes = [{id: 0, label: "0", group: 0},
        {id: 1, label: "1", group: 0},
        {id: 2, label: "2", group: 0},
        {id: 3, label: "3", group: 1},
        {id: 4, label: "4", group: 1},
        {id: 5, label: "5", group: 1},
        {id: 6, label: "6", group: 2},
        {id: 7, label: "7", group: 2},
        {id: 8, label: "8", group: 2},
        {id: 9, label: "9", group: 3},
        {id: 10, label: "10", group: 3},
        {id: 11, label: "11", group: 3},
        {id: 12, label: "12", group: 4},
        {id: 13, label: "13", group: 4},
        {id: 14, label: "14", group: 4},
        {id: 15, label: "15", group: 5},
        {id: 16, label: "16", group: 5},
        {id: 17, label: "17", group: 5},
        {id: 18, label: "18", group: 6},
        {id: 19, label: "19", group: 6},
        {id: 20, label: "20", group: 6},
        {id: 21, label: "21", group: 7},
        {id: 22, label: "22", group: 7},
        {id: 23, label: "23", group: 7},
        {id: 24, label: "24", group: 8},
        {id: 25, label: "25", group: 8},
        {id: 26, label: "26", group: 8},
        {id: 27, label: "27", group: 9},
        {id: 28, label: "28", group: 9},
        {id: 29, label: "29", group: 9}
    ];
    var edges = [{from: 1, to: 0},
        {from: 2, to: 0},
        {from: 4, to: 3},
        {from: 5, to: 4},
        {from: 4, to: 0},
        {from: 7, to: 6},
        {from: 8, to: 7},
        {from: 7, to: 0},
        {from: 10, to: 9},
        {from: 11, to: 10},
        {from: 10, to: 4},
        {from: 13, to: 12},
        {from: 14, to: 13},
        {from: 13, to: 0},
        {from: 16, to: 15},
        {from: 17, to: 15},
        {from: 15, to: 10},
        {from: 19, to: 18},
        {from: 20, to: 19},
        {from: 19, to: 4},
        {from: 22, to: 21},
        {from: 23, to: 22},
        {from: 22, to: 13},
        {from: 25, to: 24},
        {from: 26, to: 25},
        {from: 25, to: 7},
        {from: 28, to: 27},
        {from: 29, to: 28},
        {from: 28, to: 0}
    ]
    // create a network
    var container = document.getElementById('mynetwork');
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {
        nodes: {
            shape: 'dot',
            size: 30,
            font: {
                size: 32,
                color: '#ffffff'
            },
            borderWidth: 2
        },
        edges: {
            width: 2
        }
    };
    network = new vis.Network(container, data, options);
 </script>
 </body>
 </html>
--- a/examples/network/categories/nodeStyles/icons.html
+++ b/examples/network/categories/nodeStyles/icons.html
@ -5,8 +5,8 @@
  <meta charset="UTF-8">
  <title>Network | node as icon</title>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="../../../../dist/vis.js"></script>
  <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
@ -168,7 +168,7 @@
      var networkIO = new vis.Network(containerIO, dataIO, optionsIO);
    }
  </script>
  <script src="../googleAnalytics.js"></script>
  <script src="../../../googleAnalytics.js"></script>
 </head>
 <body onload="draw()">
--- a/examples/network/categories/nodeStyles/images.html
+++ b/examples/network/categories/nodeStyles/images.html
@ -11,17 +11,17 @@
    }
  </style>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="../../../../dist/vis.js"></script>
  <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript">
    var nodes = null;
    var edges = null;
    var network = null;
    var DIR = 'img/refresh-cl/';
    var LENGTH_MAIN = 150;
    var LENGTH_SUB = 50;
    var DIR = '../../img/refresh-cl/';
    var EDGE_LENGTH_MAIN = 150;
    var EDGE_LENGTH_SUB = 50;
    // Called when the Visualization API is loaded.
    function draw() {
@ -34,29 +34,29 @@
      nodes.push({id: 1, label: 'Main', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
      nodes.push({id: 2, label: 'Office', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
      nodes.push({id: 3, label: 'Wireless', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
      edges.push({from: 1, to: 2, length: LENGTH_MAIN});
      edges.push({from: 1, to: 3, length: LENGTH_MAIN});
      edges.push({from: 1, to: 2, length: EDGE_LENGTH_MAIN});
      edges.push({from: 1, to: 3, length: EDGE_LENGTH_MAIN});
      for (var i = 4; i <= 7; i++) {
        nodes.push({id: i, label: 'Computer', image: DIR + 'Hardware-My-Computer-3-icon.png', shape: 'image'});
        edges.push({from: 2, to: i, length: LENGTH_SUB});
        edges.push({from: 2, to: i, length: EDGE_LENGTH_SUB});
      }
      nodes.push({id: 101, label: 'Printer', image: DIR + 'Hardware-Printer-Blue-icon.png', shape: 'image'});
      edges.push({from: 2, to: 101, length: LENGTH_SUB});
      edges.push({from: 2, to: 101, length: EDGE_LENGTH_SUB});
      nodes.push({id: 102, label: 'Laptop', image: DIR + 'Hardware-Laptop-1-icon.png', shape: 'image'});
      edges.push({from: 3, to: 102, length: LENGTH_SUB});
      edges.push({from: 3, to: 102, length: EDGE_LENGTH_SUB});
      nodes.push({id: 103, label: 'network drive', image: DIR + 'Network-Drive-icon.png', shape: 'image'});
      edges.push({from: 1, to: 103, length: LENGTH_SUB});
      edges.push({from: 1, to: 103, length: EDGE_LENGTH_SUB});
      nodes.push({id: 104, label: 'Internet', image: DIR + 'System-Firewall-2-icon.png', shape: 'image'});
      edges.push({from: 1, to: 104, length: LENGTH_SUB});
      edges.push({from: 1, to: 104, length: EDGE_LENGTH_SUB});
      for (var i = 200; i <= 201; i++ ) {
        nodes.push({id: i, label: 'Smartphone', image: DIR + 'Hardware-My-PDA-02-icon.png', shape: 'image'});
        edges.push({from: 3, to: i, length: LENGTH_SUB});
        edges.push({from: 3, to: i, length: EDGE_LENGTH_SUB});
      }
      // create a network
@ -69,7 +69,7 @@
      network = new vis.Network(container, data, options);
    }
  </script>
  <script src="../googleAnalytics.js"></script>
  <script src="../../../googleAnalytics.js"></script>
 <body onload="draw()">
--- a/examples/network/categories/nodeStyles/shapes.html
+++ b/examples/network/categories/nodeStyles/shapes.html
@ -0,0 +1,72 @@
 <!doctype html>
 <html>
 <head>
  <title>Network | Shapes</title>
  <style type="text/css">
    #mynetwork {
      width: 1000px;
      height: 800px;
      border: 1px solid lightgray;
    }
  </style>
  <script type="text/javascript" src="../../../../dist/vis.js"></script>
  <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript">
    var nodes = null;
    var edges = null;
    var network = null;
    function draw() {
      nodes = [
        {id: 1,  label: 'circle',  shape: 'circle' },
        {id: 2,  label: 'ellipse', shape: 'ellipse'},
        {id: 3,  label: 'database',shape: 'database'},
        {id: 4,  label: 'box',     shape: 'box'    },
        {id: 5,  label: 'diamond', shape: 'diamond'},
        {id: 6,  label: 'dot',     shape: 'dot'},
        {id: 7,  label: 'square',  shape: 'square'},
        {id: 8,  label: 'triangle',shape: 'triangle'},
        {id: 9,  label: 'triangleDown', shape: 'triangleDown'},
        {id: 10, label: 'text',    shape: 'text'},
        {id: 11, label: 'star',    shape: 'star'},
        {id: 21, font:{size:30},          label: 'big circle',  shape: 'circle' },
        {id: 22, font:{size:30},          label: 'big ellipse', shape: 'ellipse'},
        {id: 23, font:{size:30},          label: 'big database',shape: 'database'},
        {id: 24, font:{size:30},          label: 'big box',     shape: 'box'    },
        {id: 25, font:{size:30}, size:40, label: 'big diamond', shape: 'diamond'},
        {id: 26, font:{size:30}, size:40, label: 'big dot',     shape: 'dot'},
        {id: 27, font:{size:30}, size:40, label: 'big square',  shape: 'square'},
        {id: 28, font:{size:30}, size:40, label: 'big triangle',shape: 'triangle'},
        {id: 29, font:{size:30}, size:40, label: 'big triangleDown', shape: 'triangleDown'},
        {id: 30, font:{size:30},          label: 'big text',    shape: 'text'},
        {id: 31, font:{size:30}, size:40, label: 'big star',    shape: 'star'}
      ];
      edges = [
      ];
      // create a network
      var container = document.getElementById('mynetwork');
      var data = {
        nodes: nodes,
        edges: edges
      };
      var options = {physics:{barnesHut:{gravitationalConstant:-4000}}};
      network = new vis.Network(container, data, options);
    }
  </script>
  <script src="../../../googleAnalytics.js"></script>
 <body onload="draw()">
 <p>
  Nodes can have all sorts of shapes. Note the exception where the nodes with text inside and the text type's size are determined by the font size, not the node size.
 </p>
 <div id="mynetwork"></div>
 <div id="info"></div>
 </body>
 </html>
--- a/lib/network/modules/InteractionHandler.js
+++ b/lib/network/modules/InteractionHandler.js
@ -27,7 +27,6 @@ class InteractionHandler {
    this.touchTime = 0;
    this.drag = {};
    this.pinch = {};
    this.hoverObj = {nodes:{},edges:{}};
    this.popup = undefined;
    this.popupObj = undefined;
    this.popupTimer = undefined;
@ -38,7 +37,7 @@ class InteractionHandler {
    this.defaultOptions = {
      dragNodes:true,
      dragView: true,
      hoverEnabled: false,
      hover: false,
      keyboard: {
        enabled: false,
        speed: {x: 10, y: 10, zoom: 0.02},
@ -502,34 +501,13 @@ class InteractionHandler {
    /**
    * Adding hover highlights
    */
    if (this.options.hoverEnabled === true) {
      // removing all hover highlights
      for (let edgeId in this.hoverObj.edges) {
        if (this.hoverObj.edges.hasOwnProperty(edgeId)) {
          this.hoverObj.edges[edgeId].hover = false;
          delete this.hoverObj.edges[edgeId];
        }
      }
    if (this.options.hover === true) {
      // adding hover highlights
      let obj = this.selectionHandler.getNodeAt(pointer);
      if (obj === undefined) {
        obj = this.selectionHandler.getEdgeAt(pointer);
      }
      if (obj != undefined) {
        this.selectionHandler.hoverObject(obj);
      }
      // removing all node hover highlights except for the selected one.
      for (let nodeId in this.hoverObj.nodes) {
        if (this.hoverObj.nodes.hasOwnProperty(nodeId)) {
          if (obj instanceof Node && obj.id != nodeId || obj instanceof Edge || obj === undefined) {
            this.selectionHandler.blurObject(this.hoverObj.nodes[nodeId]);
            delete this.hoverObj.nodes[nodeId];
          }
        }
      }
      this.body.emitter.emit('_requestRedraw');
      this.selectionHandler.hoverObject(obj);
    }
  }
--- a/lib/network/modules/SelectionHandler.js
+++ b/lib/network/modules/SelectionHandler.js
@ -1,4 +1,5 @@
 let Node = require("./components/Node");
 let Edge = require("./components/Edge");
 let util = require('../../util');
 class SelectionHandler {
@ -6,6 +7,7 @@ class SelectionHandler {
    this.body = body;
    this.canvas = canvas;
    this.selectionObj = {nodes: [], edges: []};
    this.hoverObj = {nodes:{},edges:{}};
    this.options = {};
    this.defaultOptions = {
@ -485,15 +487,46 @@ class SelectionHandler {
   * @private
   */
  hoverObject(object) {
    if (object.hover === false) {
      object.hover = true;
      this._addToHover(object);
      if (object instanceof Node) {
        this.body.emitter.emit("hoverNode",{node:object.id});
    let hoverChanged = false;
    // remove all node hover highlights
    for (let nodeId in this.hoverObj.nodes) {
      if (this.hoverObj.nodes.hasOwnProperty(nodeId)) {
        if (object === undefined) {
          this.blurObject(this.hoverObj.nodes[nodeId]);
          hoverChanged = true;
        }
        else if (object instanceof Node && object.id !== nodeId || object instanceof Edge || object === undefined) {
          this.blurObject(this.hoverObj.nodes[nodeId]);
          hoverChanged = true;
          delete this.hoverObj.nodes[nodeId];
        }
      }
    }
    //// removing all edge hover highlights
    for (let edgeId in this.hoverObj.edges) {
      if (this.hoverObj.edges.hasOwnProperty(edgeId)) {
        this.hoverObj.edges[edgeId].hover = false;
        delete this.hoverObj.edges[edgeId];
      }
    }
    if (object instanceof Node) {
      this._hoverConnectedEdges(object);
    if (object !== undefined) {
      if (object.hover === false) {
        object.hover = true;
        this._addToHover(object);
        hoverChanged = true;
        if (object instanceof Node) {
          this.body.emitter.emit("hoverNode", {node: object.id});
        }
      }
      if (object instanceof Node && this.options.selectConnectedEdges === true) {
        this._hoverConnectedEdges(object);
      }
    }
    if (hoverChanged === true) {
      this.body.emitter.emit('_requestRedraw');
    }
  }
--- a/lib/network/modules/View.js
+++ b/lib/network/modules/View.js
@ -44,10 +44,10 @@ class View {
        if (maxX < (node.shape.boundingBox.right)) {
          maxX = node.shape.boundingBox.right;
        }
        if (minY > (node.shape.boundingBox.bottom)) {
        if (minY > (node.shape.boundingBox.top)) {
          minY = node.shape.boundingBox.top;
        } // top is negative, bottom is positive
        if (maxY < (node.shape.boundingBox.top)) {
        if (maxY < (node.shape.boundingBox.bottom)) {
          maxY = node.shape.boundingBox.bottom;
        } // top is negative, bottom is positive
      }
@ -62,10 +62,10 @@ class View {
          if (maxX < (node.shape.boundingBox.right)) {
            maxX = node.shape.boundingBox.right;
          }
          if (minY > (node.shape.boundingBox.bottom)) {
          if (minY > (node.shape.boundingBox.top)) {
            minY = node.shape.boundingBox.top;
          } // top is negative, bottom is positive
          if (maxY < (node.shape.boundingBox.top)) {
          if (maxY < (node.shape.boundingBox.bottom)) {
            maxY = node.shape.boundingBox.bottom;
          } // top is negative, bottom is positive
        }
--- a/lib/network/options.js
+++ b/lib/network/options.js
@ -99,7 +99,7 @@ let allOptions = {
    dragView: {boolean},
    hideEdgesOnDrag: {boolean},
    hideNodesOnDrag: {boolean},
    hoverEnabled: {boolean},
    hover: {boolean},
    keyboard: {
      enabled: {boolean},
      speed: {x: {number}, y: {number}, zoom: {number}, __type__: {object}},
@ -404,7 +404,7 @@ let configureOptions = {
    dragView: true,
    hideEdgesOnDrag: false,
    hideNodesOnDrag: false,
    hoverEnabled: false,
    hover: false,
    keyboard: {
      enabled: false,
      speed: {x: [10, 0, 40, 1], y: [10, 0, 40, 1], zoom: [0.02, 0, 0.1, 0.005]},
--- a/lib/timeline/component/GraphGroup.js
+++ b/lib/timeline/component/GraphGroup.js
@ -185,19 +185,19 @@ GraphGroup.prototype.getLegend = function(iconWidth, iconHeight) {
  var svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
  this.drawIcon(0,0.5*iconHeight,[],svg,iconWidth,iconHeight);
  return {icon: svg, label: this.content, orientation:this.options.yAxisOrientation};
 }
 };
 GraphGroup.prototype.getYRange = function(groupData) {
  return this.type.getYRange(groupData);
 }
 };
 GraphGroup.prototype.getData = function(groupData) {
  return this.type.getData(groupData);
 }
 };
 GraphGroup.prototype.draw = function(dataset, group, framework) {
  this.type.draw(dataset, group, framework);
 }
 };
 module.exports = GraphGroup;
--- a/lib/util.js
+++ b/lib/util.js
@ -934,8 +934,9 @@ exports.RGBToHex = function(red,green,blue) {
 exports.parseColor = function(color) {
  var c;
  if (exports.isString(color) === true) {
    console.log(color, exports.isValidRGB(color))
    if (exports.isValidRGB(color) === true) {
      var rgb = color.substr(4).substr(0,color.length-5).split(',');
      var rgb = color.substr(4).substr(0,color.length-5).split(',').map(function (value) {return parseInt(value)});
      color = exports.RGBToHex(rgb[0],rgb[1],rgb[2]);
    }
    if (exports.isValidHex(color) === true) {