Browse Source

Merge branch 'alex_dev' into develop

Conflicts:
	Jakefile.js
	examples/graph/index.html
	src/graph/Edge.js
	src/graph/Graph.js
	src/graph/graphMixins/ClusterMixin.js
	src/graph/graphMixins/SelectionMixin.js
	src/timeline/Controller.js
	src/timeline/Range.js
	src/timeline/Timeline.js
	src/timeline/component/ItemSet.js
	src/timeline/component/RootPanel.js
	src/timeline/component/item/Item.js
	src/util.js
css_transitions
josdejong 10 years ago
parent
commit
a8a8519e4c
91 changed files with 4233 additions and 21198 deletions
  1. +1
    -0
      .gitignore
  2. +1
    -0
      CNAME
  3. +13
    -4
      Jakefile.js
  4. +94
    -0
      css/style.css
  5. BIN
      dist/img/acceptDeleteIcon.png
  6. BIN
      dist/img/addNodeIcon.png
  7. BIN
      dist/img/backIcon.png
  8. BIN
      dist/img/connectIcon.png
  9. BIN
      dist/img/deleteIcon.png
  10. BIN
      dist/img/editIcon.png
  11. +0
    -19896
      dist/vis.js
  12. +0
    -31
      dist/vis.min.js
  13. +299
    -29
      docs/graph.html
  14. BIN
      download/vis.zip
  15. +1
    -2
      examples/graph/02_random_nodes.html
  16. +0
    -3
      examples/graph/19_scale_free_graph_clustering.html
  17. +6
    -5
      examples/graph/20_navigation.html
  18. +214
    -0
      examples/graph/21_data_manipulation.html
  19. +373
    -0
      examples/graph/22_les_miserables.html
  20. +1
    -0
      examples/graph/index.html
  21. BIN
      favicon.ico
  22. BIN
      img/external-link-icons/external-link-icon.png
  23. +40
    -0
      img/external-link-icons/license.txt
  24. BIN
      img/forkme_right_darkblue_121621.png
  25. BIN
      img/gallery/graph/01_basic_usage.png
  26. BIN
      img/gallery/graph/02_random_nodes.png
  27. BIN
      img/gallery/graph/03_images.png
  28. BIN
      img/gallery/graph/04_shapes.png
  29. BIN
      img/gallery/graph/05_social_network.png
  30. BIN
      img/gallery/graph/06_groups.png
  31. BIN
      img/gallery/graph/07_selections.png
  32. BIN
      img/gallery/graph/08_mobile_friendly.png
  33. BIN
      img/gallery/graph/09_sizing.png
  34. BIN
      img/gallery/graph/10_multiline_text.png
  35. BIN
      img/gallery/graph/11_custom_style.png
  36. BIN
      img/gallery/graph/12_scalable_images.png
  37. BIN
      img/gallery/graph/13_dashed_lines.png
  38. BIN
      img/gallery/graph/14_dot_language.png
  39. BIN
      img/gallery/graph/15_dot_language_playground.png
  40. BIN
      img/gallery/graph/15_dot_language_playground2.png
  41. BIN
      img/gallery/graph/16_dynamic_data.png
  42. BIN
      img/gallery/graph/17_network_info.png
  43. BIN
      img/gallery/graph/graphviz_gallery.png
  44. BIN
      img/gallery/timeline/01_basic.png
  45. BIN
      img/gallery/timeline/02_dataset.png
  46. BIN
      img/gallery/timeline/03_much_data.png
  47. BIN
      img/gallery/timeline/04_html_data.png
  48. BIN
      img/gallery/timeline/05_groups.png
  49. +169
    -0
      img/logo/vis.svg
  50. BIN
      img/logo/vis128.png
  51. BIN
      img/logo/vis16.png
  52. BIN
      img/logo/vis256.png
  53. BIN
      img/logo/vis32.ico
  54. BIN
      img/logo/vis32.png
  55. BIN
      img/logo/vis64.png
  56. +317
    -0
      index.html
  57. +0
    -0
      package.js
  58. +166
    -76
      src/graph/Edge.js
  59. +387
    -594
      src/graph/Graph.js
  60. +0
    -245
      src/graph/NavigationMixin.js
  61. +114
    -79
      src/graph/Node.js
  62. +128
    -0
      src/graph/css/graph-manipulation.css
  63. +62
    -0
      src/graph/css/graph-navigation.css
  64. +200
    -85
      src/graph/graphMixins/ClusterMixin.js
  65. +433
    -0
      src/graph/graphMixins/ManipulationMixin.js
  66. +219
    -0
      src/graph/graphMixins/MixinLoader.js
  67. +173
    -0
      src/graph/graphMixins/NavigationMixin.js
  68. +44
    -39
      src/graph/graphMixins/SectorsMixin.js
  69. +25
    -70
      src/graph/graphMixins/SelectionMixin.js
  70. +373
    -0
      src/graph/graphMixins/physics/BarnesHut.js
  71. +245
    -0
      src/graph/graphMixins/physics/PhysicsMixin.js
  72. +66
    -0
      src/graph/graphMixins/physics/Repulsion.js
  73. BIN
      src/graph/img/acceptDeleteIcon.png
  74. BIN
      src/graph/img/addNodeIcon.png
  75. BIN
      src/graph/img/backIcon.png
  76. BIN
      src/graph/img/connectIcon.png
  77. BIN
      src/graph/img/cross.png
  78. BIN
      src/graph/img/cross2.png
  79. BIN
      src/graph/img/deleteIcon.png
  80. +0
    -0
      src/graph/img/downArrow.png
  81. BIN
      src/graph/img/downarrow.png
  82. BIN
      src/graph/img/editIcon.png
  83. +0
    -0
      src/graph/img/leftArrow.png
  84. BIN
      src/graph/img/leftarrow.png
  85. +0
    -0
      src/graph/img/rightArrow.png
  86. BIN
      src/graph/img/rightarrow.png
  87. +0
    -0
      src/graph/img/upArrow.png
  88. BIN
      src/graph/img/uparrow.png
  89. +5
    -39
      src/timeline/component/item/Item.js
  90. +6
    -1
      src/util.js
  91. +58
    -0
      updateversion.js

+ 1
- 0
.gitignore View File

@ -5,3 +5,4 @@ node_modules
.settings/org.eclipse.wst.jsdt.ui.superType.container
.settings/org.eclipse.wst.jsdt.ui.superType.name
npm-debug.log
dist/

+ 1
- 0
CNAME View File

@ -0,0 +1 @@
visjs.org

+ 13
- 4
Jakefile.js View File

@ -80,10 +80,15 @@ task('build', {async: true}, function () {
'./src/graph/Popup.js',
'./src/graph/Groups.js',
'./src/graph/Images.js',
'./src/graph/SectorsMixin.js',
'./src/graph/ClusterMixin.js',
'./src/graph/SelectionMixin.js',
'./src/graph/NavigationMixin.js',
'./src/graph/graphMixins/physics/PhysicsMixin.js',
'./src/graph/graphMixins/physics/BarnesHut.js',
'./src/graph/graphMixins/physics/Repulsion.js',
'./src/graph/graphMixins/ManipulationMixin.js',
'./src/graph/graphMixins/SectorsMixin.js',
'./src/graph/graphMixins/ClusterMixin.js',
'./src/graph/graphMixins/SelectionMixin.js',
'./src/graph/graphMixins/NavigationMixin.js',
'./src/graph/graphMixins/MixinLoader.js',
'./src/graph/Graph.js',
'./src/module/exports.js'
@ -99,6 +104,10 @@ task('build', {async: true}, function () {
wrench.copyDirSyncRecursive('./src/timeline/img', DIST+ '/img/timeline', {
forceDelete: true
});
// copy css
wrench.copyDirSyncRecursive('./src/graph/css', DIST+ '/css', {
forceDelete: true
});
var timeStart = Date.now();
// bundle the concatenated script and dependencies into one file

+ 94
- 0
css/style.css View File

@ -0,0 +1,94 @@
#menu {
position: absolute;
left: -170px;
top: 35px;
background-color: #a7c8f9;
padding: 15px;
border-radius: 3px;
}
#forkme {
position: fixed;
top: 0;
right: 0;
border: 0;
}
div.nav {
text-align: center;
}
div.nav ul {
text-decoration: none;
text-transform: uppercase;
margin-bottom: 30px;
padding-left: 0;
}
li.nav {
}
div.nav ul li {
text-decoration: none;
text-transform: uppercase;
font-weight: normal;
font-size: 11pt;
list-style: none;
margin-top: 5px;
}
div.nav ul li ul li {
text-decoration: none;
text-transform: none;
font-weight: normal;
font-size: 11pt;
color: #4D4D4D;
list-style: none;
}
div.nav a {
color: #2B7CE9;
color: white;
font-weight: bold;
}
.subtitle {
color: gray;
text-transform: uppercase;
font-size: 11pt;
}
.download td {
border: none;
padding: 5px 20px 5px 0;
}
.gallery .thumb {
display: inline-block;
text-align: center;
margin-right: 10px;
margin-bottom: 20px;
}
.gallery .thumb img {
border: 1px solid white;
border-radius: 5px;
height: 90px;
margin: 0;
}
.gallery .thumb a:hover img {
border-color: lightgray;
}
.gallery .thumb div {
margin: 0;
}
img {
border: 0;
}

BIN
dist/img/acceptDeleteIcon.png View File

Before After
Width: 24  |  Height: 24  |  Size: 20 KiB

BIN
dist/img/addNodeIcon.png View File

Before After
Width: 24  |  Height: 24  |  Size: 20 KiB

BIN
dist/img/backIcon.png View File

Before After
Width: 24  |  Height: 24  |  Size: 20 KiB

BIN
dist/img/connectIcon.png View File

Before After
Width: 24  |  Height: 24  |  Size: 20 KiB

BIN
dist/img/deleteIcon.png View File

Before After
Width: 24  |  Height: 24  |  Size: 20 KiB

BIN
dist/img/editIcon.png View File

Before After
Width: 24  |  Height: 24  |  Size: 20 KiB

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


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


+ 299
- 29
docs/graph.html View File

@ -53,7 +53,9 @@
<li><a href="#Nodes_configuration">Nodes</a></li>
<li><a href="#Edges_configuration">Edges</a></li>
<li><a href="#Groups_configuration">Groups</a></li>
<li><a href="#Clustering">Clustering</a></li>
<li><a href="#Physics">Physics</a></li>
<li><a href="#Data_manipulation">Data_manipulation</a></li>
<li><a href="#Clustering">Clustering</a></li>
<li><a href="#Navigation_controls">Navigation controls</a></li>
<li><a href="#Keyboard_navigation">Keyboard navigation</a></li>
</ul>
@ -529,13 +531,6 @@ var edges = [
type.</td>
</tr>
<tr>
<td>length</td>
<td>number</td>
<td>no</td>
<td>The length of the edge in pixels.</td>
</tr>
<tr>
<td>style</td>
<td>string</td>
@ -647,6 +642,25 @@ var options = {
<th>Description</th>
</tr>
<tr>
<td><a href="#Physics">physics</a></td>
<td>Object</td>
<td>none</td>
<td>
Configuration of the physics system governing the simulation of the nodes and edges.
Barnes-Hut nBody simulation is used by default. See section <a href="#Physics">Physics</a> for an overview of the available options.
</td>
</tr>
<tr>
<td><a href="#Data_manipulation">dataManipulation</a></td>
<td>Object</td>
<td>none</td>
<td>
Settings for manipulating the Dataset. See section <a href="#Data_manipulation">Data manipulation</a> for an overview of the available options.
</td>
</tr>
<tr>
<td><a href="#Clustering">clustering</a></td>
<td>Object</td>
@ -710,6 +724,13 @@ var options = {
</td>
</tr>
<tr>
<td>smoothCurves</td>
<td>Boolean</td>
<td>true</td>
<td>If true, edges are drawn as smooth curves. This is more computationally intensive since the edge now is a quadratic Bezier curve with control points on both nodes and an invisible node in the center of the edge. This support node is also handed by the physics simulation.</td>
</tr>
<tr>
<td>selectable</td>
<td>Boolean</td>
@ -964,12 +985,6 @@ var options = {
Only applicable when the line style is <code>dash-line</code>.</td>
</tr>
<tr>
<td>length</td>
<td>Number</td>
<td>100</td>
<td>The default length of a edge.</td>
</tr>
<tr>
<td>style</td>
<td>String</td>
@ -1122,6 +1137,236 @@ var nodes = [
</table>
<h3 id="Physics">Physics</h3>
<p>
The physics system has been overhauled to increase performance. The original simulation method was based on particel physics with a repulsion field (potential) around each node,
and the edges were modelled as springs. The new system employed the <a href="http://en.wikipedia.org/wiki/Barnes%E2%80%93Hut_simulation">Barnes-Hut</a> gravitational simulation model. The edges are still modelled as springs.
To unify the physics system, the damping, repulsion distance and edge length have been combined in an physics option. To retain good behaviour, both the old repulsion model and the Barnes-Hut model have their own parameters.
If no options for the physics system are supplied, the Barnes-Hut method will be used with the default parameters.
</p>
<pre class="prettyprint">
// These variables must be defined in an options object named physics.
// If a variable is not supplied, the default value is used.
var options = {
physics: {
barnesHut: {
enabled: true,
gravitationalConstant: -2000,
centralGravity: 0.1,
springLength: 100,
springConstant: 0.05,
damping: 0.09
},
repulsion: {
centralGravity: 0.1,
springLength: 50,
springConstant: 0.05,
nodeDistance: 100,
damping: 0.09
},
}
</pre>
<h5>barnesHut:</h5>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>enabled</td>
<td>Boolean</td>
<td>true</td>
<td>This switches the Barnes-Hut simulation on or off. If it is turned off, the old repulsion model is used. Barnes-Hut is generally faster and yields better results.</td>
</tr>
<tr>
<td>gravitationalConstant</td>
<td>Number</td>
<td>-2000</td>
<td>This is the gravitational constand used to calculate the gravity forces. More information is available <a href="http://en.wikipedia.org/wiki/Newton's_law_of_universal_gravitation" target="_blank">here</a>.</td>
</tr>
<tr>
<td>centralGravity</td>
<td>Number</td>
<td>0.1</td>
<td>The central gravity is a force that pulls all nodes to the center. This ensures independent groups do not float apart.</td>
</tr>
<tr>
<td>springLength</td>
<td>Number</td>
<td>100</td>
<td>In the previous versions this was a property of the edges, called length. This is the length of the springs when they are at rest. During the simulation they will be streched by the gravitational fields.
To greatly reduce the edge length, the gravitationalConstant has to be reduced as well.</td>
</tr>
<tr>
<td>springConstant</td>
<td>Number</td>
<td>0.05</td>
<td>This is the spring constant used to calculate the spring forces based on Hooke&prime;s Law. More information is available <a href="http://en.wikipedia.org/wiki/Hooke's_law" target="_blank">here</a>.</td>
</tr>
<tr>
<td>damping</td>
<td>Number</td>
<td>0.09</td>
<td>This is the damping constant. It is used to dissipate energy from the system to have it settle in an equilibrium. More information is available <a href="http://en.wikipedia.org/wiki/Damping" target="_blank">here</a>.</td>
</tr>
</table>
<h5>repulsion:</h5>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>centralGravity</td>
<td>Number</td>
<td>0.1</td>
<td>The central gravity is a force that pulls all nodes to the center. This ensures independent groups do not float apart.</td>
</tr>
<tr>
<td>springLength</td>
<td>Number</td>
<td>50</td>
<td>In the previous versions this was a property of the edges, called length. This is the length of the springs when they are at rest. During the simulation they will be streched by the gravitational fields.
To greatly reduce the edge length, the gravitationalConstant has to be reduced as well.</td>
</tr>
<tr>
<td>nodeDistance</td>
<td>Number</td>
<td>100</td>
<td>This parameter is used to define the distance of influence of the repulsion field of the nodes. Below half this distance, the repulsion is maximal and beyond twice this distance the repulsion is zero.</td>
</tr>
<tr>
<td>springConstant</td>
<td>Number</td>
<td>0.05</td>
<td>This is the spring constant used to calculate the spring forces based on Hooke&prime;s Law. More information is available <a href="http://en.wikipedia.org/wiki/Hooke's_law" target="_blank">here</a>.</td>
</tr>
<tr>
<td>damping</td>
<td>Number</td>
<td>0.09</td>
<td>This is the damping constant. It is used to dissipate energy from the system to have it settle in an equilibrium. More information is available <a href="http://en.wikipedia.org/wiki/Damping" target="_blank">here</a>.</td>
</tr>
</table>
<h3 id="Data_manipulation">Data manipulation</h3>
<p>
By using the data manipulation feature of the graph you can dynamically create nodes, connect nodes with edges, edit nodes or delete nodes and edges.
The toolbar is fully HTML and CSS so the user can style this to their preference. To control the behaviour of the data manipulation, users can insert custom functions
into the data manipulation process. For example, an injected function can show an detailed pop-up when a user wants to add a node. In <a href="../examples/graph/21_data_manipulation.html">example 21</a>,
two functions have been injected into the add and edit functionality. This is described in more detail in the next subsection.
</p>
<pre class="prettyprint">
// These variables must be defined in an options object named dataManipulation.
// If a variable is not supplied, the default value is used.
var options = {
dataManipulation: {
enabled: false,
initiallyVisible: false
}
}
// OR to just load the module with default values:
var options: {
dataManipulation: true
}
</pre>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>enabled</td>
<td>Boolean</td>
<td>false</td>
<td>Enabling or disabling of the data manipulation toolbar. If it is initially hidden, an edit button appears in the top left corner.</td>
</tr>
<tr>
<td>initiallyVisible</td>
<td>Boolean</td>
<td>false</td>
<td>Initially hide or show the data manipulation toolbar.</td>
</tr>
</table>
<h4 id="Data_manipulation_custom">Data manipulation: custom functionality</h4>
<p>
Users can insert custom functions into the add node, edit node, connect nodes, and delete selected operations. This is done by supplying them in the options.
If the callback is NOT called, nothing happens. <a href="../examples/graph/21_data_manipulation.html">Example 21</a> has two working examples
for the add and edit functions. The data the user is supplied with in these functions has been described in the code below.
For the add data, you can add any and all options that are accepted for node creation as described above. The same goes for edit, however only the fields described
in the code below contain information on the selected node. The callback for connect accepts any options that are used for edge creation. Only the callback for delete selected
requires the same data structure that is supplied to the user. <br /><br />
<b>If there is no injected function supplied for the edit operation, the button will not be shown in the toolbar.</b>
</p>
<pre class="prettyprint">
// If a variable is not supplied, the default value is used.
var options: {
dataManipulation: true,
onAdd: function(data,callback) {
// fixed must be false because we define a set x and y position.
// If fixed is not false, the node cannot move.
/** data = {id: random unique id,
* label: new,
* x: x position of click (canvas space),
* y: y position of click (canvas space),
* fixed: false
* };
*/
var newData = {..}; // alter the data as you want.
// all fields normally accepted by a node can be used.
callback(newData); // call the callback to add a node.
},
onEdit: function(data,callback) {
/** data = {id:...,
* label: ...,
* group: ...,
* shape: ...,
* color: {
* background:...,
* border:...,
* highlight: {
* background:...,
* border:...
* }
* }
* };
*/
var newData = {..}; // alter the data as you want.
// all fields normally accepted by a node can be used.
callback(newData); // call the callback with the new data to edit the node.
}
onConnect: function(data,callback) {
// data = {from: nodeId1, to: nodeId2};
var newData = {..}; // check or alter data as you see fit.
callback(newData); // call the callback to connect the nodes.
},
onDelete: function(data,callback) {
// data = {nodes: [selectedNodeIds], edges: [selectedEdgeIds]};
var newData = {..}; // alter the data as you want.
// the same data structure is required.
callback(newData); // call the callback to delete the objects.
}
};
</pre>
<p>
Because the interface elements are CSS and HTML, the user will have to correct for size changes of the canvas. To facilitate this, a new event has been added called frameResize.
A function can be bound to this event. This function is supplied with the new widht and height of the canvas. The CSS can then be updated accordingly.
An code snippet from example 21 is shown below.
</p>
<pre class="prettyprint">
graph.on("frameResize", function(params) {console.log(params.width,params.height)});
</pre>
<h3 id="Clustering">Clustering</h3>
<p>
The graph now supports dynamic clustering of nodes. This allows a user to view a very large dataset (> 50.000 nodes) without
@ -1150,16 +1395,19 @@ var options = {
reduceToNodes:300,
chainThreshold: 0.4,
clusterEdgeThreshold: 20,
sectorThreshold: 50,
sectorThreshold: 100,
screenSizeThreshold: 0.2,
fontSizeMultiplier: 4.0,
forceAmplification: 0.6,
distanceAmplification: 0.2,
edgeGrowth: 11,
nodeScaling: {width: 10,
height: 10,
radius: 10},
activeAreaBoxSize: 100
maxFontSize: 1000,
forceAmplification: 0.1,
distanceAmplification: 0.1,
edgeGrowth: 20,
nodeScaling: {width: 1,
height: 1,
radius: 1},
maxNodeSizeIncrements: 600,
activeAreaBoxSize: 100,
clusterLevelDifference: 2
}
}
// OR to just load the module with default values:
@ -1233,6 +1481,12 @@ var options: {
<td>4.0</td>
<td>This parameter denotes the increase in fontSize of the cluster when a single node is added to it.</td>
</tr>
<tr>
<td>maxFontSize</td>
<td>Number</td>
<td>1000</td>
<td>This parameter denotes the largest allowed font size. If the font becomes too large, some browsers experience problems displaying this.</td>
</tr>
<tr>
<td>forceAmplification</td>
<td>Number</td>
@ -1251,7 +1505,7 @@ var options: {
<tr>
<td>edgeGrowth</td>
<td>Number</td>
<td>11</td>
<td>20</td>
<td>This factor determines the elongation of edges connected to a cluster.</td>
</tr>
<tr>
@ -1272,13 +1526,29 @@ var options: {
<td>10</td>
<td>This factor determines how much the radius of a cluster increases in pixels per added node.</td>
</tr>
<tr>
<td>activeAreaBoxSize</td>
<tr>
<td>maxNodeSizeIncrements</td>
<td>Number</td>
<td>600</td>
<td>This limits the size clusters can grow to. The default value, 600, implies that if a cluster contains more than 600 nodes, it will no longer grow.</td>
</tr>
<tr>
<td>activeAreaBoxSize</td>
<td>Number</td>
<td>100</td>
<td>Imagine a square with an edge length of <code>activeAreaBoxSize</code> pixels around your cursor.
If a cluster is in this box as you zoom in, the cluster can be opened in a seperate sector.
This is regardless of the zoom level.</td>
</tr>
<tr>
<td>clusterLevelDifference</td>
<td>Number</td>
<td>100</td>
<td>Imagine a square with an edge length of <code>activeAreaBoxSize</code> pixels around your cursor.
If a cluster is in this box as you zoom in, the cluster can be opened in a seperate sector.
This is regardless of the zoom level.</td>
<td>2</td>
<td>At every clustering session, Graph will check if the difference between cluster levels is
acceptable. When a cluster is formed when zooming out, that is one cluster level.
If you zoom out further and it encompasses more nodes, that is another level. For example:
If the highest level of your graph at any given time is 3, nodes that have not clustered or
have clustered only once will join their neighbour with the lowest cluster level.</td>
</tr>
</table>

BIN
download/vis.zip View File


+ 1
- 2
examples/graph/02_random_nodes.html View File

@ -57,6 +57,7 @@
j++;
}
var from = i;
var to = j;
edges.push({
@ -87,7 +88,6 @@
*/
var options = {
edges: {
length: 50
},
stabilize: false
};
@ -102,7 +102,6 @@
</head>
<body onload="draw();">
<form onsubmit="draw(); return false;">
<label for="nodeCount">Number of nodes:</label>
<input id="nodeCount" type="text" value="25" style="width: 50px;">

+ 0
- 3
examples/graph/19_scale_free_graph_clustering.html View File

@ -88,9 +88,6 @@
};
*/
var options = {
edges: {
length: 50
},
clustering: {
enabled: clusteringOn,
clusterEdgeThreshold: clusterEdgeThreshold

+ 6
- 5
examples/graph/20_navigation.html View File

@ -34,6 +34,7 @@
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link type="text/css" rel="stylesheet" charset="UTF-8" href="../../dist/css/graph-navigation.css">
<script type="text/javascript">
var nodes = null;
@ -125,14 +126,14 @@
<body onload="draw();">
<h2>Navigation controls and keyboad navigation</h2>
<div style="width: 700px; font-size:14px;">
This example is the same as example 2, except for the navigation controls that has been activated. The navigation controls are described below. <br /><br />
This example is the same as example 2, except for the navigation controls that have been activated. The navigation controls are described below. <br /><br />
<table class="legend_table">
<tr>
<td>Icons: </td>
<td><div class="table_content"><img src="../../dist/img/uparrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/downarrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/leftarrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/rightarrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/upArrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/downArrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/leftArrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/rightArrow.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/plus.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/minus.png" /> </div></td>
<td><div class="table_content"><img src="../../dist/img/zoomExtends.png" /> </div></td>

+ 214
- 0
examples/graph/21_data_manipulation.html View File

@ -0,0 +1,214 @@
<!doctype html>
<html>
<head>
<title>Graph | Navigation</title>
<style type="text/css">
body {
font: 10pt sans;
}
#mygraph {
position:relative;
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
table.legend_table {
font-size: 11px;
border-width:1px;
border-color:#d3d3d3;
border-style:solid;
}
table.legend_table,td {
border-width:1px;
border-color:#d3d3d3;
border-style:solid;
padding: 2px;
}
div.table_content {
width:80px;
text-align:center;
}
div.table_description {
width:100px;
}
#operation {
font-size:28px;
}
#graph-popUp {
display:none;
position:absolute;
top:350px;
left:170px;
z-index:299;
width:250px;
height:120px;
background-color: #f9f9f9;
border-style:solid;
border-width:3px;
border-color: #5394ed;
padding:10px;
text-align: center;
}
</style>
<link type="text/css" rel="stylesheet" charset="UTF-8" href="../../dist/css/graph-manipulation.css">
<link type="text/css" rel="stylesheet" charset="UTF-8" href="../../dist/css/graph-navigation.css">
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var nodes = null;
var edges = null;
var graph = null;
function draw() {
nodes = [];
edges = [];
var connectionCount = [];
// randomly create some nodes and edges
var nodeCount = 25;
for (var i = 0; i < nodeCount; i++) {
nodes.push({
id: i,
label: String(i)
});
connectionCount[i] = 0;
// create edges in a scale-free-graph way
if (i == 1) {
var from = i;
var to = 0;
edges.push({
from: from,
to: to
});
connectionCount[from]++;
connectionCount[to]++;
}
else if (i > 1) {
var conn = edges.length * 2;
var rand = Math.floor(Math.random() * conn);
var cum = 0;
var j = 0;
while (j < connectionCount.length && cum < rand) {
cum += connectionCount[j];
j++;
}
var from = i;
var to = j;
edges.push({
from: from,
to: to
});
connectionCount[from]++;
connectionCount[to]++;
}
}
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {
edges: {
length: 50
},
stabilize: false,
dataManipulation: true,
onAdd: function(data,callback) {
var span = document.getElementById('operation');
var idInput = document.getElementById('node-id');
var labelInput = document.getElementById('node-label');
var saveButton = document.getElementById('saveButton');
var cancelButton = document.getElementById('cancelButton');
var div = document.getElementById('graph-popUp');
span.innerHTML = "Add Node";
idInput.value = data.id;
labelInput.value = data.label;
saveButton.onclick = saveData.bind(this,data,callback);
cancelButton.onclick = clearPopUp.bind();
div.style.display = 'block';
},
onEdit: function(data,callback) {
var span = document.getElementById('operation');
var idInput = document.getElementById('node-id');
var labelInput = document.getElementById('node-label');
var saveButton = document.getElementById('saveButton');
var cancelButton = document.getElementById('cancelButton');
var div = document.getElementById('graph-popUp');
span.innerHTML = "Edit Node";
idInput.value = data.id;
labelInput.value = data.label;
saveButton.onclick = saveData.bind(this,data,callback);
cancelButton.onclick = clearPopUp.bind();
div.style.display = 'block';
}
};
graph = new vis.Graph(container, data, options);
// add event listeners
graph.on('select', function(params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
graph.on("frameResize", function(params) {console.log(params.width,params.height)});
function clearPopUp() {
var saveButton = document.getElementById('saveButton');
var cancelButton = document.getElementById('cancelButton');
saveButton.onclick = null;
cancelButton.onclick = null;
var div = document.getElementById('graph-popUp');
div.style.display = 'none';
}
function saveData(data,callback) {
var idInput = document.getElementById('node-id');
var labelInput = document.getElementById('node-label');
var div = document.getElementById('graph-popUp');
data.id = idInput.value;
data.label = labelInput.value;
clearPopUp();
callback(data);
}
}
</script>
</head>
<body onload="draw();">
<h2>Editing the dataset</h2>
<div style="width: 700px; font-size:14px;">
In this example we have enabled the data manipulation setting. If the dataManipulation option is set to true, the edit button will appear.
If you prefer to have the toolbar visible initially, you can set the initiallyVisible option to true. The exact method is described in the docs.
<br /><br />
The data manipulation allows the user to add nodes, connect them, edit them and delete any selected items. In this example we have created trigger functions
for the add and edit operations. By settings these trigger functions the user can direct the way the data is manipulated. In this example we have created a simple
pop-up that allows us to edit some of the properties.
</div>
<br />
<div id="graph-popUp">
<span id="operation">node</span> <br>
<table style="margin:auto;"><tr>
<td>id</td><td><input id="node-id" value="new value"></td>
</tr>
<tr>
<td>label</td><td><input id="node-label" value="new value"> </td>
</tr></table>
<input type="button" value="save" id="saveButton"></button>
<input type="button" value="cancel" id="cancelButton"></button>
</div>
<br />
<div id="mygraph"></div>
<p id="selection"></p>
</body>
</html>

+ 373
- 0
examples/graph/22_les_miserables.html View File

@ -0,0 +1,373 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph | Multiline text</title>
<style type="text/css">
#mygraph {
width: 900px;
height: 900px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
function draw() {
// create some nodes
var nodes = [
{id:0,"labelIGNORE":"Myriel","group":1},
{id:1,"labelIGNORE":"Napoleon","group":1},
{id:2,"labelIGNORE":"Mlle.Baptistine","group":1},
{id:3,"labelIGNORE":"Mme.Magloire","group":1},
{id:4,"labelIGNORE":"CountessdeLo","group":1},
{id:5,"labelIGNORE":"Geborand","group":1},
{id:6,"labelIGNORE":"Champtercier","group":1},
{id:7,"labelIGNORE":"Cravatte","group":1},
{id:8,"labelIGNORE":"Count","group":1},
{id:9,"labelIGNORE":"OldMan","group":1},
{id:10,"labelIGNORE":"Labarre","group":2},
{id:11,"labelIGNORE":"Valjean","group":2},
{id:12,"labelIGNORE":"Marguerite","group":3},
{id:13,"labelIGNORE":"Mme.deR","group":2},
{id:14,"labelIGNORE":"Isabeau","group":2},
{id:15,"labelIGNORE":"Gervais","group":2},
{id:16,"labelIGNORE":"Tholomyes","group":3},
{id:17,"labelIGNORE":"Listolier","group":3},
{id:18,"labelIGNORE":"Fameuil","group":3},
{id:19,"labelIGNORE":"Blacheville","group":3},
{id:20,"labelIGNORE":"Favourite","group":3},
{id:21,"labelIGNORE":"Dahlia","group":3},
{id:22,"labelIGNORE":"Zephine","group":3},
{id:23,"labelIGNORE":"Fantine","group":3},
{id:24,"labelIGNORE":"Mme.Thenardier","group":4},
{id:25,"labelIGNORE":"Thenardier","group":4},
{id:26,"labelIGNORE":"Cosette","group":5},
{id:27,"labelIGNORE":"Javert","group":4},
{id:28,"labelIGNORE":"Fauchelevent","group":0},
{id:29,"labelIGNORE":"Bamatabois","group":2},
{id:30,"labelIGNORE":"Perpetue","group":3},
{id:31,"labelIGNORE":"Simplice","group":2},
{id:32,"labelIGNORE":"Scaufflaire","group":2},
{id:33,"labelIGNORE":"Woman1","group":2},
{id:34,"labelIGNORE":"Judge","group":2},
{id:35,"labelIGNORE":"Champmathieu","group":2},
{id:36,"labelIGNORE":"Brevet","group":2},
{id:37,"labelIGNORE":"Chenildieu","group":2},
{id:38,"labelIGNORE":"Cochepaille","group":2},
{id:39,"labelIGNORE":"Pontmercy","group":4},
{id:40,"labelIGNORE":"Boulatruelle","group":6},
{id:41,"labelIGNORE":"Eponine","group":4},
{id:42,"labelIGNORE":"Anzelma","group":4},
{id:43,"labelIGNORE":"Woman2","group":5},
{id:44,"labelIGNORE":"MotherInnocent","group":0},
{id:45,"labelIGNORE":"Gribier","group":0},
{id:46,"labelIGNORE":"Jondrette","group":7},
{id:47,"labelIGNORE":"Mme.Burgon","group":7},
{id:48,"labelIGNORE":"Gavroche","group":8},
{id:49,"labelIGNORE":"Gillenormand","group":5},
{id:50,"labelIGNORE":"Magnon","group":5},
{id:51,"labelIGNORE":"Mlle.Gillenormand","group":5},
{id:52,"labelIGNORE":"Mme.Pontmercy","group":5},
{id:53,"labelIGNORE":"Mlle.Vaubois","group":5},
{id:54,"labelIGNORE":"Lt.Gillenormand","group":5},
{id:55,"labelIGNORE":"Marius","group":8},
{id:56,"labelIGNORE":"BaronessT","group":5},
{id:57,"labelIGNORE":"Mabeuf","group":8},
{id:58,"labelIGNORE":"Enjolras","group":8},
{id:59,"labelIGNORE":"Combeferre","group":8},
{id:60,"labelIGNORE":"Prouvaire","group":8},
{id:61,"labelIGNORE":"Feuilly","group":8},
{id:62,"labelIGNORE":"Courfeyrac","group":8},
{id:63,"labelIGNORE":"Bahorel","group":8},
{id:64,"labelIGNORE":"Bossuet","group":8},
{id:65,"labelIGNORE":"Joly","group":8},
{id:66,"labelIGNORE":"Grantaire","group":8},
{id:67,"labelIGNORE":"MotherPlutarch","group":9},
{id:68,"labelIGNORE":"Gueulemer","group":4},
{id:69,"labelIGNORE":"Babet","group":4},
{id:70,"labelIGNORE":"Claquesous","group":4},
{id:71,"labelIGNORE":"Montparnasse","group":4},
{id:72,"labelIGNORE":"Toussaint","group":5},
{id:73,"labelIGNORE":"Child1","group":10},
{id:74,"labelIGNORE":"Child2","group":10},
{id:75,"labelIGNORE":"Brujon","group":4},
{id:76,"labelIGNORE":"Mme.Hucheloup","group":8}
];
// create some edges
var edges = [
{"from":1,"to":0,"valueIGNORED":1},
{"from":2,"to":0,"valueIGNORED":8},
{"from":3,"to":0,"valueIGNORED":10},
{"from":3,"to":2,"valueIGNORED":6},
{"from":4,"to":0,"valueIGNORED":1},
{"from":5,"to":0,"valueIGNORED":1},
{"from":6,"to":0,"valueIGNORED":1},
{"from":7,"to":0,"valueIGNORED":1},
{"from":8,"to":0,"valueIGNORED":2},
{"from":9,"to":0,"valueIGNORED":1},
{"from":11,"to":10,"valueIGNORED":1},
{"from":11,"to":3,"valueIGNORED":3},
{"from":11,"to":2,"valueIGNORED":3},
{"from":11,"to":0,"valueIGNORED":5},
{"from":12,"to":11,"valueIGNORED":1},
{"from":13,"to":11,"valueIGNORED":1},
{"from":14,"to":11,"valueIGNORED":1},
{"from":15,"to":11,"valueIGNORED":1},
{"from":17,"to":16,"valueIGNORED":4},
{"from":18,"to":16,"valueIGNORED":4},
{"from":18,"to":17,"valueIGNORED":4},
{"from":19,"to":16,"valueIGNORED":4},
{"from":19,"to":17,"valueIGNORED":4},
{"from":19,"to":18,"valueIGNORED":4},
{"from":20,"to":16,"valueIGNORED":3},
{"from":20,"to":17,"valueIGNORED":3},
{"from":20,"to":18,"valueIGNORED":3},
{"from":20,"to":19,"valueIGNORED":4},
{"from":21,"to":16,"valueIGNORED":3},
{"from":21,"to":17,"valueIGNORED":3},
{"from":21,"to":18,"valueIGNORED":3},
{"from":21,"to":19,"valueIGNORED":3},
{"from":21,"to":20,"valueIGNORED":5},
{"from":22,"to":16,"valueIGNORED":3},
{"from":22,"to":17,"valueIGNORED":3},
{"from":22,"to":18,"valueIGNORED":3},
{"from":22,"to":19,"valueIGNORED":3},
{"from":22,"to":20,"valueIGNORED":4},
{"from":22,"to":21,"valueIGNORED":4},
{"from":23,"to":16,"valueIGNORED":3},
{"from":23,"to":17,"valueIGNORED":3},
{"from":23,"to":18,"valueIGNORED":3},
{"from":23,"to":19,"valueIGNORED":3},
{"from":23,"to":20,"valueIGNORED":4},
{"from":23,"to":21,"valueIGNORED":4},
{"from":23,"to":22,"valueIGNORED":4},
{"from":23,"to":12,"valueIGNORED":2},
{"from":23,"to":11,"valueIGNORED":9},
{"from":24,"to":23,"valueIGNORED":2},
{"from":24,"to":11,"valueIGNORED":7},
{"from":25,"to":24,"valueIGNORED":13},
{"from":25,"to":23,"valueIGNORED":1},
{"from":25,"to":11,"valueIGNORED":12},
{"from":26,"to":24,"valueIGNORED":4},
{"from":26,"to":11,"valueIGNORED":31},
{"from":26,"to":16,"valueIGNORED":1},
{"from":26,"to":25,"valueIGNORED":1},
{"from":27,"to":11,"valueIGNORED":17},
{"from":27,"to":23,"valueIGNORED":5},
{"from":27,"to":25,"valueIGNORED":5},
{"from":27,"to":24,"valueIGNORED":1},
{"from":27,"to":26,"valueIGNORED":1},
{"from":28,"to":11,"valueIGNORED":8},
{"from":28,"to":27,"valueIGNORED":1},
{"from":29,"to":23,"valueIGNORED":1},
{"from":29,"to":27,"valueIGNORED":1},
{"from":29,"to":11,"valueIGNORED":2},
{"from":30,"to":23,"valueIGNORED":1},
{"from":31,"to":30,"valueIGNORED":2},
{"from":31,"to":11,"valueIGNORED":3},
{"from":31,"to":23,"valueIGNORED":2},
{"from":31,"to":27,"valueIGNORED":1},
{"from":32,"to":11,"valueIGNORED":1},
{"from":33,"to":11,"valueIGNORED":2},
{"from":33,"to":27,"valueIGNORED":1},
{"from":34,"to":11,"valueIGNORED":3},
{"from":34,"to":29,"valueIGNORED":2},
{"from":35,"to":11,"valueIGNORED":3},
{"from":35,"to":34,"valueIGNORED":3},
{"from":35,"to":29,"valueIGNORED":2},
{"from":36,"to":34,"valueIGNORED":2},
{"from":36,"to":35,"valueIGNORED":2},
{"from":36,"to":11,"valueIGNORED":2},
{"from":36,"to":29,"valueIGNORED":1},
{"from":37,"to":34,"valueIGNORED":2},
{"from":37,"to":35,"valueIGNORED":2},
{"from":37,"to":36,"valueIGNORED":2},
{"from":37,"to":11,"valueIGNORED":2},
{"from":37,"to":29,"valueIGNORED":1},
{"from":38,"to":34,"valueIGNORED":2},
{"from":38,"to":35,"valueIGNORED":2},
{"from":38,"to":36,"valueIGNORED":2},
{"from":38,"to":37,"valueIGNORED":2},
{"from":38,"to":11,"valueIGNORED":2},
{"from":38,"to":29,"valueIGNORED":1},
{"from":39,"to":25,"valueIGNORED":1},
{"from":40,"to":25,"valueIGNORED":1},
{"from":41,"to":24,"valueIGNORED":2},
{"from":41,"to":25,"valueIGNORED":3},
{"from":42,"to":41,"valueIGNORED":2},
{"from":42,"to":25,"valueIGNORED":2},
{"from":42,"to":24,"valueIGNORED":1},
{"from":43,"to":11,"valueIGNORED":3},
{"from":43,"to":26,"valueIGNORED":1},
{"from":43,"to":27,"valueIGNORED":1},
{"from":44,"to":28,"valueIGNORED":3},
{"from":44,"to":11,"valueIGNORED":1},
{"from":45,"to":28,"valueIGNORED":2},
{"from":47,"to":46,"valueIGNORED":1},
{"from":48,"to":47,"valueIGNORED":2},
{"from":48,"to":25,"valueIGNORED":1},
{"from":48,"to":27,"valueIGNORED":1},
{"from":48,"to":11,"valueIGNORED":1},
{"from":49,"to":26,"valueIGNORED":3},
{"from":49,"to":11,"valueIGNORED":2},
{"from":50,"to":49,"valueIGNORED":1},
{"from":50,"to":24,"valueIGNORED":1},
{"from":51,"to":49,"valueIGNORED":9},
{"from":51,"to":26,"valueIGNORED":2},
{"from":51,"to":11,"valueIGNORED":2},
{"from":52,"to":51,"valueIGNORED":1},
{"from":52,"to":39,"valueIGNORED":1},
{"from":53,"to":51,"valueIGNORED":1},
{"from":54,"to":51,"valueIGNORED":2},
{"from":54,"to":49,"valueIGNORED":1},
{"from":54,"to":26,"valueIGNORED":1},
{"from":55,"to":51,"valueIGNORED":6},
{"from":55,"to":49,"valueIGNORED":12},
{"from":55,"to":39,"valueIGNORED":1},
{"from":55,"to":54,"valueIGNORED":1},
{"from":55,"to":26,"valueIGNORED":21},
{"from":55,"to":11,"valueIGNORED":19},
{"from":55,"to":16,"valueIGNORED":1},
{"from":55,"to":25,"valueIGNORED":2},
{"from":55,"to":41,"valueIGNORED":5},
{"from":55,"to":48,"valueIGNORED":4},
{"from":56,"to":49,"valueIGNORED":1},
{"from":56,"to":55,"valueIGNORED":1},
{"from":57,"to":55,"valueIGNORED":1},
{"from":57,"to":41,"valueIGNORED":1},
{"from":57,"to":48,"valueIGNORED":1},
{"from":58,"to":55,"valueIGNORED":7},
{"from":58,"to":48,"valueIGNORED":7},
{"from":58,"to":27,"valueIGNORED":6},
{"from":58,"to":57,"valueIGNORED":1},
{"from":58,"to":11,"valueIGNORED":4},
{"from":59,"to":58,"valueIGNORED":15},
{"from":59,"to":55,"valueIGNORED":5},
{"from":59,"to":48,"valueIGNORED":6},
{"from":59,"to":57,"valueIGNORED":2},
{"from":60,"to":48,"valueIGNORED":1},
{"from":60,"to":58,"valueIGNORED":4},
{"from":60,"to":59,"valueIGNORED":2},
{"from":61,"to":48,"valueIGNORED":2},
{"from":61,"to":58,"valueIGNORED":6},
{"from":61,"to":60,"valueIGNORED":2},
{"from":61,"to":59,"valueIGNORED":5},
{"from":61,"to":57,"valueIGNORED":1},
{"from":61,"to":55,"valueIGNORED":1},
{"from":62,"to":55,"valueIGNORED":9},
{"from":62,"to":58,"valueIGNORED":17},
{"from":62,"to":59,"valueIGNORED":13},
{"from":62,"to":48,"valueIGNORED":7},
{"from":62,"to":57,"valueIGNORED":2},
{"from":62,"to":41,"valueIGNORED":1},
{"from":62,"to":61,"valueIGNORED":6},
{"from":62,"to":60,"valueIGNORED":3},
{"from":63,"to":59,"valueIGNORED":5},
{"from":63,"to":48,"valueIGNORED":5},
{"from":63,"to":62,"valueIGNORED":6},
{"from":63,"to":57,"valueIGNORED":2},
{"from":63,"to":58,"valueIGNORED":4},
{"from":63,"to":61,"valueIGNORED":3},
{"from":63,"to":60,"valueIGNORED":2},
{"from":63,"to":55,"valueIGNORED":1},
{"from":64,"to":55,"valueIGNORED":5},
{"from":64,"to":62,"valueIGNORED":12},
{"from":64,"to":48,"valueIGNORED":5},
{"from":64,"to":63,"valueIGNORED":4},
{"from":64,"to":58,"valueIGNORED":10},
{"from":64,"to":61,"valueIGNORED":6},
{"from":64,"to":60,"valueIGNORED":2},
{"from":64,"to":59,"valueIGNORED":9},
{"from":64,"to":57,"valueIGNORED":1},
{"from":64,"to":11,"valueIGNORED":1},
{"from":65,"to":63,"valueIGNORED":5},
{"from":65,"to":64,"valueIGNORED":7},
{"from":65,"to":48,"valueIGNORED":3},
{"from":65,"to":62,"valueIGNORED":5},
{"from":65,"to":58,"valueIGNORED":5},
{"from":65,"to":61,"valueIGNORED":5},
{"from":65,"to":60,"valueIGNORED":2},
{"from":65,"to":59,"valueIGNORED":5},
{"from":65,"to":57,"valueIGNORED":1},
{"from":65,"to":55,"valueIGNORED":2},
{"from":66,"to":64,"valueIGNORED":3},
{"from":66,"to":58,"valueIGNORED":3},
{"from":66,"to":59,"valueIGNORED":1},
{"from":66,"to":62,"valueIGNORED":2},
{"from":66,"to":65,"valueIGNORED":2},
{"from":66,"to":48,"valueIGNORED":1},
{"from":66,"to":63,"valueIGNORED":1},
{"from":66,"to":61,"valueIGNORED":1},
{"from":66,"to":60,"valueIGNORED":1},
{"from":67,"to":57,"valueIGNORED":3},
{"from":68,"to":25,"valueIGNORED":5},
{"from":68,"to":11,"valueIGNORED":1},
{"from":68,"to":24,"valueIGNORED":1},
{"from":68,"to":27,"valueIGNORED":1},
{"from":68,"to":48,"valueIGNORED":1},
{"from":68,"to":41,"valueIGNORED":1},
{"from":69,"to":25,"valueIGNORED":6},
{"from":69,"to":68,"valueIGNORED":6},
{"from":69,"to":11,"valueIGNORED":1},
{"from":69,"to":24,"valueIGNORED":1},
{"from":69,"to":27,"valueIGNORED":2},
{"from":69,"to":48,"valueIGNORED":1},
{"from":69,"to":41,"valueIGNORED":1},
{"from":70,"to":25,"valueIGNORED":4},
{"from":70,"to":69,"valueIGNORED":4},
{"from":70,"to":68,"valueIGNORED":4},
{"from":70,"to":11,"valueIGNORED":1},
{"from":70,"to":24,"valueIGNORED":1},
{"from":70,"to":27,"valueIGNORED":1},
{"from":70,"to":41,"valueIGNORED":1},
{"from":70,"to":58,"valueIGNORED":1},
{"from":71,"to":27,"valueIGNORED":1},
{"from":71,"to":69,"valueIGNORED":2},
{"from":71,"to":68,"valueIGNORED":2},
{"from":71,"to":70,"valueIGNORED":2},
{"from":71,"to":11,"valueIGNORED":1},
{"from":71,"to":48,"valueIGNORED":1},
{"from":71,"to":41,"valueIGNORED":1},
{"from":71,"to":25,"valueIGNORED":1},
{"from":72,"to":26,"valueIGNORED":2},
{"from":72,"to":27,"valueIGNORED":1},
{"from":72,"to":11,"valueIGNORED":1},
{"from":73,"to":48,"valueIGNORED":2},
{"from":74,"to":48,"valueIGNORED":2},
{"from":74,"to":73,"valueIGNORED":3},
{"from":75,"to":69,"valueIGNORED":3},
{"from":75,"to":68,"valueIGNORED":3},
{"from":75,"to":25,"valueIGNORED":3},
{"from":75,"to":48,"valueIGNORED":1},
{"from":75,"to":41,"valueIGNORED":1},
{"from":75,"to":70,"valueIGNORED":1},
{"from":75,"to":71,"valueIGNORED":1},
{"from":76,"to":64,"valueIGNORED":1},
{"from":76,"to":65,"valueIGNORED":1},
{"from":76,"to":66,"valueIGNORED":1},
{"from":76,"to":63,"valueIGNORED":1},
{"from":76,"to":62,"valueIGNORED":1},
{"from":76,"to":48,"valueIGNORED":1},
{"from":76,"to":58,"valueIGNORED":1}
];
// create a graph
var container = document.getElementById('mygraph');
var data = {
nodes: nodes,
edges: edges
};
var options = {nodes: {shape:'circle'},stabilize: false};
var graph = new vis.Graph(container, data, options);
}
</script>
</head>
<body onload="draw()">
<div id="mygraph"></div>
</body>
</html>

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

@ -33,6 +33,7 @@
<p><a href="19_scale_free_graph_clustering.html">19_scale_free_graph_clustering.html</a></p>
<p><a href="20_navigation.html">20_navigation.html</a></p>
<p><a href="21_data_manipulation.html">21_data_manipulation.html</a></p>
<p><a href="22_les_miserables.html">22_les_miserables.html</a></p>
<p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
</div>

BIN
favicon.ico View File

Before After

BIN
img/external-link-icons/external-link-icon.png View File

Before After
Width: 9  |  Height: 9  |  Size: 194 B

+ 40
- 0
img/external-link-icons/license.txt View File

@ -0,0 +1,40 @@
/**************************************\
Shapes4FREE License
http://www.shapes4free.com/ - visit us to get free photoshop shapes, read our easy-to-understand shapes tutorials and tips, and view beautiful examples of using shapes in all kinds of design
More about the license: http://www.shapes4free.com/license/
\**************************************/
This resource was created by Oksana Khristenko
This resource has been downloaded from Shapes4FREE.com and is free for personal or commercial projects. You may use it for web and print design.
No attribution or backlinks are required, but we would certainly appreciate it if you bookmarked www.shapes4free.com and shared the link to it with your friends:
www.shapes4free.com - free photoshop shapes
You may not resell or distribute this resource. Uploading it to another website
or offering them for download on another website is not allowed. If you would like to feature this resource on
your website or share them with friends, do not link directly to the resource files,
please link to the appropriate page on Shapes4FREE.com where it is possible to download the freebie.
/**************************************\
Shapes4FREE Ëèöåíçèÿ
http://www.shapes4free.com/ - áåñïëàòíûå ôèãóðû äëÿ Ôîòîøîïà, óðîêè è ïîäñêàçêè, à òàêæå êðàñèâûå ïðèìåðû èñïîëüçîâàíèÿ ôèãóð âî âñåõ âèäàõ äèçàéíà
Ëèöåíçèÿ: http://www.shapes4free.com/license-ru/
\**************************************/
Àâòîð: Îêñàíà Õðèñòåíêî
Âñå áåñïëàòíûå ðåñóðñû êîòîðûå ìîæíî ñêà÷àòü íà Shapes4FREE.com, âêëþ÷àÿ ïðîèçâîëüíûå ôèãóðû äëÿ Ôîòîøîïà
(photoshop custom shapes) áåñïëàòíû äëÿ èñïîëüçîâàíèÿ â ëè÷íûõ è êîììåð÷åñêèõ ïðîåêòàõ. Ðàçðåøåíî èñïîëüçîâàòü
áåñïëàòíûå ðåñóðñû Shapes4FREE â âåá äèçàéíå è ïå÷àòíûõ ìàòåðèàëàõ.
Ññûëêà íà ñàéò Shapes4FREE.com íå òðåáóåòñÿ íî ïðèâåòñòâóåòñÿ. Ìû áóäåì ðàäû åñëè âû ðàññêàæåòå î íàñ äðóçüÿì:
www.shapes4free.com - áåñïëàòíûå ôèãóðû äëÿ Ôîòîøîïà
Çàïðåùåíî ïðîäàâàòü èëè ðàñïðîñòðàíÿòü áåñïëàòíûå ðåñóðñû ñîçäàííûå Shapes4FREE.
Çàïðåùåíî çàãðóæàòü èõ íà äðóãèå ñàéòû è ïîçâîëÿòü ïîëüçîâàòåëÿì èõ ñêà÷èâàòü. Åñëè âû õîòèòå ðàññêàçàòü î íàøåì
áåñïëàòíîì ðåñóðñå íà ñàéòå èëè ïîäåëèòüñÿ ñ äðóçüÿìè, íå ñîçäàâàéòå ïðÿìûõ ññûëîê íà ôàéë, ñîçäàéòå ññûëêó íà
ñîîòâåòñòâóþùóþ ñòðàíèöó ñàéòà Shapes4FREE.com ãäå ìîæíî áóäåò ñêà÷àòü ýòîò ðåñóðñ.

BIN
img/forkme_right_darkblue_121621.png View File

Before After
Width: 149  |  Height: 149  |  Size: 7.6 KiB

BIN
img/gallery/graph/01_basic_usage.png View File

Before After
Width: 400  |  Height: 400  |  Size: 21 KiB

BIN
img/gallery/graph/02_random_nodes.png View File

Before After
Width: 600  |  Height: 600  |  Size: 58 KiB

BIN
img/gallery/graph/03_images.png View File

Before After
Width: 600  |  Height: 600  |  Size: 88 KiB

BIN
img/gallery/graph/04_shapes.png View File

Before After
Width: 797  |  Height: 600  |  Size: 50 KiB

BIN
img/gallery/graph/05_social_network.png View File

Before After
Width: 600  |  Height: 600  |  Size: 76 KiB

BIN
img/gallery/graph/06_groups.png View File

Before After
Width: 600  |  Height: 600  |  Size: 40 KiB

BIN
img/gallery/graph/07_selections.png View File

Before After
Width: 400  |  Height: 400  |  Size: 14 KiB

BIN
img/gallery/graph/08_mobile_friendly.png View File

Before After
Width: 605  |  Height: 551  |  Size: 45 KiB

BIN
img/gallery/graph/09_sizing.png View File

Before After
Width: 600  |  Height: 600  |  Size: 27 KiB

BIN
img/gallery/graph/10_multiline_text.png View File

Before After
Width: 600  |  Height: 600  |  Size: 40 KiB

BIN
img/gallery/graph/11_custom_style.png View File

Before After
Width: 600  |  Height: 600  |  Size: 59 KiB

BIN
img/gallery/graph/12_scalable_images.png View File

Before After
Width: 600  |  Height: 600  |  Size: 104 KiB

BIN
img/gallery/graph/13_dashed_lines.png View File

Before After
Width: 600  |  Height: 600  |  Size: 26 KiB

BIN
img/gallery/graph/14_dot_language.png View File

Before After
Width: 381  |  Height: 330  |  Size: 13 KiB

BIN
img/gallery/graph/15_dot_language_playground.png View File

Before After
Width: 429  |  Height: 384  |  Size: 31 KiB

BIN
img/gallery/graph/15_dot_language_playground2.png View File

Before After
Width: 842  |  Height: 595  |  Size: 41 KiB

BIN
img/gallery/graph/16_dynamic_data.png View File

Before After
Width: 504  |  Height: 370  |  Size: 17 KiB

BIN
img/gallery/graph/17_network_info.png View File

Before After
Width: 871  |  Height: 648  |  Size: 60 KiB

BIN
img/gallery/graph/graphviz_gallery.png View File

Before After
Width: 1237  |  Height: 729  |  Size: 262 KiB

BIN
img/gallery/timeline/01_basic.png View File

Before After
Width: 544  |  Height: 195  |  Size: 9.0 KiB

BIN
img/gallery/timeline/02_dataset.png View File

Before After
Width: 544  |  Height: 195  |  Size: 9.0 KiB

BIN
img/gallery/timeline/03_much_data.png View File

Before After
Width: 544  |  Height: 263  |  Size: 14 KiB

BIN
img/gallery/timeline/04_html_data.png View File

Before After
Width: 544  |  Height: 248  |  Size: 16 KiB

BIN
img/gallery/timeline/05_groups.png View File

Before After
Width: 711  |  Height: 459  |  Size: 24 KiB

+ 169
- 0
img/logo/vis.svg View File

@ -0,0 +1,169 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="128"
height="128"
id="svg2"
version="1.1"
inkscape:version="0.48.3.1 r9886"
sodipodi:docname="vis.svg"
inkscape:export-filename="/home/jos/projects/vis-pages/img/logo/vis256.png"
inkscape:export-xdpi="180"
inkscape:export-ydpi="180">
<defs
id="defs4">
<filter
inkscape:collect="always"
id="filter3765">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.098994946"
id="feGaussianBlur3767" />
</filter>
<filter
color-interpolation-filters="sRGB"
inkscape:collect="always"
id="filter3765-8">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.098994946"
id="feGaussianBlur3767-2" />
</filter>
<filter
color-interpolation-filters="sRGB"
inkscape:collect="always"
id="filter3765-8-3">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.098994946"
id="feGaussianBlur3767-2-9" />
</filter>
<filter
color-interpolation-filters="sRGB"
inkscape:collect="always"
id="filter3765-3">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.098994946"
id="feGaussianBlur3767-3" />
</filter>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.8284271"
inkscape:cx="13.788283"
inkscape:cy="60.335199"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:snap-global="true"
inkscape:window-width="1600"
inkscape:window-height="850"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:showpageshadow="false"
borderlayer="false"
showborder="true">
<inkscape:grid
type="xygrid"
id="grid2987"
empspacing="5"
visible="true"
enabled="true"
snapvisiblegridlinesonly="true" />
</sodipodi:namedview>
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-924.36217)">
<path
sodipodi:type="arc"
style="fill:#109618;fill-opacity:1;stroke:none;opacity:0.01587302"
id="path4104"
sodipodi:cx="64.25"
sodipodi:cy="64.5"
sodipodi:rx="63.75"
sodipodi:ry="64"
d="m 128,64.5 a 63.75,64 0 1 1 -127.5,0 63.75,64 0 1 1 127.5,0 z"
transform="matrix(0.93139646,0,0,0.83984375,-189.81956,958.94835)" />
<path
style="fill:#ffcf00;fill-opacity:1;stroke:#ffcf00;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
d="M 3.3795626,993.2579 C 22.563164,969.55671 64.941101,938.83212 101.8906,932.98778 c 15.01437,32.97153 15.80482,65.24066 11.89745,97.27812 -53.04371,-1.7716 -84.489701,-14.912 -110.4084874,-37.008 z"
id="path2991"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccc" />
<path
style="fill:#109618;fill-opacity:1;stroke:#109618;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
d="m 4.586161,1010.1966 c 29.519439,19.0948 61.669847,32.8593 114.396079,29.9232 6.98138,-4.9614 5.91066,-11.2031 3.61936,-17.6388 -37.656342,4.9772 -79.514689,1.6063 -118.015439,-12.2844 z"
id="path3761"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccc" />
<path
sodipodi:type="arc"
style="fill:#ff9900;fill-opacity:1;stroke:none;filter:url(#filter3765-8)"
id="path3763-6"
sodipodi:cx="66.998367"
sodipodi:cy="63.476505"
sodipodi:rx="10.429825"
sodipodi:ry="9.3691645"
d="m 77.428192,63.476505 a 10.429825,9.3691645 0 1 1 -20.85965,0 10.429825,9.3691645 0 1 1 20.85965,0 z"
transform="matrix(3.7791753,0,0,4.159068,-180.52628,715.8869)" />
<path
sodipodi:type="arc"
style="fill:#dc3912;fill-opacity:1;stroke:none;filter:url(#filter3765-8-3)"
id="path3763-6-3"
sodipodi:cx="66.998367"
sodipodi:cy="63.476505"
sodipodi:rx="10.429825"
sodipodi:ry="9.3691645"
d="m 77.428192,63.476505 a 10.429825,9.3691645 0 1 1 -20.85965,0 10.429825,9.3691645 0 1 1 20.85965,0 z"
transform="matrix(2.1560756,0,0,2.3930971,-65.92105,839.4416)" />
<path
sodipodi:type="arc"
style="fill:#ffffff;fill-opacity:1;stroke:none;filter:url(#filter3765)"
id="path3763"
sodipodi:cx="66.998367"
sodipodi:cy="63.476505"
sodipodi:rx="10.429825"
sodipodi:ry="9.3691645"
d="m 77.428192,63.476505 a 10.429825,9.3691645 0 1 1 -20.85965,0 10.429825,9.3691645 0 1 1 20.85965,0 z"
transform="matrix(1.369772,0,0,1.5215787,-11.897888,900.22297)" />
<path
sodipodi:type="arc"
style="fill:#4d4d4d;fill-opacity:1;stroke:none;filter:url(#filter3765-3)"
id="path3763-9"
sodipodi:cx="66.998367"
sodipodi:cy="63.476505"
sodipodi:rx="10.429825"
sodipodi:ry="9.3691645"
d="m 77.428192,63.476505 a 10.429825,9.3691645 0 1 1 -20.85965,0 10.429825,9.3691645 0 1 1 20.85965,0 z"
transform="matrix(0.68506744,0,0,0.76063592,38.273417,952.729)" />
</g>
</svg>

BIN
img/logo/vis128.png View File

Before After
Width: 128  |  Height: 128  |  Size: 5.5 KiB

BIN
img/logo/vis16.png View File

Before After
Width: 16  |  Height: 16  |  Size: 660 B

BIN
img/logo/vis256.png View File

Before After
Width: 256  |  Height: 256  |  Size: 13 KiB

BIN
img/logo/vis32.ico View File

Before After

BIN
img/logo/vis32.png View File

Before After
Width: 32  |  Height: 32  |  Size: 1.4 KiB

BIN
img/logo/vis64.png View File

Before After
Width: 64  |  Height: 64  |  Size: 2.9 KiB

+ 317
- 0
index.html View File

@ -0,0 +1,317 @@
<!doctype html>
<html>
<head>
<title>vis.js | a dynamic, browser-based visualization library</title>
<meta charset='utf-8' />
<meta name="title" content="vis.js">
<meta name="description" content="vis.js is a dynamic, browser-based visualization library" />
<meta name="keywords" content="vis, visualization, javascript, browser based, web based, chart, linechart, timeline, graph, network, browser" />
<meta name="author" content="Almende B.V.">
<link href="docs/css/prettify.css" type="text/css" rel="stylesheet" />
<link href='docs/css/style.css' type='text/css' rel='stylesheet'>
<link href="css/style.css" type="text/css" rel="stylesheet" >
<script type="text/javascript" src="docs/lib/prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<div id="container">
<div id="menu">
<a href="http://visjs.org/"><img src="img/logo/vis128.png" alt="logo"></a>
<div class="nav">
<ul>
<li><a href="#install">Install</a></li>
<li><a href="#example">Example</a></li>
<li><a href="#gallery">Gallery</a></li>
<li>
<a href="docs/index.html" target="_blank">
Docs
<img src="img/external-link-icons/external-link-icon.png" style="vertical-align: text-top;" title="Docs will open in a new window">
</a>
</li>
<li><a href="#license">License</a></li>
</ul>
</div>
</div>
<h1>
vis.js<br>
<span class="subtitle">a visual interaction system</span>
</h1>
<p>
Vis.js is a dynamic, browser based visualization library.
The library is designed to be easy to use, to handle large amounts
of dynamic data, and to enable manipulation of and interaction with the data.
The library consists of the components DataSet, Timeline, and Graph.
</p>
<p>
The vis.js library is developed by <a href="http://almende.com" target="_blank">Almende B.V</a>,
as part of the <a href="http://chap.almende.com/" target="_blank">CHAP</a>.
</p>
<h2 id="install">Install</h2>
<h3>npm</h3>
<pre class="prettyprint">
npm install vis
</pre>
<h3>bower</h3>
<pre class="prettyprint">
bower install vis
</pre>
<h3>download</h3>
<a href="download/vis.zip">Click here to download vis.js</a>
(version <span class="version">0.4.0</span>)
<h2 id="example">Example</h2>
<p>
A basic example demonstrating how to use the vis.js timeline is shown below.
See the <a href="#gallery">gallery</a> below for more examples.
</p>
<pre class="prettyprint lang-html">&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Timeline | Basic demo&lt;/title&gt;
&lt;script src="http://visjs.org/dist/vis.js"&gt;&lt;/script&gt;
&lt;link href="http://visjs.org/dist/vis.css" rel="stylesheet" type="text/css" /&gt;
&lt;style type="text/css"&gt;
body, html {
font-family: sans-serif;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="mytimeline"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;