Updated to v0.2.0

docs/css/style.css

@@ -22,18 +22,12 @@ body, td, th {
 }
 
 h1 {
-    font-size: 220%;
+    font-size: 180%;
     font-weight: bold;
     padding: 0;
     margin: 1em 0 1em 0;
 }
 
-h1 .subtitle {
-    color: lightgray;
-    font-size: 11pt;
-    text-transform: uppercase;
-}
-
 h2 {
     padding-top: 20px;
     padding-bottom: 10px;
@@ -45,13 +39,19 @@ h3 {
     font-size: 140%;
 }
 
+a > img {
+    border: none;
+}
+
 a {
     color: #2B7CE9;
     text-decoration: none;
 }
+
 a:visited {
     color: #2E60A4;
 }
+
 a:hover {
     color: red;
     text-decoration: underline;

docs/graph.html

@@ -831,10 +831,8 @@ var options = {
     <td>selectable</td>
     <td>Boolean</td>
     <td>true</td>
-    <td>If true, nodes in the graph can be selected by clicking them, or
-        by keeping the <code>Shift</code> key down and dragging a selection area around them.
-        When the <code>Ctrl</code> key is down, the new selection is appended to the
-        previous selection. If not, the new selection replaces the previous selection.</td>
+    <td>If true, nodes in the graph can be selected by clicking them.
+        Long press can be used to select multiple nodes.</td>
 </tr>
 
 <tr>

docs/index.html

@@ -55,6 +55,13 @@
         </li>
     </ul>
 
+    <div style="text-align: center;">
+        <a href="img/vis_overview.png" target="_blank">
+            <img src="img/vis_overview.png" style="width: 250px; "/><br>
+            (click for a larger view)
+        </a>
+    </div>
+
 
     <h2 id="Install">Install</h2>
 

examples/graph/17_network_info.html

@@ -24,16 +24,14 @@
         var edges = null;
         var graph = null;
 
-        var DIR = 'img/refresh-cl/',
-            SWITCH = DIR + 'Network-Pipe-icon.png',
-            COMPUTER = DIR + 'Hardware-My-Computer-3-icon.png',
-            PRINTER = DIR + 'Hardware-Printer-Blue-icon.png',
-            LENGTH_MAIN = 350,
+        var LENGTH_MAIN = 350,
             LENGTH_SERVER = 150,
             LENGTH_SUB = 50,
+            WIDTH_SCALE = 2,
             GREEN = 'green',
-            RED = '#FA0A10',
+            RED = '#C5000B',
             ORANGE = 'orange',
+            //GRAY = '#666666',
             GRAY = 'gray',
             BLACK = '#2B1B17';
 
@@ -48,13 +46,13 @@
             nodes.push({id: 1, label: '192.168.0.1', group: 'switch', value: 10});
             nodes.push({id: 2, label: '192.168.0.2', group: 'switch', value: 8});
             nodes.push({id: 3, label: '192.168.0.3', group: 'switch', value: 6});
-            edges.push({from: 1, to: 2, length: LENGTH_MAIN, width: 6, label: '0.71 mbps'});
-            edges.push({from: 1, to: 3, length: LENGTH_MAIN, width: 4, label: '0.55 mbps'});
+            edges.push({from: 1, to: 2, length: LENGTH_MAIN, width: WIDTH_SCALE * 6, label: '0.71 mbps'});
+            edges.push({from: 1, to: 3, length: LENGTH_MAIN, width: WIDTH_SCALE * 4, label: '0.55 mbps'});
 
             // group around 2
             for (var i = 100; i <= 104; i++) {
                 var value = 1;
-                var width = 1;
+                var width = WIDTH_SCALE * 2;
                 var color = GRAY;
                 var label = null;
 
@@ -71,37 +69,38 @@
                 edges.push({from: 2, to: i, length: LENGTH_SUB, color: color, fontColor: color, width: width, label: label});
             }
             nodes.push({id: 201, label: '192.168.0.201', group: 'desktop', value: 1});
-            edges.push({from: 2, to: 201, length: LENGTH_SUB, color: GRAY});
+            edges.push({from: 2, to: 201, length: LENGTH_SUB, color: GRAY, width: WIDTH_SCALE});
 
             // group around 3
             nodes.push({id: 202, label: '192.168.0.202', group: 'desktop', value: 4});
-            edges.push({from: 3, to: 202, length: LENGTH_SUB, color: GRAY, width: 2});
+            edges.push({from: 3, to: 202, length: LENGTH_SUB, color: GRAY, width: WIDTH_SCALE * 2});
             for (var i = 230; i <= 231; i++ ) {
                 nodes.push({id: i, label: '192.168.0.' + i, group: 'mobile', value: 2});
-                edges.push({from: 3, to: i, length: LENGTH_SUB, color: GRAY, fontColor: GRAY, width: 1});
+                edges.push({from: 3, to: i, length: LENGTH_SUB, color: GRAY, fontColor: GRAY, width: WIDTH_SCALE});
             }
 
             // group around 1
             nodes.push({id: 10, label: '192.168.0.10', group: 'server', value: 10});
-            edges.push({from: 1, to: 10, length: LENGTH_SERVER, color: GRAY, width: 6, label: '0.92 mbps'});
+            edges.push({from: 1, to: 10, length: LENGTH_SERVER, color: GRAY, width: WIDTH_SCALE * 6, label: '0.92 mbps'});
             nodes.push({id: 11, label: '192.168.0.11', group: 'server', value: 7});
-            edges.push({from: 1, to: 11, length: LENGTH_SERVER, color: GRAY, width: 3, label: '0.68 mbps'});
+            edges.push({from: 1, to: 11, length: LENGTH_SERVER, color: GRAY, width: WIDTH_SCALE * 3, label: '0.68 mbps'});
             nodes.push({id: 12, label: '192.168.0.12', group: 'server', value: 3});
-            edges.push({from: 1, to: 12, length: LENGTH_SERVER, color: GRAY, label: '0.3 mbps'});
+            edges.push({from: 1, to: 12, length: LENGTH_SERVER, color: GRAY, width: WIDTH_SCALE, label: '0.3 mbps'});
 
             nodes.push({id: 204, label: 'Internet', group: 'internet', value: 10});
-            edges.push({from: 1, to: 204, length: 200, width: 3, label: '0.63 mbps'});
+            edges.push({from: 1, to: 204, length: 200, width: WIDTH_SCALE * 3, label: '0.63 mbps'});
 
 
             // legend
             var mygraph = document.getElementById('mygraph');
             var x = - mygraph.clientWidth / 2 + 50;
-            var y = - mygraph.clientHeight / 2 + 20;
-            nodes.push({id: 1000, x: x, y: y +  0, label: 'Internet', group: 'internet'});
-            nodes.push({id: 1001, x: x, y: y + 50, label: 'Switch', group: 'switch'});
-            nodes.push({id: 1002, x: x, y: y + 100, label: 'Server', group: 'server'});
-            nodes.push({id: 1003, x: x, y: y + 150, label: 'Computer', group: 'desktop'});
-            nodes.push({id: 1004, x: x, y: y + 200, label: 'Smartphone', group: 'mobile'});
+            var y = - mygraph.clientHeight / 2 + 50;
+            var step = 70;
+            nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1});
+            nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1});
+            nodes.push({id: 1002, x: x, y: y + 2 * step, label: 'Server', group: 'server', value: 1});
+            nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1});
+            nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1});
 
             // create a graph
             var container = document.getElementById('mygraph');
@@ -112,8 +111,8 @@
             var options = {
                 stabilize: false,   // stabilize positions before displaying
                 nodes: {
-                    widthMin: 24,
-                    maxWidth: 64,
+                    radiusMin: 16,
+                    radiusMax: 32,
                     fontColor: BLACK
                 },
                 edges: {
@@ -122,23 +121,23 @@
                 groups: {
                     'switch': {
                         shape: 'triangle',
-                        color: vis.graph.Groups.DEFAULT[1] // yellow
+                        color: '#FF9900' // orange
                     },
                     desktop: {
                         shape: 'dot',
-                        color: vis.graph.Groups.DEFAULT[0] // blue
+                        color: "#2B7CE9" // blue
                     },
                     mobile: {
                         shape: 'dot',
-                        color: vis.graph.Groups.DEFAULT[4] // purple
+                        color: "#5A1E5C" // purple
                     },
                     server: {
                         shape: 'square',
-                        color: vis.graph.Groups.DEFAULT[2] // red
+                        color: "#C5000B" // red
                     },
                     internet: {
                         shape: 'square',
-                        color: vis.graph.Groups.DEFAULT[3] // green
+                        color: "#109618" // green
                     }
                 }
             };

examples/timeline/02_dataset.html

@@ -19,6 +19,9 @@
         }
     </style>
 
+    <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
+    <script src="https://rawgithub.com/moment/moment/2.2.1/min/moment.min.js"></script>
+
     <script src="../../vis.js"></script>
 </head>
 <body>

examples/timeline/03_much_data.html

@@ -10,6 +10,9 @@
         }
     </style>
 
+    <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
+    <script src="https://rawgithub.com/moment/moment/2.2.1/min/moment.min.js"></script>
+
     <script src="../../vis.js"></script>
 </head>
 <body>

examples/timeline/05_groups.html

@@ -16,6 +16,9 @@
         }
     </style>
 
+    <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
+    <script src="https://rawgithub.com/moment/moment/2.2.1/min/moment.min.js"></script>
+
     <script src="../../vis.js"></script>
 </head>
 <body>

examples/timeline/index.html

@@ -2,7 +2,7 @@
 <html>
 
 <head>
-    <title>vis.js | examples</title>
+    <title>vis.js | timeline examples</title>
 
     <link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
 </head>
@@ -10,7 +10,7 @@
 <body>
 <div id="container">
 
-    <h1>vis.js examples</h1>
+    <h1>vis.js timeline examples</h1>
 
     <p><a href="01_basic.html">01_basic.html</a></p>
     <p><a href="02_dataset.html">02_dataset.html</a></p>

index.html

@@ -76,19 +76,19 @@ bower install vis
         <tr>
             <td>
                 <a href="vis.js" target="_blank">Development
-                    (version <span class="version">0.1.0</span>)</a>
+                    (version <span class="version">0.2.0</span>)</a>
             </td>
             <td>
-                <span id="development-size">384 kB</span>, uncompressed with comments
+                <span id="development-size">441 kB</span>, uncompressed with comments
             </td>
         </tr>
         <tr>
             <td>
                 <a href="vis.min.js" target="_blank">Production
-                    (version <span class="version">0.1.0</span>)</a>
+                    (version <span class="version">0.2.0</span>)</a>
             </td>
             <td>
-                <span id="production-size">34 kB</span>, minified and gzipped
+                <span id="production-size">39 kB</span>, minified and gzipped
             </td>
         </tr>
     </table>