jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Released version 1.1.0

gh-pages
jos 10 years ago
parent
cb05be0d28
commit
05c6e00f03
46 changed files with 6691 additions and 71 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +3538
    -51
      dist/vis.js
  2. +12
    -11
      dist/vis.min.js
  3. +95
    -2
      docs/graph.html
  4. +646
    -0
      docs/graph3d.html
  5. BIN
      docs/img/graph3d.png
  6. BIN
      docs/img/graph3d120x60.png
  7. +5
    -3
      docs/index.html
  8. +3
    -2
      docs/timeline.html
  9. BIN
      download/vis.zip
  10. +87
    -0
      examples/graph3d/default.css
  11. +60
    -0
      examples/graph3d/example01_basis.html
  12. +109
    -0
      examples/graph3d/example02_camera.html
  13. +63
    -0
      examples/graph3d/example03_filter.html
  14. +70
    -0
      examples/graph3d/example04_animate.html
  15. +59
    -0
      examples/graph3d/example05_line.html
  16. +77
    -0
      examples/graph3d/example06_moving_dots.html
  17. +67
    -0
      examples/graph3d/example07_dot_cloud_colors.html
  18. +67
    -0
      examples/graph3d/example08_dot_cloud_size.html
  19. +78
    -0
      examples/graph3d/example09_mobile.html
  20. +120
    -0
      examples/graph3d/example10_styles.html
  21. +103
    -0
      examples/graph3d/example11_tooltips.html
  22. +27
    -0
      examples/graph3d/index.html
  23. +120
    -0
      examples/graph3d/playground/csv2array.js
  24. +80
    -0
      examples/graph3d/playground/csv2datatable.html
  25. +173
    -0
      examples/graph3d/playground/datasource.html
  26. +155
    -0
      examples/graph3d/playground/datasource.php
  27. +179
    -0
      examples/graph3d/playground/index.html
  28. +91
    -0
      examples/graph3d/playground/playground.css
  29. +544
    -0
      examples/graph3d/playground/playground.js
  30. +2
    -0
      examples/graph3d/playground/prettify/lang-apollo.js
  31. +2
    -0
      examples/graph3d/playground/prettify/lang-css.js
  32. +2
    -0
      examples/graph3d/playground/prettify/lang-hs.js
  33. +2
    -0
      examples/graph3d/playground/prettify/lang-lisp.js
  34. +2
    -0
      examples/graph3d/playground/prettify/lang-lua.js
  35. +2
    -0
      examples/graph3d/playground/prettify/lang-ml.js
  36. +1
    -0
      examples/graph3d/playground/prettify/lang-proto.js
  37. +2
    -0
      examples/graph3d/playground/prettify/lang-scala.js
  38. +2
    -0
      examples/graph3d/playground/prettify/lang-sql.js
  39. +2
    -0
      examples/graph3d/playground/prettify/lang-vb.js
  40. +3
    -0
      examples/graph3d/playground/prettify/lang-vhdl.js
  41. +2
    -0
      examples/graph3d/playground/prettify/lang-wiki.js
  42. +2
    -0
      examples/graph3d/playground/prettify/lang-yaml.js
  43. +1
    -0
      examples/graph3d/playground/prettify/prettify.css
  44. +33
    -0
      examples/graph3d/playground/prettify/prettify.js
  45. +1
    -0
      examples/index.html
  46. +2
    -2
      index.html

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


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


+ 95
- 2
docs/graph.html View File

@ -235,7 +235,18 @@ var nodes = [
// ... more nodes
];
</pre>
Alternatively, a vis DataSet can also be used:
<pre class="prettyprint lang-js">
var nodes = new vis.DataSet();
nodes.add([
{id: '1', label: 'Node 1'},
{id: '2', label: 'Node 2'},
{id: '3', label: 'Node 3'},
{id: '4', label: 'Node 4'},
// ... more nodes
]);
</pre>
When using a DataSet, the graph is automatically updating to changes in the DataSet.
<p>
Nodes support the following properties:
@ -291,6 +302,20 @@ var nodes = [
<td>Border color of the node when selected.</td>
</tr>
<tr>
<td>color.hover.background</td>
<td>String</td>
<td>no</td>
<td>Background color of the node when the node is hovered over and the hover option is enabled.</td>
</tr>
<tr>
<td>color.hover.border</td>
<td>String</td>
<td>no</td>
<td>Border color of the node when the node is hovered over and the hover option is enabled.</td>
</tr>
<tr>
<td>group</td>
<td>Number | String</td>
@ -478,6 +503,18 @@ var edges = [
// ... more edges
];
</pre>
Alternatively, a vis DataSet can also be used:
<pre class="prettyprint lang-js">
var edges = new vis.DataSet();
edges.add([
{from: '1', to: '2'},
{from: '1', to: '3'},
{from: '2', to: '4'},
{from: '2', to: '5'},
// ... more edges
]);
</pre>
When using a DataSet, the graph is automatically updating to changes in the DataSet.
<p>
Edges support the following properties:
@ -517,6 +554,19 @@ var edges = [
<td>Color of the edge when selected.</td>
</tr>
<tr>
<td>color.hover</td>
<td>String</td>
<td>no</td>
<td>Color of the edge when the edge is hovered over and the hover option is enabled.</td>
</tr>
<tr>
<td>hoverWidth</td>
<td>Number</td>
<td>1.5</td>
<td>This determines the thickness of the edge if it is hovered over. This will only manifest when the hover option is enabled.</td>
</tr>
<tr>
<td>dash</td>
<td>Object</td>
@ -656,6 +706,7 @@ var edges = [
override a specified <code>value</code>, if a <code>value</code> is
specified too.</td>
</tr>
</table>
@ -790,6 +841,13 @@ var options = {
<td>The height of the graph in pixels or as a percentage.</td>
</tr>
<tr>
<td>hover</td>
<td>Boolean</td>
<td>false</td>
<td>Enabling the change of the colors of nodes and edges when the mouse hovers over them. Enabling this may have a minor impact on performance.</td>
</tr>
<tr>
<td><a href="#Keyboard_navigation">keyboard</a></td>
<td>Object</td>
@ -799,13 +857,21 @@ var options = {
</td>
</tr>
<tr>
<td>moveable</td>
<td>dragGraph</td>
<td>Boolean</td>
<td>true</td>
<td>
Toggle if the graph can be dragged. This will not affect the dragging of nodes.
</td>
</tr>
<tr>
<td>dragNodes</td>
<td>Boolean</td>
<td>true</td>
<td>
Toggle if the nodes can be dragged. This will not affect the dragging of the graph.
</td>
</tr>
<tr>
<td><a href="#Navigation_controls">navigation</a></td>
@ -2008,6 +2074,13 @@ var options: {
The selections are not ordered.
</td>
</tr>
<tr>
<td>focusOnNode(nodeId, [zoomLevel])</td>
<td>none</td>
<td>This function will move the view to center on the specified node. An optional zoomLevel can be passed where 1.0 is 100&#37;, between 0.0 and 1.0 is zooming out and > 1.0 is zooming in. Generally, close to 1.0 is sufficient.
If this argument is not passed the view will only move, not zoom.
</td>
</tr>
<tr>
<td>storePosition()</td>
<td>none</td>
@ -2169,6 +2242,26 @@ graph.off('select', onSelect);
</ul>
</td>
</tr>
<tr>
<tr>
<td>hoverNode</td>
<td>Fired when the mouse is moved over a node (assuming the hover option is enabled).</td>
<td>
<ul>
<li><code>node</code>: an object with the id of the hovered node.</li>
</ul>
</td>
</tr>
<tr>
<tr>
<td>blurNode</td>
<td>Fired when the mouse is moved off a node (assuming the hover option is enabled).</td>
<td>
<ul>
<li><code>node</code>: an object with the id of the hovered node.</li>
</ul>
</td>
</tr>
<tr>
<td>resize</td>
<td>Fired when the size of the canvas has been updated (not neccecarily changed) by the setSize() function or by the setOptions() function.</td>

+ 646
- 0
docs/graph3d.html View File

@ -0,0 +1,646 @@
<html>
<head>
<title>vis.js | graph3d documentation</title>
<link href='css/prettify.css' type='text/css' rel='stylesheet'>
<link href='css/style.css' type='text/css' rel='stylesheet'>
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<div id="container">
<h1>Graph3d documentation</h1>
<h2 id="Overview">Overview</h2>
<p>
Graph3d is an interactive visualization chart to draw data in a three dimensional
graph. You can freely move and zoom in the graph by dragging and scrolling in the
window.
Graph3d also supports animation of a graph.
</p>
<h2 id="Contents">Contents</h2>
<ul>
<li><a href="#Overview">Overview</a></li>
<li><a href="#Loading">Loading</a></li>
<li><a href="#Data_Format">Data Format</a></li>
<li><a href="#Configuration_Options">Configuration Options</a></li>
<li><a href="#Methods">Methods</a></li>
<li><a href="#Events">Events</a></li>
<li><a href="#Data_Policy">Data Policy</a></li>
</ul>
<h2 id="Example">Example</h2>
<p>
The following code shows how to create a Graph3d and provide it with data.
More examples can be found in the <a href="../examples">examples</a> directory.
</p>
<pre class="prettyprint lang-html">
&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Graph 3D demo&lt;/title&gt;
&lt;style&gt;
body {font: 10pt arial;}
&lt;/style&gt;
&lt;script type="text/javascript" src="../../dist/vis.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
var data = null;
var graph = null;
function custom(x, y) {
return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
var data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 50; // number of datapoints will be steps*steps
var axisMax = 314;
var axisStep = axisMax / steps;
for (var x = 0; x &lt; axisMax; x+=axisStep) {
for (var y = 0; y &lt; axisMax; y+=axisStep) {
var value = custom(x, y);
data.add({
x: x,
y: y,
z: value,
style: value
});
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'surface',
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5
};
// create a graph3d
var container = document.getElementById('mygraph');
graph3d = new vis.Graph3d(container, data, options);
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="drawVisualization();"&gt;
&lt;div id="mygraph"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h2 id="Loading">Loading</h2>
<p>
The class name of the Graph3d is <code>vis.Graph3d</code>.
When constructing a Graph3d, an HTML DOM container must be provided to attach
the graph to. Optionally, data an options can be provided.
Data is a vis <code>DataSet</code> or an <code>Array</code>, described in
section <a href="#Data_Format">Data Format</a>.
Options is a name-value map in the JSON format. The available options
are described in section <a href="#Configuration_Options">Configuration Options</a>.
</p>
<pre class="prettyprint lang-js">var graph = new vis.Graph3d(container [, data] [, options]);</pre>
<p>
Data and options can be set or changed later on using the functions
<code>Graph3d.setData(data)</code> and <code>Graph3d.setOptions(options)</code>.
</p>
<h2 id="Data_Format">Data Format</h2>
<p>
Graph3d can load data from an <code>Array</code>, a <code>DataSet</code> or a <code>DataView</code>.
JSON objects are added to this DataSet by using the <code>add()</code> function.
Data points must have properties <code>x</code>, <code>y</code>, and <code>z</code>,
and can optionally have a property <code>style</code> and <code>filter</code>.
<h3>Definition</h3>
<p>
The DataSet JSON objects are defined as:
</p>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Required</th>
<th>Description</th>
</tr>
<tr>
<td>x</td>
<td>number</td>
<td>yes</td>
<td>Location on the x-axis.</td>
</tr>
<tr>
<td>y</td>
<td>number</td>
<td>yes</td>
<td>Location on the y-axis.</td>
</tr>
<tr>
<td>z</td>
<td>number</td>
<td>yes</td>
<td>Location on the z-axis.</td>
</tr>
<tr>
<td>style</td>
<td>number</td>
<td>no</td>
<td>The data value, required for graph styles <code>dot-color</code> and
<code>dot-size</code>.
</td>
</tr>
<tr>
<td>filter</td>
<td>*</td>
<td>no</td>
<td>Filter values used for the animation.
This column may have any type, such as a number, string, or Date.</td>
</tr>
</table>
<h2 id="Configuration_Options">Configuration Options</h2>
<p>
Options can be used to customize the graph. Options are defined as a JSON object.
All options are optional.
</p>
<pre class="prettyprint lang-js">
var options = {
width: '100%',
height: '400px',
style: 'surface'
};
</pre>
<p>
The following options are available.
</p>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr>
<td>animationInterval</td>
<td>number</td>
<td>1000</td>
<td>The animation interval in milliseconds. This determines how fast
the animation runs.</td>
</tr>
<tr>
<td>animationPreload</td>
<td>boolean</td>
<td>false</td>
<td>If false, the animation frames are loaded as soon as they are requested.
if <code>animationPreload</code> is true, the graph will automatically load
all frames in the background, resulting in a smoother animation as soon as
all frames are loaded. The load progress is shown on screen.</td>
</tr>
<tr>
<td>animationAutoStart</td>
<td>boolean</td>
<td>false</td>
<td>If true, the animation starts playing automatically after the graph
is created.</td>
</tr>
<tr>
<td>backgroundColor</td>
<td>string or Object</td>
<td>'white'</td>
<td>The background color for the main area of the chart.
Can be either a simple HTML color string, for example: 'red' or '#00cc00',
or an object with the following properties.</td>
</tr>
<tr>
<td>backgroundColor.stroke</td>
<td>string</td>
<td>'gray'</td>
<td>The color of the chart border, as an HTML color string.</td>
</tr>
<tr>
<td>backgroundColor.strokeWidth</td>
<td>number</td>
<td>1</td>
<td>The border width, in pixels.</td>
</tr>
<tr>
<td>backgroundColor.fill</td>
<td>string</td>
<td>'white'</td>
<td>The chart fill color, as an HTML color string.</td>
</tr>
<tr>
<td>cameraPosition</td>
<td>Object</td>
<td>{horizontal:&nbsp;1.0, vertical:&nbsp;0.5, distance:&nbsp;1.7}</td>
<td>Set the initial rotation and position of the camera.
The object <code>cameraPosition</code> contains three parameters:
<code>horizontal</code>, <code>vertical</code>, and <code>distance</code>.
Parameter <code>horizontal</code> is a value in radians and can have any
value (but normally in the range of 0 and 2*Pi).
Parameter <code>vertical</code> is a value in radians between 0 and 0.5*Pi.
Parameter <code>distance</code> is the (normalized) distance from the
camera to the center of the graph, in the range of 0.71 to 5.0. A
larger distance puts the graph further away, making it smaller.
All parameters are optional.
</tr>
<tr>
<td>height</td>
<td>string</td>
<td>'400px'</td>
<td>The height of the graph in pixels or as a percentage.</td>
</tr>
<tr>
<td>keepAspectRatio</td>
<td>boolean</td>
<td>true</td>
<td>If <code>keepAspectRatio</code> is true, the x-axis and the y-axis
keep their aspect ratio. If false, the axes are scaled such that they
both have the same, maximum with.</td>
</tr>
<tr>
<td>showAnimationControls</td>
<td>boolean</td>
<td>true</td>
<td>If true, animation controls are created at the bottom of the Graph.
The animation controls consists of buttons previous, start/stop, next,
and a slider showing the current frame.
Only applicable when the provided data contains an animation.</td>
</tr>
<tr>
<td>showGrid</td>
<td>boolean</td>
<td>true</td>
<td>If true, grid lines are draw in the x-y surface (the bottom of the 3d
graph).</td>
</tr>
<tr>
<td>showPerspective</td>
<td>boolean</td>
<td>true</td>
<td>If true, the graph is drawn in perspective: points and lines which
are further away are drawn smaller.
Note that the graph currently does not support a gray colored bottom side
when drawn in perspective.
</td>
</tr>
<tr>
<td>showShadow</td>
<td>boolean</td>
<td>false</td>
<td>Show shadow on the graph.</td>
</tr>
<tr>
<td>style</td>
<td>string</td>
<td>'dot'</td>
<td>The style of the 3d graph. Available styles:
<code>bar</code>,
<code>bar-color</code>,
<code>bar-size</code>,
<code>dot</code>,
<code>dot-line</code>,
<code>dot-color</code>,
<code>dot-size</code>,
<code>line</code>,
<code>grid</code>,
or <code>surface</code></td>
</tr>
<tr>
<td>tooltip</td>
<td>boolean | function</td>
<td>false</td>
<td>Show a tooltip showing the values of the hovered data point.
The contents of the tooltip can be customized by providing a callback
function as <code>tooltip</code>. In this case the function is called
with an object containing parameters <code>x</code>,
<code>y</code>, and <code>z</code> argument,
and must return a string which may contain HTML.
</td>
</tr>
<tr>
<td>valueMax</td>
<td>number</td>
<td>none</td>
<td>The maximum value for the value-axis. Only available in combination
with the styles <code>dot-color</code> and <code>dot-size</code>.</td>
</tr>
<tr>
<td>valueMin</td>
<td>number</td>
<td>none</td>
<td>The minimum value for the value-axis. Only available in combination
with the styles <code>dot-color</code> and <code>dot-size</code>.</td>
</tr>
<tr>
<td>verticalRatio</td>
<td>number</td>
<td>0.5</td>
<td>A value between 0.1 and 1.0. This scales the vertical size of the graph
When keepAspectRatio is set to false, and verticalRatio is set to 1.0,
the graph will be a cube.</td>
</tr>
<tr>
<td>width</td>
<td>string</td>
<td>'400px'</td>
<td>The width of the graph in pixels or as a percentage.</td>
</tr>
<tr>
<td>xBarWidth</td>
<td>number</td>
<td>none</td>
<td>The width of bars in x direction. By default, the width is equal to the distance
between the data points, such that bars adjoin each other.
Only applicable for styles <code>'bar'</code> and <code>'bar-color'</code>.</td>
</tr>
<tr>
<td>xCenter</td>
<td>string</td>
<td>'55%'</td>
<td>The horizontal center position of the graph, as a percentage or in
pixels.</td>
</tr>
<tr>
<td>xMax</td>
<td>number</td>
<td>none</td>
<td>The maximum value for the x-axis.</td>
</tr>
<tr>
<td>xMin</td>
<td>number</td>
<td>none</td>
<td>The minimum value for the x-axis.</td>
</tr>
<tr>
<td>xStep</td>
<td>number</td>
<td>none</td>
<td>Step size for the grid on the x-axis.</td>
</tr>
<tr>
<td>yBarWidth</td>
<td>number</td>
<td>none</td>
<td>The width of bars in y direction. By default, the width is equal to the distance
between the data points, such that bars adjoin each other.
Only applicable for styles <code>'bar'</code> and <code>'bar-color'</code>.</td>
</tr>
<tr>
<td>yCenter</td>
<td>string</td>
<td>'45%'</td>
<td>The vertical center position of the graph, as a percentage or in
pixels.</td>
</tr>
<tr>
<td>yMax</td>
<td>number</td>
<td>none</td>
<td>The maximum value for the y-axis.</td>
</tr>
<tr>
<td>yMin</td>
<td>number</td>
<td>none</td>
<td>The minimum value for the y-axis.</td>
</tr>
<tr>
<td>yStep</td>
<td>number</td>
<td>none</td>
<td>Step size for the grid on the y-axis.</td>
</tr>
<tr>
<td>zMin</td>
<td>number</td>
<td>none</td>
<td>The minimum value for the z-axis.</td>
</tr>
<tr>
<td>zMax</td>
<td>number</td>
<td>none</td>
<td>The maximum value for the z-axis.</td>
</tr>
<tr>
<td>zStep</td>
<td>number</td>
<td>none</td>
<td>Step size for the grid on the z-axis.</td>
</tr>
<tr>
<td>xLabel</td>
<td>String</td>
<td>x</td>
<td>Label on the X axis.</td>
</tr>
<tr>
<td>yLabel</td>
<td>String</td>
<td>y</td>
<td>Label on the Y axis.</td>
</tr>
<tr>
<td>zLabel</td>
<td>String</td>
<td>z</td>
<td>Label on the Z axis.</td>
</tr>
<tr>
<td>filterLabel</td>
<td>String</td>
<td>time</td>
<td>Label for the filter column.</td>
</tr>
<tr>
<td>legendLabel</td>
<td>String</td>
<td>value</td>
<td>Label for the style description.</td>
</tr>
</table>
<h2 id="Methods">Methods</h2>
<p>
Graph3d supports the following methods.
</p>
<table>
<tr>
<th>Method</th>
<th>Return Type</th>
<th>Description</th>
</tr>
<tr>
<td>animationStart()</td>
<td>none</td>
<td>Start playing the animation.
Only applicable when animation data is available.</td>
</tr>
<tr>
<td>animationStop()</td>
<td>none</td>
<td>Stop playing the animation.
Only applicable when animation data is available.</td>
</tr>
<tr>
<td>getCameraPosition()</td>
<td>An object with parameters <code>horizontal</code>,
<code>vertical</code> and <code>distance</code></td>
<td>Returns an object with parameters <code>horizontal</code>,
<code>vertical</code> and <code>distance</code>,
which each one of them is a number, representing the rotation and position
of the camera.</td>
</tr>
<tr>
<td>redraw()</td>
<td>none</td>
<td>Redraw the graph. Useful after the camera position is changed externally,
when data is changed, or when the layout of the webpage changed.</td>
</tr>
<tr>
<td>setData(data)</td>
<td>none</td>
<td>Replace the data in the Graph3d.</td>
</tr>
<tr>
<td>setOptions(options)</td>
<td>none</td>
<td>Update options of Graph3d.
The provided options will be merged with current options.</td>
</tr>
<tr>
<td>setSize(width, height)</td>
<td>none</td>
<td>Parameters <code>width</code> and <code>height</code> are strings,
containing a new size for the graph. Size can be provided in pixels
or in percentages.</td>
</tr>
<tr>
<td>setCameraPosition (pos)</td>
<td>{horizontal:&nbsp;1.0, vertical:&nbsp;0.5, distance:&nbsp;1.7}</td>
<td>Set the rotation and position of the camera. Parameter <code>pos</code>
is an object which contains three parameters: <code>horizontal</code>,
<code>vertical</code>, and <code>distance</code>.
Parameter <code>horizontal</code> is a value in radians and can have any
value (but normally in the range of 0 and 2*Pi).
Parameter <code>vertical</code> is a value in radians between 0 and 0.5*Pi.
Parameter <code>distance</code> is the (normalized) distance from the
camera to the center of the graph, in the range of 0.71 to 5.0. A
larger distance puts the graph further away, making it smaller.
All parameters are optional.
</td>
</tr>
</table>
<h2 id="Events">Events</h2>
<p>
Graph3d fires events after the camera position has been changed.
The event can be catched by creating a listener.
Here an example on how to catch a <code>cameraPositionChange</code> event.
</p>
<pre class="prettyprint lang-js">
function onCameraPositionChange(event) {
alert('The camera position changed to:\n' +
'Horizontal: ' + event.horizontal + '\n' +
'Vertical: ' + event.vertical + '\n' +
'Distance: ' + event.distance);
}
// assuming var graph3d = new vis.Graph3d(document.getElementById('mygraph'));
graph3d.on('cameraPositionChange', onCameraPositionChange);
</pre>
<p>
The following events are available.
</p>
<table>
<col width="10%">
<col width="60%">
<col width="30%">
<tr>
<th>name</th>
<th>Description</th>
<th>Properties</th>
</tr>
<tr>
<td>cameraPositionChange</td>
<td>The camera position changed. Fired after the user modified the camera position
by moving (dragging) the graph, or by zooming (scrolling),
but not after a call to <code>setCameraPosition</code> method.
The new camera position can be retrieved by calling the method
<code>getCameraPosition</code>.</td>
<td>
<ul>
<li><code>horizontal</code>: Number. The horizontal angle of the camera.</li>
<li><code>vertical</code>: Number. The vertical angle of the camera.</li>
<li><code>distance</code>: Number. The distance of the camera to the center of the graph.</li>
</ul>
</td>
</tr>
</table>
<h2 id="Data_Policy">Data Policy</h2>
<p>
All code and data are processed and rendered in the browser. No data is sent to any server.
</p>
</div>
</body>
</html>

BIN
docs/img/graph3d.png View File

Before After
Width: 477  |  Height: 294  |  Size: 99 KiB

BIN
docs/img/graph3d120x60.png View File

Before After
Width: 120  |  Height: 60  |  Size: 9.7 KiB

+ 5
- 3
docs/index.html View File

@ -49,11 +49,13 @@
<a href="graph.html"><b>Graph</b></a>.
Display a graph or network with nodes and edges.
</li>
<li>
<a href="graph3d.html"><b>Graph3d</b></a>.
Display data in a three dimensional graph.
</li>
<li>
<a href="timeline.html"><b>Timeline</b></a>.
Display different types of data on a timeline. The timeline and the
items on the timeline can be interactively moved, zoomed, and
manipulated.
Display different types of data on a timeline.
</li>
</ul>

+ 3
- 2
docs/timeline.html View File

@ -692,9 +692,9 @@ timeline.clear({options: true}); // clear options only
</tr>
<tr>
<td>repaint()</td>
<td>redraw()</td>
<td>none</td>
<td>Force a repaint of the Timeline. Can be useful to manually repaint when option autoResize=false.
<td>Force a redraw of the Timeline. Can be useful to manually redraw when option autoResize=false.
</td>
</tr>
@ -820,6 +820,7 @@ timeline.off('select', onSelect);
<tr>
<td>select</td>
<td>Fired after the user selects or deselects items by tapping or holding them.
When a use taps an already selected item, the select event is fired again.
Not fired when the method <code>setSelection</code>is executed.
</td>
<td>

BIN
download/vis.zip View File


+ 87
- 0
examples/graph3d/default.css View File

@ -0,0 +1,87 @@
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body, td, th {
font-family: arial, sans-serif;
font-size: 11pt;
color: #4D4D4D;
line-height: 1.7em;
}
#container {
margin: 0 auto;
padding-bottom: 50px;
width: 900px;
}
h1 {
font-size: 180%;
font-weight: bold;
padding: 0;
margin: 1em 0 1em 0;
}
h2 {
padding-top: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #a0c0f0;
color: #2B7CE9;
}
h3 {
font-size: 140%;
}
a {
color: #2B7CE9;
text-decoration: none;
}
a:visited {
color: #2E60A4;
}
a:hover {
color: red;
text-decoration: underline;
}
hr {
border: none 0;
border-top: 1px solid #abc;
height: 1px;
}
pre {
display: block;
font-size: 10pt;
line-height: 1.5em;
font-family: monospace;
}
pre, code {
background-color: #f5f5f5;
}
table
{
border-collapse: collapse;
}
th {
font-weight: bold;
border: 1px solid lightgray;
background-color: #E5E5E5;
text-align: left;
vertical-align: top;
padding: 5px;
}
td {
border: 1px solid lightgray;
padding: 5px;
vertical-align: top;
}

+ 60
- 0
examples/graph3d/example01_basis.html View File

@ -0,0 +1,60 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D demo</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y) {
return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var counter = 0;
var steps = 50; // number of datapoints will be steps*steps
var axisMax = 314;
var axisStep = axisMax / steps;
for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) {
var value = custom(x,y);
data.add({id:counter++,x:x,y:y,z:value,style:value});
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'surface',
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5
};
// Instantiate our graph object.
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
}
</script>
</head>
<body onload="drawVisualization();">
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

+ 109
- 0
examples/graph3d/example02_camera.html View File

@ -0,0 +1,109 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D camera position</title>
<style>
body {font: 10pt arial;}
td {font: 10pt arial}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y) {
return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
}
// callback function, called when the camera position has changed
function onCameraPositionChange() {
// adjust the values of startDate and endDate
var pos = graph.getCameraPosition();
document.getElementById('horizontal').value = parseFloat(pos.horizontal.toFixed(3));
document.getElementById('vertical').value = parseFloat(pos.vertical.toFixed(3));
document.getElementById('distance').value = parseFloat(pos.distance.toFixed(3));
}
// set the camera position
function setCameraPosition() {
var horizontal = parseFloat(document.getElementById('horizontal').value);
var vertical = parseFloat(document.getElementById('vertical').value);
var distance = parseFloat(document.getElementById('distance').value);
var pos = {
horizontal: horizontal,
vertical: vertical,
distance: distance
};
graph.setCameraPosition(pos);
// retrieve the camera position again, to get the applied values
onCameraPositionChange();
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 50; // number of datapoints will be steps*steps
var axisMax = 314;
var axisStep = axisMax / steps;
for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) {
var value = custom(x,y);
data.add([
{x:x,y:y,z:value,t:0,style:value}
]);
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'surface',
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5
};
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
graph.on('cameraPositionChange', onCameraPositionChange);
}
</script>
</head>
<body onload="drawVisualization()">
<h1>Graph 3d camera position</h1>
<table>
<tr>
<td>Horizontal angle (0 to 2*pi)</td>
<td><input type="text" id="horizontal" value="1.0"></td>
</tr>
<tr>
<td>Vertical angle (0 to 0.5*pi)</td>
<td><input type="text" id="vertical" value="0.5"></td>
</tr>
<tr>
<td>Distance (0.71 to 5.0)</td>
<td><input type="text" id="distance" value="1.7"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Set" onclick="setCameraPosition();"></td>
</tr>
</table>
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

+ 63
- 0
examples/graph3d/example03_filter.html View File

@ -0,0 +1,63 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D demo</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y) {
return Math.sin(x/50) * Math.cos(y/50) * 50 + 50;
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = [];
// create some nice looking data with sin/cos
var steps = 50; // number of datapoints will be steps*steps
var axisMax = 314;
var axisStep = axisMax / steps;
for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) {
var value = custom(x,y);
var valueRange = (value > 67) ? '67-100' :
(value < 33) ? '0-33' :
'33-67';
data.push({x:x,y:y,z:value,filter:valueRange,style:value});
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'surface',
showPerspective: false,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5,
filterLabel: 'values'
};
// Create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
}
</script>
</head>
<body onload="drawVisualization()">
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

+ 70
- 0
examples/graph3d/example04_animate.html View File

@ -0,0 +1,70 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D animation demo</title>
<style type="text/css">
body {
font: 10pt arial;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y, t) {
return Math.sin(x/50 + t/10) * Math.cos(y/50 + t/10) * 50 + 50;
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 25;
var axisMax = 314;
var tMax = 31;
var axisStep = axisMax / steps;
for (var t = 0; t < tMax; t++) {
for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) {
var value = custom(x, y, t);
data.add([
{x:x,y:y,z:value,filter:t,style:value}
]);
}
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'surface',
showPerspective: true,
showGrid: true,
showShadow: false,
// showAnimationControls: false,
keepAspectRatio: true,
verticalRatio: 0.5,
animationInterval: 100, // milliseconds
animationPreload: true,
filterValue: 'time'
};
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
}
</script>
</head>
<body onload="drawVisualization();">
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

+ 59
- 0
examples/graph3d/example05_line.html View File

@ -0,0 +1,59 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D line demo</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 500;
var axisMax = 314;
var tmax = 4 * 2 * Math.PI;
var axisStep = axisMax / steps;
for (var t = 0; t < tmax; t += tmax / steps) {
var r = 1;
var x = r * Math.sin(t);
var y = r * Math.cos(t);
var z = t / tmax;
data.add({x:x,y:y,z:z});
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'line',
showPerspective: false,
showGrid: true,
keepAspectRatio: true,
verticalRatio: 1.0
};
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
graph.setCameraPosition(0.4, undefined, undefined);
}
</script>
</head>
<body onload="drawVisualization()">
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

+ 77
- 0
examples/graph3d/example06_moving_dots.html View File

@ -0,0 +1,77 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D animation moving dots</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
// Called when the Visualization API is loaded.
function drawVisualization() {
// create the data table.
data = new vis.DataSet();
// create some shortcuts to math functions
var sin = Math.sin;
var cos = Math.cos;
var pi = Math.PI;
// create the animation data
var tmax = 2.0 * pi;
var tstep = tmax / 75;
var dotCount = 1; // set this to 1, 2, 3, 4, ...
for (var t = 0; t < tmax; t += tstep) {
var tgroup = parseFloat(t.toFixed(2));
var value = t;
// a dot in the center
data.add( {x:0,y:0,z:0,filter:tgroup,style:value});
// one or multiple dots moving around the center
for (var dot = 0; dot < dotCount; dot++) {
var tdot = t + 2*pi * dot / dotCount;
data.add( {x:sin(tdot),y:cos(tdot),z:sin(tdot),filter:tgroup,style:value});
data.add( {x:sin(tdot),y:-cos(tdot),z:sin(tdot + tmax*1/2),filter:tgroup,style:value});
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'dot-color',
showPerspective: true,
showGrid: true,
keepAspectRatio: true,
verticalRatio: 1.0,
animationInterval: 35, // milliseconds
animationPreload: false,
animationAutoStart: true,
legendLabel: 'color value',
cameraPosition: {
horizontal: 2.7,
vertical: 0.0,
distance: 1.65
}
};
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
}
</script>
</head>
<body onload="drawVisualization();">
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

+ 67
- 0
examples/graph3d/example07_dot_cloud_colors.html View File

@ -0,0 +1,67 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D cloud with colored dots</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
// Called when the Visualization API is loaded.
function drawVisualization() {
// create the data table.
data = new vis.DataSet();
// create some shortcuts to math functions
var sqrt = Math.sqrt;
var pow = Math.pow;
var random = Math.random;
// create the animation data
var imax = 100;
for (var i = 0; i < imax; i++) {
var x = pow(random(), 2);
var y = pow(random(), 2);
var z = pow(random(), 2);
var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
data.add({x:x,y:y,z:z,style:dist});
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'dot-color',
showPerspective: true,
showGrid: true,
keepAspectRatio: true,
verticalRatio: 1.0,
legendLabel: 'distance',
cameraPosition: {
horizontal: -0.35,
vertical: 0.22,
distance: 1.8
}
};
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
}
</script>
</head>
<body onload="drawVisualization()">
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

+ 67
- 0
examples/graph3d/example08_dot_cloud_size.html View File

@ -0,0 +1,67 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D cloud with sized dots</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
// Called when the Visualization API is loaded.
function drawVisualization() {
// create the data table.
data = new vis.DataSet();
// create some shortcuts to math functions
var sqrt = Math.sqrt;
var pow = Math.pow;
var random = Math.random;
// create the animation data
var imax = 100;
for (var i = 0; i < imax; i++) {
var x = pow(random(), 2);
var y = pow(random(), 2);
var z = pow(random(), 2);
var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
var range = sqrt(2) - dist;
data.add({x:x,y:y,z:z,style:range});
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'dot-size',
showPerspective: false,
showGrid: true,
keepAspectRatio: true,
legendLabel:'value',
verticalRatio: 1.0,
cameraPosition: {
horizontal: -0.54,
vertical: 0.5,
distance: 1.6
}
};
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
}
</script>
</head>
<body onload="drawVisualization()">
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

+ 78
- 0
examples/graph3d/example09_mobile.html View File

@ -0,0 +1,78 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D demo</title>
<style>
html, body {
font: 10pt arial;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#mygraph {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<!-- for mobile devices like android and iphone -->
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y) {
return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 10; // number of datapoints will be steps*steps
var axisMax = 314;
var axisStep = axisMax / steps;
for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) {
var value = custom(x,y);
data.add([
{x:x,y:y,z:value}
]);
}
}
// specify options
var options = {
width: '100%',
height: '100%',
style: 'surface',
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5,
backgroundColor: {
strokeWidth: 0
}
};
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
}
</script>
</head>
<body onresize="graph.redraw();" onload="drawVisualization()">
<div id="mygraph"></div>
</body>
</html>

+ 120
- 0
examples/graph3d/example10_styles.html View File

@ -0,0 +1,120 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D styles</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y) {
return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
}
// Called when the Visualization API is loaded.
function drawVisualization() {
var style = document.getElementById('style').value;
var showPerspective = document.getElementById('perspective').checked;
var xBarWidth = parseFloat(document.getElementById('xBarWidth').value) || undefined;
var yBarWidth = parseFloat(document.getElementById('yBarWidth').value) || undefined;
var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
// Create and populate a data table.
data = [];
// create some nice looking data with sin/cos
var steps = 5; // number of datapoints will be steps*steps
var axisMax = 10;
var axisStep = axisMax / steps;
for (var x = 0; x <= axisMax; x+=axisStep) {
for (var y = 0; y <= axisMax; y+=axisStep) {
var z = custom(x,y);
if (withValue) {
var value = (y - x);
data.push({x:x, y:y, z: z, style:value});
}
else {
data.push({x:x, y:y, z: z});
}
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: style,
xBarWidth: xBarWidth,
yBarWidth: yBarWidth,
showPerspective: showPerspective,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5
};
var camera = graph ? graph.getCameraPosition() : null;
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
if (camera) graph.setCameraPosition(camera); // restore camera position
document.getElementById('style').onchange = drawVisualization;
document.getElementById('perspective').onchange = drawVisualization;
document.getElementById('xBarWidth').onchange = drawVisualization;
document.getElementById('yBarWidth').onchange = drawVisualization;
}
</script>
</head>
<body onload="drawVisualization()">
<p>
<label for="style"> Style:
<select id="style">
<option value="bar">bar</option>
<option value="bar-color">bar-color</option>
<option value="bar-size">bar-size</option>
<option value="dot">dot</option>
<option value="dot-line">dot-line</option>
<option value="dot-color">dot-color</option>
<option value="dot-size">dot-size</option>
<option value="grid">grid</option>
<option value="line">line</option>
<option value="surface">surface</option>
</select>
</label>
</p>
<p>
<label for="perspective">
<input type="checkbox" id="perspective" checked> Show perspective
</label>
</p>
<p>
<label for="xBarWidth"> Bar width X:
<input type="text" id="xBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
</label>
</p>
<p>
<label for="yBarWidth"> Bar width Y:
<input type="text" id="yBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
</label>
</p>
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

+ 103
- 0
examples/graph3d/example11_tooltips.html View File

@ -0,0 +1,103 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D tooltips</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y) {
return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
}
// Called when the Visualization API is loaded.
function drawVisualization() {
var style = document.getElementById('style').value;
var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 5; // number of datapoints will be steps*steps
var axisMax = 10;
var axisStep = axisMax / steps;
for (var x = 0; x <= axisMax; x+=axisStep) {
for (var y = 0; y <= axisMax; y+=axisStep) {
var z = custom(x,y);
if (withValue) {
var value = (y - x);
data.add({x:x, y:y, z: z, style:value});
}
else {
data.add({x:x, y:y, z: z});
}
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: style,
showPerspective: true,
showGrid: true,
showShadow: false,
// Option tooltip can be true, false, or a function returning a string with HTML contents
//tooltip: true,
tooltip: function (point) {
// parameter point contains properties x, y, z
return 'value: <b>' + point.z + '</b>';
},
keepAspectRatio: true,
verticalRatio: 0.5
};
var camera = graph ? graph.getCameraPosition() : null;
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
if (camera) graph.setCameraPosition(camera); // restore camera position
document.getElementById('style').onchange = drawVisualization;
}
</script>
</head>
<body onload="drawVisualization()">
<p>
<label for="style"> Style:
<select id="style">
<option value="bar">bar</option>
<option value="bar-color">bar-color</option>
<option value="bar-size">bar-size</option>
<option value="dot">dot</option>
<option value="dot-line">dot-line</option>
<option value="dot-color">dot-color</option>
<option value="dot-size">dot-size</option>
<option value="grid">grid</option>
<option value="line">line</option>
<option value="surface">surface</option>
</select>
</label>
</p>
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>

+ 27
- 0
examples/graph3d/index.html View File

@ -0,0 +1,27 @@
<html>
<head>
<link rel='stylesheet' href='default.css' type='text/css'>
</head>
<body>
<div id="container">
<h1>Examples</h1>
<p><a href="example01_basis.html">example01_basis.html</a></p>
<p><a href="example02_camera.html">example02_camera.html</a></p>
<p><a href="example03_filter.html">example03_filter.html</a></p>
<p><a href="example04_animate.html">example04_animate.html</a></p>
<p><a href="example05_line.html">example05_line.html</a></p>
<p><a href="example06_moving_dots.html">example06_moving_dots.html</a></p>
<p><a href="example07_dot_cloud_colors.html">example07_dot_cloud_colors.html</a></p>
<p><a href="example08_dot_cloud_size.html">example08_dot_cloud_size.html</a></p>
<p><a href="example09_mobile.html">example09_mobile.html</a></p>
<p><a href="example10_styles.html">example10_styles.html</a></p>
<p><a href="example11_tooltips.html">example11_tooltips.html</a></p>
<h1>Playground</h1>
<p><a href="playground">Open the playground</a></p>
</div>
</body>
</html>

+ 120
- 0
examples/graph3d/playground/csv2array.js View File

@ -0,0 +1,120 @@
/**
* Convert data in CSV (comma separated value) format to a javascript array.
*
* Values are separated by a comma, or by a custom one character delimeter.
* Rows are separated by a new-line character.
*
* Leading and trailing spaces and tabs are ignored.
* Values may optionally be enclosed by double quotes.
* Values containing a special character (comma's, double-quotes, or new-lines)
* must be enclosed by double-quotes.
* Embedded double-quotes must be represented by a pair of consecutive
* double-quotes.
*
* Example usage:
* var csv = '"x", "y", "z"\n12.3, 2.3, 8.7\n4.5, 1.2, -5.6\n';
* var array = csv2array(csv);
*
* Author: Jos de Jong, 2010
*
* @param {string} data The data in CSV format.
* @param {string} delimeter [optional] a custom delimeter. Comma ',' by default
* The Delimeter must be a single character.
* @return {Array} array A two dimensional array containing the data
* @throw {String} error The method throws an error when there is an
* error in the provided data.
*/
function csv2array(data, delimeter) {
// Retrieve the delimeter
if (delimeter == undefined)
delimeter = ',';
if (delimeter && delimeter.length > 1)
delimeter = ',';
// initialize variables
var newline = '\n';
var eof = '';
var i = 0;
var c = data.charAt(i);
var row = 0;
var col = 0;
var array = new Array();
while (c != eof) {
// skip whitespaces
while (c == ' ' || c == '\t' || c == '\r') {
c = data.charAt(++i); // read next char
}
// get value
var value = "";
if (c == '\"') {
// value enclosed by double-quotes
c = data.charAt(++i);
do {
if (c != '\"') {
// read a regular character and go to the next character
value += c;
c = data.charAt(++i);
}
if (c == '\"') {
// check for escaped double-quote
var cnext = data.charAt(i+1);
if (cnext == '\"') {
// this is an escaped double-quote.
// Add a double-quote to the value, and move two characters ahead.
value += '\"';
i += 2;
c = data.charAt(i);
}
}
}
while (c != eof && c != '\"');
if (c == eof) {
throw "Unexpected end of data, double-quote expected";
}
c = data.charAt(++i);
}
else {
// value without quotes
while (c != eof && c != delimeter && c!= newline && c != ' ' && c != '\t' && c != '\r') {
value += c;
c = data.charAt(++i);
}
}
// add the value to the array
if (array.length <= row)
array.push(new Array());
array[row].push(value);
// skip whitespaces
while (c == ' ' || c == '\t' || c == '\r') {
c = data.charAt(++i);
}
// go to the next row or column
if (c == delimeter) {
// to the next column
col++;
}
else if (c == newline) {
// to the next row
col = 0;
row++;
}
else if (c != eof) {
// unexpected character
throw "Delimiter expected after character " + i;
}
// go to the next character
c = data.charAt(++i);
}
return array;
}

+ 80
- 0
examples/graph3d/playground/csv2datatable.html View File

@ -0,0 +1,80 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Convert CSV to Google Datatable</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="csv2array.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
function loaded() {
}
google.load("visualization", "1");
// Set callback to run when API is loaded
google.setOnLoadCallback(loaded);
// Called when the Visualization API is loaded.
function convert() {
var csv = document.getElementById("csv").value;
var datatable = "";
// parse the csv content
var csvArray = csv2array(csv);
// Create and populate a data table.
datatable += "data = new google.visualization.DataTable();\n";
// read the header row
for (var col = 0; col < csvArray[0].length; col++) {
datatable += "data.addColumn('number', '" + csvArray[0][col] + "');\n";
}
// read all data
for (var row = 1; row < csvArray.length; row++) {
datatable += "data.addRow([";
for (var col = 0; col < csvArray[row].length; col++) {
if (col != 0)
datatable += ", ";
datatable += csvArray[row][col];
}
datatable += "]);\n";
}
document.getElementById("datatable").value = datatable;
alert(csvArray.length + " rows converted");
}
</script>
</head>
<body>
<div id="graph"></div>
<div id="info"></div>
<b>CSV</b><br>
<textarea id="csv" style="width: 400px; height: 300px;"></textarea>
<br>
<br>
<input type="button" value="Convert" onclick="convert();">
<br>
<br>
<b>Google DataTable</b><br>
<textarea id="datatable" style="width: 400px; height: 300px;"></textarea>
</body>
</html>

+ 173
- 0
examples/graph3d/playground/datasource.html View File

@ -0,0 +1,173 @@
<html>
<head>
<title>Graph3d documentation</title>
<link rel='stylesheet' href='default.css' type='text/css'>
<link href="prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<pre class="prettyprint lang-php">
&lt;?php
/*
This datasource returns a response in the form of a google query response
USAGE
All parameters are optional
datasource.php?xmin=0&xmax=314&xstepnum=25&ymin=0&ymax=314&ystepnum=25
DOCUMENTATION
http://code.google.com/apis/visualization/documentation/dev/implementing_data_source.html
EXAMPLE OF A RESPONSE FILE
Note that the reqId in the response must correspond with the reqId from the
request.
________________________________________________________________________________
google.visualization.Query.setResponse({
version:'0.6',
reqId:'0',
status:'ok',
table:{
cols:[
{id:'x',
label:'x',
type:'number'},
{id:'y',
label:'y',
type:'number'},
{id:'value',
label:'value',
type:'number'}
],
rows:[
{c:[{v:0}, {v:0}, {v:10.0}]},
{c:[{v:1}, {v:0}, {v:12.0}]},
{c:[{v:2}, {v:0}, {v:13.0}]},
{c:[{v:0}, {v:1}, {v:11.0}]},
{c:[{v:1}, {v:1}, {v:14.0}]},
{c:[{v:2}, {v:1}, {v:11.0}]}
]
}
});
________________________________________________________________________________
*/
/**
* A custom function
*/
function custom($x, $y) {
$d = sqrt(pow($x/100, 2) + pow($y/100, 2));
return 50 * exp(-5 * $d / 10) * sin($d*5)
}
// retrieve parameters
$default_stepnum = 25;
$xmin = isset($_REQUEST['xmin']) ? (float)$_REQUEST['xmin'] : -100;
$xmax = isset($_REQUEST['xmax']) ? (float)$_REQUEST['xmax'] : 100;
$xstepnum = isset($_REQUEST['xstepnum']) ? (int)$_REQUEST['xstepnum'] : $default_stepnum;
$ymin = isset($_REQUEST['ymin']) ? (float)$_REQUEST['ymin'] : -100;
$ymax = isset($_REQUEST['ymax']) ? (float)$_REQUEST['ymax'] : 100;
$ystepnum = isset($_REQUEST['ystepnum']) ? (int)$_REQUEST['ystepnum'] : $default_stepnum;
// in the reply we must fill in the request id that came with the request
$reqId = getReqId();
// check for a maximum number of datapoints (for safety)
if ($xstepnum * $ystepnum &gt; 10000) {
echo "google.visualization.Query.setResponse({
version:'0.6',
reqId:'$reqId',
status:'error',
errors:[{reason:'not_supported', message:'Maximum number of datapoints exceeded'}]
});";
exit;
}
// output the header part of the response
echo "google.visualization.Query.setResponse({
version:'0.6',
reqId:'$reqId',
status:'ok',
table:{
cols:[
{id:'x',
label:'x',
type:'number'},
{id:'y',
label:'y',
type:'number'},
{id:'value',
label:'',
type:'number'}
],
rows:[";
// output the actual values
$first = true;
$xstep = ($xmax - $xmin) / $xstepnum;
$ystep = ($ymax - $ymin) / $ystepnum;
for ($x = $xmin; $x &lt; $xmax; $x+=$xstep) {
for ($y = $ymin; $y &lt; $ymax; $y+=$ystep) {
$value = custom($x,$y);
if (!$first) {
echo ",\n";
}
else {
echo "\n";
}
echo " {c:[{v:$x}, {v:$y}, {v:$value}]}";
$first = false;
}
}
// output the end part of the response
echo "
]
}
});
";
/**
* Retrieve the request id from the get/post data
* @return {number} $reqId The request id, or 0 if not found
*/
function getReqId() {
$reqId = 0;
foreach ($_REQUEST as $req) {
if (substr($req, 0,6) == "reqId:") {
$reqId = substr($req, 6);
}
}
return $reqId;
}
?&gt;
</pre>
</body>
</html>

+ 155
- 0
examples/graph3d/playground/datasource.php View File

@ -0,0 +1,155 @@
<?php
/*
This datasource returns a response in the form of a google query response
USAGE
All parameters are optional
datasource.php?xmin=0&xmax=314&xstepnum=25&ymin=0&ymax=314&ystepnum=25
DOCUMENTATION
http://code.google.com/apis/visualization/documentation/dev/implementing_data_source.html
EXAMPLE OF A RESPONSE FILE
Note that the reqId in the response must correspond with the reqId from the
request.
________________________________________________________________________________
google.visualization.Query.setResponse({
version:'0.6',
reqId:'0',
status:'ok',
table:{
cols:[
{id:'x',
label:'x',
type:'number'},
{id:'y',
label:'y',
type:'number'},
{id:'value',
label:'value',
type:'number'}
],
rows:[
{c:[{v:0}, {v:0}, {v:10.0}]},
{c:[{v:1}, {v:0}, {v:12.0}]},
{c:[{v:2}, {v:0}, {v:13.0}]},
{c:[{v:0}, {v:1}, {v:11.0}]},
{c:[{v:1}, {v:1}, {v:14.0}]},
{c:[{v:2}, {v:1}, {v:11.0}]}
]
}
});
________________________________________________________________________________
*/
/**
* A custom function
*/
function custom($x, $y) {
$d = sqrt(pow($x/100, 2) + pow($y/100, 2));
return 50 * exp(-5 * $d / 10) * sin($d*5);
}
// retrieve parameters
$default_stepnum = 25;
$xmin = isset($_REQUEST['xmin']) ? (float)$_REQUEST['xmin'] : -100;
$xmax = isset($_REQUEST['xmax']) ? (float)$_REQUEST['xmax'] : 100;
$xstepnum = isset($_REQUEST['xstepnum']) ? (int)$_REQUEST['xstepnum'] : $default_stepnum;
$ymin = isset($_REQUEST['ymin']) ? (float)$_REQUEST['ymin'] : -100;
$ymax = isset($_REQUEST['ymax']) ? (float)$_REQUEST['ymax'] : 100;
$ystepnum = isset($_REQUEST['ystepnum']) ? (int)$_REQUEST['ystepnum'] : $default_stepnum;
// in the reply we must fill in the request id that came with the request
$reqId = getReqId();
// check for a maximum number of datapoints (for safety)
if ($xstepnum * $ystepnum > 10000) {
echo "google.visualization.Query.setResponse({
version:'0.6',
reqId:'$reqId',
status:'error',
errors:[{reason:'not_supported', message:'Maximum number of datapoints exceeded'}]
});";
exit;
}
// output the header part of the response
echo "google.visualization.Query.setResponse({
version:'0.6',
reqId:'$reqId',
status:'ok',
table:{
cols:[
{id:'x',
label:'x',
type:'number'},
{id:'y',
label:'y',
type:'number'},
{id:'value',
label:'',
type:'number'}
],
rows:[";
// output the actual values
$first = true;
$xstep = ($xmax - $xmin) / $xstepnum;
$ystep = ($ymax - $ymin) / $ystepnum;
for ($x = $xmin; $x < $xmax; $x+=$xstep) {
for ($y = $ymin; $y < $ymax; $y+=$ystep) {
$value = custom($x,$y);
if (!$first) {
echo ",\n";
}
else {
echo "\n";
}
echo " {c:[{v:$x}, {v:$y}, {v:$value}]}";
$first = false;
}
}
// output the end part of the response
echo "
]
}
});
";
/**
* Retrieve the request id from the get/post data
* @return {number} $reqId The request id, or 0 if not found
*/
function getReqId() {
$reqId = 0;
foreach ($_REQUEST as $req) {
if (substr($req, 0,6) == "reqId:") {
$reqId = substr($req, 6);
}
}
return $reqId;
}
?>

+ 179
- 0
examples/graph3d/playground/index.html View File

@ -0,0 +1,179 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D - Playground</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<script type="text/javascript" src="playground.js"></script>
<script type="text/javascript" src="csv2array.js"></script>
<link rel='stylesheet' href='playground.css' type='text/css'>
<script type="text/javascript">
// Called when the Visualization API is loaded.
function drawVisualization() {
// TODO
}
</script>
</head>
<body onload="load();">
<h1>Graph 3D - Playground</h1>
<table style="width:100%;">
<col width="50%">
<col width="50%">
<tr>
<td>
<h2>Data</h2>
<p>
Graph 3D expects a data table with first three to five columns:
colums <code>x</code>, <code>y</code>, <code>z</code> (optional),
<code>style</code>, <code>filter</code> (optional).
</p>
<table>
<tr>
<td style="white-space: nowrap">
<input type="radio" name="datatype" id="datatypeCsv" onclick="selectDataType();" checked value="csv">Csv
</td>
<td>
<div id="csv">
<textarea id="csvTextarea"></textarea>
<p>
<a href="javascript: loadCsvExample();" title="Load an example">Simple example</a>
<a href="javascript: loadCsvLineExample();" title="Load an example">Line example</a>
<a href="javascript: loadCsvAnimationExample();" title="Load an example">Animation example</a>
<a href="javascript: loadCsvMovingDotsExample();" title="Load an example">Moving dots example</a>
<a href="javascript: loadCsvColoredDotsExample();" title="Load an example">Colored dots example</a>
<a href="javascript: loadCsvSizedDotsExample();" title="Load an example">Sized dots example</a>
</p>
</div>
</td>
</tr>
<!-- TODO: add JSON examples -->
</table>
<br>
</td>
<td rowspan=2>
<h2>Graph</h2>
<p>
<input type="button" value="Draw graph" onclick="draw();" id="draw">
</p>
<div id="graph"></div>
</td>
</tr>
<tr>
<td>
<h2>Options</h2>
<table>
<tr>
<th>Option</th>
<th>Value</th>
</tr>
<tr>
<td>width</td>
<td><input type="text" id="width" value="100%" /> <span class="info">for example "500px" or "100%"</span></td>
</tr>
<tr>
<td>height</td>
<td><input type="text" id="height" value="100%" /> <span class="info">for example "500px" or "100%"</span></td>
</tr>
<tr>
<td>style</td>
<td>
<select id="style">
<option value="bar" >bar
<option value="bar-color" >bar-color
<option value="bar-size" >bar-size
<option value="dot" >dot
<option value="dot-color" >dot-color
<option value="dot-size" >dot-size
<option value="dot-line" >dot-line
<option value="line" >line
<option value="grid" >grid
<option value="surface" selected>surface
</select>
</tr>
<tr>
<td>showAnimationControls</td>
<td><input type="checkbox" id="showAnimationControls" checked /></td>
</tr>
<tr>
<td>showGrid</td>
<td><input type="checkbox" id="showGrid" checked /></td>
</tr>
<tr>
<td>showPerspective</td>
<td><input type="checkbox" id="showPerspective" checked /></td>
</tr>
<tr>
<td>showShadow</td>
<td><input type="checkbox" id="showShadow" /></td>
</tr>
<tr>
<td>keepAspectRatio</td>
<td><input type="checkbox" id="keepAspectRatio" checked /></td>
</tr>
<tr>
<td>verticalRatio</td>
<td><input type="text" id="verticalRatio" value="0.5" /> <span class="info">a value between 0.1 and 1.0</span></td>
</tr>
<tr>
<td>animationInterval</td>
<td><input type="text" id="animationInterval" value="1000" /> <span class="info">in milliseconds</span></td>
</tr>
<tr>
<td>animationPreload</td>
<td><input type="checkbox" id="animationPreload" /></td>
</tr>
<tr>
<td>animationAutoStart</td>
<td><input type="checkbox" id="animationAutoStart" /></td>
</tr>
<tr><td>xCenter</td><td><input type="text" id="xCenter" value="55%" /></td></tr>
<tr><td>yCenter</td><td><input type="text" id="yCenter" value="45%" /></td></tr>
<tr><td>xMin</td><td><input type="text" id="xMin" /></td></tr>
<tr><td>xMax</td><td><input type="text" id="xMax" /></td></tr>
<tr><td>xStep</td><td><input type="text" id="xStep" /></td></tr>
<tr><td>yMin</td><td><input type="text" id="yMin" /></td></tr>
<tr><td>yMax</td><td><input type="text" id="yMax" /></td></tr>
<tr><td>yStep</td><td><input type="text" id="yStep" /></td></tr>
<tr><td>zMin</td><td><input type="text" id="zMin" /></td></tr>
<tr><td>zMax</td><td><input type="text" id="zMax" /></td></tr>
<tr><td>zStep</td><td><input type="text" id="zStep" /></td></tr>
<tr><td>valueMin</td><td><input type="text" id="valueMin" /></td></tr>
<tr><td>valueMax</td><td><input type="text" id="valueMax" /></td></tr>
<tr><td>xBarWidth</td><td><input type="text" id="xBarWidth" /></td></tr>
<tr><td>yBarWidth</td><td><input type="text" id="yBarWidth" /></td></tr>
<tr><td>xLabel</td><td><input type="text" id="xLabel" value="x"/></td></tr>
<tr><td>yLabel</td><td><input type="text" id="yLabel" value="y"/></td></tr>
<tr><td>zLabel</td><td><input type="text" id="zLabel" value="z"/></td></tr>
<tr><td>filterLabel</td><td><input type="text" id="filterLabel" value="time"/></td></tr>
<tr><td>legendLabel</td><td><input type="text" id="legendLabel" value="value"/></td></tr>
</table>
</td>
</tr>
</table>
</body>

+ 91
- 0
examples/graph3d/playground/playground.css View File

@ -0,0 +1,91 @@
body
{
font: 13px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
}
h1
{
font-size: 180%;
font-weight: bold;
margin: 1em 0 1em 0;
}
h2
{
font-size: 140%;
padding: 5px;
border-bottom: 1px solid #a0c0f0;
color: #2B7CE9;
}
h3
{
font-size: 100%;
}
hr
{
border: none 0;
border-top: 1px solid #a0c0f0;
height: 1px;
}
pre.code
{
display: block;
padding: 8px;
border: 1px dashed #ccc;
}
table
{
border-collapse: collapse;
}
th, td
{
font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
text-align: left;
vertical-align: top;
/*border: 1px solid #888;*/
padding: 3px;
}
th
{
font-weight: bold;
}
textarea {
width: 500px;
height: 200px;
border: 1px solid #888;
}
input[type=text] {
border: 1px solid #888;
}
#datasourceText, #googlespreadsheetText {
width: 500px;
}
.info {
color: gray;
}
a {
color: gray;
}
a:hover {
color: red;
}
#graph {
width: 100%;
height: 600px;
}

+ 544
- 0
examples/graph3d/playground/playground.js View File

@ -0,0 +1,544 @@
var query = null;
function load() {
selectDataType();
loadCsvExample();
loadJsonExample();
loadJavascriptExample();
loadGooglespreadsheetExample();
loadDatasourceExample();
draw();
}
/**
* Upate the UI based on the currently selected datatype
*/
function selectDataType() {
}
function round(value, decimals) {
return parseFloat(value.toFixed(decimals));
}
function loadCsvExample() {
var csv = "";
// headers
csv += '"x", "y", "value"\n';
// create some nice looking data with sin/cos
var steps = 30;
var axisMax = 314;
var axisStep = axisMax / steps;
for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) {
var value = Math.sin(x/50) * Math.cos(y/50) * 50 + 50;
csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(value, 2) + '\n';
}
}
document.getElementById("csvTextarea").innerHTML = csv;
// also adjust some settings
document.getElementById("style").value = "surface";
document.getElementById("verticalRatio").value = "0.5";
document.getElementById("xLabel").value = "x";
document.getElementById("yLabel").value = "y";
document.getElementById("zLabel").value = "value";
document.getElementById("filterLabel").value = "";
document.getElementById("legendLabel").value = "";
drawCsv();
}
function loadCsvAnimationExample() {
var csv = "";
// headers
csv += '"x", "y", "value", "time"\n';
// create some nice looking data with sin/cos
var steps = 20;
var axisMax = 314;
var tMax = 31;
var axisStep = axisMax / steps;
for (var t = 0; t < tMax; t++) {
for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) {
var value = Math.sin(x/50 + t/10) * Math.cos(y/50 + t/10) * 50 + 50;
csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(value, 2) + ', ' + t + '\n';
}
}
}
document.getElementById("csvTextarea").innerHTML = csv;
// also adjust some settings
document.getElementById("style").value = "surface";
document.getElementById("verticalRatio").value = "0.5";
document.getElementById("animationInterval").value = 100;
document.getElementById("xLabel").value = "x";
document.getElementById("yLabel").value = "y";
document.getElementById("zLabel").value = "value";
document.getElementById("filterLabel").value = "time";
document.getElementById("legendLabel").value = "";
drawCsv();
}
function loadCsvLineExample() {
var csv = "";
// headers
csv += '"sin(t)", "cos(t)", "t"\n';
// create some nice looking data with sin/cos
var steps = 100;
var axisMax = 314;
var tmax = 4 * 2 * Math.PI;
var axisStep = axisMax / steps;
for (t = 0; t < tmax; t += tmax / steps) {
var r = 1;
var x = r * Math.sin(t);
var y = r * Math.cos(t);
var z = t;
csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + '\n';
}
document.getElementById("csvTextarea").innerHTML = csv;
// also adjust some settings
document.getElementById("style").value = "line";
document.getElementById("verticalRatio").value = "1.0";
document.getElementById("showPerspective").checked = false;
document.getElementById("xLabel").value = "sin(t)";
document.getElementById("yLabel").value = "cos(t)";
document.getElementById("zLabel").value = "t";
document.getElementById("filterLabel").value = "";
document.getElementById("legendLabel").value = "";
drawCsv();
}
function loadCsvMovingDotsExample() {
var csv = "";
// headers
csv += '"x", "y", "z", "color value", "time"\n';
// create some shortcuts to math functions
var sin = Math.sin;
var cos = Math.cos;
var pi = Math.PI;
// create the animation data
var tmax = 2.0 * pi;
var tstep = tmax / 75;
var dotCount = 1; // set this to 1, 2, 3, 4, ...
for (var t = 0; t < tmax; t += tstep) {
var tgroup = parseFloat(t.toFixed(2));
var value = t;
// a dot in the center
var x = 0;
var y = 0;
var z = 0;
csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(value, 2)+ ', ' + round(tgroup, 2) + '\n';
// one or multiple dots moving around the center
for (var dot = 0; dot < dotCount; dot++) {
var tdot = t + 2*pi * dot / dotCount;
//data.addRow([sin(tdot), cos(tdot), sin(tdot), value, tgroup]);
//data.addRow([sin(tdot), -cos(tdot), sin(tdot + tmax*1/2), value, tgroup]);
var x = sin(tdot);
var y = cos(tdot);
var z = sin(tdot);
csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(value, 2)+ ', ' + round(tgroup, 2) + '\n';
var x = sin(tdot);
var y = -cos(tdot);
var z = sin(tdot + tmax*1/2);
csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(value, 2)+ ', ' + round(tgroup, 2) + '\n';
}
}
document.getElementById("csvTextarea").innerHTML = csv;
// also adjust some settings
document.getElementById("style").value = "dot-color";
document.getElementById("verticalRatio").value = "1.0";
document.getElementById("animationInterval").value = "35";
document.getElementById("animationAutoStart").checked = true;
document.getElementById("showPerspective").checked = true;
document.getElementById("xLabel").value = "x";
document.getElementById("yLabel").value = "y";
document.getElementById("zLabel").value = "z";
document.getElementById("filterLabel").value = "time";
document.getElementById("legendLabel").value = "color value";
drawCsv();
}
function loadCsvColoredDotsExample() {
var csv = "";
// headers
csv += '"x", "y", "z", "distance"\n';
// create some shortcuts to math functions
var sqrt = Math.sqrt;
var pow = Math.pow;
var random = Math.random;
// create the animation data
var imax = 200;
for (var i = 0; i < imax; i++) {
var x = pow(random(), 2);
var y = pow(random(), 2);
var z = pow(random(), 2);
var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(dist, 2)+ '\n';
}
document.getElementById("csvTextarea").innerHTML = csv;
// also adjust some settings
document.getElementById("style").value = "dot-color";
document.getElementById("verticalRatio").value = "1.0";
document.getElementById("showPerspective").checked = true;
document.getElementById("xLabel").value = "x";
document.getElementById("yLabel").value = "y";
document.getElementById("zLabel").value = "value";
document.getElementById("legendLabel").value = "distance"
document.getElementById("filterLabel").value = "";
drawCsv();
}
function loadCsvSizedDotsExample() {
var csv = "";
// headers
csv += '"x", "y", "z", "range"\n';
// create some shortcuts to math functions
var sqrt = Math.sqrt;
var pow = Math.pow;
var random = Math.random;
// create the animation data
var imax = 200;
for (var i = 0; i < imax; i++) {
var x = pow(random(), 2);
var y = pow(random(), 2);
var z = pow(random(), 2);
var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
var range = sqrt(2) - dist;
csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(range, 2)+ '\n';
}
document.getElementById("csvTextarea").innerHTML = csv;
// also adjust some settings
document.getElementById("style").value = "dot-size";
document.getElementById("verticalRatio").value = "1.0";
document.getElementById("showPerspective").checked = true;
document.getElementById("xLabel").value = "x";
document.getElementById("yLabel").value = "y";
document.getElementById("zLabel").value = "z";
document.getElementById("legendLabel").value = "range";
document.getElementById("filterLabel").value = "";
drawCsv();
}
function loadJsonExample() {
}
function loadJavascriptExample() {
}
function loadJavascriptFunctionExample() {
}
function loadGooglespreadsheetExample() {
}
function loadDatasourceExample() {
}
/**
* Retrieve teh currently selected datatype
* @return {string} datatype
*/
function getDataType() {
return "csv";
}
/**
* Retrieve the datatable from the entered contents of the csv text
* @param {boolean} [skipValue] | if true, the 4th element is a filter value
* @return {vis DataSet}
*/
function getDataCsv() {
var csv = document.getElementById("csvTextarea").value;
// parse the csv content
var csvArray = csv2array(csv);
var data = new vis.DataSet();
var skipValue = false;
if (document.getElementById("filterLabel").value != "" && document.getElementById("legendLabel").value == "") {
skipValue = true;
}
// read all data
for (var row = 1; row < csvArray.length; row++) {
if (csvArray[row].length == 4 && skipValue == false) {
data.add({x:parseFloat(csvArray[row][0]),
y:parseFloat(csvArray[row][1]),
z:parseFloat(csvArray[row][2]),
style:parseFloat(csvArray[row][3])});
}
else if (csvArray[row].length == 4 && skipValue == true) {
data.add({x:parseFloat(csvArray[row][0]),
y:parseFloat(csvArray[row][1]),
z:parseFloat(csvArray[row][2]),
filter:parseFloat(csvArray[row][3])});
}
else if (csvArray[row].length == 5) {
data.add({x:parseFloat(csvArray[row][0]),
y:parseFloat(csvArray[row][1]),
z:parseFloat(csvArray[row][2]),
style:parseFloat(csvArray[row][3]),
filter:parseFloat(csvArray[row][4])});
}
else {
data.add({x:parseFloat(csvArray[row][0]),
y:parseFloat(csvArray[row][1]),
z:parseFloat(csvArray[row][2]),
style:parseFloat(csvArray[row][2])});
}
}
return data;
}
/**
* remove leading and trailing spaces
*/
function trim(text) {
while (text.length && text.charAt(0) == ' ')
text = text.substr(1);
while (text.length && text.charAt(text.length-1) == ' ')
text = text.substr(0, text.length-1);
return text;
}
/**
* Retrieve the datatable from the entered contents of the javascript text
* @return {vis Dataset}
*/
function getDataJson() {
var json = document.getElementById("jsonTextarea").value;
var data = new google.visualization.DataTable(json);
return data;
}
/**
* Retrieve the datatable from the entered contents of the javascript text
* @return {vis Dataset}
*/
function getDataJavascript() {
var js = document.getElementById("javascriptTextarea").value;
eval(js);
return data;
}
/**
* Retrieve the datatable from the entered contents of the datasource text
* @return {vis Dataset}
*/
function getDataDatasource() {
}
/**
* Retrieve a JSON object with all options
*/
function getOptions() {
return {
width: document.getElementById("width").value,
height: document.getElementById("height").value,
style: document.getElementById("style").value,
showAnimationControls: (document.getElementById("showAnimationControls").checked != false),
showGrid: (document.getElementById("showGrid").checked != false),
showPerspective: (document.getElementById("showPerspective").checked != false),
showShadow: (document.getElementById("showShadow").checked != false),
keepAspectRatio: (document.getElementById("keepAspectRatio").checked != false),
verticalRatio: document.getElementById("verticalRatio").value,
animationInterval: document.getElementById("animationInterval").value,
xLabel: document.getElementById("xLabel").value,
yLabel: document.getElementById("yLabel").value,
zLabel: document.getElementById("zLabel").value,
filterLabel: document.getElementById("filterLabel").value,
legendLabel: document.getElementById("legendLabel").value,
animationPreload: (document.getElementById("animationPreload").checked != false),
animationAutoStart:(document.getElementById("animationAutoStart").checked != false),
xCenter: Number(document.getElementById("xCenter").value) || undefined,
yCenter: Number(document.getElementById("yCenter").value) || undefined,
xMin: Number(document.getElementById("xMin").value) || undefined,
xMax: Number(document.getElementById("xMax").value) || undefined,
xStep: Number(document.getElementById("xStep").value) || undefined,
yMin: Number(document.getElementById("yMin").value) || undefined,
yMax: Number(document.getElementById("yMax").value) || undefined,
yStep: Number(document.getElementById("yStep").value) || undefined,
zMin: Number(document.getElementById("zMin").value) || undefined,
zMax: Number(document.getElementById("zMax").value) || undefined,
zStep: Number(document.getElementById("zStep").value) || undefined,
valueMin: Number(document.getElementById("valueMin").value) || undefined,
valueMax: Number(document.getElementById("valueMax").value) || undefined,
xBarWidth: Number(document.getElementById("xBarWidth").value) || undefined,
yBarWidth: Number(document.getElementById("yBarWidth").value) || undefined
};
}
/**
* Redraw the graph with the entered data and options
*/
function draw() {
return drawCsv();
}
function drawCsv() {
// retrieve data and options
var data = getDataCsv();
var options = getOptions();
// Creat a graph
var graph = new vis.Graph3d(document.getElementById('graph'), data, options);
}
function drawJson() {
// retrieve data and options
var data = getDataJson();
var options = getOptions();
// Creat a graph
var graph = new vis.Graph3d(document.getElementById('graph'), data, options);
}
function drawJavascript() {
// retrieve data and options
var data = getDataJavascript();
var options = getOptions();
// Creat a graph
var graph = new vis.Graph3d(document.getElementById('graph'), data, options);
}
function drawGooglespreadsheet() {
// Instantiate our graph object.
drawGraph = function(response) {
document.getElementById("draw").disabled = "";
if (response.isError()) {
error = 'Error: ' + response.getMessage();
document.getElementById('graph').innerHTML =
"<span style='color: red; font-weight: bold;'>" + error + "</span>"; ;
}
// retrieve the data from the query response
data = response.getDataTable();
// specify options
options = getOptions();
// Instantiate our graph object.
var graph = new vis.Graph3d(document.getElementById('graph'), data, options);
}
url = document.getElementById("googlespreadsheetText").value;
document.getElementById("draw").disabled = "disabled";
// send the request
query && query.abort();
query = new google.visualization.Query(url);
query.send(drawGraph);
}
function drawDatasource() {
// Instantiate our graph object.
drawGraph = function(response) {
document.getElementById("draw").disabled = "";
if (response.isError()) {
error = 'Error: ' + response.getMessage();
document.getElementById('graph').innerHTML =
"<span style='color: red; font-weight: bold;'>" + error + "</span>"; ;
}
// retrieve the data from the query response
data = response.getDataTable();
// specify options
options = getOptions();
// Instantiate our graph object.
var graph = new vis.Graph3d(document.getElementById('graph'), data, options);
};
url = document.getElementById("datasourceText").value;
document.getElementById("draw").disabled = "disabled";
// if the entered url is a google spreadsheet url, replace the part
// "/ccc?" with "/tq?" in order to retrieve a neat data query result
if (url.indexOf("/ccc?")) {
url.replace("/ccc?", "/tq?");
}
// send the request
query && query.abort();
query = new google.visualization.Query(url);
query.send(drawGraph);
}

+ 2
- 0
examples/graph3d/playground/prettify/lang-apollo.js View File

@ -0,0 +1,2 @@
PR.registerLangHandler(PR.createSimpleLexer([["com",/^#[^\r\n]*/,null,"#"],["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/,null,'"']],[["kwd",/^(?:ADS|AD|AUG|BZF|BZMF|CAE|CAF|CA|CCS|COM|CS|DAS|DCA|DCOM|DCS|DDOUBL|DIM|DOUBLE|DTCB|DTCF|DV|DXCH|EDRUPT|EXTEND|INCR|INDEX|NDX|INHINT|LXCH|MASK|MSK|MP|MSU|NOOP|OVSK|QXCH|RAND|READ|RELINT|RESUME|RETURN|ROR|RXOR|SQUARE|SU|TCR|TCAA|OVSK|TCF|TC|TS|WAND|WOR|WRITE|XCH|XLQ|XXALQ|ZL|ZQ|ADD|ADZ|SUB|SUZ|MPY|MPR|MPZ|DVP|COM|ABS|CLA|CLZ|LDQ|STO|STQ|ALS|LLS|LRS|TRA|TSQ|TMI|TOV|AXT|TIX|DLY|INP|OUT)\s/,
null],["typ",/^(?:-?GENADR|=MINUS|2BCADR|VN|BOF|MM|-?2CADR|-?[1-6]DNADR|ADRES|BBCON|[SE]?BANK\=?|BLOCK|BNKSUM|E?CADR|COUNT\*?|2?DEC\*?|-?DNCHAN|-?DNPTR|EQUALS|ERASE|MEMORY|2?OCT|REMADR|SETLOC|SUBRO|ORG|BSS|BES|SYN|EQU|DEFINE|END)\s/,null],["lit",/^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/],["pln",/^-*(?:[!-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i],["pun",/^[^\w\t\n\r \xA0()\"\\\';]+/]]),["apollo","agc","aea"])

+ 2
- 0
examples/graph3d/playground/prettify/lang-css.js View File

@ -0,0 +1,2 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[ \t\r\n\f]+/,null," \t\r\n\u000c"]],[["str",/^\"(?:[^\n\r\f\\\"]|\\(?:\r\n?|\n|\f)|\\[\s\S])*\"/,null],["str",/^\'(?:[^\n\r\f\\\']|\\(?:\r\n?|\n|\f)|\\[\s\S])*\'/,null],["lang-css-str",/^url\(([^\)\"\']*)\)/i],["kwd",/^(?:url|rgb|\!important|@import|@page|@media|@charset|inherit)(?=[^\-\w]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|(?:\\[0-9a-f]+ ?))(?:[_a-z0-9\-]|\\(?:\\[0-9a-f]+ ?))*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^\/*][^*]*\*+)*\//],
["com",/^(?:<!--|--\>)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#(?:[0-9a-f]{3}){1,2}/i],["pln",/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i],["pun",/^[^\s\w\'\"]+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^\)\"\']+/]]),["css-str"])

+ 2
- 0
examples/graph3d/playground/prettify/lang-hs.js View File

@ -0,0 +1,2 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\x0B\x0C\r ]+/,null,"\t\n\u000b\u000c\r "],["str",/^\"(?:[^\"\\\n\x0C\r]|\\[\s\S])*(?:\"|$)/,null,'"'],["str",/^\'(?:[^\'\\\n\x0C\r]|\\[^&])\'?/,null,"'"],["lit",/^(?:0o[0-7]+|0x[\da-f]+|\d+(?:\.\d+)?(?:e[+\-]?\d+)?)/i,null,"0123456789"]],[["com",/^(?:(?:--+(?:[^\r\n\x0C]*)?)|(?:\{-(?:[^-]|-+[^-\}])*-\}))/],["kwd",/^(?:case|class|data|default|deriving|do|else|if|import|in|infix|infixl|infixr|instance|let|module|newtype|of|then|type|where|_)(?=[^a-zA-Z0-9\']|$)/,
null],["pln",/^(?:[A-Z][\w\']*\.)*[a-zA-Z][\w\']*/],["pun",/^[^\t\n\x0B\x0C\r a-zA-Z0-9\'\"]+/]]),["hs"])

+ 2
- 0
examples/graph3d/playground/prettify/lang-lisp.js View File

@ -0,0 +1,2 @@
PR.registerLangHandler(PR.createSimpleLexer([["opn",/^\(/,null,"("],["clo",/^\)/,null,")"],["com",/^;[^\r\n]*/,null,";"],["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/,null,'"']],[["kwd",/^(?:block|c[ad]+r|catch|con[ds]|def(?:ine|un)|do|eq|eql|equal|equalp|eval-when|flet|format|go|if|labels|lambda|let|load-time-value|locally|macrolet|multiple-value-call|nil|progn|progv|quote|require|return-from|setq|symbol-macrolet|t|tagbody|the|throw|unwind)\b/,
null],["lit",/^[+\-]?(?:0x[0-9a-f]+|\d+\/\d+|(?:\.\d+|\d+(?:\.\d*)?)(?:[ed][+\-]?\d+)?)/i],["lit",/^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/],["pln",/^-*(?:[a-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i],["pun",/^[^\w\t\n\r \xA0()\"\\\';]+/]]),["cl","el","lisp","scm"])

+ 2
- 0
examples/graph3d/playground/prettify/lang-lua.js View File

@ -0,0 +1,2 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^(?:\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\]|\\[\s\S])*(?:\'|$))/,null,"\"'"]],[["com",/^--(?:\[(=*)\[[\s\S]*?(?:\]\1\]|$)|[^\r\n]*)/],["str",/^\[(=*)\[[\s\S]*?(?:\]\1\]|$)/],["kwd",/^(?:and|break|do|else|elseif|end|false|for|function|if|in|local|nil|not|or|repeat|return|then|true|until|while)\b/,null],["lit",/^[+-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],
["pln",/^[a-z_]\w*/i],["pun",/^[^\w\t\n\r \xA0][^\w\t\n\r \xA0\"\'\-\+=]*/]]),["lua"])

+ 2
- 0
examples/graph3d/playground/prettify/lang-ml.js View File

@ -0,0 +1,2 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["com",/^#(?:if[\t\n\r \xA0]+(?:[a-z_$][\w\']*|``[^\r\n\t`]*(?:``|$))|else|endif|light)/i,null,"#"],["str",/^(?:\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\]|\\[\s\S])*(?:\'|$))/,null,"\"'"]],[["com",/^(?:\/\/[^\r\n]*|\(\*[\s\S]*?\*\))/],["kwd",/^(?:abstract|and|as|assert|begin|class|default|delegate|do|done|downcast|downto|elif|else|end|exception|extern|false|finally|for|fun|function|if|in|inherit|inline|interface|internal|lazy|let|match|member|module|mutable|namespace|new|null|of|open|or|override|private|public|rec|return|static|struct|then|to|true|try|type|upcast|use|val|void|when|while|with|yield|asr|land|lor|lsl|lsr|lxor|mod|sig|atomic|break|checked|component|const|constraint|constructor|continue|eager|event|external|fixed|functor|global|include|method|mixin|object|parallel|process|protected|pure|sealed|trait|virtual|volatile)\b/],
["lit",/^[+\-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],["pln",/^(?:[a-z_]\w*[!?#]?|``[^\r\n\t`]*(?:``|$))/i],["pun",/^[^\t\n\r \xA0\"\'\w]+/]]),["fs","ml"])

+ 1
- 0
examples/graph3d/playground/prettify/lang-proto.js View File

@ -0,0 +1 @@
PR.registerLangHandler(PR.sourceDecorator({keywords:"bool bytes default double enum extend extensions false fixed32 fixed64 float group import int32 int64 max message option optional package repeated required returns rpc service sfixed32 sfixed64 sint32 sint64 string syntax to true uint32 uint64",cStyleComments:true}),["proto"])

+ 2
- 0
examples/graph3d/playground/prettify/lang-scala.js View File

@ -0,0 +1,2 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^(?:"(?:(?:""(?:""?(?!")|[^\\"]|\\.)*"{0,3})|(?:[^"\r\n\\]|\\.)*"?))/,null,'"'],["lit",/^`(?:[^\r\n\\`]|\\.)*`?/,null,"`"],["pun",/^[!#%&()*+,\-:;<=>?@\[\\\]^{|}~]+/,null,"!#%&()*+,-:;<=>?@[\\]^{|}~"]],[["str",/^'(?:[^\r\n\\']|\\(?:'|[^\r\n']+))'/],["lit",/^'[a-zA-Z_$][\w$]*(?!['$\w])/],["kwd",/^(?:abstract|case|catch|class|def|do|else|extends|final|finally|for|forSome|if|implicit|import|lazy|match|new|object|override|package|private|protected|requires|return|sealed|super|throw|trait|try|type|val|var|while|with|yield)\b/],
["lit",/^(?:true|false|null|this)\b/],["lit",/^(?:(?:0(?:[0-7]+|X[0-9A-F]+))L?|(?:(?:0|[1-9][0-9]*)(?:(?:\.[0-9]+)?(?:E[+\-]?[0-9]+)?F?|L?))|\\.[0-9]+(?:E[+\-]?[0-9]+)?F?)/i],["typ",/^[$_]*[A-Z][_$A-Z0-9]*[a-z][\w$]*/],["pln",/^[$a-zA-Z_][\w$]*/],["com",/^\/(?:\/.*|\*(?:\/|\**[^*/])*(?:\*+\/?)?)/],["pun",/^(?:\.+|\/)/]]),["scala"])

+ 2
- 0
examples/graph3d/playground/prettify/lang-sql.js View File

@ -0,0 +1,2 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^(?:"(?:[^\"\\]|\\.)*"|'(?:[^\'\\]|\\.)*')/,null,"\"'"]],[["com",/^(?:--[^\r\n]*|\/\*[\s\S]*?(?:\*\/|$))/],["kwd",/^(?:ADD|ALL|ALTER|AND|ANY|AS|ASC|AUTHORIZATION|BACKUP|BEGIN|BETWEEN|BREAK|BROWSE|BULK|BY|CASCADE|CASE|CHECK|CHECKPOINT|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMN|COMMIT|COMPUTE|CONSTRAINT|CONTAINS|CONTAINSTABLE|CONTINUE|CONVERT|CREATE|CROSS|CURRENT|CURRENT_DATE|CURRENT_TIME|CURRENT_TIMESTAMP|CURRENT_USER|CURSOR|DATABASE|DBCC|DEALLOCATE|DECLARE|DEFAULT|DELETE|DENY|DESC|DISK|DISTINCT|DISTRIBUTED|DOUBLE|DROP|DUMMY|DUMP|ELSE|END|ERRLVL|ESCAPE|EXCEPT|EXEC|EXECUTE|EXISTS|EXIT|FETCH|FILE|FILLFACTOR|FOR|FOREIGN|FREETEXT|FREETEXTTABLE|FROM|FULL|FUNCTION|GOTO|GRANT|GROUP|HAVING|HOLDLOCK|IDENTITY|IDENTITYCOL|IDENTITY_INSERT|IF|IN|INDEX|INNER|INSERT|INTERSECT|INTO|IS|JOIN|KEY|KILL|LEFT|LIKE|LINENO|LOAD|NATIONAL|NOCHECK|NONCLUSTERED|NOT|NULL|NULLIF|OF|OFF|OFFSETS|ON|OPEN|OPENDATASOURCE|OPENQUERY|OPENROWSET|OPENXML|OPTION|OR|ORDER|OUTER|OVER|PERCENT|PLAN|PRECISION|PRIMARY|PRINT|PROC|PROCEDURE|PUBLIC|RAISERROR|READ|READTEXT|RECONFIGURE|REFERENCES|REPLICATION|RESTORE|RESTRICT|RETURN|REVOKE|RIGHT|ROLLBACK|ROWCOUNT|ROWGUIDCOL|RULE|SAVE|SCHEMA|SELECT|SESSION_USER|SET|SETUSER|SHUTDOWN|SOME|STATISTICS|SYSTEM_USER|TABLE|TEXTSIZE|THEN|TO|TOP|TRAN|TRANSACTION|TRIGGER|TRUNCATE|TSEQUAL|UNION|UNIQUE|UPDATE|UPDATETEXT|USE|USER|VALUES|VARYING|VIEW|WAITFOR|WHEN|WHERE|WHILE|WITH|WRITETEXT)(?=[^\w-]|$)/i,
null],["lit",/^[+-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],["pln",/^[a-z_][\w-]*/i],["pun",/^[^\w\t\n\r \xA0\"\'][^\w\t\n\r \xA0+\-\"\']*/]]),["sql"])

+ 2
- 0
examples/graph3d/playground/prettify/lang-vb.js View File

@ -0,0 +1,2 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0\u2028\u2029]+/,null,"\t\n\r \u00a0\u2028\u2029"],["str",/^(?:[\"\u201C\u201D](?:[^\"\u201C\u201D]|[\"\u201C\u201D]{2})(?:[\"\u201C\u201D]c|$)|[\"\u201C\u201D](?:[^\"\u201C\u201D]|[\"\u201C\u201D]{2})*(?:[\"\u201C\u201D]|$))/i,null,'"\u201c\u201d'],["com",/^[\'\u2018\u2019][^\r\n\u2028\u2029]*/,null,"'\u2018\u2019"]],[["kwd",/^(?:AddHandler|AddressOf|Alias|And|AndAlso|Ansi|As|Assembly|Auto|Boolean|ByRef|Byte|ByVal|Call|Case|Catch|CBool|CByte|CChar|CDate|CDbl|CDec|Char|CInt|Class|CLng|CObj|Const|CShort|CSng|CStr|CType|Date|Decimal|Declare|Default|Delegate|Dim|DirectCast|Do|Double|Each|Else|ElseIf|End|EndIf|Enum|Erase|Error|Event|Exit|Finally|For|Friend|Function|Get|GetType|GoSub|GoTo|Handles|If|Implements|Imports|In|Inherits|Integer|Interface|Is|Let|Lib|Like|Long|Loop|Me|Mod|Module|MustInherit|MustOverride|MyBase|MyClass|Namespace|New|Next|Not|NotInheritable|NotOverridable|Object|On|Option|Optional|Or|OrElse|Overloads|Overridable|Overrides|ParamArray|Preserve|Private|Property|Protected|Public|RaiseEvent|ReadOnly|ReDim|RemoveHandler|Resume|Return|Select|Set|Shadows|Shared|Short|Single|Static|Step|Stop|String|Structure|Sub|SyncLock|Then|Throw|To|Try|TypeOf|Unicode|Until|Variant|Wend|When|While|With|WithEvents|WriteOnly|Xor|EndIf|GoSub|Let|Variant|Wend)\b/i,
null],["com",/^REM[^\r\n\u2028\u2029]*/i],["lit",/^(?:True\b|False\b|Nothing\b|\d+(?:E[+\-]?\d+[FRD]?|[FRDSIL])?|(?:&H[0-9A-F]+|&O[0-7]+)[SIL]?|\d*\.\d+(?:E[+\-]?\d+)?[FRD]?|#\s+(?:\d+[\-\/]\d+[\-\/]\d+(?:\s+\d+:\d+(?::\d+)?(\s*(?:AM|PM))?)?|\d+:\d+(?::\d+)?(\s*(?:AM|PM))?)\s+#)/i],["pln",/^(?:(?:[a-z]|_\w)\w*|\[(?:[a-z]|_\w)\w*\])/i],["pun",/^[^\w\t\n\r \"\'\[\]\xA0\u2018\u2019\u201C\u201D\u2028\u2029]+/],["pun",/^(?:\[|\])/]]),["vb","vbs"])

+ 3
- 0
examples/graph3d/playground/prettify/lang-vhdl.js View File

@ -0,0 +1,3 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"]],[["str",/^(?:[BOX]?"(?:[^\"]|"")*"|'.')/i],["com",/^--[^\r\n]*/],["kwd",/^(?:abs|access|after|alias|all|and|architecture|array|assert|attribute|begin|block|body|buffer|bus|case|component|configuration|constant|disconnect|downto|else|elsif|end|entity|exit|file|for|function|generate|generic|group|guarded|if|impure|in|inertial|inout|is|label|library|linkage|literal|loop|map|mod|nand|new|next|nor|not|null|of|on|open|or|others|out|package|port|postponed|procedure|process|pure|range|record|register|reject|rem|report|return|rol|ror|select|severity|shared|signal|sla|sll|sra|srl|subtype|then|to|transport|type|unaffected|units|until|use|variable|wait|when|while|with|xnor|xor)(?=[^\w-]|$)/i,
null],["typ",/^(?:bit|bit_vector|character|boolean|integer|real|time|string|severity_level|positive|natural|signed|unsigned|line|text|std_u?logic(?:_vector)?)(?=[^\w-]|$)/i,null],["typ",/^\'(?:ACTIVE|ASCENDING|BASE|DELAYED|DRIVING|DRIVING_VALUE|EVENT|HIGH|IMAGE|INSTANCE_NAME|LAST_ACTIVE|LAST_EVENT|LAST_VALUE|LEFT|LEFTOF|LENGTH|LOW|PATH_NAME|POS|PRED|QUIET|RANGE|REVERSE_RANGE|RIGHT|RIGHTOF|SIMPLE_NAME|STABLE|SUCC|TRANSACTION|VAL|VALUE)(?=[^\w-]|$)/i,null],["lit",/^\d+(?:_\d+)*(?:#[\w\\.]+#(?:[+\-]?\d+(?:_\d+)*)?|(?:\.\d+(?:_\d+)*)?(?:E[+\-]?\d+(?:_\d+)*)?)/i],
["pln",/^(?:[a-z]\w*|\\[^\\]*\\)/i],["pun",/^[^\w\t\n\r \xA0\"\'][^\w\t\n\r \xA0\-\"\']*/]]),["vhdl","vhd"])

+ 2
- 0
examples/graph3d/playground/prettify/lang-wiki.js View File

@ -0,0 +1,2 @@
PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t \xA0a-gi-z0-9]+/,null,"\t \u00a0abcdefgijklmnopqrstuvwxyz0123456789"],["pun",/^[=*~\^\[\]]+/,null,"=*~^[]"]],[["lang-wiki.meta",/(?:^^|\r\n?|\n)(#[a-z]+)\b/],["lit",/^(?:[A-Z][a-z][a-z0-9]+[A-Z][a-z][a-zA-Z0-9]+)\b/],["lang-",/^\{\{\{([\s\S]+?)\}\}\}/],["lang-",/^`([^\r\n`]+)`/],["str",/^https?:\/\/[^\/?#\s]*(?:\/[^?#\s]*)?(?:\?[^#\s]*)?(?:#\S*)?/i],["pln",/^(?:\r\n|[\s\S])[^#=*~^A-Zh\{`\[\r\n]*/]]),["wiki"]);
PR.registerLangHandler(PR.createSimpleLexer([["kwd",/^#[a-z]+/i,null,"#"]],[]),["wiki.meta"])

+ 2
- 0
examples/graph3d/playground/prettify/lang-yaml.js View File

@ -0,0 +1,2 @@
PR.registerLangHandler(PR.createSimpleLexer([["pun",/^[:|>?]+/,null,":|>?"],["dec",/^%(?:YAML|TAG)[^#\r\n]+/,null,"%"],["typ",/^[&]\S+/,null,"&"],["typ",/^!\S*/,null,"!"],["str",/^"(?:[^\\"]|\\.)*(?:"|$)/,null,'"'],["str",/^'(?:[^']|'')*(?:'|$)/,null,"'"],["com",/^#[^\r\n]*/,null,"#"],["pln",/^\s+/,null," \t\r\n"]],[["dec",/^(?:---|\.\.\.)(?:[\r\n]|$)/],["pun",/^-/],["kwd",/^\w+:[ \r\n]/],["pln",/^\w+/]]),
["yaml","yml"])

+ 1
- 0
examples/graph3d/playground/prettify/prettify.css View File

@ -0,0 +1 @@
.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun{color:#660}.pln{color:#000}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec{color:#606}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}@media print{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun{color:#440}.pln{color:#000}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}

+ 33
- 0
examples/graph3d/playground/prettify/prettify.js View File

@ -0,0 +1,33 @@
window.PR_SHOULD_USE_CONTINUATION=true;window.PR_TAB_WIDTH=8;window.PR_normalizedHtml=window.PR=window.prettyPrintOne=window.prettyPrint=void 0;window._pr_isIE6=function(){var y=navigator&&navigator.userAgent&&navigator.userAgent.match(/\bMSIE ([678])\./);y=y?+y[1]:false;window._pr_isIE6=function(){return y};return y};
(function(){function y(b){return b.replace(L,"&amp;").replace(M,"&lt;").replace(N,"&gt;")}function H(b,f,i){switch(b.nodeType){case 1:var o=b.tagName.toLowerCase();f.push("<",o);var l=b.attributes,n=l.length;if(n){if(i){for(var r=[],j=n;--j>=0;)r[j]=l[j];r.sort(function(q,m){return q.name<m.name?-1:q.name===m.name?0:1});l=r}for(j=0;j<n;++j){r=l[j];r.specified&&f.push(" ",r.name.toLowerCase(),'="',r.value.replace(L,"&amp;").replace(M,"&lt;").replace(N,"&gt;").replace(X,"&quot;"),'"')}}f.push(">");
for(l=b.firstChild;l;l=l.nextSibling)H(l,f,i);if(b.firstChild||!/^(?:br|link|img)$/.test(o))f.push("</",o,">");break;case 3:case 4:f.push(y(b.nodeValue));break}}function O(b){function f(c){if(c.charAt(0)!=="\\")return c.charCodeAt(0);switch(c.charAt(1)){case "b":return 8;case "t":return 9;case "n":return 10;case "v":return 11;case "f":return 12;case "r":return 13;case "u":case "x":return parseInt(c.substring(2),16)||c.charCodeAt(1);case "0":case "1":case "2":case "3":case "4":case "5":case "6":case "7":return parseInt(c.substring(1),
8);default:return c.charCodeAt(1)}}function i(c){if(c<32)return(c<16?"\\x0":"\\x")+c.toString(16);c=String.fromCharCode(c);if(c==="\\"||c==="-"||c==="["||c==="]")c="\\"+c;return c}function o(c){var d=c.substring(1,c.length-1).match(RegExp("\\\\u[0-9A-Fa-f]{4}|\\\\x[0-9A-Fa-f]{2}|\\\\[0-3][0-7]{0,2}|\\\\[0-7]{1,2}|\\\\[\\s\\S]|-|[^-\\\\]","g"));c=[];for(var a=[],k=d[0]==="^",e=k?1:0,h=d.length;e<h;++e){var g=d[e];switch(g){case "\\B":case "\\b":case "\\D":case "\\d":case "\\S":case "\\s":case "\\W":case "\\w":c.push(g);
continue}g=f(g);var s;if(e+2<h&&"-"===d[e+1]){s=f(d[e+2]);e+=2}else s=g;a.push([g,s]);if(!(s<65||g>122)){s<65||g>90||a.push([Math.max(65,g)|32,Math.min(s,90)|32]);s<97||g>122||a.push([Math.max(97,g)&-33,Math.min(s,122)&-33])}}a.sort(function(v,w){return v[0]-w[0]||w[1]-v[1]});d=[];g=[NaN,NaN];for(e=0;e<a.length;++e){h=a[e];if(h[0]<=g[1]+1)g[1]=Math.max(g[1],h[1]);else d.push(g=h)}a=["["];k&&a.push("^");a.push.apply(a,c);for(e=0;e<d.length;++e){h=d[e];a.push(i(h[0]));if(h[1]>h[0]){h[1]+1>h[0]&&a.push("-");
a.push(i(h[1]))}}a.push("]");return a.join("")}function l(c){for(var d=c.source.match(RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)","g")),a=d.length,k=[],e=0,h=0;e<a;++e){var g=d[e];if(g==="(")++h;else if("\\"===g.charAt(0))if((g=+g.substring(1))&&g<=h)k[g]=-1}for(e=1;e<k.length;++e)if(-1===k[e])k[e]=++n;for(h=e=0;e<a;++e){g=d[e];if(g==="("){++h;if(k[h]===undefined)d[e]="(?:"}else if("\\"===
g.charAt(0))if((g=+g.substring(1))&&g<=h)d[e]="\\"+k[h]}for(h=e=0;e<a;++e)if("^"===d[e]&&"^"!==d[e+1])d[e]="";if(c.ignoreCase&&r)for(e=0;e<a;++e){g=d[e];c=g.charAt(0);if(g.length>=2&&c==="[")d[e]=o(g);else if(c!=="\\")d[e]=g.replace(/[a-zA-Z]/g,function(s){s=s.charCodeAt(0);return"["+String.fromCharCode(s&-33,s|32)+"]"})}return d.join("")}for(var n=0,r=false,j=false,q=0,m=b.length;q<m;++q){var t=b[q];if(t.ignoreCase)j=true;else if(/[a-z]/i.test(t.source.replace(/\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi,
""))){r=true;j=false;break}}var p=[];q=0;for(m=b.length;q<m;++q){t=b[q];if(t.global||t.multiline)throw Error(""+t);p.push("(?:"+l(t)+")")}return RegExp(p.join("|"),j?"gi":"g")}function Y(b){var f=0;return function(i){for(var o=null,l=0,n=0,r=i.length;n<r;++n)switch(i.charAt(n)){case "\t":o||(o=[]);o.push(i.substring(l,n));l=b-f%b;for(f+=l;l>=0;l-=16)o.push(" ".substring(0,l));l=n+1;break;case "\n":f=0;break;default:++f}if(!o)return i;o.push(i.substring(l));return o.join("")}}function I(b,
f,i,o){if(f){b={source:f,c:b};i(b);o.push.apply(o,b.d)}}function B(b,f){var i={},o;(function(){for(var r=b.concat(f),j=[],q={},m=0,t=r.length;m<t;++m){var p=r[m],c=p[3];if(c)for(var d=c.length;--d>=0;)i[c.charAt(d)]=p;p=p[1];c=""+p;if(!q.hasOwnProperty(c)){j.push(p);q[c]=null}}j.push(/[\0-\uffff]/);o=O(j)})();var l=f.length;function n(r){for(var j=r.c,q=[j,z],m=0,t=r.source.match(o)||[],p={},c=0,d=t.length;c<d;++c){var a=t[c],k=p[a],e=void 0,h;if(typeof k==="string")h=false;else{var g=i[a.charAt(0)];
if(g){e=a.match(g[1]);k=g[0]}else{for(h=0;h<l;++h){g=f[h];if(e=a.match(g[1])){k=g[0];break}}e||(k=z)}if((h=k.length>=5&&"lang-"===k.substring(0,5))&&!(e&&typeof e[1]==="string")){h=false;k=P}h||(p[a]=k)}g=m;m+=a.length;if(h){h=e[1];var s=a.indexOf(h),v=s+h.length;if(e[2]){v=a.length-e[2].length;s=v-h.length}k=k.substring(5);I(j+g,a.substring(0,s),n,q);I(j+g+s,h,Q(k,h),q);I(j+g+v,a.substring(v),n,q)}else q.push(j+g,k)}r.d=q}return n}function x(b){var f=[],i=[];if(b.tripleQuotedStrings)f.push([A,/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
null,"'\""]);else b.multiLineStrings?f.push([A,/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"]):f.push([A,/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"]);b.verbatimStrings&&i.push([A,/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null]);if(b.hashComments)if(b.cStyleComments){f.push([C,/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,null,"#"]);i.push([A,/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
null])}else f.push([C,/^#[^\r\n]*/,null,"#"]);if(b.cStyleComments){i.push([C,/^\/\/[^\r\n]*/,null]);i.push([C,/^\/\*[\s\S]*?(?:\*\/|$)/,null])}b.regexLiterals&&i.push(["lang-regex",RegExp("^"+Z+"(/(?=[^/*])(?:[^/\\x5B\\x5C]|\\x5C[\\s\\S]|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+/)")]);b=b.keywords.replace(/^\s+|\s+$/g,"");b.length&&i.push([R,RegExp("^(?:"+b.replace(/\s+/g,"|")+")\\b"),null]);f.push([z,/^\s+/,null," \r\n\t\u00a0"]);i.push([J,/^@[a-z_$][a-z_$@0-9]*/i,null],[S,/^@?[A-Z]+[a-z][A-Za-z_$@0-9]*/,
null],[z,/^[a-z_$][a-z_$@0-9]*/i,null],[J,/^(?:0x[a-f0-9]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+\-]?\d+)?)[a-z]*/i,null,"0123456789"],[E,/^.[^\s\w\.$@\'\"\`\/\#]*/,null]);return B(f,i)}function $(b){function f(D){if(D>r){if(j&&j!==q){n.push("</span>");j=null}if(!j&&q){j=q;n.push('<span class="',j,'">')}var T=y(p(i.substring(r,D))).replace(e?d:c,"$1&#160;");e=k.test(T);n.push(T.replace(a,s));r=D}}var i=b.source,o=b.g,l=b.d,n=[],r=0,j=null,q=null,m=0,t=0,p=Y(window.PR_TAB_WIDTH),c=/([\r\n ]) /g,
d=/(^| ) /gm,a=/\r\n?|\n/g,k=/[ \r\n]$/,e=true,h=window._pr_isIE6();h=h?b.b.tagName==="PRE"?h===6?"&#160;\r\n":h===7?"&#160;<br>\r":"&#160;\r":"&#160;<br />":"<br />";var g=b.b.className.match(/\blinenums\b(?::(\d+))?/),s;if(g){for(var v=[],w=0;w<10;++w)v[w]=h+'</li><li class="L'+w+'">';var F=g[1]&&g[1].length?g[1]-1:0;n.push('<ol class="linenums"><li class="L',F%10,'"');F&&n.push(' value="',F+1,'"');n.push(">");s=function(){var D=v[++F%10];return j?"</span>"+D+'<span class="'+j+'">':D}}else s=h;
for(;;)if(m<o.length?t<l.length?o[m]<=l[t]:true:false){f(o[m]);if(j){n.push("</span>");j=null}n.push(o[m+1]);m+=2}else if(t<l.length){f(l[t]);q=l[t+1];t+=2}else break;f(i.length);j&&n.push("</span>");g&&n.push("</li></ol>");b.a=n.join("")}function u(b,f){for(var i=f.length;--i>=0;){var o=f[i];if(G.hasOwnProperty(o))"console"in window&&console.warn("cannot override language handler %s",o);else G[o]=b}}function Q(b,f){b&&G.hasOwnProperty(b)||(b=/^\s*</.test(f)?"default-markup":"default-code");return G[b]}
function U(b){var f=b.f,i=b.e;b.a=f;try{var o,l=f.match(aa);f=[];var n=0,r=[];if(l)for(var j=0,q=l.length;j<q;++j){var m=l[j];if(m.length>1&&m.charAt(0)==="<"){if(!ba.test(m))if(ca.test(m)){f.push(m.substring(9,m.length-3));n+=m.length-12}else if(da.test(m)){f.push("\n");++n}else if(m.indexOf(V)>=0&&m.replace(/\s(\w+)\s*=\s*(?:\"([^\"]*)\"|'([^\']*)'|(\S+))/g,' $1="$2$3$4"').match(/[cC][lL][aA][sS][sS]=\"[^\"]*\bnocode\b/)){var t=m.match(W)[2],p=1,c;c=j+1;a:for(;c<q;++c){var d=l[c].match(W);if(d&&
d[2]===t)if(d[1]==="/"){if(--p===0)break a}else++p}if(c<q){r.push(n,l.slice(j,c+1).join(""));j=c}else r.push(n,m)}else r.push(n,m)}else{var a;p=m;var k=p.indexOf("&");if(k<0)a=p;else{for(--k;(k=p.indexOf("&#",k+1))>=0;){var e=p.indexOf(";",k);if(e>=0){var h=p.substring(k+3,e),g=10;if(h&&h.charAt(0)==="x"){h=h.substring(1);g=16}var s=parseInt(h,g);isNaN(s)||(p=p.substring(0,k)+String.fromCharCode(s)+p.substring(e+1))}}a=p.replace(ea,"<").replace(fa,">").replace(ga,"'").replace(ha,'"').replace(ia," ").replace(ja,
"&")}f.push(a);n+=a.length}}o={source:f.join(""),h:r};var v=o.source;b.source=v;b.c=0;b.g=o.h;Q(i,v)(b);$(b)}catch(w){if("console"in window)console.log(w&&w.stack?w.stack:w)}}var A="str",R="kwd",C="com",S="typ",J="lit",E="pun",z="pln",P="src",V="nocode",Z=function(){for(var b=["!","!=","!==","#","%","%=","&","&&","&&=","&=","(","*","*=","+=",",","-=","->","/","/=",":","::",";","<","<<","<<=","<=","=","==","===",">",">=",">>",">>=",">>>",">>>=","?","@","[","^","^=","^^","^^=","{","|","|=","||","||=",
"~","break","case","continue","delete","do","else","finally","instanceof","return","throw","try","typeof"],f="(?:^^|[+-]",i=0;i<b.length;++i)f+="|"+b[i].replace(/([^=<>:&a-z])/g,"\\$1");f+=")\\s*";return f}(),L=/&/g,M=/</g,N=/>/g,X=/\"/g,ea=/&lt;/g,fa=/&gt;/g,ga=/&apos;/g,ha=/&quot;/g,ja=/&amp;/g,ia=/&nbsp;/g,ka=/[\r\n]/g,K=null,aa=RegExp("[^<]+|<!--[\\s\\S]*?--\>|<!\\[CDATA\\[[\\s\\S]*?\\]\\]>|</?[a-zA-Z](?:[^>\"']|'[^']*'|\"[^\"]*\")*>|<","g"),ba=/^<\!--/,ca=/^<!\[CDATA\[/,da=/^<br\b/i,W=/^<(\/?)([a-zA-Z][a-zA-Z0-9]*)/,
la=x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof alignof align_union asm axiom bool concept concept_map const_cast constexpr decltype dynamic_cast explicit export friend inline late_check mutable namespace nullptr reinterpret_cast static_assert static_cast template typeid typename using virtual wchar_t where break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient as base by checked decimal delegate descending event fixed foreach from group implicit in interface internal into is lock object out override orderby params partial readonly ref sbyte sealed stackalloc string select uint ulong unchecked unsafe ushort var break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof debugger eval export function get null set undefined var with Infinity NaN caller delete die do dump elsif eval exit foreach for goto if import last local my next no our print package redo require sub undef unless until use wantarray while BEGIN END break continue do else for if return while and as assert class def del elif except exec finally from global import in is lambda nonlocal not or pass print raise try with yield False True None break continue do else for if return while alias and begin case class def defined elsif end ensure false in module next nil not or redo rescue retry self super then true undef unless until when yield BEGIN END break continue do else for if return while case done elif esac eval fi function in local set then until ",
hashComments:true,cStyleComments:true,multiLineStrings:true,regexLiterals:true}),G={};u(la,["default-code"]);u(B([],[[z,/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],[C,/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],[E,/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup",
"htm","html","mxml","xhtml","xml","xsl"]);u(B([[z,/^[\s]+/,null," \t\r\n"],["atv",/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],[E,/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],
["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);u(B([],[["atv",/^[\s\S]+/]]),["uq.val"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof alignof align_union asm axiom bool concept concept_map const_cast constexpr decltype dynamic_cast explicit export friend inline late_check mutable namespace nullptr reinterpret_cast static_assert static_cast template typeid typename using virtual wchar_t where ",
hashComments:true,cStyleComments:true}),["c","cc","cpp","cxx","cyc","m"]);u(x({keywords:"null true false"}),["json"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient as base by checked decimal delegate descending event fixed foreach from group implicit in interface internal into is lock object out override orderby params partial readonly ref sbyte sealed stackalloc string select uint ulong unchecked unsafe ushort var ",
hashComments:true,cStyleComments:true,verbatimStrings:true}),["cs"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient ",
cStyleComments:true}),["java"]);u(x({keywords:"break continue do else for if return while case done elif esac eval fi function in local set then until ",hashComments:true,multiLineStrings:true}),["bsh","csh","sh"]);u(x({keywords:"break continue do else for if return while and as assert class def del elif except exec finally from global import in is lambda nonlocal not or pass print raise try with yield False True None ",hashComments:true,multiLineStrings:true,tripleQuotedStrings:true}),["cv","py"]);
u(x({keywords:"caller delete die do dump elsif eval exit foreach for goto if import last local my next no our print package redo require sub undef unless until use wantarray while BEGIN END ",hashComments:true,multiLineStrings:true,regexLiterals:true}),["perl","pl","pm"]);u(x({keywords:"break continue do else for if return while alias and begin case class def defined elsif end ensure false in module next nil not or redo rescue retry self super then true undef unless until when yield BEGIN END ",hashComments:true,
multiLineStrings:true,regexLiterals:true}),["rb"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof debugger eval export function get null set undefined var with Infinity NaN ",cStyleComments:true,regexLiterals:true}),["js"]);u(B([],[[A,/^[\s\S]+/]]),
["regex"]);window.PR_normalizedHtml=H;window.prettyPrintOne=function(b,f){var i={f:b,e:f};U(i);return i.a};window.prettyPrint=function(b){function f(){for(var t=window.PR_SHOULD_USE_CONTINUATION?j.now()+250:Infinity;q<o.length&&j.now()<t;q++){var p=o[q];if(p.className&&p.className.indexOf("prettyprint")>=0){var c=p.className.match(/\blang-(\w+)\b/);if(c)c=c[1];for(var d=false,a=p.parentNode;a;a=a.parentNode)if((a.tagName==="pre"||a.tagName==="code"||a.tagName==="xmp")&&a.className&&a.className.indexOf("prettyprint")>=
0){d=true;break}if(!d){a=p;if(null===K){d=document.createElement("PRE");d.appendChild(document.createTextNode('<!DOCTYPE foo PUBLIC "foo bar">\n<foo />'));K=!/</.test(d.innerHTML)}if(K){d=a.innerHTML;if("XMP"===a.tagName)d=y(d);else{a=a;if("PRE"===a.tagName)a=true;else if(ka.test(d)){var k="";if(a.currentStyle)k=a.currentStyle.whiteSpace;else if(window.getComputedStyle)k=window.getComputedStyle(a,null).whiteSpace;a=!k||k==="pre"}else a=true;a||(d=d.replace(/(<br\s*\/?>)[\r\n]+/g,"$1").replace(/(?:[\r\n]+[ \t]*)+/g,
" "))}d=d}else{d=[];for(a=a.firstChild;a;a=a.nextSibling)H(a,d);d=d.join("")}d=d.replace(/(?:\r\n?|\n)$/,"");m={f:d,e:c,b:p};U(m);if(p=m.a){c=m.b;if("XMP"===c.tagName){d=document.createElement("PRE");for(a=0;a<c.attributes.length;++a){k=c.attributes[a];if(k.specified)if(k.name.toLowerCase()==="class")d.className=k.value;else d.setAttribute(k.name,k.value)}d.innerHTML=p;c.parentNode.replaceChild(d,c)}else c.innerHTML=p}}}}if(q<o.length)setTimeout(f,250);else b&&b()}for(var i=[document.getElementsByTagName("pre"),
document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],o=[],l=0;l<i.length;++l)for(var n=0,r=i[l].length;n<r;++n)o.push(i[l][n]);i=null;var j=Date;j.now||(j={now:function(){return(new Date).getTime()}});var q=0,m;f()};window.PR={combinePrefixPatterns:O,createSimpleLexer:B,registerLangHandler:u,sourceDecorator:x,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:C,PR_DECLARATION:"dec",PR_KEYWORD:R,PR_LITERAL:J,PR_NOCODE:V,PR_PLAIN:z,PR_PUNCTUATION:E,PR_SOURCE:P,PR_STRING:A,
PR_TAG:"tag",PR_TYPE:S}})()

+ 1
- 0
examples/index.html View File

@ -13,6 +13,7 @@
<h1>vis.js examples</h1>
<p><a href="graph">graph</a></p>
<p><a href="graph3d">graph3d</a></p>
<p><a href="timeline">timeline</a></p>
</div>

+ 2
- 2
index.html View File

@ -48,7 +48,7 @@
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.
The library consists of the components DataSet, Timeline, Graph, and Graph3d.
</p>
<p>
The vis.js library is developed by <a href="http://almende.com" target="_blank">Almende B.V</a>,
@ -74,7 +74,7 @@ bower install vis
<h3>download</h3>
<a href="download/vis.zip">Click here to download vis.js</a>
(version <span class="version">1.0.2</span>)
(version <span class="version">1.1.0</span>)
<h2 id="example">Example</h2>

Write Preview
Loading…
Cancel
Save