Browse Source

Released version 3.4.0

gh-pages
jos 10 years ago
parent
commit
6bf1ef23be
36 changed files with 2656 additions and 1102 deletions
  1. +23
    -6
      dist/vis.css
  2. +901
    -428
      dist/vis.js
  3. +1
    -1
      dist/vis.map
  4. +1
    -1
      dist/vis.min.css
  5. +14
    -13
      dist/vis.min.js
  6. +24
    -0
      docs/graph2d.html
  7. +487
    -633
      docs/network.html
  8. +102
    -4
      docs/timeline.html
  9. BIN
      download/vis.zip
  10. +1
    -1
      examples/graph2d/12_customRange.html
  11. +1
    -1
      examples/graph2d/13_localization.html
  12. +123
    -0
      examples/graph2d/15_streaming_data.html
  13. +1
    -0
      examples/graph2d/index.html
  14. +5
    -7
      examples/network/02_random_nodes.html
  15. +2
    -2
      examples/network/10_multiline_text.html
  16. +1
    -1
      examples/network/31_localization.html
  17. +319
    -0
      examples/network/33_animation.html
  18. +2
    -0
      examples/network/index.html
  19. +0
    -0
      examples/timeline/03_performance.html
  20. +0
    -0
      examples/timeline/14_group_performance.html
  21. +1
    -1
      examples/timeline/19_localization.html
  22. +43
    -0
      examples/timeline/23_data_attributes.html
  23. +61
    -0
      examples/timeline/24_background_areas.html
  24. +250
    -0
      examples/timeline/25_templates.html
  25. +58
    -0
      examples/timeline/26_external_data.html
  26. +34
    -0
      examples/timeline/data/basic.json
  27. +152
    -0
      examples/timeline/data/wk2014.json
  28. +6
    -2
      examples/timeline/index.html
  29. BIN
      img/gallery/graph2d/15_streaming_data.png
  30. BIN
      img/gallery/network/32_hierarchicalLayoutMethods.png
  31. BIN
      img/gallery/network/33_animation.png
  32. BIN
      img/gallery/timeline/23_data_attributes.png
  33. BIN
      img/gallery/timeline/24_background_areas.png
  34. BIN
      img/gallery/timeline/25_templates.png
  35. BIN
      img/gallery/timeline/26_external_data.png
  36. +43
    -1
      index.html

+ 23
- 6
dist/vis.css View File

@ -145,6 +145,7 @@
width: 100%; width: 100%;
height: 0; height: 0;
left: 0; left: 0;
z-index: 1;
} }
.vis.timeline .foreground .group { .vis.timeline .foreground .group {
@ -208,14 +209,28 @@
box-sizing: border-box; box-sizing: border-box;
} }
.vis.timeline .item.background {
overflow: hidden;
border: none;
background-color: rgba(213, 221, 246, 0.4);
box-sizing: border-box;
top: 0;
bottom: 0;
}
.vis.timeline .item.range .content { .vis.timeline .item.range .content {
position: relative; position: relative;
display: inline-block; display: inline-block;
overflow: hidden;
max-width: 100%;
} }
.vis.timeline .item.range .content {
.vis.timeline .item.background .content {
position: absolute;
display: inline-block;
overflow: hidden; overflow: hidden;
max-width: 100%; max-width: 100%;
margin: 5px;
} }
.vis.timeline .item.line { .vis.timeline .item.line {
@ -555,14 +570,12 @@ div.network-manipulation-editMode {
div.network-manipulation-closeDiv { div.network-manipulation-closeDiv {
position:absolute; position:absolute;
left: 0;
right: 0;
top: 0; top: 0;
width: 30px; width: 30px;
height: 30px; height: 30px;
margin-top: 3px;
margin-left: 590px;
background-position: 0px 0px;
background-position: 20px 3px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-image: url("img/network/cross.png"); background-image: url("img/network/cross.png");
cursor: pointer; cursor: pointer;
@ -574,6 +587,10 @@ div.network-manipulation-closeDiv {
user-select: none; user-select: none;
} }
div.network-manipulation-closeDiv:hover {
opacity: 0.6;
}
span.network-manipulationUI { span.network-manipulationUI {
font-family: verdana; font-family: verdana;
font-size: 12px; font-size: 12px;
@ -615,7 +632,7 @@ span.network-manipulationUI.none:active {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
} }
span.network-manipulationUI.none { span.network-manipulationUI.none {
padding: 0px 0px 0px 0px;
padding: 0;
} }
span.network-manipulationUI.notification{ span.network-manipulationUI.notification{
margin: 2px; margin: 2px;

+ 901
- 428
dist/vis.js
File diff suppressed because it is too large
View File


+ 1
- 1
dist/vis.map
File diff suppressed because it is too large
View File


+ 1
- 1
dist/vis.min.css
File diff suppressed because it is too large
View File


+ 14
- 13
dist/vis.min.js
File diff suppressed because it is too large
View File


+ 24
- 0
docs/graph2d.html View File

@ -400,6 +400,30 @@ The options colored in green can also be used as options for the groups. All opt
<td>'square'</td> <td>'square'</td>
<td>Determine the shape of the data points. The options are 'square' or 'circle'.</td> <td>Determine the shape of the data points. The options are 'square' or 'circle'.</td>
</tr> </tr>
<tr>
<td>dataAxis.customRange.left.min</td>
<td>Number</td>
<td>undefined</td>
<td>Set the minimum value of the left y-Axis.</td>
</tr>
<tr>
<td>dataAxis.customRange.left.max</td>
<td>Number</td>
<td>undefined</td>
<td>Set the maximum value of the left y-Axis.</td>
</tr>
<tr>
<td>dataAxis.customRange.right.min</td>
<td>Number</td>
<td>undefined</td>
<td>Set the minimum value of the right y-Axis.</td>
</tr>
<tr>
<td>dataAxis.customRange.right.max</td>
<td>Number</td>
<td>undefined</td>
<td>Set the maximum value of the right y-Axis.</td>
</tr>
<tr> <tr>
<td>dataAxis.showMinorLabels</td> <td>dataAxis.showMinorLabels</td>
<td>Boolean</td> <td>Boolean</td>

+ 487
- 633
docs/network.html
File diff suppressed because it is too large
View File


+ 102
- 4
docs/timeline.html View File

@ -43,6 +43,7 @@
<li><a href="#Methods">Methods</a></li> <li><a href="#Methods">Methods</a></li>
<li><a href="#Events">Events</a></li> <li><a href="#Events">Events</a></li>
<li><a href="#Editing_Items">Editing Items</a></li> <li><a href="#Editing_Items">Editing Items</a></li>
<li><a href="#Templates">Templates</a></li>
<li><a href="#Localization">Localization</a></li> <li><a href="#Localization">Localization</a></li>
<li><a href="#Styles">Styles</a></li> <li><a href="#Styles">Styles</a></li>
<li><a href="#Data_Policy">Data Policy</a></li> <li><a href="#Data_Policy">Data Policy</a></li>
@ -242,8 +243,8 @@ var items = [
<td>type</td> <td>type</td>
<td>String</td> <td>String</td>
<td>'box'</td> <td>'box'</td>
<td>The type of the item. Can be 'box' (default), 'point', or 'range'.
Types 'box' and 'point' need a start date, and type 'range' needs both a start and end date.
<td>The type of the item. Can be 'box' (default), 'point', 'range', or 'background'.
Types 'box' and 'point' need a start date, the types 'range' and 'background' needs both a start and end date.
</td> </td>
</tr> </tr>
</table> </table>
@ -360,7 +361,7 @@ var options = {
<td>align</td> <td>align</td>
<td>String</td> <td>String</td>
<td>"center"</td> <td>"center"</td>
<td>Alignment of items with type 'box' and 'range'. Available values are 'auto' (default), 'center', 'left', or 'right'. For 'box' items, the 'auto' alignment is 'center'. For 'range' items, the auto alignment is dynamic: positioned left and shifted such that the contents is always visible on screen.</td>
<td>Alignment of items with type 'box', 'range', and 'background'. Available values are 'auto' (default), 'center', 'left', or 'right'. For 'box' items, the 'auto' alignment is 'center'. For 'range' items, the auto alignment is dynamic: positioned left and shifted such that the contents is always visible on screen.</td>
</tr> </tr>
<tr> <tr>
@ -378,6 +379,14 @@ var options = {
When active, a blue shadow border is displayed around the Timeline. The Timeline is set active by clicking on it, and is changed to inactive again by clicking outside the Timeline or by pressing the ESC key.</td> When active, a blue shadow border is displayed around the Timeline. The Timeline is set active by clicking on it, and is changed to inactive again by clicking outside the Timeline or by pressing the ESC key.</td>
</tr> </tr>
<tr>
<td>dataAttributes</td>
<td>Array[String]</td>
<td>false</td>
<td>An array of fields optionally defined on the timeline items that will be appended as <code>data-</code> attributes to the DOM element of the items.</td>
</tr>
<tr> <tr>
<td>editable</td> <td>editable</td>
<td>Boolean | Object</td> <td>Boolean | Object</td>
@ -554,6 +563,14 @@ var options = {
</td> </td>
</tr> </tr>
<tr>
<td>onMoving</td>
<td>Function</td>
<td>none</td>
<td>Callback function triggered repeatedly when an item is being moved. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>.
</td>
</tr>
<tr> <tr>
<td>onRemove</td> <td>onRemove</td>
<td>Function</td> <td>Function</td>
@ -656,11 +673,18 @@ var options = {
If not provided, the earliest date present in the events is taken as start date.</td> If not provided, the earliest date present in the events is taken as start date.</td>
</tr> </tr>
<tr>
<td>template</td>
<td>Function</td>
<td>none</td>
<td>A template function used to generate the contents of the items. The function is called by the Timeline with an items data as argument, and must return HTML code as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
</tr>
<tr> <tr>
<td>type</td> <td>type</td>
<td>String</td> <td>String</td>
<td>none</td> <td>none</td>
<td>Specifies the default type for the timeline items. Choose from 'box', 'point', and 'range'. Note that individual items can override this default type. If undefined, the Timeline will auto detect the type from the items data: if a start and end date is available, a 'range' will be created, and else, a 'box' is created.
<td>Specifies the default type for the timeline items. Choose from 'box', 'point', 'range', and 'background'. Note that individual items can override this default type. If undefined, the Timeline will auto detect the type from the items data: if a start and end date is available, a 'range' will be created, and else, a 'box' is created. Items of type 'background' are not editable.
</td> </td>
</tr> </tr>
@ -1060,6 +1084,80 @@ var options = {
A full example is available here: <a href="../examples/timeline/08_edit_items.html">08_edit_items.html</a>. A full example is available here: <a href="../examples/timeline/08_edit_items.html">08_edit_items.html</a>.
<h2 id="Templates">Templates</h2>
<p>
Timeline supports templates to format item contents. Any template engine (such as <a href="http://handlebarsjs.com/">handlebars</a> or <a href="http://mustache.github.io/">mustache</a>) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an items data as argument, and outputs formatted HTML:
</p>
<pre class="prettyprint lang-js">var options = {
template: function (item) {
var html = ... // generate HTML markup for this item
return html;
}
};
</pre>
<h3>Create HTML manually</h3>
The HTML for an item can be created manually:
<pre class="prettyprint lang-js">var options = {
template: function (item) {
return '&lt;h1&gt;' + item.header + '&lt;/h1&gt;&lt;p&gt;' + item.description + '&lt;/p&gt;';
}
};
</pre>
<h3>Using a template engine</h3>
Using <a href="http://handlebarsjs.com/">handlebars</a>, one can write the template in HTML:
<pre class="prettyprint lang-html">
&lt;script id="item-template" type="text/x-handlebars-template"&gt;
&lt;h1&gt;{{header}}&lt;/h1&gt;
&lt;p&gt;{{description}}&lt;/p&gt;
&lt;/script&gt;
</pre>
Compile the template:
<pre class="prettyprint lang-js">
var source = document.getElementById('item-template').innerHTML;
var template = Handlebars.compile(source);
</pre>
And then specify the template in the Timeline options
<pre class="prettyprint lang-js">var options = {
template: template
};
</pre>
<h3>Multiple templates</h3>
In order to support multiple templates, the template handler can be extended to switch between different templates, depending on a specific item property:
<pre class="prettyprint lang-js">
var templates = {
template1: Handlebars.compile(...),
template2: Handlebars.compile(...),
template2: Handlebars.compile(...),
...
};
var options = {
template: function (item) {
var template = templates[item.template]; // choose the right template
return template(item); // execute the template
}
};
</pre>
Now the items can be extended with a property <code>template</code>, specifying which template to use for the item.
<h2 id="Localization">Localization</h2> <h2 id="Localization">Localization</h2>
<p> <p>
Timeline can be localized. For localization, Timeline depends largely on the localization of <a href="http://momentjs.com">moment.js</a>. Locales are not included in vis.js by default. To enable localization, moment.js must be loaded with locales. Moment.js offers a bundle named "moment-with-locales.min.js" for this and there are various alternative ways to load locales. Timeline can be localized. For localization, Timeline depends largely on the localization of <a href="http://momentjs.com">moment.js</a>. Locales are not included in vis.js by default. To enable localization, moment.js must be loaded with locales. Moment.js offers a bundle named "moment-with-locales.min.js" for this and there are various alternative ways to load locales.

BIN
download/vis.zip View File


+ 1
- 1
examples/graph2d/12_customRange.html View File

@ -29,7 +29,7 @@ var options = {
right: { right: {
min:-5 min:-5
} }
},
}
} }
}; };
</pre> </pre>

+ 1
- 1
examples/graph2d/13_localization.html View File

@ -13,7 +13,7 @@
} }
</style> </style>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment-with-langs.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment-with-langs.min.js"></script>
<script src="../../dist/vis.js"></script> <script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head> </head>

+ 123
- 0
examples/graph2d/15_streaming_data.html View File

@ -0,0 +1,123 @@
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Graph2d | Streaming data</title>
<style type="text/css">
body, html, select {
font: 10pt sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Graph2d | Streaming data</h2>
<p style="max-width: 700px;">
This example demonstrates how to apply streaming data input to the Graph2d. The example shows two different ways to let the window move along with the new data, and there are more strategies for that. Note also that it is possible to disable moving and/or zooming the graph by setting options <code>moveable</code> and <code>zoomable</code> false.
</p>
<p>
<label for="strategy">Strategy:</label>
<select id="strategy">
<option value="continuous" selected>Continuous (CPU intensive)</option>
<option value="discrete">Discrete</option>
<option value="static">Static</option>
</select>
</p>
<div id="visualization"></div>
<script type="text/javascript">
var DELAY = 1000; // delay in ms to add new data points
var strategy = document.getElementById('strategy');
// create a graph2d with an (currently empty) dataset
var container = document.getElementById('visualization');
var dataset = new vis.DataSet();
var now = vis.moment();
// added initial set so you don't think the graph is empty
dataset.add({x: now-2000,y: y((now-2000) / 1000)});
dataset.add({x: now-1000,y: y((now-1000) / 1000)});
dataset.add({x: now,y: y((now) / 1000)});
dataset.add({x: now+1000,y: y((now+1000) / 1000)});
var options = {
start: vis.moment().add(-30, 'seconds'), // changed so its faster
end: vis.moment(),
dataAxis: {
customRange: {
left: {
min:-10, max: 10
}
}
}
};
var graph2d = new vis.Graph2d(container, dataset, options);
// a function to generate data points
function y(x) {
return (Math.sin(x / 2) + Math.cos(x / 4)) * 5;
}
function renderStep() {
// move the window (you can think of different strategies).
var now = vis.moment();
var range = graph2d.getWindow();
var interval = range.end - range.start;
switch (strategy.value) {
case 'continuous':
// continuously move the window
graph2d.setWindow(now - interval, now, {animate: false});
requestAnimationFrame(renderStep);
break;
case 'discrete':
graph2d.setWindow(now - interval, now, {animate: false});
setTimeout(renderStep, DELAY);
break;
default: // 'static'
// move the window 90% to the left when now is larger than the end of the window
if (now > range.end) {
graph2d.setWindow(now - 0.1 * interval, now + 0.9 * interval);
}
setTimeout(renderStep, DELAY);
break;
}
}
renderStep();
/**
* Add a new datapoint to the graph
*/
function addDataPoint() {
// add a new data point to the dataset
var now = vis.moment();
dataset.add({
x: now+2000, // changed so you dont see them appearing
y: y(now / 1000)
});
// remove all data points which are no longer visible
var range = graph2d.getWindow();
var interval = range.end - range.start;
var oldIds = dataset.getIds({
filter: function (item) {
return item.x < range.start - interval; // changed so you don't see them disappearing
}
});
dataset.remove(oldIds);
setTimeout(addDataPoint, DELAY);
}
addDataPoint();
</script>
</body>
</html>

+ 1
- 0
examples/graph2d/index.html View File

@ -21,6 +21,7 @@
<p><a href="12_customRange.html">12_customRange.html</a></p> <p><a href="12_customRange.html">12_customRange.html</a></p>
<p><a href="13_localization.html">13_localization.html</a></p> <p><a href="13_localization.html">13_localization.html</a></p>
<p><a href="14_toggleGroups.html">14_toggleGroups.html</a></p> <p><a href="14_toggleGroups.html">14_toggleGroups.html</a></p>
<p><a href="15_streaming_data.html">15_streaming_data.html</a></p>
</div> </div>
</body> </body>

+ 5
- 7
examples/network/02_random_nodes.html View File

@ -8,8 +8,8 @@
font: 10pt sans; font: 10pt sans;
} }
#mynetwork { #mynetwork {
width: 600px;
height: 600px;
width: 600px;
height: 600px;
border: 1px solid lightgray; border: 1px solid lightgray;
} }
</style> </style>
@ -76,11 +76,7 @@
nodes: nodes, nodes: nodes,
edges: edges edges: edges
}; };
var options = {
edges: {
}
};
var options = {};
network = new vis.Network(container, data, options); network = new vis.Network(container, data, options);
// add event listeners // add event listeners
@ -90,7 +86,9 @@
network.on('stabilized', function (params) { network.on('stabilized', function (params) {
document.getElementById('stabilization').innerHTML = 'Stabilization took ' + params.iterations + ' iterations.'; document.getElementById('stabilization').innerHTML = 'Stabilization took ' + params.iterations + ' iterations.';
}); });
} }
</script> </script>
</head> </head>

+ 2
- 2
examples/network/10_multiline_text.html View File

@ -29,8 +29,8 @@
var edges = [ var edges = [
{from: 1, to: 2, style: 'line', color: 'red', width: 3, length: 200}, // individual length definition is possible {from: 1, to: 2, style: 'line', color: 'red', width: 3, length: 200}, // individual length definition is possible
{from: 1, to: 3, style: 'dash-line', width: 1, length: 200}, {from: 1, to: 3, style: 'dash-line', width: 1, length: 200},
{from: 1, to: 4, style: 'line', width: 1, length: 200},
{from: 1, to: 5, style: 'arrow', width: 3, length: 200}
{from: 1, to: 4, style: 'line', width: 1, length: 200, label:'I\'m an edge!'},
{from: 1, to: 5, style: 'arrow', width: 3, length: 200, label:'arrows\nare cool'}
]; ];
// create a network // create a network

+ 1
- 1
examples/network/31_localization.html View File

@ -9,7 +9,7 @@
} }
#mynetwork { #mynetwork {
position:relative; position:relative;
width: 600px;
width: 800px;
height: 600px; height: 600px;
border: 1px solid lightgray; border: 1px solid lightgray;
} }

+ 319
- 0
examples/network/33_animation.html View File

@ -0,0 +1,319 @@
<!doctype html>
<html>
<head>
<title>Network | Animation</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
div.left {
position:relative;
float:left;
width:300px;
border: 1px #c7c7c7 solid;
height:590px;
padding:5px;
}
div.right {
padding-left:10px;
float:left;
width:600px;
}
div.bottom {
position:absolute;
bottom:5px;
}
</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 doButton, focusButton, showButton;
var statusUpdateSpan;
var finishMessage = "";
function draw() {
statusUpdateSpan = document.getElementById("statusUpdate");
doButton = document.getElementById("btnDo");
focusButton = document.getElementById("btnFocus");
showButton = document.getElementById("btnShow");
nodes = [];
edges = [];
var connectionCount = [];
// randomly create some nodes and edges
var nodeCount = 25;
for (var i = 0; i < nodeCount; i++) {
nodes.push({
id: i,
label: String(i)
});
connectionCount[i] = 0;
// create edges in a scale-free-network 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]++;
}
}
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {stabilizationIterations:1200};
network = new vis.Network(container, data, options);
// add event listeners
network.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
network.on('stabilized', function (params) {
document.getElementById('stabilization').innerHTML = 'Stabilization took ' + params.iterations + ' iterations.';
});
network.on("animationFinished", function() {
statusUpdateSpan.innerHTML = finishMessage;
})
}
function zoomExtentAnimated() {
var offsetx = parseInt(document.getElementById("offsetx").value);
var offsety = parseInt(document.getElementById("offsety").value);
var duration = parseInt(document.getElementById("duration").value);
var easingFunction = document.getElementById("easingFunction").value;
var options = {offset: {x:offsetx,y:offsety},
duration: duration,
easingFunction: easingFunction
}
statusUpdateSpan.innerHTML = "Doing ZoomExtent() Animation.";
finishMessage = "Animation finished."
network.zoomExtent(options);
}
function doDefaultAnimation() {
var offsetx = parseInt(document.getElementById("offsetx").value);
var offsety = parseInt(document.getElementById("offsety").value);
var scale = parseFloat(document.getElementById("scale").value);
var positionx = parseInt(document.getElementById("positionx").value);
var positiony = parseInt(document.getElementById("positiony").value);
var easingFunction = document.getElementById("easingFunction").value;
var options = {
position: {x:positionx,y:positiony},
scale: scale,
offset: {x:offsetx,y:offsety},
animation: true // default duration is 1000ms and default easingFunction is easeInOutQuad.
}
statusUpdateSpan.innerHTML = "Doing Animation.";
finishMessage = "Animation finished."
network.moveTo(options);
}
function doAnimation() {
var offsetx = parseInt(document.getElementById("offsetx").value);
var offsety = parseInt(document.getElementById("offsety").value);
var duration = parseInt(document.getElementById("duration").value);
var scale = parseFloat(document.getElementById("scale").value);
var positionx = parseInt(document.getElementById("positionx").value);
var positiony = parseInt(document.getElementById("positiony").value);
var easingFunction = document.getElementById("easingFunction").value;
var options = {
position: {x:positionx,y:positiony},
scale: scale,
offset: {x:offsetx,y:offsety},
animation: {
duration: duration,
easingFunction: easingFunction
}
}
statusUpdateSpan.innerHTML = "Doing Animation.";
finishMessage = "Animation finished."
network.moveTo(options);
}
function focusRandom() {
var nodeId = Math.floor(Math.random() * 25);
var offsetx = parseInt(document.getElementById("offsetx").value);
var offsety = parseInt(document.getElementById("offsety").value);
var duration = parseInt(document.getElementById("duration").value);
var scale = parseFloat(document.getElementById("scale").value);
var easingFunction = document.getElementById("easingFunction").value;
var options = {
// position: {x:positionx,y:positiony}, // this is not relevant when focusing on nodes
scale: scale,
offset: {x:offsetx,y:offsety},
animation: {
duration: duration,
easingFunction: easingFunction
}
}
statusUpdateSpan.innerHTML = "Focusing on node: " + nodeId;
finishMessage = "Node: " + nodeId + " in focus.";
network.focusOnNode(nodeId, options);
}
var showInterval = false;
var showPhase = 1;
function startShow() {
if (showInterval !== false) {
showInterval = false;
showButton.value = "Start a show!";
network.zoomExtent();
}
else {
showButton.value = "Stop the show!";
var duration = parseInt(document.getElementById("duration").value);
focusRandom();
window.setTimeout(doTheShow, duration);
showInterval = true;
}
}
function doTheShow() {
if (showInterval == true) {
var duration = parseInt(document.getElementById("duration").value);
if (showPhase == 0) {
focusRandom();
showPhase = 1;
}
else {
zoomExtentAnimated();
showPhase = 0;
}
window.setTimeout(doTheShow, duration);
}
}
</script>
</head>
<body onload="draw();">
<h2>Camera animations</h2>
<div style="width:700px; font-size:14px;">
You can move the view around programmatically using the .moveTo(options) function. The options supplied to this function can
also be (partially) supplied to the .zoomExtent() and .focusOnNode() methods. These are explained in the docs.
<br /><br/>
The buttons below take the fields from the table when they can. For instance, the "Animate with default settings." takes the position, scale and offset while using
the default animation values for duration and easing function. The focusOnNode takes everything except the position and the zoomExtent takes only the duration and easing function.
<br/><br/>
Here you can see a full description of the options you can supply to moveTo:
</div>
<pre>
var moveToOptions = {
position: {x:x, y:x}, // position to animate to (Numbers)
scale: 1.0, // scale to animate to (Number)
offset: {x:x, y:y}, // offset from the center in DOM pixels (Numbers)
animation: { // animation object, can also be Boolean
duration: 1000, // animation duration in milliseconds (Number)
easingFunction: "easeInOutQuad" // Animation easing function, available are:
} // linear, easeInQuad, easeOutQuad, easeInOutQuad,
} // easeInCubic, easeOutCubic, easeInOutCubic,
// easeInQuart, easeOutQuart, easeInOutQuart,
// easeInQuint, easeOutQuint, easeInOutQuint
</pre>
<div class="left">
<table>
<tr>
<td>position x</td><td><input type="text" value="300" id="positionx" style="width:170px;"></td>
</tr>
<tr>
<td>position y</td><td><input type="text" value="300" id="positiony" style="width:170px;"></td>
</tr>
<tr>
<td>scale</td><td><input type="text" value="1.0" id="scale" style="width:170px;"></td>
</tr>
<tr>
<td>offset x</td><td><input type="text" value="0" id="offsetx" style="width:170px;"> px</td>
</tr>
<tr>
<td>offset y</td><td><input type="text" value="0" id="offsety" style="width:170px;"> px</td>
</tr>
<tr>
<td>duration</td><td><input type="text" value="2500" id="duration" style="width:170px;"> ms</td>
</tr>
<tr>
<td>easingFunction</td><td>
<select id="easingFunction" style="width:174px;">
<option value="linear">linear</option>
<option value="easeInQuad">easeInQuad</option>
<option value="easeOutQuad">easeOutQuad</option>
<option value="easeInOutQuad" selected="selected">easeInOutQuad</option>
<option value="easeInCubic">easeInCubic</option>
<option value="easeOutCubic">easeOutCubic</option>
<option value="easeInOutCubic">easeInOutCubic</option>
<option value="easeInQuart">easeInQuart</option>
<option value="easeOutQuart">easeOutQuart</option>
<option value="easeInOutQuart">easeInOutQuart</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeOutQuint">easeOutQuint</option>
<option value="easeInOutQuint">easeInOutQuint</option>
</select>
</td>
</tr>
</table>
<div class="bottom">
<span id="statusUpdate"></span><br />
Examples:
<input type="button" onclick="doAnimation();" value="Animate with above settings." style="width:300px;" id="btnDo"> <br/>
<input type="button" onclick="doDefaultAnimation();" value="Animate with default settings." style="width:300px;" id="btnDoDefault"> <br/>
<input type="button" onclick="zoomExtentAnimated();" value="Animated ZoomExtent()." style="width:300px;" id="btnZoom"> <br/>
<input type="button" onclick="focusRandom();" value="Focus on random node." style="width:300px;" id="btnFocus"><br/>
<input type="button" onclick="startShow();" value="Start a show!" style="width:300px;" id="btnShow"><br/>
</div>
</div>
<div class="right">
<div id="mynetwork"></div>
<p id="selection"></p>
<p id="stabilization"></p>
</div>
</body>
</html>

+ 2
- 0
examples/network/index.html View File

@ -43,6 +43,8 @@
<p><a href="29_neighbourhood_highlight.html">29_neighbourhood_highlight.html</a></p> <p><a href="29_neighbourhood_highlight.html">29_neighbourhood_highlight.html</a></p>
<p><a href="30_importing_from_gephi.html">30_importing_from_gephi.html</a></p> <p><a href="30_importing_from_gephi.html">30_importing_from_gephi.html</a></p>
<p><a href="31_localization.html">31_localization.html</a></p> <p><a href="31_localization.html">31_localization.html</a></p>
<p><a href="32_hierarchicaLayoutMethods.html">32_hierarchicaLayoutMethods.html</a></p>
<p><a href="33_animation.html">33_animation.html</a></p>
<p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p> <p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
</div> </div>

examples/timeline/03_a_lot_of_data.html → examples/timeline/03_performance.html View File


examples/timeline/14_a_lot_of_grouped_data.html → examples/timeline/14_group_performance.html View File


+ 1
- 1
examples/timeline/19_localization.html View File

@ -10,7 +10,7 @@
} }
</style> </style>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment-with-locales.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment-with-locales.min.js"></script>
<script src="../../dist/vis.js"></script> <script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head> </head>

+ 43
- 0
examples/timeline/23_data_attributes.html View File

@ -0,0 +1,43 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Basic demo</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
In this example all items get an HTML attribute attached: each item gets an attribute <code>data-id</code>, and items 1 and 6 have an additional attribute <code>data-tooltip</code>.
</p>
<div id="visualization"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: '2014-04-20', tooltip: 'This is item 1'},
{id: 2, content: 'item 2', start: '2014-04-14'},
{id: 3, content: 'item 3', start: '2014-04-18'},
{id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
{id: 5, content: 'item 5', start: '2014-04-25'},
{id: 6, content: 'item 6', start: '2014-04-27', type: 'point', tooltip: 'This is item 6'}
]);
// Configuration for the Timeline
var options = {dataAttributes: ['tooltip', 'id']};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

+ 61
- 0
examples/timeline/24_background_areas.html View File

@ -0,0 +1,61 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Background areas</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
.vis.timeline .item.background.negative {
background-color: rgba(255, 0, 0, 0.2);
}
.vis.timeline .item.background.marker {
border-left: 2px solid green;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>This example demonstrates the item type "background", see "Period A" and "Period B". The background areas can be styled with css.</p>
<div id="visualization"></div>
<script>
// create a dataset with items
// we specify the type of the fields `start` and `end` here to be strings
// containing an ISO date. The fields will be outputted as ISO dates
// automatically getting data from the DataSet via items.get().
var items = new vis.DataSet({
type: { start: 'ISODate', end: 'ISODate' }
});
// add items to the DataSet
items.add([
{id: 'A', content: 'Period A', start: '2014-01-16', end: '2014-01-22', type: 'background'},
{id: 'B', content: 'Period B', start: '2014-01-25', end: '2014-01-30', type: 'background', className: 'negative'},
{id: 1, content: 'item 1<br>start', start: '2014-01-23'},
{id: 2, content: 'item 2', start: '2014-01-18'},
{id: 3, content: 'item 3', start: '2014-01-21'},
{id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
{id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
{id: 6, content: 'item 6', start: '2014-01-26'}
]);
var container = document.getElementById('visualization');
var options = {
start: '2014-01-10',
end: '2014-02-10',
editable: true
};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

+ 250
- 0
examples/timeline/25_templates.html View File

@ -0,0 +1,250 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Templates</title>
<!-- load handlebars for templating, and create a template -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.4/handlebars.min.js"></script>
<script id="item-template" type="text/x-handlebars-template">
<table class="score">
<tr>
<td colspan="3" class="description">{{description}}</td>
</tr>
<tr>
<td>{{player1}}</td>
<th>{{score1}} - {{score2}}</th>
<td>{{player2}}</td>
</tr>
<tr>
<td><img src="http://flagpedia.net/data/flags/mini/{{abbr1}}.png" width="31" height="20" alt="{{abbr1}}"></td>
<th></th>
<td><img src="http://flagpedia.net/data/flags/mini/{{abbr2}}.png" width="31" height="20" alt="{{abbr2}}"></td>
</tr>
</table>
</script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font-family: sans-serif;
font-size: 10pt;
}
.vis.timeline .item {
border-color: #acacac;
background-color: #efefef;
box-shadow: 5px 5px 10px rgba(128,128,128, 0.3);
}
table .description {
font-style: italic;
}
#visualization {
position: relative;
overflow: hidden;
}
.logo {
position: absolute;
right: 10px;
top: 10px;
}
.logo img {
width: 120px;
}
</style>
</head>
<body>
<h1>WK 2014</h1>
<p style="max-width: 600px;">
This example demonstrates using templates to format item contents. In this case <a href="http://handlebarsjs.com">handlebars</a> is used as template engine, but you can just use your favorite template engine or manually craft HTML from the data of an item.
</p>
<div id="visualization">
<div class="logo"><img src="http://upload.wikimedia.org/wikipedia/en/e/e8/WC-2014-Brasil.svg"></div>
</div>
<script type="text/javascript">
// create a handlebars template
var source = document.getElementById('item-template').innerHTML;
var template = Handlebars.compile(document.getElementById('item-template').innerHTML);
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
// round of 16
{
player1: 'Brazil',
abbr1: 'br',
score1: '1 (3)',
player2: 'Chile',
abbr2: 'cl',
score2: '1 (2)',
description: 'round of 16',
start: '2014-06-28 13:00'
},
{
player1: 'Colombia',
abbr1: 'co',
score1: 2,
player2: 'Uruguay',
abbr2: 'uy',
score2: 0,
description: 'round of 16',
start: '2014-06-28 17:00'
},
{
player1: 'Netherlands',
abbr1: 'nl',
score1: 2,
player2: 'Mexico',
abbr2: 'mx',
score2: 1,
description: 'round of 16',
start: '2014-06-29 13:00'
},
{
player1: 'Costa Rica',
abbr1: 'cr',
score1: '1 (5)',
player2: 'Greece',
abbr2: 'gr',
score2: '1 (3)',
description: 'round of 16',
start: '2014-06-29 17:00'
},
{
player1: 'France',
abbr1: 'fr',
score1: 2,
player2: 'Nigeria',
abbr2: 'ng',
score2: 0,
description: 'round of 16',
start: '2014-06-30 13:00'
},
{
player1: 'Germany',
abbr1: 'de',
score1: 2,
player2: 'Algeria',
abbr2: 'dz',
score2: 1,
description: 'round of 16',
start: '2014-06-30 17:00'
},
{
player1: 'Argentina',
abbr1: 'ar',
score1: 1,
player2: 'Switzerland',
abbr2: 'ch',
score2: 0,
description: 'round of 16',
start: '2014-07-01 13:00'
},
{
player1: 'Belgium',
abbr1: 'be',
score1: 2,
player2: 'USA',
abbr2: 'us',
score2: 1,
description: 'round of 16',
start: '2014-07-01 17:00'
},
// quarter-finals
{
player1: 'France',
abbr1: 'fr',
score1: 0,
player2: 'Germany',
abbr2: 'de',
score2: 1,
description: 'quarter-finals',
start: '2014-07-04 13:00'
},
{
player1: 'Brazil',
abbr1: 'br',
score1: 2,
player2: 'Colombia',
abbr2: 'co',
score2: 1,
description: 'quarter-finals',
start: '2014-07-04 17:00'
},
{
player1: 'Argentina',
abbr1: 'ar',
score1: 1,
player2: 'Belgium',
abbr2: 'be',
score2: 0,
description: 'quarter-finals',
start: '2014-07-05 13:00'
},
{
player1: 'Netherlands',
abbr1: 'nl',
score1: '0 (4)',
player2: 'Costa Rica',
abbr2: 'cr',
score2: '0 (3)',
description: 'quarter-finals',
start: '2014-07-05 17:00'
},
// semi-finals
{
player1: 'Brazil',
abbr1: 'br',
score1: 1,
player2: 'Germany',
abbr2: 'de',
score2: 7,
description: 'semi-finals',
start: '2014-07-08 17:00'
},
{
player1: 'Netherlands',
abbr1: 'nl',
score1: '0 (2)',
player2: 'Argentina',
abbr2: 'ar',
score2: '0 (4)',
description: 'semi-finals',
start: '2014-07-09 17:00'
},
// final
{
player1: 'Germany',
score1: 1,
abbr1: 'de',
player2: 'Argentina',
abbr2: 'ar',
score2: 0,
description: 'final',
start: '2014-07-13 16:00'
}
]);
// Configuration for the Timeline
var options = {
// specify a template for the items
template: template
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

+ 58
- 0
examples/timeline/26_external_data.html View File

@ -0,0 +1,58 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | External data</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<!-- Load jquery for ajax support -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Load external data</h1>
<p>
This demo shows how to load external data via an ajax call.
</p>
<div id="visualization"></div>
<div id="loading">loading...</div>
<script type="text/javascript">
// load data via an ajax request. When the data is in, load the timeline
$.ajax({
url: 'data/basic.json',
success: function (data) {
// hide the "loading..." message
document.getElementById('loading').style.display = 'none';
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet(data);
// Configuration for the Timeline
var options = {};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
},
error: function (err) {
console.log('Error', err);
if (err.status === 0) {
alert('Failed to load data/basic.json.\nPlease run this example on a server.');
}
else {
alert('Failed to load data/basic.json.');
}
}
});
</script>
</body>
</html>

+ 34
- 0
examples/timeline/data/basic.json View File

@ -0,0 +1,34 @@
[
{
"id": 1,
"content": "item 1",
"start": "2014-04-20"
},
{
"id": 2,
"content": "item 2",
"start": "2014-04-14"
},
{
"id": 3,
"content": "item 3",
"start": "2014-04-18"
},
{
"id": 4,
"content": "item 4",
"start": "2014-04-16",
"end": "2014-04-19"
},
{
"id": 5,
"content": "item 5",
"start": "2014-04-25"
},
{
"id": 6,
"content": "item 6",
"start": "2014-04-27",
"type": "point"
}
]

+ 152
- 0
examples/timeline/data/wk2014.json View File

@ -0,0 +1,152 @@
[
{
"player1": "Brazil",
"abbr1": "br",
"score1": "1 (3)",
"player2": "Chile",
"abbr2": "cl",
"score2": "1 (2)",
"description": "round of 16",
"start": "2014-06-28 13:00"
},
{
"player1": "Colombia",
"abbr1": "co",
"score1": 2,
"player2": "Uruguay",
"abbr2": "uy",
"score2": 0,
"description": "round of 16",
"start": "2014-06-28 17:00"
},
{
"player1": "Netherlands",
"abbr1": "nl",
"score1": 2,
"player2": "Mexico",
"abbr2": "mx",
"score2": 1,
"description": "round of 16",
"start": "2014-06-29 13:00"
},
{
"player1": "Costa Rica",
"abbr1": "cr",
"score1": "1 (5)",
"player2": "Greece",
"abbr2": "gr",
"score2": "1 (3)",
"description": "round of 16",
"start": "2014-06-29 17:00"
},
{
"player1": "France",
"abbr1": "fr",
"score1": 2,
"player2": "Nigeria",
"abbr2": "ng",
"score2": 0,
"description": "round of 16",
"start": "2014-06-30 13:00"
},
{
"player1": "Germany",
"abbr1": "de",
"score1": 2,
"player2": "Algeria",
"abbr2": "dz",
"score2": 1,
"description": "round of 16",
"start": "2014-06-30 17:00"
},
{
"player1": "Argentina",
"abbr1": "ar",
"score1": 1,
"player2": "Switzerland",
"abbr2": "ch",
"score2": 0,
"description": "round of 16",
"start": "2014-07-01 13:00"
},
{
"player1": "Belgium",
"abbr1": "be",
"score1": 2,
"player2": "USA",
"abbr2": "us",
"score2": 1,
"description": "round of 16",
"start": "2014-07-01 17:00"
},
{
"player1": "France",
"abbr1": "fr",
"score1": 0,
"player2": "Germany",
"abbr2": "de",
"score2": 1,
"description": "quarter-finals",
"start": "2014-07-04 13:00"
},
{
"player1": "Brazil",
"abbr1": "br",
"score1": 2,
"player2": "Colombia",
"abbr2": "co",
"score2": 1,
"description": "quarter-finals",
"start": "2014-07-04 17:00"
},
{
"player1": "Argentina",
"abbr1": "ar",
"score1": 1,
"player2": "Belgium",
"abbr2": "be",
"score2": 0,
"description": "quarter-finals",
"start": "2014-07-05 13:00"
},
{
"player1": "Netherlands",
"abbr1": "nl",
"score1": "0 (4)",
"player2": "Costa Rica",
"abbr2": "cr",
"score2": "0 (3)",
"description": "quarter-finals",
"start": "2014-07-05 17:00"
},
{
"player1": "Brazil",
"abbr1": "br",
"score1": 1,
"player2": "Germany",
"abbr2": "de",
"score2": 7,
"description": "semi-finals",
"start": "2014-07-08 17:00"
},
{
"player1": "Netherlands",
"abbr1": "nl",
"score1": "0 (2)",
"player2": "Argentina",
"abbr2": "ar",
"score2": "0 (4)",
"description": "semi-finals",
"start": "2014-07-09 17:00"
},
{
"player1": "Germany",
"score1": 1,
"abbr1": "de",
"player2": "Argentina",
"abbr2": "ar",
"score2": 0,
"description": "final",
"start": "2014-07-13 16:00"
}
]

+ 6
- 2
examples/timeline/index.html View File

@ -14,7 +14,7 @@
<p><a href="01_basic.html">01_basic.html</a></p> <p><a href="01_basic.html">01_basic.html</a></p>
<p><a href="02_interactive.html">02_dataset.html</a></p> <p><a href="02_interactive.html">02_dataset.html</a></p>
<p><a href="03_a_lot_of_data.html">03_a_lot_of_data.html</a></p>
<p><a href="03_performance.html">03_performance.html</a></p>
<p><a href="04_html_data.html">04_html_data.html</a></p> <p><a href="04_html_data.html">04_html_data.html</a></p>
<p><a href="05_groups.html">05_groups.html</a></p> <p><a href="05_groups.html">05_groups.html</a></p>
<p><a href="06_event_listeners.html">06_event_listeners.html</a></p> <p><a href="06_event_listeners.html">06_event_listeners.html</a></p>
@ -25,7 +25,7 @@
<p><a href="11_points.html">11_points.html</a></p> <p><a href="11_points.html">11_points.html</a></p>
<p><a href="12_custom_styling.html">12_custom_styling.html</a></p> <p><a href="12_custom_styling.html">12_custom_styling.html</a></p>
<p><a href="13_past_and_future.html">13_past_and_future.html</a></p> <p><a href="13_past_and_future.html">13_past_and_future.html</a></p>
<p><a href="14_a_lot_of_grouped_data.html">14_a_lot_of_grouped_data.html</a></p>
<p><a href="14_group_performance.html">14_group_performance.html</a></p>
<p><a href="15_item_class_names.html">15_item_class_names.html</a></p> <p><a href="15_item_class_names.html">15_item_class_names.html</a></p>
<p><a href="16_navigation_menu.html">16_navigation_menu.html</a></p> <p><a href="16_navigation_menu.html">16_navigation_menu.html</a></p>
<p><a href="17_data_serialization.html">17_data_serialization.html</a></p> <p><a href="17_data_serialization.html">17_data_serialization.html</a></p>
@ -34,6 +34,10 @@
<p><a href="20_click_to_use.html">20_click_to_use.html</a></p> <p><a href="20_click_to_use.html">20_click_to_use.html</a></p>
<p><a href="21_set_selection.html">21_set_selection.html</a></p> <p><a href="21_set_selection.html">21_set_selection.html</a></p>
<p><a href="22_window_adjustment.html">22_window_adjustment.html</a></p> <p><a href="22_window_adjustment.html">22_window_adjustment.html</a></p>
<p><a href="23_data_attributes.html">23_data_attributes.html</a></p>
<p><a href="24_background_areas.html">24_background_areas.html</a></p>
<p><a href="25_templates.html">25_templates.html</a></p>
<p><a href="26_external_data.html">26_external_data.html</a></p>
<p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p> <p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>

BIN
img/gallery/graph2d/15_streaming_data.png View File

Before After
Width: 832  |  Height: 484  |  Size: 26 KiB

BIN
img/gallery/network/32_hierarchicalLayoutMethods.png View File

Before After
Width: 776  |  Height: 494  |  Size: 32 KiB

BIN
img/gallery/network/33_animation.png View File

Before After
Width: 298  |  Height: 249  |  Size: 9.9 KiB

BIN
img/gallery/timeline/23_data_attributes.png View File

Before After
Width: 484  |  Height: 233  |  Size: 17 KiB

BIN
img/gallery/timeline/24_background_areas.png View File

Before After
Width: 498  |  Height: 182  |  Size: 11 KiB

BIN
img/gallery/timeline/25_templates.png View File

Before After
Width: 1611  |  Height: 426  |  Size: 77 KiB

BIN
img/gallery/timeline/26_external_data.png View File

Before After
Width: 587  |  Height: 343  |  Size: 33 KiB

+ 43
- 1
index.html View File

@ -74,7 +74,7 @@ bower install vis
<h3>download</h3> <h3>download</h3>
<a href="download/vis.zip">Click here to download vis.js</a> <a href="download/vis.zip">Click here to download vis.js</a>
(version <span class="version">3.3.0</span>)
(version <span class="version">3.4.0</span>)
<h2 id="example">Example</h2> <h2 id="example">Example</h2>
@ -260,6 +260,30 @@ The source code of the examples can be found in the
<div>window adjustment</div> <div>window adjustment</div>
</a> </a>
</div> </div>
<div class="thumb">
<a href="examples/timeline/23_data_attributes.html">
<img src="img/gallery/timeline/23_data_attributes.png">
<div>data attributes</div>
</a>
</div>
<div class="thumb">
<a href="examples/timeline/24_background_areas.html">
<img src="img/gallery/timeline/24_background_areas.png">
<div>background areas</div>
</a>
</div>
<div class="thumb">
<a href="examples/timeline/25_templates.html">
<img src="img/gallery/timeline/25_templates.png">
<div>templates</div>
</a>
</div>
<div class="thumb">
<a href="examples/timeline/26_external_data.html">
<img src="img/gallery/timeline/26_external_data.png">
<div>external data</div>
</a>
</div>
</div> </div>
<h3 id="network">Network</h3> <h3 id="network">Network</h3>
@ -455,6 +479,18 @@ The source code of the examples can be found in the
<div>localization</div> <div>localization</div>
</a> </a>
</div> </div>
<div class="thumb">
<a href="examples/network/32_hierarchicaLayoutMethods.html">
<img src="img/gallery/network/32_hierarchicalLayoutMethods.png">
<div>hierarchical layout methods</div>
</a>
</div>
<div class="thumb">
<a href="examples/network/33_animation.html">
<img src="img/gallery/network/33_animation.png">
<div>animation</div>
</a>
</div>
<div class="thumb"> <div class="thumb">
<a href="examples/network/graphviz/graphviz_gallery.html"> <a href="examples/network/graphviz/graphviz_gallery.html">
<img src="img/gallery/network/graphviz_gallery.png"> <img src="img/gallery/network/graphviz_gallery.png">
@ -554,6 +590,12 @@ The source code of the examples can be found in the
<div>toggle groups</div> <div>toggle groups</div>
</a> </a>
</div> </div>
<div class="thumb">
<a href="examples/graph2d/15_streaming_data.html">
<img src="img/gallery/graph2d/15_streaming_data.png">
<div>streaming data</div>
</a>
</div>
</div> </div>

Loading…
Cancel
Save