Squashed 'lib/vis/' content from commit 1d029ca

git-subtree-dir: lib/vis
git-subtree-split: 1d029cab7b527f3b292e95d550efbf784dac8699

.gitignore

@@ -0,0 +1,13 @@
+.idea
+.c9
+*.iml
+node_modules
+.project
+.settings/.jsdtscope
+.settings/org.eclipse.wst.jsdt.ui.superType.container
+.settings/org.eclipse.wst.jsdt.ui.superType.name
+npm-debug.log
+examples/graph/24_hierarchical_layout_userdefined2.html
+
+# vim temporary files
+.*.sw[op]

.npmignore

@@ -0,0 +1,9 @@
+misc
+node_modules
+test
+tools
+.idea
+bower.json
+Jakefile.js
+.npmignore
+.gitignore

CONTRIBUTING.md

@@ -0,0 +1,16 @@
+## Contributing
+
+Contributions to the vis.js library are very welcome! We can't do this alone.
+You can contribute in different ways: spread the word, report bugs, come up with
+ideas and suggestions, and contribute to the code.
+
+There are a few preferences regarding code contributions:
+
+- vis.js follows the node.js code style as described
+  [here](http://nodeguide.com/style.html).
+- When implementing new features, please update the documentation accordingly.
+- Send pull requests to the `develop` branch, not the `master` branch.
+- Only commit changes done in the source files under `lib`, not to the builds
+  which are located in the folder `dist`.
+
+Thanks!

HISTORY.md

@@ -0,0 +1,917 @@
+# vis.js history
+http://visjs.org
+
+
+## 2015-03-05, version 3.11.0
+
+### Network
+
+- (added gradient coloring for lines, but set for release in 4.0 due to required refactoring of options)
+- Fixed bug where a network that has frozen physics would resume redrawing after setData, setOptions etc.
+- Added option to bypass default groups. If more groups are specified in the nodes than there are in the groups, loop over supplied groups instead of default.
+- Added two new static smooth curves modes: curveCW and curve CCW.
+- Added request redraw for certain internal processes to reduce number of draw calls (performance improvements!).
+- Added pull request for usage of Icons. Thanks @Dude9177!
+- Allow hierarchical view to be set in setOptions.
+- Fixed manipulation bar for mobile.
+- Fixed #670: Bug when updating data in a DataSet, when Network is connected to the DataSet via a DataView.
+- Fixed #688: Added a css class to be able to distinguish buttons "Edit node"
+  and "Edit edge".
+
+### Timeline
+
+- Implemented orientation option `'both'`, displaying a time axis both on top
+  and bottom (#665).
+- Implemented creating new range items by dragging in an empty space with the
+  ctrl key down.
+- Implemented configuration option `order: function` to define a custom ordering
+  for the items (see #538, #234).
+- Implemented events `click`, `doubleClick`, and `contextMenu`.
+- Implemented method `getEventProperties(event)`.
+- Fixed not property initializing with a DataView for groups.
+- Merged add custom timebar functionality, thanks @aytech!
+- Fixed #664: end of item not restored when canceling a move event.
+- Fixed #609: reduce the left/right dragarea when an item range is very small,
+  so you can still move it as a whole.
+- Fixed #676: misalignment of background items when using subgroups and the
+  group label's height is larger than the contents.
+
+### Graph2d
+
+- Implemented events `click`, `doubleClick`, and `contextMenu`.
+- Implemented method `getEventProperties(event)`.
+
+### DataSet/DataView
+
+- Implemented support for mapping field names. Thanks @spatialillusions.
+- Fixed #670: DataView not passing a data property on update events (see #670)
+
+
+
+## 2015-02-11, version 3.10.0
+
+### Network
+
+- Added option bindToWindow (default true) to choose whether the keyboard binds are global or to the network div.
+- Improved images handling so broken images are shown on all references of images that are broken.
+- Added getConnectedNodes method.
+- Added fontSizeMin, fontSizeMax, fontSizeMaxVisible, scaleFontWithValue, fontDrawThreshold to Nodes.
+- Added fade in of labels (on nodes) near the fontDrawThreshold.
+- Added nodes option to zoomExtent to zoom in on specific set of nodes.
+- Added stabilizationIterationsDone event which fires at the end of the internal stabilization run. Does not imply that the network is stabilized.
+- Added freezeSimulation method.
+- Added clusterByZoom option.
+- Added class name 'network-tooltip' to the tooltip, allowing custom styling.
+- Fixed bug when redrawing was not right on zoomed-out browsers.
+- Added opacity option to edges. Opacity is only used for the unselected state.
+- Fixed bug where selections from removed data elements persisted.
+
+### Timeline
+
+- `Timeline.redraw()` now also recalculates the size of items.
+- Implemented option `snap: function` to customize snapping to nice dates
+  when dragging items.
+- Implemented option `timeAxis: {scale: string, step: number}` to set a
+  fixed scale.
+- Fixed width of range items not always being maintained when moving due to
+  snapping to nice dates.
+- Fixed not being able to drag items to an other group on mobile devices.
+- Fixed `setWindow` not working when applying an interval larger than the
+  configured `zoomMax`.
+
+### DataSet/DataView
+
+- Added property `length` holding the total number of items to the `DataSet`
+  and `DataView`.
+- Added a method `refresh()` to the `DataView`, to update filter results.
+- Fixed a bug in the `DataSet` returning an empty object instead of `null` when
+  no item was found when using both a filter and specifying fields.
+
+
+## 2015-01-16, version 3.9.1
+
+### General
+
+- Fixed wrong distribution file deployed on the website and the downloadable
+  zip file.
+
+### Network
+
+- Fixed bug where opening a cluster with smoothCurves off caused one child to go crazy.
+- Fixed bug where zoomExtent does not work as expected.
+- Fixed nodes color data being overridden when having a group and a dataset update query.
+- Decoupled animation from physics simulation.
+- Fixed scroll being blocked if zoomable is false.
+
+
+## 2015-01-16, version 3.9.0
+
+### Network
+
+- Reverted change in image class, fixed bug #552
+- Improved (not neccesarily fixed) the fontFill offset between different browsers. #365
+- Fixed dashed lines on firefox on Unix systems
+- Altered the Manipulation Mixin to be succesfully destroyed from memory when calling destroy();
+- Improved drawing of arrowheads on smooth curves. #349
+- Caught case where click originated on external DOM element and drag progressed to vis.
+- Added label stroke support to Nodes, Edges & Groups as per-object or global settings. Thank you @klmdb!
+- Reverted patch that made nodes return to 'default' setting if no group was assigned to fix issue #561. The correct way to 'remove' a group from a node is to assign it a different one.
+- Made the node/edge selected by the popup system the same as selected by the click-to-select system. Thank you @pavlos256!
+- Improved edit edge control nodes positions, altered style a little.
+- Fixed issue #564 by resetting state to initial when no callback is performed in the return function.
+- Added condition to Repulsion similar to BarnesHut to ensure nodes do not overlap.
+- Added labelAlignment option to edges. Thanks @T-rav!
+- Close active sessions in dataManipulation when calling setData().
+- Fixed alignment issue with edgelabels
+
+### Timeline
+
+- Added byUser flag to options of the rangechange and rangechanged event.
+
+
+## 2015-01-09, version 3.8.0
+
+### General
+
+- Updated to moment.js v2.9.0
+
+### Network
+
+- Fixed flipping of hierarchical network on update when using RL and DU.
+- Added zoomExtentOnStabilize option to network.
+- Improved destroy function, added them to the examples.
+- Nodes now have bounding boxes that are used for zoomExtent.
+- Made physics more stable (albeit a little slower).
+- Added a check so only one 'activator' overlay is created on clickToUse.
+- Made global color options for edges overrule the inheritColors.
+- Improved cleaning up of the physics configuration on destroy and in options.
+- Made nodes who lost their group revert back to default color.
+- Changed group behaviour, groups now extend the options, not replace. This allows partial defines of color.
+- Fixed bug where box shaped nodes did not use hover color.
+- Fixed Locales docs.
+- When hovering over a node that does not have a title, the title of one of the connected edges that HAS a title is no longer shown.
+- Fixed error in repulsion physics model.
+- Improved physics handling for smoother network simulation.
+- Fixed infinite loop when an image can not be found and no brokenImage is provided.
+- Added getBoundingBox method.
+- Community fix for SVG images in IE11, thanks @dponch!
+- Fixed repeating stabilized event when the network is already stabilized.
+- Added circularImages, thanks for the contribution @brendon1982!
+- Stopped infinite loop when brokenImage is also not available.
+- Changed util color functions so they don't need eval. Thanks @naskooskov!
+
+### Graph2d
+
+- Fixed round-off errors of zero on the y-axis.
+- added show major/minor lines options to dataAxis.
+- Fixed adapting to width and height changes.
+- Added a check so only one 'activator' overlay is created on clickToUse.
+- DataAxis width option now draws correctly.
+
+### Timeline
+
+- Implemented support for styling of the vertical grid.
+- Support for custom date formatting of the labels on the time axis.
+- added show major/minor lines options to timeline.
+- Added a check so only one 'activator' overlay is created on clickToUse.
+
+### Graph3d
+
+- Fixed mouse coordinates for tooltips.
+
+
+## 2014-12-09, version 3.7.2
+
+### Timeline
+
+- Fixed zooming issue on mobile devices.
+
+### Graph2D
+
+- Fixed infinite loop when clearing DataSet
+
+### Network
+
+- Sidestepped double touch event from hammer (ugly.. but functional) causing
+  strange behaviour in manipulation mode
+- Better cleanup after reconnecting edges in manipulation mode
+- Fixed recursion error with smooth edges that are connected to non-existent nodes
+- Added destroy method. 
+
+## 2014-11-28, version 3.7.1
+
+### Timeline
+
+- Implemented selection of a range of items using Shift+Click.
+- Fixed content in range items may overflow range after zoom.
+- Fixed onAdd/onUpdate callbacks when using a DataView (thanks @motzel).
+- Fixed configuring either `start` or `end`.
+- Fixed Timeline and Graph2d getting stuck in an infinite loop in some
+  circumstances.
+- Fixed background items being selectable and editable when a height is set.
+
+### Graph2D
+
+- Added `alignZeros` option to dataAxis with default value true.
+- Fixed bug with points drawn on bargraphs
+- Fixed docs
+- Fixed height increase on scrolling if only `graphHeight` is defined.
+
+### Network
+
+- dragEnd event now does not give the selected nodes if only the viewport has been dragged #453
+- merged high DPI fix by @crubier, thanks!
+
+
+## 2014-11-14, version 3.7.0
+
+### Graph2D
+
+- Added points style for scatterplots and pointclouds.
+- Modularized the Graph2D draw styles.
+- Added a finishedRedraw event.
+
+### Network
+
+- Added pointer properties to the click and the doubleClick events containing the XY coordinates in DOM and canvas space.
+- Removed IDs from navigation so multiple networks can be shown on the same page. (#438)
+
+
+### Timeline
+
+- Added a finishedRedraw event.
+- Fixed the disappearing item bug.
+- Fixed keycharm issue.
+
+## 2014-11-07, version 3.6.4
+
+### General
+
+- Removed mousetrap due to Apache license, created keycharm and implemented it with vis.
+
+### Timeline
+
+- Fixed height of background items when having a fixed or max height defined.
+- Fixed only one item being dragged when multiple items are selected.
+- Optimised a serious slowdown on performance since hidden dates.
+
+### Network
+
+- Fixed onRelease with navigation option.
+- Fixed arrow heads not being colored.
+
+### Graph2D
+
+- Fixed cleaning up of groups.
+- Throw error message when items are added before groups.
+- Made graphHeight automatic if height is defined AND if graphHeight is smaller than the center panel when height is defined as well.
+- Added new verticalDrag event for internal use, allowing the vertical scrolling of the grid lines on drag.
+- Fixed moving legend when postioned on the bottom and vertical dragging.
+- Optimised a serious slowdown on performance since hidden dates.
+
+- Accepted a large pull request from @cdjackson adding the following features (thank you!): 
+- Titles on the DataAxis to explain what units you are using.
+- A style field for groups and datapoints so you can dynamically change styles.
+- A precision option to manually set the amount of decimals.
+- Two new examples showing the new features.
+
+
+## 2014-10-28, version 3.6.3
+
+### Timeline
+
+- Fixed background items not always be cleared when removing them.
+- Fixed visible items not always be displayed.
+- Performance improvements when doing a lot of changes at once in a DataSet.
+
+### Network
+
+- Fixed dashed and arrow lines not using inheritColor.
+
+### DataSet
+
+- Support for queueing of changes, and flushing them at once.
+- Implemented `DataSet.setOptions`. Only applicable for the `queue` options.
+
+
+## 2014-10-24, version 3.6.2
+
+- Vis.js is now dual licensed under both Apache 2.0 and MIT.
+
+
+## 2014-10-22, version 3.6.1
+
+### Timeline
+
+- Fixed uneven stepsized with hidden dates.
+- Fixed multiple bugs with regards to hidden dates.
+- Fixed subgroups and added subgroup sorting. Subgroup labels will be in future releases.
+
+
+## 2014-10-21, version 3.6.0
+
+### Network
+
+- Title of nodes and edges can now be an HTML element too.
+- Renamed storePosition to storePositions. Added deprication message and old name still works.
+- Worked around hammer.js bug with multiple release listeners.
+- Improved cleaning up after manipulation toolbar.
+- Added getPositions() method to get the position of all nodes or some of them if specific Ids are supplied.
+- Added getCenterCoordinates() method to get the x and y position in canvas space of the center of the view.
+- Fixed node label becoming undefined.
+- Fixed cluster fontsize scaling.
+- Fixed cluster sector scaling.
+- Added oldHeight and oldWidth to resize event.
+
+### Timeline
+
+- Implemented field `style` for both items and groups, to set a custom style for
+  individual items.
+- Fixed height of BackgroundItems not being 100% when timeline has a fixed height.
+- Fixed width of BackgroundItems not being reduced to 0 when zooming out.
+- Fixed onclick events in items not working.
+- Added hiddenDates to hide specific times and/or days in the timeline.
+
+### DataSet
+
+- Event listeners of `update` now receive an extra property `data`, 
+  containing the changed fields of the changed items.
+
+### Graph2d
+
+- Fixed height of legend when there are many items showing.
+
+### Graph3d
+
+- Implemented options `xValueLabel`, `yValueLabel` and `zValueLabel` for custom labels along
+  the x, y, z axis. Thanks @fabriziofortino.
+
+
+## 2014-09-16, version 3.5.0
+
+### Network
+
+- Fixed nodes not always being unfixed when using allowedToMove.
+- Added dragStart and dragEnd events.
+- Added edge selection on edge labels.
+
+### Graph2d
+
+- Fixed dataAxis not showing large numbers correctly.
+
+
+## 2014-09-12, version 3.4.2
+
+### Network
+
+- Changed timings for zoomExtent animation.
+- Fixed possible cause of freezing graph when animating.
+- Added locked to focusOnNode and releaseNode().
+- Fixed minor bug in positioning of fontFill of nodes with certain shapes.
+- Added startStabilization event.
+
+
+## 2014-09-11, version 3.4.1
+
+### Network
+
+- Fix for introduced bug on zoomExtent navigation button.
+- Added animation to zoomExtent navigation button.
+- Improved cleaning of Hammer.js bindings.
+
+### Timeline
+
+- Fixed a bug in IE freezing when margin.item and margin.axis where both 0.
+
+
+## 2014-09-10, version 3.4.0
+
+### Graph2d
+
+- Fixed moment.js url in localization example.
+
+### Network
+
+- Fixed some positioning issues with the close button of the manipulation menu.
+- Added fontFill to Nodes as it is in Edges.
+- Implemented support for broken image fallback. Thanks @sfairgrieve.
+- Added multiline labels to edges as they are implemented in nodes. Updated 
+  multiline example to show this.
+- Added animation and camera controls by the method .moveTo()
+- Added new event that fires when the animation is finished.
+- Added new example showing the new features of animation.
+- Added getScale() method.
+
+### Timeline
+
+- Implemented support for templates.
+- Implemented a new item type: `'background'`. This can be used to mark periods
+  with a background color and label.
+- Implemented support for attaching HTML attributes to items. Thanks @dturkenk.
+- Fixed moment.js url in localization example.
+- Fixed `className` of groups not being updated when changed.
+- Fixed the `id` field of a new item not correctly generated.
+- Fixed newly added item ignored when returning an other object instance.
+- Fixed option `autoResize` not working on IE in case of changing visibility
+  of the Timeline container element.
+- Fixed an overflow issue with the dots of BoxItems when using groups.
+- Fixed a horizontal 1-pixel offset in the items (border width wasn't taken into 
+  account).
+- Renamed internal items from `ItemBox`, `ItemRange`, and `ItemPoint` to
+  respectively `BoxItem`, `RangeItem`, and `PointItem`.
+- Fixed an error thrown when calling `destroy()`.
+
+
+## 2014-08-29, version 3.3.0
+
+### Timeline
+
+- Added localization support.
+- Implemented option `clickToUse`.
+- Implemented function `focus(id)` to center a specific item (or multiple items)
+  on screen.
+- Implemented an option `focus` for `setSelection(ids, options)`, to immediately
+  focus selected nodes.
+- Implemented function `moveTo(time, options)`.
+- Implemented animated range change for functions `fit`, `focus`, `setSelection`,
+  and `setWindow`.
+- Implemented functions `setCurrentTime(date)` and `getCurrentTime()`.
+- Implemented a new callback function `onMoving(item, callback)`.
+- Implemented support for option `align` for range items.
+- Fixed the `change` event sometimes being fired twice on IE10.
+- Fixed canceling moving an item to another group did not move the item
+  back to the original group.
+- Fixed the `change` event sometimes being fired twice on IE10.
+- Fixed canceling moving an item to another group did not move the item
+  back to the original group.
+
+### Network
+
+- A fix in reading group properties for a node.
+- Fixed physics solving stopping when a support node was not moving.
+- Implemented localization support.
+- Implemented option `clickToUse`.
+- Improved the `stabilized` event, it's now firing after every stabilization
+  with iteration count as parameter.
+- Fixed page scroll event not being blocked when moving around in Network
+  using arrow keys.
+- Fixed an initial rendering before the graph has been stabilized.
+- Fixed bug where loading hierarchical data after initialization crashed network.
+- Added different layout method to the hierarchical system based on the direction of the edges.
+
+### Graph2d
+
+- Implemented option `handleOverlap` to support overlap, sideBySide and stack.
+- Implemented two examples showing the `handleOverlap` functionality.
+- Implemented `customRange` for the Y axis and an example showing how it works.
+- Implemented localization support.
+- Implemented option `clickToUse`.
+- Implemented functions `setCurrentTime(date)` and `getCurrentTime()`.
+- Implemented function `moveTo(time, options)`.
+- Fixed bugs.
+- Added groups.visibility functionality and an example showing how it works.
+
+
+## 2014-08-14, version 3.2.0
+
+### General
+
+- Refactored Timeline and Graph2d to use the same core.
+
+### Graph2d
+
+- Added `visible` property to the groups.
+- Added `getLegend()` method.
+- Added `isGroupVisible()` method.
+- Fixed empty group bug.
+- Added `fit()` and `getItemRange()` methods.
+
+### Timeline
+
+- Fixed items in groups sometimes being displayed but not positioned correctly.
+- Fixed a group "null" being displayed in IE when not using groups.
+
+### Network
+
+- Fixed mass = 0 for nodes.
+- Revamped the options system. You can globally set options (network.setOptions) to update settings of nodes and edges that have not been specifically defined by the individual nodes and edges.
+- Disabled inheritColor when color information is set on an edge.
+- Tweaked examples.
+- Removed the global length property for edges. The edgelength is part of the physics system. Therefore, you have to change the springLength of the physics system to change the edge length. Individual edge lengths can still be defined.
+- Removed global edge length definition form examples.
+- Removed onclick and onrelease for navigation and switched to Hammer.js (fixing touchscreen interaction with navigation).
+- Fixed error on adding an edge without having created the nodes it should be connected to (in the case of dynamic smooth curves).
+
+
+## 2014-07-22, version 3.1.0
+
+### General
+
+- Refactored the code to commonjs modules, which are browserifyable. This allows
+  to create custom builds.
+
+### Timeline
+
+- Implemented function `getVisibleItems()`, which returns the items visible
+  in the current window.
+- Added options `margin.item.horizontal` and  `margin.item.vertical`, which
+  allows to specify different margins horizontally/vertically.
+- Removed check for number of arguments in callbacks `onAdd`, `onUpdate`, 
+  `onRemove`, and `onMove`.
+- Fixed items in groups sometimes being displayed but not positioned correctly.
+- Fixed range where the `end` of the first is equal to the `start` of the second 
+  sometimes being stacked instead of put besides each other when `item.margin=0`
+  due to round-off errors.
+
+### Network (formerly named Graph)
+
+- Expanded smoothCurves options for improved support for large clusters.
+- Added multiple types of smoothCurve drawing for greatly improved performance.
+- Option for inherited edge colors from connected nodes.
+- Option to disable the drawing of nodes or edges on drag.
+- Fixed support nodes not being cleaned up if edges are removed.
+- Improved edge selection detection for long smooth curves.
+- Fixed dot radius bug.
+- Updated max velocity of nodes to three times it's original value.
+- Made "stabilized" event fire every time the network stabilizes.
+- Fixed drift in dragging nodes while zooming.
+- Fixed recursively constructing of hierarchical layouts.
+- Added borderWidth option for nodes.
+- Implemented new Hierarchical view solver.
+- Fixed an issue with selecting nodes when the web page is scrolled down.
+- Added Gephi JSON parser
+- Added Neighbour Highlight example
+- Added Import From Gephi example
+- Enabled color parsing for nodes when supplied with rgb(xxx,xxx,xxx) value.
+
+### DataSet
+
+- Added .get() returnType option to return as JSON object, Array or Google 
+  DataTable.
+
+
+
+## 2014-07-07, version 3.0.0
+
+### Timeline
+
+- Implemented support for displaying a `title` for both items and groups.
+- Fixed auto detected item type being preferred over the global item `type`.
+- Throws an error when constructing without new keyword.
+- Removed the 'rangeoverflow' item type. Instead, one can use a regular range
+  and change css styling of the item contents to:
+
+        .vis.timeline .item.range .content {
+          overflow: visible;
+        }
+- Fixed the height of background and foreground panels of groups.
+- Fixed ranges in the Timeline sometimes overlapping when dragging the Timeline.
+- Fixed `DataView` not working in Timeline.
+
+### Network (formerly named Graph)
+
+- Renamed `Graph` to `Network` to prevent confusion with the visualizations 
+  `Graph2d` and `Graph3d`.
+  - Renamed option `dragGraph` to `dragNetwork`.
+- Now throws an error when constructing without new keyword.
+- Added pull request from Vukk, user can now define the edge width multiplier 
+  when selected.
+- Fixed `graph.storePositions()`.
+- Extended Selection API with `selectNodes` and `selectEdges`, deprecating 
+  `setSelection`.
+- Fixed multiline labels.
+- Changed hierarchical physics solver and updated docs.
+
+### Graph2d
+
+- Added first iteration of the Graph2d.
+
+### Graph3d
+
+- Now throws an error when constructing without new keyword.
+
+
+## 2014-06-19, version 2.0.0
+
+### Timeline
+
+- Implemented function `destroy` to neatly cleanup a Timeline.
+- Implemented support for dragging the timeline contents vertically.
+- Implemented options `zoomable` and `moveable`.
+- Changed default value of option `showCurrentTime` to true.
+- Internal refactoring and simplification of the code.
+- Fixed property `className` of groups not being applied to related contents and 
+  background elements, and not being updated once applied.
+
+### Graph
+
+- Reduced the timestep a little for smoother animations.
+- Fixed dataManipulation.initiallyVisible functionality (thanks theGrue).
+- Forced typecast of fontSize to Number.
+- Added editing of edges using the data manipulation toolkit.
+
+### DataSet
+
+- Renamed option `convert` to `type`.
+
+
+## 2014-06-06, version 1.1.0
+
+### Timeline
+
+- Select event now triggers repeatedly when selecting an already selected item.
+- Renamed `Timeline.repaint()` to `Timeline.redraw()` to be consistent with
+  the other visualisations of vis.js.
+- Fixed `Timeline.clear()` not resetting a configured `options.start` and 
+  `options.end`.
+
+### Graph
+
+- Fixed error with zero nodes with hierarchical layout.
+- Added focusOnNode function.
+- Added hover option.
+- Added dragNodes option. Renamed movebale to dragGraph option.
+- Added hover events (hoverNode, blurNode).
+
+### Graph3D
+
+- Ported Graph3D from Chap Links Library.
+
+
+## 2014-05-28, version 1.0.2
+
+### Timeline
+
+- Implemented option `minHeight`, similar to option `maxHeight`.
+- Implemented a method `clear([what])`, to clear items, groups, and configuration
+  of a Timeline instance.
+- Added function `repaint()` to force a repaint of the Timeline.
+- Some tweaks in snapping dragged items to nice dates.
+- Made the instance of moment.js packaged with vis.js accessibly via `vis.moment`.
+- A newly created item is initialized with `end` property when option `type`
+  is `"range"` or `"rangeoverflow"`.
+- Fixed a bug in replacing the DataSet of groups via `Timeline.setGroups(groups)`.
+- Fixed a bug when rendering the Timeline inside a hidden container. 
+- Fixed axis scale being determined wrongly for a second Timeline in a single page.
+
+### Graph
+
+- Added zoomable and moveable options.
+- Changes setOptions to avoid resetting view.
+- Interchanged canvasToDOM and DOMtoCanvas to correspond with the docs.
+
+
+## 2014-05-09, version 1.0.1
+
+### Timeline
+
+- Fixed width of items with type `rangeoverflow`.
+- Fixed a bug wrongly rendering invisible items after updating them.
+
+### Graph
+
+- Added coordinate conversion from DOM to Canvas.
+- Fixed bug where the graph stopped animation after settling in playing with physics.
+- Fixed bug where hierarchical physics properties were not handled.
+- Added events for change of view and zooming.
+
+
+## 2014-05-02, version 1.0.0
+
+### Timeline
+
+- Large refactoring of the Timeline, simplifying the code.
+- Great performance improvements.
+- Improved layout of box-items inside groups.
+- Items can now be dragged from one group to another.
+- Implemented option `stack` to enable/disable stacking of items.
+- Implemented function `fit`, which sets the Timeline window such that it fits
+  all items.
+- Option `editable` can now be used to enable/disable individual manipulation
+  actions (`add`, `updateTime`, `updateGroup`, `remove`).
+- Function `setWindow` now accepts an object with properties `start` and `end`.
+- Fixed option `autoResize` forcing a repaint of the Timeline with every check
+  rather than when the Timeline is actually resized.
+- Fixed `select` event fired repeatedly when clicking an empty place on the
+  Timeline, deselecting selected items).
+- Fixed initial visible window in case items exceed `zoomMax`. Thanks @Remper.
+- Fixed an offset in newly created items when using groups.
+- Fixed height of a group not reckoning with the height of the group label.
+- Option `order` is now deprecated. This was needed for performance improvements.
+- More examples added.
+- Minor bug fixes.
+
+### Graph
+
+- Added recalculate hierarchical layout to update node event.
+- Added arrowScaleFactor to scale the arrows on the edges.
+
+### DataSet
+
+- A DataSet can now be constructed with initial data, like
+  `new DataSet(data, options)`.
+
+
+## 2014-04-18, version 0.7.4
+
+### Graph
+
+- Fixed IE9 bug.
+- Style fixes.
+- Minor bug fixes.
+
+
+## 2014-04-16, version 0.7.3
+
+### Graph
+
+- Fixed color bug.
+- Added pull requests from kannonboy and vierja: tooltip styling, label fill 
+  color.
+
+
+## 2014-04-09, version 0.7.2
+
+### Graph
+
+- Fixed edge select bug.
+- Fixed zoom bug on empty initialization.
+
+
+## 2014-03-27, version 0.7.1
+
+### Graph
+
+- Fixed edge color bug.
+- Fixed select event bug.
+- Clarified docs, stressing importance of css inclusion for correct display of 
+  navigation an manipulation icons.
+- Improved and expanded playing with physics (configurePhysics option).
+- Added highlights to navigation icons if the corresponding key is pressed.
+- Added freezeForStabilization option to improve stabilization with cached 
+  positions.
+
+
+## 2014-03-07, version 0.7.0
+
+### Graph
+
+- Changed navigation CSS. Icons are now always correctly positioned.
+- Added stabilizationIterations option to graph.
+- Added storePosition() method to save the XY positions of nodes in the DataSet.
+- Separated allowedToMove into allowedToMoveX and allowedToMoveY. This is 
+  required for initializing nodes from hierarchical layouts after 
+  storePosition().
+- Added color options for the edges.
+
+
+## 2014-03-06, version 0.6.1
+
+### Graph
+
+- Bugfix graphviz examples.
+- Bugfix labels position for smooth curves.
+- Tweaked graphviz example physics.
+- Updated physics documentation to stress importance of configurePhysics.
+
+### Timeline
+
+- Fixed a bug with options `margin.axis` and `margin.item` being ignored when 
+  setting them to zero.
+- Some clarifications in the documentation.
+
+
+## 2014-03-05, version 0.6.0
+
+### Graph
+
+- Added Physics Configuration option. This makes tweaking the physics system to 
+  suit your needs easier.
+- Click and doubleClick events.
+- Initial zoom bugfix.
+- Directions for Hierarchical layout.
+- Refactoring and bugfixes.
+
+
+## 2014-02-20, version 0.5.1
+
+- Fixed broken bower module.
+
+
+## 2014-02-20, version 0.5.0
+
+### Timeline
+
+- Editable Items: drag items, add new items, update items, and remove items.
+- Implemented options `selectable`, `editable`.
+- Added events `timechange` and `timechanged` when dragging the custom time bar.
+- Multiple items can be selected using ctrl+click or shift+click.
+- Implemented functions `setWindow(start, end)` and `getWindow()`.
+- Fixed scroll to zoom not working on IE in standards mode.
+
+### Graph
+
+- Editable nodes and edges: create, update, and remove them.
+- Support for smooth, curved edges (on by default).
+- Performance improvements.
+- Fixed scroll to zoom not working on IE in standards mode.
+- Added hierarchical layout option.
+- Overhauled physics system, now using Barnes-Hut simulation by default. Great 
+  performance gains.
+- Modified clustering system to give better results.
+- Adaptive performance system to increase visual performance (60fps target).
+
+### DataSet
+
+- Renamed functions `subscribe` and `unsubscribe` to `on` and `off` respectively.
+
+
+## 2014-01-31, version 0.4.0
+
+### Timeline
+
+- Implemented functions `on` and `off` to create event listeners for events
+  `rangechange`, `rangechanged`, and `select`.
+- Implemented function `select` to get and set the selected items.
+- Items can be selected by clicking them, muti-select by holding them.
+- Fixed non working `start` and `end` options.
+
+### Graph
+
+- Fixed longstanding bug in the force calculation, increasing simulation
+  stability and fluidity.
+- Reworked the calculation of the Graph, increasing performance for larger
+  datasets (up to 10x!).
+- Support for automatic clustering in Graph to handle large (>50000) datasets
+  without losing performance.
+- Added automatic initial zooming to Graph, to more easily view large amounts
+  of data.
+- Added local declustering to Graph, freezing the simulation of nodes outside
+  of the cluster.
+- Added support for key-bindings by including mouseTrap in Graph.
+- Added navigation controls.
+- Added keyboard navigation.
+- Implemented functions `on` and `off` to create event listeners for event
+  `select`.
+
+
+## 2014-01-14, version 0.3.0
+
+- Moved the generated library to folder `./dist`
+- Css stylesheet must be loaded explicitly now.
+- Implemented options `showCurrentTime` and `showCustomTime`. Thanks @fi0dor.
+- Implemented touch support for Timeline.
+- Fixed broken Timeline options `min` and `max`.
+- Fixed not being able to load vis.js in node.js.
+
+
+## 2013-09-20, version 0.2.0
+
+- Implemented full touch support for Graph.
+- Fixed initial empty range in the Timeline in case of a single item.
+- Fixed field `className` not working for items.
+
+
+## 2013-06-20, version 0.1.0
+
+- Added support for DataSet to Graph. Graph now uses an id based set of nodes
+  and edges instead of a row based array internally. Methods getSelection and
+  setSelection of Graph now accept a list with ids instead of rows.
+- Graph is now robust against edges pointing to non-existing nodes, which
+  can occur easily while dynamically adding/removing nodes and edges.
+- Implemented basic support for groups in the Timeline.
+- Added documentation on DataSet and DataView.
+- Fixed selection of nodes in a Graph when the containing web page is scrolled.
+- Improved date conversion.
+- Renamed DataSet option `fieldTypes` to `convert`.
+- Renamed function `vis.util.cast` to `vis.util.convert`.
+
+
+## 2013-06-07, version 0.0.9
+
+- First working version of the Graph imported from the old library.
+- Documentation added for both Timeline and Graph.
+
+
+## 2013-05-03, version 0.0.8
+
+- Performance improvements: only visible items are rendered.
+- Minor bug fixes and improvements.
+
+
+## 2013-04-25, version 0.0.7
+
+- Sanitized the published packages on npm and bower.
+
+
+## 2013-04-25, version 0.0.6
+
+- Css is now packaged in the javascript file, and automatically loaded.
+- The library uses node style dependency management for modules now, used
+  with Browserify.
+
+
+## 2013-04-16, version 0.0.5
+
+- First working version of the Timeline.
+- Website created.

LICENSE-APACHE-2.0

@@ -0,0 +1,176 @@
+                               Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS

LICENSE-MIT

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2014-2015 Almende B.V.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

NOTICE

@@ -0,0 +1,33 @@
+Vis.js
+Copyright 2010-2015 Almende B.V.
+
+Vis.js is dual licensed under both
+
+  * The Apache 2.0 License
+    http://www.apache.org/licenses/LICENSE-2.0
+
+    and
+
+  * The MIT License
+    http://opensource.org/licenses/MIT
+
+Vis.js may be distributed under either license.
+
+
+Vis.js uses and redistributes the following third-party libraries:
+
+- component-emitter
+  https://github.com/component/emitter
+  The MIT License
+
+- hammer.js
+  http://hammerjs.github.io/
+  The MIT License
+
+- moment.js
+  http://momentjs.com/
+  The MIT License
+
+- keycharm
+  https://github.com/AlexDM0/keycharm
+  The MIT License

README.md

@@ -0,0 +1,306 @@
+vis.js
+==================
+
+Vis.js is a dynamic, browser based visualization library.
+The library is designed to be easy to use, handle large amounts
+of dynamic data, and enable manipulation of the data.
+The library consists of the following components:
+
+- DataSet and DataView. A flexible key/value based data set. Add, update, and 
+  remove items. Subscribe on changes in the data set. A DataSet can filter and 
+  order items, and convert fields of items.
+- DataView. A filtered and/or formatted view on a DataSet.
+- Graph2d. Plot data on a timeline with lines or barcharts.
+- Graph3d. Display data in a three dimensional graph.
+- Network. Display a network (force directed graph) with nodes and edges.
+- Timeline. Display different types of data on a timeline.
+
+The vis.js library is developed by [Almende B.V](http://almende.com).
+
+
+## Install
+
+Install via npm:
+
+    npm install vis
+
+Install via bower:
+
+    bower install vis
+
+Link via cdnjs:
+
+    http://cdnjs.com
+
+Or download the library from the github project:
+[https://github.com/almende/vis.git](https://github.com/almende/vis.git).
+
+
+## Load
+
+
+To use a component, include the javascript and css files of vis in your web page:
+
+```html
+<!DOCTYPE HTML>
+<html>
+<head>
+  <script src="components/vis/dist/vis.js"></script>
+  <link href="components/vis/dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+  <script type="text/javascript">
+    // ... load a visualization
+  </script>
+</body>
+</html>
+```
+
+or load vis.js using require.js. Note that vis.css must be loaded too.
+
+```js
+require.config({
+  paths: {
+    vis: 'path/to/vis/dist',
+  }
+});
+require(['vis'], function (math) {
+  // ... load a visualization
+});
+```
+
+
+A timeline can be instantiated as:
+
+```js
+var timeline = new vis.Timeline(container, data, options);
+```
+
+Where `container` is an HTML element, `data` is an Array with data or a DataSet,
+and `options` is an optional object with configuration options for the
+component.
+
+
+## Example
+
+A basic example on loading a Timeline is shown below. More examples can be
+found in the [examples directory](https://github.com/almende/vis/tree/master/examples)
+of the project.
+
+```html
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline basic demo</title>
+  <script src="vis/dist/vis.js"></script>
+  <link href="vis/dist/vis.css" rel="stylesheet" type="text/css" />
+
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+    }
+  </style>
+</head>
+<body>
+<div id="visualization"></div>
+
+<script type="text/javascript">
+  var container = document.getElementById('visualization');
+  var data = [
+    {id: 1, content: 'item 1', start: '2013-04-20'},
+    {id: 2, content: 'item 2', start: '2013-04-14'},
+    {id: 3, content: 'item 3', start: '2013-04-18'},
+    {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
+    {id: 5, content: 'item 5', start: '2013-04-25'},
+    {id: 6, content: 'item 6', start: '2013-04-27'}
+  ];
+  var options = {};
+  var timeline = new vis.Timeline(container, data, options);
+</script>
+</body>
+</html>
+```
+
+
+## Build
+
+To build the library from source, clone the project from github
+
+    git clone git://github.com/almende/vis.git
+
+The source code uses the module style of node (require and module.exports) to
+organize dependencies. To install all dependencies and build the library, 
+run `npm install` in the root of the project.
+
+    cd vis
+    npm install
+
+Then, the project can be build running:
+
+    npm run build
+
+To automatically rebuild on changes in the source files, once can use
+
+    npm run watch
+
+This will both build and minify the library on changes. Minifying is relatively
+slow, so when only the non-minified library is needed, one can use the 
+`watch-dev` script instead:
+
+    npm run watch-dev
+
+
+## Custom builds
+
+The folder `dist` contains bundled versions of vis.js for direct use in the browser. These bundles contain the all visualizations and includes external dependencies such as hammer.js and moment.js.
+
+The source code of vis.js consists of commonjs modules, which makes it possible to create custom bundles using tools like [Browserify](http://browserify.org/) or [Webpack](http://webpack.github.io/). This can be bundling just one visualization like the Timeline, or bundling vis.js as part of your own browserified web application. 
+
+*Note that hammer.js version 1 is required (v1.0.6-v1.1.3), version 2 is not yet supported.*
+
+
+#### Prerequisites
+
+Before you can do a build:
+
+- Install node.js, npm, and browserify on your system.
+- Download or clone the vis.js project.
+- Install the dependencies of vis.js by running `npm install` in the root of the project.
+
+
+#### Example 1: Bundle a single visualization
+
+For example, to create a bundle with just the Timeline and DataSet, create an index file named **custom.js** in the root of the project, containing: 
+
+```js
+exports.DataSet = require('./lib/DataSet');
+exports.Timeline = require('./lib/timeline/Timeline');
+```
+
+Install browserify globally via `[sudo] npm install -g browserify`, then create a custom bundle like:
+
+    browserify custom.js -o vis-custom.js -s vis
+
+This will generate a custom bundle *vis-custom.js*, which exposes the namespace `vis` containing only `DataSet` and `Timeline`. The generated bundle can be minified with uglifyjs (installed globally with `[sudo] npm install -g uglify-js`):
+
+    uglifyjs vis-custom.js -o vis-custom.min.js
+
+The custom bundle can now be loaded like:
+
+```html
+<!DOCTYPE HTML>
+<html>
+<head>
+  <script src="vis-custom.min.js"></script>
+  <link href="dist/vis.min.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+  ...
+</body>
+</html>
+```
+
+#### Example 2: Exclude external libraries
+
+The default bundle `vis.js` is standalone and includes external dependencies such as hammer.js and moment.js. When these libraries are already loaded by the application, vis.js does not need to include these dependencies itself too. To build a custom bundle of vis.js excluding moment.js and hammer.js, run browserify in the root of the project:
+
+    browserify index.js -o vis-custom.js -s vis -x moment -x hammerjs
+    
+This will generate a custom bundle *vis-custom.js*, which exposes the namespace `vis`, and has moment and hammerjs excluded. The generated bundle can be minified with uglifyjs:
+
+    uglifyjs vis-custom.js -o vis-custom.min.js
+
+The custom bundle can now be loaded as:
+
+```html
+<!DOCTYPE HTML>
+<html>
+<head>
+  <!-- load external dependencies -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></script>
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.1.3/hammer.min.js"></script>
+
+  <!-- load vis.js -->
+  <script src="vis-custom.min.js"></script>
+  <link href="dist/vis.min.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+  ...
+</body>
+</html>
+```
+
+#### Example 3: Bundle vis.js as part of your (commonjs) application
+
+When writing a web application with commonjs modules, vis.js can be packaged automatically into the application. Create a file **app.js** containing:
+
+```js
+var moment = require('moment');
+var DataSet = require('vis/lib/DataSet');
+var Timeline = require('vis/lib/timeline/Timeline');
+
+var container = document.getElementById('visualization');
+var data = new DataSet([
+  {id: 1, content: 'item 1', start: moment('2013-04-20')},
+  {id: 2, content: 'item 2', start: moment('2013-04-14')},
+  {id: 3, content: 'item 3', start: moment('2013-04-18')},
+  {id: 4, content: 'item 4', start: moment('2013-04-16'), end: moment('2013-04-19')},
+  {id: 5, content: 'item 5', start: moment('2013-04-25')},
+  {id: 6, content: 'item 6', start: moment('2013-04-27')}
+]);
+var options = {};
+var timeline = new Timeline(container, data, options);
+```
+
+Install the application dependencies via npm:
+
+    npm install vis moment
+
+The application can be bundled and minified:
+
+    browserify app.js -o app-bundle.js
+    uglifyjs app-bundle.js -o app-bundle.min.js
+
+And loaded into a webpage:
+
+```html
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link href="node_modules/vis/dist/vis.min.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+  <div id="visualization"></div>
+  
+  <script src="app-bundle.min.js"></script>
+</body>
+</html>
+```
+
+
+## Test
+
+To test the library, install the project dependencies once:
+
+    npm install
+
+Then run the tests:
+
+    npm test
+
+
+## License
+
+Copyright (C) 2010-2015 Almende B.V.
+
+Vis.js is dual licensed under both
+
+  * The Apache 2.0 License
+    http://www.apache.org/licenses/LICENSE-2.0
+
+and
+
+  * The MIT License
+    http://opensource.org/licenses/MIT
+
+Vis.js may be distributed under either license.

bower.json

@@ -0,0 +1,22 @@
+{
+  "name": "vis",
+  "version": "3.11.0",
+  "main": ["dist/vis.min.js", "dist/vis.min.css"],
+  "description": "A dynamic, browser-based visualization library.",
+  "homepage": "http://visjs.org/",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/almende/vis.git"
+  },
+  "ignore": [
+    "misc",
+    "node_modules",
+    "test",
+    "tools",
+    ".idea",
+    ".npmignore",
+    ".gitignore"
+  ],
+  "dependencies": {},
+  "devDependencies": {}
+}

dist/vis.css

@@ -0,0 +1,810 @@
+.vis .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  /* Must be displayed above for example selected Timeline items */
+  z-index: 10;
+}
+
+.vis-active {
+  box-shadow: 0 0 10px #86d5f8;
+}
+
+/* override some bootstrap styles screwing up the timelines css */
+
+.vis [class*="span"] {
+  min-height: 0;
+  width: auto;
+}
+
+.vis.timeline {
+}
+
+
+.vis.timeline.root {
+  position: relative;
+  border: 1px solid #bfbfbf;
+
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+
+  box-sizing: border-box;
+}
+
+.vis.timeline .vispanel {
+  position: absolute;
+
+  padding: 0;
+  margin: 0;
+
+  box-sizing: border-box;
+}
+
+.vis.timeline .vispanel.center,
+.vis.timeline .vispanel.left,
+.vis.timeline .vispanel.right,
+.vis.timeline .vispanel.top,
+.vis.timeline .vispanel.bottom {
+  border: 1px #bfbfbf;
+}
+
+.vis.timeline .vispanel.center,
+.vis.timeline .vispanel.left,
+.vis.timeline .vispanel.right {
+  border-top-style: solid;
+  border-bottom-style: solid;
+  overflow: hidden;
+}
+
+.vis.timeline .vispanel.center,
+.vis.timeline .vispanel.top,
+.vis.timeline .vispanel.bottom {
+  border-left-style: solid;
+  border-right-style: solid;
+}
+
+.vis.timeline .background {
+  overflow: hidden;
+}
+
+.vis.timeline .vispanel > .content {
+  position: relative;
+}
+
+.vis.timeline .vispanel .shadow {
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  box-shadow: 0 0 10px rgba(0,0,0,0.8);
+  /* TODO: find a nice way to ensure shadows are drawn on top of items
+  z-index: 1;
+  */
+}
+
+.vis.timeline .vispanel .shadow.top {
+  top: -1px;
+  left: 0;
+}
+
+.vis.timeline .vispanel .shadow.bottom {
+  bottom: -1px;
+  left: 0;
+}
+
+.vis.timeline .labelset {
+  position: relative;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+}
+
+.vis.timeline .labelset .vlabel {
+  position: relative;
+  left: 0;
+  top: 0;
+  width: 100%;
+  color: #4d4d4d;
+
+  box-sizing: border-box;
+}
+
+.vis.timeline .labelset .vlabel {
+  border-bottom: 1px solid #bfbfbf;
+}
+
+.vis.timeline .labelset .vlabel:last-child {
+  border-bottom: none;
+}
+
+.vis.timeline .labelset .vlabel .inner {
+  display: inline-block;
+  padding: 5px;
+}
+
+.vis.timeline .labelset .vlabel .inner.hidden {
+  padding: 0;
+}
+
+
+.vis.timeline .itemset {
+  position: relative;
+  padding: 0;
+  margin: 0;
+
+  box-sizing: border-box;
+}
+
+.vis.timeline .itemset .background,
+.vis.timeline .itemset .foreground {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.vis.timeline .axis {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.vis.timeline  .foreground .group {
+  position: relative;
+  box-sizing: border-box;
+  border-bottom: 1px solid #bfbfbf;
+}
+
+.vis.timeline  .foreground .group:last-child {
+  border-bottom: none;
+}
+
+
+.vis.timeline .item {
+  position: absolute;
+  color: #1A1A1A;
+  border-color: #97B0F8;
+  border-width: 1px;
+  background-color: #D5DDF6;
+  display: inline-block;
+  padding: 5px;
+}
+
+.vis.timeline .item.selected {
+  border-color: #FFC200;
+  background-color: #FFF785;
+
+  /* z-index must be higher than the z-index of custom time bar and current time bar */
+  z-index: 2;
+}
+
+.vis.timeline .editable .item.selected {
+  cursor: move;
+}
+
+.vis.timeline .item.point.selected {
+  background-color: #FFF785;
+}
+
+.vis.timeline .item.box {
+  text-align: center;
+  border-style: solid;
+  border-radius: 2px;
+}
+
+.vis.timeline .item.point {
+  background: none;
+}
+
+.vis.timeline .item.dot {
+  position: absolute;
+  padding: 0;
+  border-width: 4px;
+  border-style: solid;
+  border-radius: 4px;
+}
+
+.vis.timeline .item.range {
+  border-style: solid;
+  border-radius: 2px;
+  box-sizing: border-box;
+}
+
+.vis.timeline .item.background {
+  overflow: hidden;
+  border: none;
+  background-color: rgba(213, 221, 246, 0.4);
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+.vis.timeline .item.range .content {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.vis.timeline .item.background .content {
+  position: absolute;
+  display: inline-block;
+  overflow: hidden;
+  max-width: 100%;
+  margin: 5px;
+}
+
+.vis.timeline .item.line {
+  padding: 0;
+  position: absolute;
+  width: 0;
+  border-left-width: 1px;
+  border-left-style: solid;
+}
+
+.vis.timeline .item .content {
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.vis.timeline .item .delete {
+  background: url('img/timeline/delete.png') no-repeat top center;
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  top: 0;
+  right: -24px;
+  cursor: pointer;
+}
+
+.vis.timeline .item.range .drag-left {
+  position: absolute;
+  width: 24px;
+  max-width: 20%;
+  height: 100%;
+  top: 0;
+  left: -4px;
+
+  cursor: w-resize;
+}
+
+.vis.timeline .item.range .drag-right {
+  position: absolute;
+  width: 24px;
+  max-width: 20%;
+  height: 100%;
+  top: 0;
+  right: -4px;
+
+  cursor: e-resize;
+}
+
+.vis.timeline .timeaxis {
+  position: relative;
+  overflow: hidden;
+}
+
+.vis.timeline .timeaxis.foreground {
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.vis.timeline .timeaxis.background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.vis.timeline .timeaxis .text {
+  position: absolute;
+  color: #4d4d4d;
+  padding: 3px;
+  white-space: nowrap;
+}
+
+.vis.timeline .timeaxis .text.measure {
+  position: absolute;
+  padding-left: 0;
+  padding-right: 0;
+  margin-left: 0;
+  margin-right: 0;
+  visibility: hidden;
+}
+
+.vis.timeline .timeaxis .grid.vertical {
+  position: absolute;
+  border-left: 1px solid;
+}
+
+.vis.timeline .timeaxis .grid.minor {
+  border-color: #e5e5e5;
+}
+
+.vis.timeline .timeaxis .grid.major {
+  border-color: #bfbfbf;
+}
+
+.vis.timeline .currenttime {
+  background-color: #FF7F6E;
+  width: 2px;
+  z-index: 1;
+}
+.vis.timeline .customtime {
+  background-color: #6E94FF;
+  width: 2px;
+  cursor: move;
+  z-index: 1;
+}
+.vis.timeline.root {
+  /*
+  -webkit-transition: height .4s ease-in-out;
+  transition:         height .4s ease-in-out;
+  */
+}
+
+.vis.timeline .vispanel {
+  /*
+  -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
+  transition:         height .4s ease-in-out, top .4s ease-in-out;
+  */
+}
+
+.vis.timeline .axis {
+  /*
+  -webkit-transition: top .4s ease-in-out;
+  transition:         top .4s ease-in-out;
+  */
+}
+
+/* TODO: get animation working nicely
+
+.vis.timeline .item {
+  -webkit-transition: top .4s ease-in-out;
+  transition:         top .4s ease-in-out;
+}
+
+.vis.timeline .item.line {
+  -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
+  transition:         height .4s ease-in-out, top .4s ease-in-out;
+}
+/**/
+
+.vis.timeline .vispanel.background.horizontal .grid.horizontal {
+    position: absolute;
+    width: 100%;
+    height: 0;
+    border-bottom: 1px solid;
+}
+
+.vis.timeline .vispanel.background.horizontal .grid.minor {
+    border-color: #e5e5e5;
+}
+
+.vis.timeline .vispanel.background.horizontal .grid.major {
+    border-color: #bfbfbf;
+}
+
+
+.vis.timeline .dataaxis .yAxis.major {
+    width: 100%;
+    position: absolute;
+    color: #4d4d4d;
+    white-space: nowrap;
+}
+
+.vis.timeline .dataaxis .yAxis.major.measure{
+    padding: 0px 0px 0px 0px;
+    margin: 0px 0px 0px 0px;
+    border: 0px;
+    visibility: hidden;
+    width: auto;
+}
+
+
+.vis.timeline .dataaxis .yAxis.minor{
+    position: absolute;
+    width: 100%;
+    color: #bebebe;
+    white-space: nowrap;
+}
+
+.vis.timeline .dataaxis .yAxis.minor.measure{
+    padding: 0px 0px 0px 0px;
+    margin: 0px 0px 0px 0px;
+    border: 0px;
+    visibility: hidden;
+    width: auto;
+}
+
+.vis.timeline .dataaxis .yAxis.title{
+    position: absolute;
+    color: #4d4d4d;
+    white-space: nowrap;
+    bottom: 20px;
+    text-align: center;
+}
+
+.vis.timeline .dataaxis .yAxis.title.measure{
+    padding: 0px 0px 0px 0px;
+    margin: 0px 0px 0px 0px;
+    visibility: hidden;
+    width: auto;
+}
+
+.vis.timeline .dataaxis .yAxis.title.left {
+    bottom: 0px;
+    -webkit-transform-origin: left top;
+    -moz-transform-origin: left top;
+    -ms-transform-origin: left top;
+    -o-transform-origin: left top;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(-90deg);
+    -moz-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    -o-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+}
+
+.vis.timeline .dataaxis .yAxis.title.right {
+    bottom: 0px;
+    -webkit-transform-origin: right bottom;
+    -moz-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    -o-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
+    transform: rotate(90deg);
+}
+
+.vis.timeline .legend {
+    background-color: rgba(247, 252, 255, 0.65);
+    padding: 5px;
+    border-color: #b3b3b3;
+    border-style:solid;
+    border-width: 1px;
+    box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55);
+}
+
+.vis.timeline .legendText {
+    /*font-size: 10px;*/
+    white-space: nowrap;
+    display: inline-block
+}
+.vis.timeline .graphGroup0 {
+    fill:#4f81bd;
+    fill-opacity:0;
+    stroke-width:2px;
+    stroke: #4f81bd;
+}
+
+.vis.timeline .graphGroup1 {
+    fill:#f79646;
+    fill-opacity:0;
+    stroke-width:2px;
+    stroke: #f79646;
+}
+
+.vis.timeline .graphGroup2 {
+    fill: #8c51cf;
+    fill-opacity:0;
+    stroke-width:2px;
+    stroke: #8c51cf;
+}
+
+.vis.timeline .graphGroup3 {
+    fill: #75c841;
+    fill-opacity:0;
+    stroke-width:2px;
+    stroke: #75c841;
+}
+
+.vis.timeline .graphGroup4 {
+    fill: #ff0100;
+    fill-opacity:0;
+    stroke-width:2px;
+    stroke: #ff0100;
+}
+
+.vis.timeline .graphGroup5 {
+    fill: #37d8e6;
+    fill-opacity:0;
+    stroke-width:2px;
+    stroke: #37d8e6;
+}
+
+.vis.timeline .graphGroup6 {
+    fill: #042662;
+    fill-opacity:0;
+    stroke-width:2px;
+    stroke: #042662;
+}
+
+.vis.timeline .graphGroup7 {
+    fill:#00ff26;
+    fill-opacity:0;
+    stroke-width:2px;
+    stroke: #00ff26;
+}
+
+.vis.timeline .graphGroup8 {
+    fill:#ff00ff;
+    fill-opacity:0;
+    stroke-width:2px;
+    stroke: #ff00ff;
+}
+
+.vis.timeline .graphGroup9 {
+    fill: #8f3938;
+    fill-opacity:0;
+    stroke-width:2px;
+    stroke: #8f3938;
+}
+
+.vis.timeline .fill {
+    fill-opacity:0.1;
+    stroke: none;
+}
+
+
+.vis.timeline .bar {
+    fill-opacity:0.5;
+    stroke-width:1px;
+}
+
+.vis.timeline .point {
+    stroke-width:2px;
+    fill-opacity:1.0;
+}
+
+
+.vis.timeline .legendBackground {
+    stroke-width:1px;
+    fill-opacity:0.9;
+    fill: #ffffff;
+    stroke: #c2c2c2;
+}
+
+
+.vis.timeline .outline {
+    stroke-width:1px;
+    fill-opacity:1;
+    fill: #ffffff;
+    stroke: #e5e5e5;
+}
+
+.vis.timeline .iconFill {
+    fill-opacity:0.3;
+    stroke: none;
+}
+
+
+
+div.network-manipulationDiv {
+  border-width: 0;
+  border-bottom: 1px;
+  border-style:solid;
+  border-color: #d6d9d8;
+  background: #ffffff; /* Old browsers */
+  background: -moz-linear-gradient(top,  #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(48%,#fcfcfc), color-stop(50%,#fafafa), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */
+  background: linear-gradient(to bottom,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
+
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 30px;
+}
+
+div.network-manipulation-editMode {
+  position:absolute;
+  left: 0;
+  top: 15px;
+  height: 30px;
+}
+
+div.network-manipulation-closeDiv {
+  position:absolute;
+  right: 0;
+  top: 0;
+  width: 30px;
+  height: 30px;
+
+  background-position: 20px 3px;
+  background-repeat: no-repeat;
+  background-image: url("img/network/cross.png");
+  cursor: pointer;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+div.network-manipulation-closeDiv:hover {
+  opacity: 0.6;
+}
+
+div.network-manipulationUI {
+    position:relative;
+    top:-7px;
+  font-family: verdana;
+  font-size: 12px;
+  -moz-border-radius: 15px;
+  border-radius: 15px;
+  display:inline-block;
+  background-position: 0px 0px;
+  background-repeat:no-repeat;
+  height:24px;
+  margin: 0px 0px 0px 10px;
+  vertical-align:middle;
+  cursor: pointer;
+  padding: 0px 8px 0px 8px;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+div.network-manipulationUI:hover {
+  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
+}
+
+div.network-manipulationUI:active {
+  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
+}
+
+div.network-manipulationUI.back {
+  background-image: url("img/network/backIcon.png");
+}
+
+div.network-manipulationUI.none:hover {
+  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
+  cursor: default;
+}
+div.network-manipulationUI.none:active {
+  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
+}
+div.network-manipulationUI.none {
+  padding: 0;
+}
+div.network-manipulationUI.notification{
+  margin: 2px;
+  font-weight: bold;
+}
+
+div.network-manipulationUI.add {
+  background-image: url("img/network/addNodeIcon.png");
+}
+
+div.network-manipulationUI.edit {
+  background-image: url("img/network/editIcon.png");
+}
+
+div.network-manipulationUI.edit.editmode {
+  background-color: #fcfcfc;
+  border-style:solid;
+  border-width:1px;
+  border-color: #cccccc;
+}
+
+div.network-manipulationUI.connect {
+  background-image: url("img/network/connectIcon.png");
+}
+
+div.network-manipulationUI.delete {
+  background-image: url("img/network/deleteIcon.png");
+}
+/* top right bottom left */
+div.network-manipulationLabel {
+  margin: 0px 0px 0px 23px;
+  line-height: 25px;
+}
+div.network-seperatorLine {
+  display:inline-block;
+  width:1px;
+  height:20px;
+  background-color: #bdbdbd;
+  margin: 5px 7px 0px 15px;
+}
+
+div.network-navigation_wrapper {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+div.network-navigation {
+    width:34px;
+    height:34px;
+    -moz-border-radius: 17px;
+    border-radius: 17px;
+    position:absolute;
+    display:inline-block;
+    background-position: 2px 2px;
+    background-repeat:no-repeat;
+    cursor: pointer;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+div.network-navigation:hover {
+    box-shadow: 0px 0px 3px 3px rgba(56, 207, 21, 0.30);
+}
+
+div.network-navigation:active {
+    box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
+}
+
+div.network-navigation.up {
+    background-image: url("img/network/upArrow.png");
+    bottom:50px;
+    left:55px;
+}
+div.network-navigation.down {
+    background-image: url("img/network/downArrow.png");
+    bottom:10px;
+    left:55px;
+}
+div.network-navigation.left {
+    background-image: url("img/network/leftArrow.png");
+    bottom:10px;
+    left:15px;
+}
+div.network-navigation.right {
+    background-image: url("img/network/rightArrow.png");
+    bottom:10px;
+    left:95px;
+}
+div.network-navigation.zoomIn {
+    background-image: url("img/network/plus.png");
+    bottom:10px;
+    right:15px;
+}
+div.network-navigation.zoomOut {
+    background-image: url("img/network/minus.png");
+    bottom:10px;
+    right:55px;
+}
+div.network-navigation.zoomExtends {
+    background-image: url("img/network/zoomExtends.png");
+    bottom:50px;
+    right:15px;
+}
+div.network-tooltip {
+  position: absolute;
+  visibility: hidden;
+  padding: 5px;
+  white-space: nowrap;
+
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  border: 1px solid;
+
+  box-shadow: 3px 3px 10px rgba(128, 128, 128, 0.5);
+}

docs/css/prettify.css

@@ -0,0 +1,87 @@
+.com {
+  color: gray;
+}
+
+.lit {
+  color: red;
+}
+
+.pun {
+  color: gray;
+}
+
+.pln {
+  color: #333333;
+}
+
+pre.prettyprint {
+  border: 1px solid lightgray;
+  background-color: #fcfcfc;
+  padding: 5px;
+
+  font-size: 10pt;
+  line-height: 1.5em;
+  font-family: monospace;
+}
+
+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;
+}
+
+.str,.atv {
+  color: green;
+}
+
+.kwd,.tag {
+  color:#2B7CE9;
+}
+
+.typ,.atn,.dec {
+  color: darkorange;
+}
+
+@media print {
+  .com {
+    color:#600;
+    font-style:italic;
+  }
+
+  .typ {
+    color:#404;
+    font-weight:700;
+  }
+
+  .lit {
+    color:#044;
+  }
+
+  .pun {
+    color:#440;
+  }
+
+  .pln {
+    color:#000;
+  }
+
+  .atn {
+    color:#404;
+  }
+
+  .str,.atv {
+    color:#060;
+  }
+
+  .kwd,.tag {
+    color:#006;
+    font-weight:700;
+  }
+}

docs/css/style.css

@@ -0,0 +1,83 @@
+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 {
+  position: relative;
+  margin: 0 auto;
+  padding: 10px 10px 50px 10px;
+  width: 970px;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+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 #e0e0e0;
+  color: #064880;
+}
+
+h3 {
+  font-size: 140%;
+}
+
+a > img {
+  border: none;
+}
+
+a {
+  color: #064880;
+  text-decoration: none;
+}
+
+a:visited {
+  color: #064880;
+  text-decoration: none;
+}
+
+a:hover {
+  color: red;
+  text-decoration: underline;
+}
+
+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;
+}
+
+p.important_note {
+  color: #3a6baa;
+  font-weight:bold;
+}

docs/dataset.html

@@ -0,0 +1,956 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>vis.js | DataSet 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>DataSet documentation</h1>
+
+<h2 id="Contents">Contents</h2>
+<ul>
+  <li><a href="#Overview">Overview</a></li>
+  <li><a href="#Example">Example</a></li>
+  <li><a href="#Construction">Construction</a></li>
+  <li><a href="#Methods">Methods</a></li>
+  <li><a href="#Properties">Properties</a></li>
+  <li><a href="#Subscriptions">Subscriptions</a></li>
+  <li><a href="#Data_Manipulation">Data Manipulation</a></li>
+  <li><a href="#Data_Selection">Data Selection</a></li>
+  <li><a href="#Data_Policy">Data Policy</a></li>
+</ul>
+
+
+<h2 id="Overview">Overview</h2>
+
+<p>
+  Vis.js comes with a flexible DataSet, which can be used to hold and
+  manipulate unstructured data and listen for changes in the data.
+  The DataSet is key/value based. Data items can be added, updated and
+  removed from the DatSet, and one can subscribe to changes in the DataSet.
+  The data in the DataSet can be filtered and ordered, and fields (like
+  dates) can be converted to a specific type. Data can be normalized when
+  appending it to the DataSet as well.
+</p>
+
+
+<h2 id="Example">Example</h2>
+
+<p>
+  The following example shows how to use a DataSet.
+</p>
+
+<pre class="prettyprint lang-js">
+// create a DataSet
+var options = {};
+var data = new vis.DataSet(options);
+
+// add items
+// note that the data items can contain different properties and data formats
+data.add([
+  {id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true},
+  {id: 2, text: 'item 2', date: '2013-06-23', group: 2},
+  {id: 3, text: 'item 3', date: '2013-06-25', group: 2},
+  {id: 4, text: 'item 4'}
+]);
+
+// subscribe to any change in the DataSet
+data.on('*', function (event, properties, senderId) {
+  console.log('event', event, properties);
+});
+
+// update an existing item
+data.update({id: 2, group: 1});
+
+// remove an item
+data.remove(4);
+
+// get all ids
+var ids = data.getIds();
+console.log('ids', ids);
+
+// get a specific item
+var item1 = data.get(1);
+console.log('item1', item1);
+
+// retrieve a filtered subset of the data
+var items = data.get({
+  filter: function (item) {
+    return item.group == 1;
+  }
+});
+console.log('filtered items', items);
+
+// retrieve formatted items
+var items = data.get({
+  fields: ['id', 'date'],
+  type: {
+    date: 'ISODate'
+  }
+});
+console.log('formatted items', items);
+</pre>
+
+
+
+<h2 id="Construction">Construction</h2>
+
+<p>
+  A DataSet can be constructed as:
+</p>
+
+<pre class="prettyprint lang-js">
+var data = new vis.DataSet([data] [, options])
+</pre>
+
+<p>
+  After construction, data can be added to the DataSet using the methods
+  <code>add</code> and <code>update</code>, as described in section
+  <a href="#Data_Manipulation">Data Manipulation</a>.
+</p>
+
+<p>
+  The parameter <code>data</code> is optional and can be an Array or
+  <a href="https://developers.google.com/chart/interactive/docs/reference#DataTable" target="_blank">Google DataTable</a> with items.
+</p>
+
+<p>
+  The parameter <code>options</code> is optional and is an object which can
+  contain the following properties:
+</p>
+
+<table>
+  <tr>
+    <th>Name</th>
+    <th>Type</th>
+    <th>Default value</th>
+    <th>Description</th>
+  </tr>
+  <tr>
+    <td>fieldId</td>
+    <td>String</td>
+    <td>"id"</td>
+    <td>
+      The name of the field containing the id of the items.
+
+      When data is fetched from a server which uses some specific
+      field to identify items, this field name can be specified
+      in the DataSet using the option <code>fieldId</code>.
+      For example <a href="http://couchdb.apache.org/"
+                     target="_blank">CouchDB</a> uses the field
+      <code>"_id"</code> to identify documents.
+    </td>
+  </tr>
+  <tr>
+    <td>type</td>
+    <td>Object.&lt;String,&nbsp;String&gt;</td>
+    <td>none</td>
+    <td>
+      An object containing field names as key, and data types as
+      value. By default, the type of the properties of items are left
+      unchanged. Item properties can be normalized by specifying a
+      field type. This is useful for example to automatically convert
+      stringified dates coming from a server into JavaScript Date
+      objects. The available data types are listed in section
+      <a href="#Data_Types">Data Types</a>.
+    </td>
+  </tr>
+  <tr>
+    <td>queue</td>
+    <td>Object | boolean</td>
+    <td>none</td>
+    <td>
+      Queue data changes ('add', 'update', 'remove') and flush them at once.
+      The queue can be flushed manually by calling
+      <code>DataSet.flush()</code>, or can be flushed after a configured delay
+      or maximum number of entries.
+      <br>
+      <br>
+      When <code>queue</code> is true, a queue is created
+      with default options. Options can be specified by providing an object:
+      <ul>
+        <li><code>delay: number</code><br>
+          The queue will be flushed automatically after an inactivity of this
+          delay in milliseconds. Default value is <code>null</code>.
+        <li><code>max: number</code><br>
+          When the queue exceeds the given maximum number
+          of entries, the queue is flushed automatically.
+          Default value is <code>Infinity</code>.
+        </li>
+      </ul>
+    </td>
+  </tr>
+</table>
+
+
+<h2 id="Methods">Methods</h2>
+
+<p>DataSet contains the following methods.</p>
+
+<table>
+  <colgroup>
+    <col width="200">
+  </colgroup>
+
+  <tr>
+    <th>Method</th>
+    <th>Return Type</th>
+    <th>Description</th>
+  </tr>
+
+  <tr>
+    <td>add(data [, senderId])</td>
+    <td>Number[]</td>
+    <td>Add one or multiple items to the DataSet. <code>data</code> can be a single item or an array with items. Adding an item will fail when there already is an item with the same id. The function returns an array with the ids of the added items. See section <a href="#Data_Manipulation">Data Manipulation</a>.</td>
+  </tr>
+
+  <tr>
+    <td>clear([senderId])</td>
+    <td>Number[]</td>
+    <td>Clear all data from the DataSet. The function returns an array with the ids of the removed items.</td>
+  </tr>
+
+  <tr>
+    <td>distinct(field)</td>
+    <td>Array</td>
+    <td>Find all distinct values of a specified field. Returns an unordered array containing all distinct values. If data items do not contain the specified field are ignored.</td>
+  </tr>
+
+  <tr>
+    <td>flush()</td>
+    <td>none</td>
+    <td>Flush queued changes. Only available when the DataSet is configured with the option <code>queue</code>, see section <a href="#Construction">Construction</a>.</td>
+  </tr>
+
+  <tr>
+    <td>forEach(callback [, options])</td>
+    <td>none</td>
+    <td>
+      Execute a callback function for every item in the dataset.
+      The available options are described in section <a href="#Data_Selection">Data Selection</a>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      get([options] [, data])<br>
+      get(id [,options] [, data])<br>
+      get(ids [, options] [, data])
+    </td>
+    <td>Object | Array | DataTable</td>
+    <td>
+      Get a single item, multiple items, or all items from the DataSet.
+      Usage examples can be found in section <a href="#Getting_Data">Getting Data</a>, and the available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>. If parameter <code>data</code> is provided, items will be appended to this array or table, which is required in case of Google DataTable.
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      getDataSet()
+    </td>
+    <td>DataSet</td>
+    <td>
+      Get the DataSet itself. In case of a DataView, this function does not
+      return the DataSet to which the DataView is connected.
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      getIds([options])
+    </td>
+    <td>Number[]</td>
+    <td>
+      Get ids of all items or of a filtered set of items.
+      Available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>, except that options <code>fields</code> and <code>type</code> are not applicable in case of <code>getIds</code>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>map(callback [, options])</td>
+    <td>Array</td>
+    <td>
+      Map every item in the DataSet.
+      The available options are described in section <a href="#Data_Selection">Data Selection</a>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>max(field)</td>
+    <td>Object | null</td>
+    <td>
+      Find the item with maximum value of specified field. Returns <code>null</code> if no item is found.
+    </td>
+  </tr>
+
+  <tr>
+    <td>min(field)</td>
+    <td>Object | null</td>
+    <td>
+      Find the item with minimum value of specified field. Returns <code>null</code> if no item is found.
+    </td>
+  </tr>
+
+  <tr>
+    <td>off(event, callback)</td>
+    <td>none</td>
+    <td>
+      Unsubscribe from an event, remove an event listener. See section <a href="#Subscriptions">Subscriptions</a>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>on(event, callback)</td>
+    <td>none</td>
+    <td>
+      Subscribe to an event, add an event listener. See section <a href="#Subscriptions">Subscriptions</a>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      remove(id [, senderId])<br>
+      remove(ids [, senderId])
+    </td>
+    <td>Number[]</td>
+    <td>
+      Remove one or multiple items by id or by the items themselves. Returns an array with the ids of the removed items. See section <a href="#Data_Manipulation">Data Manipulation</a>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      setOptions(options)
+    </td>
+    <td>none</td>
+    <td>
+      Set options for the DataSet. Available options:
+
+      <ul>
+        <li>
+          <code>queue</code><br>
+          Queue data changes ('add', 'update', 'remove') and flush them at once.
+          The queue can be flushed manually by calling
+          <code>DataSet.flush()</code>, or can be flushed after a configured delay
+          or maximum number of entries.
+          <br>
+          <br>
+          When <code>queue</code> is true, a queue is created with default options.
+          When <code>queue</code> is false, an existing queue will be flushed and removed.
+          Options can be specified by providing an object:
+          <ul>
+            <li><code>delay: number</code><br>
+              The queue will be flushed automatically after an inactivity of this
+              delay in milliseconds. Default value is <code>null</code>.
+            <li><code>max: number</code><br>
+              When the queue exceeds the given maximum number
+              of entries, the queue is flushed automatically.
+              Default value is <code>Infinity</code>.
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      update(data [, senderId])
+    </td>
+    <td>Number[]</td>
+    <td>
+      Update on ore multiple existing items. <code>data</code> can be a single item or an array with items. When an item doesn't  exist, it will be created. Returns an array with the ids of the removed items. See section <a href="#Data_Manipulation">Data Manipulation</a>.
+    </td>
+  </tr>
+
+</table>
+
+
+<h2 id="Properties">Properties</h2>
+
+<p>DataSet contains the following properties.</p>
+
+<table>
+  <colgroup>
+    <col width="200">
+  </colgroup>
+
+  <tr>
+    <th>Property</th>
+    <th>Type</th>
+    <th>Description</th>
+  </tr>
+
+  <tr>
+    <td>length</td>
+    <td>Number</td>
+    <td>The number of items in the DataSet.</td>
+  </tr>
+</table>
+
+
+<h2 id="Subscriptions">Subscriptions</h2>
+
+<p>
+  One can subscribe on changes in a DataSet.
+  A subscription can be created using the method <code>on</code>,
+  and removed with <code>off</code>.
+</p>
+
+<pre class="prettyprint lang-js">
+// create a DataSet
+var data = new vis.DataSet();
+
+// subscribe to any change in the DataSet
+data.on('*', function (event, properties, senderId) {
+  console.log('event:', event, 'properties:', properties, 'senderId:', senderId);
+});
+
+// add an item
+data.add({id: 1, text: 'item 1'});              // triggers an 'add' event
+data.update({id: 1, text: 'item 1 (updated)'}); // triggers an 'update' event
+data.remove(1);                                 // triggers an 'remove' event
+</pre>
+
+
+<h3 id="On">On</h3>
+
+<p>
+  Subscribe to an event.
+</p>
+
+Syntax:
+<pre class="prettyprint lang-js">DataSet.on(event, callback)</pre>
+
+Where:
+<ul>
+  <li>
+    <code>event</code> is a String containing any of the events listed
+    in section <a href="#Events">Events</a>.
+  </li>
+  <li>
+    <code>callback</code> is a callback function which will be called
+    each time the event occurs. The callback function is described in
+    section <a href="#Callback">Callback</a>.
+  </li>
+</ul>
+
+<h3 id="Off">Off</h3>
+
+<p>
+  Unsubscribe from an event.
+</p>
+
+Syntax:
+<pre class="prettyprint lang-js">DataSet.off(event, callback)</pre>
+
+Where <code>event</code> and <code>callback</code> correspond with the
+parameters used to <a href="#On">subscribe</a> to the event.
+
+<h3 id="Events">Events</h3>
+
+<p>
+  The following events are available for subscription:
+</p>
+
+<table>
+  <tr>
+    <th>Event</th>
+    <th>Description</th>
+  </tr>
+  <tr>
+    <td>add</td>
+    <td>
+      The <code>add</code> event is triggered when an item
+      or a set of items is added, or when an item is updated while
+      not yet existing.
+    </td>
+  </tr>
+  <tr>
+    <td>update</td>
+    <td>
+      The <code>update</code> event is triggered when an existing item
+      or a set of existing items is updated.
+    </td>
+  </tr>
+  <tr>
+    <td>remove</td>
+    <td>
+      The <code>remove</code> event is triggered when an item
+      or a set of items is removed.
+    </td>
+  </tr>
+  <tr>
+    <td>*</td>
+    <td>
+      The <code>*</code> event is triggered when any of the events
+      <code>add</code>, <code>update</code>, and <code>remove</code>
+      occurs.
+    </td>
+  </tr>
+</table>
+
+<h3 id="Callback">Callback</h3>
+
+<p>
+  The callback functions of subscribers are called with the following
+  parameters:
+</p>
+
+    <pre class="prettyprint lang-js">
+function (event, properties, senderId) {
+  // handle the event
+});
+</pre>
+
+<p>
+  where the parameters are defined as
+</p>
+
+<table>
+  <tr>
+    <th>Parameter</th>
+    <th>Type</th>
+    <th>Description</th>
+  </tr>
+  <tr>
+    <td>event</td>
+    <td>String</td>
+    <td>
+      Any of the available events: <code>add</code>,
+      <code>update</code>, or <code>remove</code>.
+    </td>
+  </tr>
+  <tr>
+    <td>properties</td>
+    <td>Object&nbsp;|&nbsp;null</td>
+    <td>
+      Optional properties providing more information on the event.
+      In case of the events <code>add</code>,
+      <code>update</code>, and <code>remove</code>,
+      <code>properties</code> is always an object containing a property
+      <code>items</code>, which contains an array with the ids of the affected
+      items. The <code>update</code> event has an extra field <code>data</code>
+      containing the original data of the updated items, i.e. the gives the
+      changed fields of the changed items.
+    </td>
+  </tr>
+  <tr>
+    <td>senderId</td>
+    <td>String&nbsp;|&nbsp;Number</td>
+    <td>
+      An senderId, optionally provided by the application code
+      which triggered the event. If senderId is not provided, the
+      argument will be <code>null</code>.
+    </td>
+  </tr>
+</table>
+
+
+<h2 id="Data_Manipulation">Data Manipulation</h2>
+
+<p>
+  The data in a DataSet can be manipulated using the methods
+  <a href="#Add"><code>add</code></a>,
+  <a href="#Update"><code>update</code></a>,
+  and <a href="#Remove"><code>remove</code></a>.
+  The DataSet can be emptied using the method
+  <a href="#Clear"><code>clear</code></a>.
+</p>
+
+<pre class="prettyprint lang-js">
+// create a DataSet
+var data = new vis.DataSet();
+
+// add items
+data.add([
+  {id: 1, text: 'item 1'},
+  {id: 2, text: 'item 2'},
+  {id: 3, text: 'item 3'}
+]);
+
+// update an item
+data.update({id: 2, text: 'item 2 (updated)'});
+
+// remove an item
+data.remove(3);
+</pre>
+
+<h3 id="Add">Add</h3>
+
+<p>
+  Add a data item or an array with items.
+</p>
+
+Syntax:
+<pre class="prettyprint lang-js">var addedIds = DataSet.add(data [, senderId])</pre>
+
+The argument <code>data</code> can contain:
+<ul>
+  <li>
+    An <code>Object</code> containing a single item to be
+    added. The item must contain an id.
+  </li>
+  <li>
+    An <code>Array</code> or
+    <code>google.visualization.DataTable</code> containing
+    a list with items to be added. Each item must contain
+    an id.
+  </li>
+</ul>
+
+<p>
+  After the items are added to the DataSet, the DataSet will
+  trigger an event <code>add</code>. When a <code>senderId</code>
+  is provided, this id will be passed with the triggered
+  event to all subscribers.
+</p>
+
+<p>
+  The method will throw an Error when an item with the same id
+  as any of the added items already exists.
+</p>
+
+<h3 id="Update">Update</h3>
+
+<p>
+  Update a data item or an array with items.
+</p>
+
+Syntax:
+<pre class="prettyprint lang-js">var updatedIds = DataSet.update(data [, senderId])</pre>
+
+The argument <code>data</code> can contain:
+<ul>
+  <li>
+    An <code>Object</code> containing a single item to be
+    updated. The item must contain an id.
+  </li>
+  <li>
+    An <code>Array</code> or
+    <code>google.visualization.DataTable</code> containing
+    a list with items to be updated. Each item must contain
+    an id.
+  </li>
+</ul>
+
+<p>
+  The provided properties will be merged in the existing item.
+  When an item does not exist, it will be created.
+</p>
+
+<p>
+  After the items are updated, the DataSet will
+  trigger an event <code>add</code> for the added items, and
+  an event <code>update</code>. When a <code>senderId</code>
+  is provided, this id will be passed with the triggered
+  event to all subscribers.
+</p>
+
+<h3 id="Remove">Remove</h3>
+
+<p>
+  Remove a data item or an array with items.
+</p>
+
+Syntax:
+<pre class="prettyprint lang-js">var removedIds = DataSet.remove(id [, senderId])</pre>
+
+<p>
+  The argument <code>id</code> can be:
+</p>
+<ul>
+  <li>
+    A <code>Number</code> or <code>String</code> containing the id
+    of a single item to be removed.
+  </li>
+  <li>
+    An <code>Object</code> containing the item to be deleted.
+    The item will be deleted by its id.
+  </li>
+  <li>
+    An Array containing ids or items to be removed.
+  </li>
+</ul>
+
+<p>
+  The method ignores removal of non-existing items, and returns an array
+  containing the ids of the items which are actually removed from the
+  DataSet.
+</p>
+
+<p>
+  After the items are removed, the DataSet will
+  trigger an event <code>remove</code> for the removed items.
+  When a <code>senderId</code> is provided, this id will be passed with
+  the triggered event to all subscribers.
+</p>
+
+
+<h3 id="Clear">Clear</h3>
+
+<p>
+  Clear the complete DataSet.
+</p>
+
+Syntax:
+<pre class="prettyprint lang-js">var removedIds = DataSet.clear([senderId])</pre>
+
+<p>
+  After the items are removed, the DataSet will
+  trigger an event <code>remove</code> for all removed items.
+  When a <code>senderId</code> is provided, this id will be passed with
+  the triggered event to all subscribers.
+</p>
+
+
+<h2 id="Data_Selection">Data Selection</h2>
+
+<p>
+  The DataSet contains functionality to format, filter, and sort data retrieved via the
+  methods <code>get</code>, <code>getIds</code>, <code>forEach</code>, and <code>map</code>. These methods have the following syntax:
+</p>
+
+<pre class="prettyprint lang-js">
+DataSet.get([id] [, options] [, data]);
+DataSet.getIds([options]);
+DataSet.forEach(callback [, options]);
+DataSet.map(callback [, options]);
+</pre>
+
+<p>
+  Where <code>options</code> is an Object which can have the following
+  properties:
+</p>
+
+<table>
+  <tr>
+    <th>Name</th>
+    <th>Type</th>
+    <th>Description</th>
+  </tr>
+
+  <tr>
+    <td>fields</td>
+    <td>String[&nbsp;] | Object.&lt;String,&nbsp;String&gt;</td>
+    <td>
+      An array with field names, or an object with current field name and 
+      new field name that the field is returned as.
+      By default, all properties of the items are emitted.
+      When <code>fields</code> is defined, only the properties
+      whose name is specified in <code>fields</code> will be included
+      in the returned items.
+    </td>
+  </tr>
+
+  <tr>
+    <td>type</td>
+    <td>Object.&lt;String,&nbsp;String&gt;</td>
+    <td>
+      An object containing field names as key, and data types as value.
+      By default, the type of the properties of an item are left
+      unchanged. When a field type is specified, this field in the
+      items will be converted to the specified type. This can be used
+      for example to convert ISO strings containing a date to a
+      JavaScript Date object, or convert strings to numbers or vice
+      versa. The available data types are listed in section
+      <a href="#Data_Types">Data Types</a>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>filter</td>
+    <td>Function</td>
+    <td>Items can be filtered on specific properties by providing a filter
+      function. A filter function is executed for each of the items in the
+      DataSet, and is called with the item as parameter. The function must
+      return a boolean. All items for which the filter function returns
+      true will be emitted.
+      See section <a href="#Data_Filtering">Data Filtering</a>.</td>
+  </tr>
+
+  <tr>
+    <td>order</td>
+    <td>String | Function</td>
+    <td>Order the items by a field name or custom sort function.</td>
+  </tr>
+
+  <tr>
+      <td>returnType</td>
+      <td>String</td>
+      <td>Determine the type of output of the get function. Allowed values are <code>Array | Object | DataTable</code>.
+          The <code>DataTable</code> refers to a Google DataTable. The default returnType is an array. The object type will return a JSON object with the ID's as keys.</td>
+  </tr>
+
+</table>
+
+<p>
+  The following example demonstrates formatting properties and filtering
+  properties from items.
+</p>
+
+<pre class="prettyprint lang-js">
+// create a DataSet
+var data = new vis.DataSet();
+data.add([
+  {id: 1, text: 'item 1', date: '2013-06-20', group: 1, first: true},
+  {id: 2, text: 'item 2', date: '2013-06-23', group: 2},
+  {id: 3, text: 'item 3', date: '2013-06-25', group: 2},
+  {id: 4, text: 'item 4'}
+]);
+
+// retrieve formatted items
+var items = data.get({
+  fields: ['id', 'date', 'group'],    // output the specified fields only
+  type: {
+    date: 'Date',                   // convert the date fields to Date objects
+    group: 'String'                 // convert the group fields to Strings
+  }
+});
+</pre>
+
+<h3 id="Getting_Data">Getting Data</h3>
+
+<p>
+  Data can be retrieved from the DataSet using the method <code>get</code>.
+  This method can return a single item or a list with items.
+</p>
+
+<p>A single item can be retrieved by its id:</p>
+
+<pre class="prettyprint lang-js">
+var item1 = dataset.get(1);
+</pre>
+
+<p>A selection of items can be retrieved by providing an array with ids:</p>
+
+<pre class="prettyprint lang-js">
+var items = dataset.get([1, 3, 4]); // retrieve items 1, 3, and 4
+</pre>
+
+<p>All items can be retrieved by simply calling <code>get</code> without
+  specifying an id:</p>
+
+<pre class="prettyprint lang-js">
+var items = dataset.get();          // retrieve all items
+</pre>
+
+
+<h3 id="Data_Filtering">Data Filtering</h3>
+
+<p>
+  Items can be filtered on specific properties by providing a filter
+  function. A filter function is executed for each of the items in the
+  DataSet, and is called with the item as parameter. The function must
+  return a boolean. All items for which the filter function returns
+  true will be emitted.
+</p>
+
+<pre class="prettyprint lang-js">
+// retrieve all items having a property group with value 2
+var group2 = dataset.get({
+  filter: function (item) {
+    return (item.group == 2);
+  }
+});
+
+// retrieve all items having a property balance with a value above zero
+var positiveBalance = dataset.get({
+  filter: function (item) {
+    return (item.balance > 0);
+  }
+});
+
+</pre>
+
+
+<h3 id="Data_Types">Data Types</h3>
+
+<p>
+  DataSet supports the following data types:
+</p>
+
+<table style="width: 100%">
+  <tr>
+    <th>Name</th>
+    <th>Description</th>
+    <th>Examples</th>
+  </tr>
+  <tr>
+    <td>Boolean</td>
+    <td>A JavaScript Boolean</td>
+    <td>
+      <code>true</code><br>
+      <code>false</code>
+    </td>
+  </tr>
+  <tr>
+    <td>Number</td>
+    <td>A JavaScript Number</td>
+    <td>
+      <code>32</code><br>
+      <code>2.4</code>
+    </td>
+  </tr>
+  <tr>
+    <td>String</td>
+    <td>A JavaScript String</td>
+    <td>
+      <code>"hello world"</code><br>
+      <code>"2013-06-28"</code>
+    </td>
+  </tr>
+  <tr>
+    <td>Date</td>
+    <td>A JavaScript Date object</td>
+    <td>
+      <code>new Date()</code><br>
+      <code>new Date(2013, 5, 28)</code><br>
+      <code>new Date(1372370400000)</code>
+    </td>
+  </tr>
+  <tr>
+    <td>Moment</td>
+    <td>A Moment object, created with
+      <a href="http://momentjs.com/" target="_blank">moment.js</a></td>
+    <td>
+      <code>moment()</code><br>
+      <code>moment('2013-06-28')</code>
+    </td>
+  </tr>
+  <tr>
+    <td>ISODate</td>
+    <td>A string containing an ISO Date</td>
+    <td>
+      <code>new Date().toISOString()</code><br>
+      <code>"2013-06-27T22:00:00.000Z"</code>
+    </td>
+  </tr>
+  <tr>
+    <td>ASPDate</td>
+    <td>A string containing an ASP Date</td>
+    <td>
+      <code>"/Date(1372370400000)/"</code><br>
+      <code>"/Date(1198908717056-0700)/"</code>
+    </td>
+  </tr>
+</table>
+
+
+<h2 id="Data_Policy">Data Policy</h2>
+<p>
+  All code and data is processed and rendered in the browser.
+  No data is sent to any server.
+</p>
+
+</div>
+</body>
+</html>

docs/dataview.html

@@ -0,0 +1,338 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>vis.js | DataView 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>DataView documentation</h1>
+
+<h2 id="Contents">Contents</h2>
+<ul>
+  <li><a href="#Overview">Overview</a></li>
+  <li><a href="#Example">Example</a></li>
+  <li><a href="#Construction">Construction</a></li>
+  <li><a href="#Methods">Methods</a></li>
+  <li><a href="#Properties">Properties</a></li>
+  <li><a href="#Getting_Data">Getting Data</a></li>
+  <li><a href="#Subscriptions">Subscriptions</a></li>
+  <li><a href="#Data_Policy">Data Policy</a></li>
+</ul>
+
+
+<h2 id="Overview">Overview</h2>
+
+<p>
+  A DataView offers a filtered and/or formatted view on a
+  <a href="dataset.html">DataSet</a>.
+  One can subscribe on changes in a DataView, and easily get filtered or
+  formatted data without having to specify filters and field types all
+  the time.
+</p>
+
+<h2 id="Example">Example</h2>
+
+<p>
+  The following example shows how to use a DataView.
+</p>
+
+<pre class="prettyprint lang-js">
+// create a DataSet
+var data = new vis.DataSet();
+data.add([
+  {id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true},
+  {id: 2, text: 'item 2', date: '2013-06-23', group: 2},
+  {id: 3, text: 'item 3', date: '2013-06-25', group: 2},
+  {id: 4, text: 'item 4'}
+]);
+
+// create a DataView
+// the view will only contain items having a property group with value 1,
+// and will only output fields id, text, and date.
+var view = new vis.DataView(data, {
+  filter: function (item) {
+    return (item.group == 1);
+  },
+  fields: ['id', 'text', 'date']
+});
+
+// subscribe to any change in the DataView
+view.on('*', function (event, properties, senderId) {
+  console.log('event', event, properties);
+});
+
+// update an item in the data set
+data.update({id: 2, group: 1});
+
+// get all ids in the view
+var ids = view.getIds();
+console.log('ids', ids); // will output [1, 2]
+
+// get all items in the view
+var items = view.get();
+</pre>
+
+<h2 id="Construction">Construction</h2>
+
+
+<p>
+  A DataView can be constructed as:
+</p>
+
+<pre class="prettyprint lang-js">
+var data = new vis.DataView(dataset, options)
+</pre>
+
+<p>
+  where:
+</p>
+
+<ul>
+  <li>
+    <code>dataset</code> is a DataSet or DataView.
+  </li>
+  <li>
+    <code>options</code> is an object which can
+    contain the following properties. Note that these properties
+    are exactly the same as the properties available in methods
+    <code>DataSet.get</code> and <code>DataView.get</code>.
+
+    <table>
+      <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Description</th>
+      </tr>
+
+      <tr>
+        <td>convert</td>
+        <td>Object.&lt;String,&nbsp;String&gt;</td>
+        <td>
+          An object containing field names as key, and data types as value.
+          By default, the type of the properties of an item are left
+          unchanged. When a field type is specified, this field in the
+          items will be converted to the specified type. This can be used
+          for example to convert ISO strings containing a date to a
+          JavaScript Date object, or convert strings to numbers or vice
+          versa. The available data types are listed in section
+          <a href="dataset.html#Data_Types">Data Types</a>.
+        </td>
+      </tr>
+
+      <tr>
+        <td>fields</td>
+        <td>String[&nbsp;] | Object.&lt;String,&nbsp;String&gt;</td>
+        <td>
+          An array with field names, or an object with current field name and 
+          new field name that the field is returned as. 
+          By default, all properties of the items are emitted.
+          When <code>fields</code> is defined, only the properties
+          whose name is specified in <code>fields</code> will be included
+          in the returned items.
+        </td>
+      </tr>
+
+      <tr>
+        <td>filter</td>
+        <td>function</td>
+        <td>Items can be filtered on specific properties by providing a filter
+          function. A filter function is executed for each of the items in the
+          DataSet, and is called with the item as parameter. The function must
+          return a boolean. All items for which the filter function returns
+          true will be emitted.
+          See also section <a href="dataset.html#Data_Filtering">Data Filtering</a>.</td>
+      </tr>
+
+    </table>
+  </li>
+</ul>
+
+<h2 id="Methods">Methods</h2>
+
+<p>DataView contains the following methods.</p>
+
+<table>
+  <colgroup>
+    <col width="200">
+  </colgroup>
+
+  <tr>
+    <th>Method</th>
+    <th>Return Type</th>
+    <th>Description</th>
+  </tr>
+
+  <tr>
+    <td>
+      get([options] [, data])<br>
+      get(id [,options] [, data])<br>
+      get(ids [, options] [, data])
+    </td>
+    <td>Object | Array | DataTable</td>
+    <td>
+      Get a single item, multiple items, or all items from the DataView.
+      Usage examples can be found in section <a href="#Getting_Data">Getting Data</a>, and the available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>. If parameter <code>data</code> is provided, items will be appended to this array or table, which is required in case of Google DataTable.
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      getDataSet()
+    </td>
+    <td>DataSet</td>
+    <td>
+      Get the DataSet to which the DataView is connected.
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      getIds([options])
+    </td>
+    <td>Number[]</td>
+    <td>
+      Get ids of all items or of a filtered set of items.
+      Available <code>options</code> are described in section <a href="dataset.html#Data_Selection">Data Selection</a>, except that options <code>fields</code> and <code>type</code> are not applicable in case of <code>getIds</code>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>off(event, callback)</td>
+    <td>none</td>
+    <td>
+      Unsubscribe from an event, remove an event listener. See section <a href="#Subscriptions">Subscriptions</a>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>on(event, callback)</td>
+    <td>none</td>
+    <td>
+      Subscribe to an event, add an event listener. See section <a href="#Subscriptions">Subscriptions</a>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>refresh()</td>
+    <td>none</td>
+    <td>
+      Refresh the filter results of a DataView. Useful when the filter function contains dynamic properties, like:
+
+      <pre class="prettyprint lang-js">var data = new vis.DataSet(...);
+var view = new vis.DataView(data, {
+  filter: function (item) {
+    return item.value > threshold;
+  }
+});</pre>
+      In this example, <code>threshold</code> is an external parameter. When the value of <code>threshold</code> changes, the DataView must be notified that the filter results may have changed by calling <code>DataView.refresh()</code>.
+    </td>
+  </tr>
+
+  <tr>
+    <td>
+      setDataSet(data)
+    </td>
+    <td>none</td>
+    <td>
+      Replace the DataSet of the DataView. Parameter <code>data</code> can be a DataSet or a DataView.
+    </td>
+  </tr>
+
+</table>
+
+
+<h2 id="Properties">Properties</h2>
+
+<p>DataView contains the following properties.</p>
+
+<table>
+  <colgroup>
+    <col width="200">
+  </colgroup>
+
+  <tr>
+    <th>Property</th>
+    <th>Type</th>
+    <th>Description</th>
+  </tr>
+
+  <tr>
+    <td>length</td>
+    <td>Number</td>
+    <td>The number of items in the DataView.</td>
+  </tr>
+</table>
+
+<h2 id="Getting_Data">Getting Data</h2>
+
+<p>
+  Data of the DataView can be retrieved using the method <code>get</code>.
+</p>
+
+<pre class="prettyprint lang-js">
+var items = view.get();
+</pre>
+
+<p>
+  Data of a DataView can be filtered and formatted again, in exactly the
+  same way as in a DataSet. See sections
+  <a href="dataset.html#Data_Manipulation">Data Manipulation</a> and
+  <a href="dataset.html#Data_Selection">Data Selection</a> for more
+  information.
+</p>
+
+<pre class="prettyprint lang-js">
+var items = view.get({
+  fields: ['id', 'score'],
+  filter: function (item) {
+    return (item.score > 50);
+  }
+});
+</pre>
+
+
+
+<h2 id="Subscriptions">Subscriptions</h2>
+<p>
+  One can subscribe on changes in the DataView. Subscription works exactly
+  the same as for DataSets. See the documentation on
+  <a href="dataset.html#Subscriptions">subscriptions in a DataSet</a>
+  for more information.
+</p>
+
+<pre class="prettyprint lang-js">
+// create a DataSet and a view on the data set
+var data = new vis.DataSet();
+var view = new vis.DataView({
+  filter: function (item) {
+    return (item.group == 2);
+  }
+});
+
+// subscribe to any change in the DataView
+view.on('*', function (event, properties, senderId) {
+  console.log('event:', event, 'properties:', properties, 'senderId:', senderId);
+});
+
+// add, update, and remove data in the DataSet...
+</pre>
+
+
+
+<h2 id="Data_Policy">Data Policy</h2>
+<p>
+  All code and data is processed and rendered in the browser.
+  No data is sent to any server.
+</p>
+
+</div>
+</body>
+</html>

docs/graph3d.html

@@ -0,0 +1,673 @@
+<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>
+<p>
+  Graph3d uses <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Canvas">HTML canvas</a>
+  to render graphs, and can render up to a few thousands of data points smoothly.
+</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>xValueLabel</td>
+  <td>function</td>
+  <td>none</td>
+  <td>A function for custom formatting of the labels along the x-axis,
+    for example <code>function (x) {return (x * 100) + '%'}</code>.
+  </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>yValueLabel</td>
+  <td>function</td>
+  <td>none</td>
+  <td>A function for custom formatting of the labels along the y-axis,
+    for example <code>function (y) {return (y * 100) + '%'}</code>.
+  </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>zValueLabel</td>
+  <td>function</td>
+  <td>none</td>
+  <td>A function for custom formatting of the labels along the z-axis,
+    for example <code>function (z) {return (z * 100) + '%'}</code>.
+  </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>

docs/index.html

@@ -0,0 +1,225 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>vis.js | 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>vis.js documentation</h1>
+
+  <p>
+    Vis.js is a dynamic, browser based visualization library.
+    The library is designed to be easy to use, handle large amounts
+    of dynamic data, and enable manipulation of the data.
+  </p>
+
+  <p>
+    The library is developed by
+    <a href="http://almende.com" target="_blank">Almende B.V.</a>.
+    Vis.js runs fine on Chrome, Firefox, Opera, Safari, IE9+, and most mobile
+    browsers (with full touch support).
+  </p>
+
+  <h2 id="Components">Components</h2>
+
+  <p>
+    Vis.js contains of the following components:
+  </p>
+
+  <div style="text-align: center; float: right; padding-left: 30px;">
+    <a href="img/vis_overview.png" target="_blank">
+      <img src="img/vis_overview.png" style="width: 350px; "/><br>
+      (click for a larger view)
+    </a>
+  </div>
+
+  <ul>
+    <li>
+      <a href="dataset.html"><b>DataSet</b></a>.
+      A flexible key/value based data set.
+      Add, update, and remove items. Subscribe on changes in the data set.
+      A DataSet can filter and order items, and convert fields of items.
+    </li>
+    <li>
+      <a href="dataview.html"><b>DataView</b></a>.
+      A filtered and/or formatted view on a DataSet.
+    </li>
+    <li>
+      <a href="network.html"><b>Network</b></a>.
+      Display a network (force directed graph) with nodes and edges (previously called Graph).
+    </li>
+    <li>
+      <a href="graph2d.html"><b>Graph2d</b></a>.
+      Plot data on a timeline with lines or barcharts.
+    </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.
+    </li>
+  </ul>
+
+  <h2 id="Install">Install</h2>
+
+  <h3>npm</h3>
+
+<pre class="prettyprint">
+npm install vis
+</pre>
+
+  <h3>bower</h3>
+
+<pre class="prettyprint">
+bower install vis
+</pre>
+
+  <h3>download</h3>
+  Download the library from the website:
+  <a href="http://visjs.org" target="_blank">http://visjs.org</a>.
+
+  <h2 id="Load">Load</h2>
+
+  <p>
+    To load vis.js, include the javascript and css files of vis in your web page:
+  </p>
+
+<pre class="prettyprint lang-html">&lt;!DOCTYPE HTML&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
+  &lt;link href="components/vis/vis.css" rel="stylesheet" type="text/css" /&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;script type="text/javascript"&gt;
+  // ... load a visualization
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+  <p>
+    or load vis.js using require.js:
+  </p>
+
+<pre class="prettyprint lang-js">
+require.config({
+  paths: {
+    vis: 'path/to/vis',
+  }
+});
+
+require(['vis'], function (math) {
+  // ... load a visualization
+});
+</pre>
+
+  <p>
+    A timeline can be instantiated as follows. Other components can be
+    created in a similar way.
+  </p>
+
+<pre class="prettyprint lang-js">
+var timeline = new vis.Timeline(container, data, options);
+</pre>
+
+  <p>
+    Where <code>container</code> is an HTML element, <code>data</code> is
+    an Array with data or a DataSet, and <code>options</code> is an optional
+    object with configuration options for the component.
+  </p>
+
+  <h2 id="Use">Use</h2>
+
+  <p>
+    A basic example on using a Timeline is shown below. More examples can be
+    found in the <a href="https://github.com/almende/vis/tree/master/examples"
+                    target="_blank">examples directory</a> of the project.
+  </p>
+
+<pre class="prettyprint lang-html">
+&lt;!DOCTYPE HTML&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Timeline basic demo&lt;/title&gt;
+
+  &lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
+  &lt;link href="components/vis/vis.css" rel="stylesheet" type="text/css" /&gt;
+
+  &lt;style type="text/css"&gt;
+    body, html {
+      font-family: sans-serif;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;div id="visualization"&gt;&lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+  // DOM element where the Timeline will be attached
+  var container = document.getElementById('visualization');
+
+  // Create a DataSet (allows two way data-binding)
+  var data = new vis.DataSet([
+    {id: 1, content: 'item 1', start: '2013-04-20'},
+    {id: 2, content: 'item 2', start: '2013-04-14'},
+    {id: 3, content: 'item 3', start: '2013-04-18'},
+    {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
+    {id: 5, content: 'item 5', start: '2013-04-25'},
+    {id: 6, content: 'item 6', start: '2013-04-27'}
+  ]);
+
+    // Configuration for the Timeline
+  var options = {};
+
+  // Create a Timeline
+  var timeline = new vis.Timeline(container, data, options);
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+
+  <h2 id="license">License</h2>
+
+  <p>
+    Copyright 2010-2014 Almende B.V.
+  </p>
+
+  <p>
+    Vis.js is dual licensed under both
+  </p>
+  <ul>
+    <li>
+      The Apache 2.0 License<br>
+      <a href="http://www.apache.org/licenses/LICENSE-2.0">http://www.apache.org/licenses/LICENSE-2.0</a>
+    </li>
+  </ul>
+  <p>
+    and
+  </p>
+  <ul>
+    <li>
+      The MIT License<br>
+      <a href="http://opensource.org/licenses/MIT">http://opensource.org/licenses/MIT</a>
+    </li>
+  </ul>
+
+  <p>
+    Vis.js may be distributed under either license.
+  </p>
+
+
+</div>
+</body>
+</html>

docs/lib/prettify/lang-apollo.js

@@ -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"])

docs/lib/prettify/lang-css.js

@@ -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"])

docs/lib/prettify/lang-hs.js

@@ -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"])

docs/lib/prettify/lang-lisp.js

@@ -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"])

docs/lib/prettify/lang-lua.js

@@ -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"])

docs/lib/prettify/lang-ml.js

@@ -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"])

docs/lib/prettify/lang-proto.js

@@ -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"])

docs/lib/prettify/lang-scala.js

@@ -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"])

docs/lib/prettify/lang-sql.js

@@ -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"])

docs/lib/prettify/lang-vb.js

@@ -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"])

docs/lib/prettify/lang-vhdl.js

@@ -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"])

docs/lib/prettify/lang-wiki.js

@@ -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"])

docs/lib/prettify/lang-yaml.js

@@ -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"])

docs/lib/prettify/prettify.css

@@ -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}}

docs/lib/prettify/prettify.js

@@ -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}})()

examples/graph2d/01_basic.html

@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+  <meta content="utf-8" http-equiv="encoding">
+  <title>Graph2d | Basic Example</title>
+
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+    }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Basic Example</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+  This example shows the most basic functionality of the vis.js Graph2d module. An array or a vis.Dataset can be used as input.
+  In the following examples we'll explore the options Graph2d offest for customization. This example uses all default settings.
+  There are 10 predefined styles that will be cycled through automatically when you add different groups. Alternatively you can
+  create your own styling.
+  <br /><br />
+  Graph2d is built upon the framework of the newly refactored timeline. A lot of the timeline options will also apply to Graph2d.
+  In these examples however, we will focus on what's new in Graph2d!
+</div>
+<br />
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+  var container = document.getElementById('visualization');
+  var items = [
+    {x: '2014-06-11', y: 10},
+    {x: '2014-06-12', y: 25},
+    {x: '2014-06-13', y: 30},
+    {x: '2014-06-14', y: 10},
+    {x: '2014-06-15', y: 15},
+    {x: '2014-06-16', y: 30}
+  ];
+
+  var dataset = new vis.DataSet(items);
+  var options = {
+    start: '2014-06-10',
+    end: '2014-06-18',
+  };
+  var graph2d = new vis.Graph2d(container, dataset, options);
+</script>
+</body>
+</html>

examples/graph2d/02_bars.html

@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | Bar Graph Example</title>
+
+    <style type="text/css">
+        body, html {
+            font-family: sans-serif;
+        }
+    </style>
+
+    <script src="../../dist/vis.js"></script>
+    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Bar Graph Example</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    This example shows the most the same data as the first example, except we plot the data as bars! The
+    dataAxis (y-axis) icons have been enabled as well. These icons are generated automatically from the CSS
+    styling of the graphs. Finally, we've used the option from Timeline where we draw the x-axis (time-axis) on top.
+    <br /><br />
+    The <code>align</code> option can be used to align the bar at the center of the datapoint or on the left or right side of it.
+    This example uses the default center alignment.
+</div>
+<br />
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+    var container = document.getElementById('visualization');
+    var items = [
+        {x: '2014-06-11', y: 10},
+        {x: '2014-06-12', y: 25},
+        {x: '2014-06-13', y: 30},
+        {x: '2014-06-14', y: 10},
+        {x: '2014-06-15', y: 15},
+        {x: '2014-06-16', y: 30}
+    ];
+
+    var dataset = new vis.DataSet(items);
+    var options = {
+        style:'bar',
+        barChart: {width:50, align:'center'}, // align: left, center, right
+        drawPoints: false,
+        dataAxis: {
+            icons:true
+        },
+        orientation:'top',
+        start: '2014-06-10',
+        end: '2014-06-18'
+    };
+    var graph2d = new vis.Graph2d(container, items, options);
+
+</script>
+</body>
+</html>

examples/graph2d/03_groups.html

@@ -0,0 +1,112 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Graph2d | Groups Example</title>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+    <meta content="utf-8" http-equiv="encoding">
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+    }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Groups Example</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    This example shows the groups functionality within Graph2d. This works in the same way as it does in Timeline,
+    We have however simplified the constructor to accept groups as well to shorten the code. These groups are the
+    method used in Graph2d to define individual graphs. These groups can be given an individual class as well as all the
+    styling options you can supply to Graph2d! This example, as well as the ones that follow will showcase a few different usages
+    of these options. <br /> <br />
+
+    This example also introduces the automatically generated legend. The icons are automatically generated and the label is the
+    content as you define it in the groups. If you have datapoints that are not part of a group, a default group is created with the label: 'default'.
+    In this example, the setting <code>defaultGroup</code> is used to rename the default group to 'ungrouped'.
+</div>
+<br />
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+    // create a dataSet with groups
+    var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
+    var groups = new vis.DataSet();
+        groups.add({
+        id: 0,
+        content: names[0],
+        options: {
+            drawPoints: {
+                style: 'square' // square, circle
+            },
+            shaded: {
+                orientation: 'bottom' // top, bottom
+            }
+        }});
+
+    groups.add({
+        id: 1,
+        content: names[1],
+        options: {
+            style:'bar'
+        }});
+
+    groups.add({
+        id: 2,
+        content: names[2],
+        options: {drawPoints: false}
+    });
+
+    groups.add({
+        id: 3,
+        content: names[3],
+        options: {
+            drawPoints: {
+                style: 'circle' // square, circle
+            },
+            shaded: {
+                orientation: 'top' // top, bottom
+            }
+        }});
+
+  var container = document.getElementById('visualization');
+  var items = [
+    {x: '2014-06-13', y: 60},
+    {x: '2014-06-14', y: 40},
+    {x: '2014-06-15', y: 55},
+    {x: '2014-06-16', y: 40},
+    {x: '2014-06-17', y: 50},
+    {x: '2014-06-13', y: 30, group: 0},
+    {x: '2014-06-14', y: 10, group: 0},
+    {x: '2014-06-15', y: 15, group: 1},
+    {x: '2014-06-16', y: 30, group: 1},
+    {x: '2014-06-17', y: 10, group: 1},
+    {x: '2014-06-18', y: 15, group: 1},
+    {x: '2014-06-19', y: 52, group: 1},
+    {x: '2014-06-20', y: 10, group: 1},
+    {x: '2014-06-21', y: 20, group: 2},
+    {x: '2014-06-22', y: 60, group: 2},
+    {x: '2014-06-23', y: 10, group: 2},
+    {x: '2014-06-24', y: 25, group: 2},
+    {x: '2014-06-25', y: 30, group: 2},
+    {x: '2014-06-26', y: 20, group: 3},
+    {x: '2014-06-27', y: 60, group: 3},
+    {x: '2014-06-28', y: 10, group: 3},
+    {x: '2014-06-29', y: 25, group: 3},
+    {x: '2014-06-30', y: 30, group: 3}
+  ];
+
+  var dataset = new vis.DataSet(items);
+  var options = {
+      defaultGroup: 'ungrouped',
+      legend: true,
+      start: '2014-06-10',
+      end: '2014-07-04'
+  };
+  var graph2d = new vis.Graph2d(container, dataset, groups, options);
+
+</script>
+</body>
+</html>

examples/graph2d/04_rightAxis.html

@@ -0,0 +1,126 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | Right Axis Example</title>
+
+    <style type="text/css">
+        body, html {
+            font-family: sans-serif;
+        }
+
+        .customStyle1 {
+            fill: #0df200;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #0df200;
+        }
+
+        .customStyle2 {
+            fill: #f23303;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #ff0004;
+        }
+    </style>
+
+    <script src="../../dist/vis.js"></script>
+    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Right Axis Example</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    This example shows the all of the graphs outlined on the right side using the <code>yAxisOrientation</code> option.
+    We also show a few custom styles for the graph and show icons on the axis, which are adhering to the custom styling.
+    Finally, the legend is manually positioned. Both the left and right axis
+    have their own legend. If one of the axis is unused, the legend is not shown. The options for the legend have been split
+    in a <code>left</code> and a <code>right</code> segment. Since this example shows the right axis, the right legend is configured.
+
+
+</div>
+<br />
+<div id="visualization"></div>
+
+<script type="text/javascript">
+    // create a dataSet with groups
+    var names = ['Custom1', 'Custom2', 'Blank', 'CircleShaded'];
+    var groups = new vis.DataSet();
+    groups.add({
+        id: 0,
+        content: names[0],
+        className: 'customStyle1',
+        options: {
+            drawPoints: {
+                style: 'square' // square, circle
+            },
+            shaded: {
+                orientation: 'bottom' // top, bottom
+            }
+        }});
+
+    groups.add({
+        id: 1,
+        content: names[1],
+        className: 'customStyle2',
+        options: {
+            style:'bar',
+            drawPoints: {style: 'circle',
+                         size: 10
+            }
+        }});
+
+    groups.add({
+        id: 2,
+        content: names[2],
+        options: {
+            drawPoints: false
+        }
+    });
+
+    groups.add({
+        id: 3,
+        content: names[3],
+        options: {
+            drawPoints: {
+                style: 'circle' // square, circle
+            },
+            shaded: {
+                orientation: 'top' // top, bottom
+            }
+        }});
+
+    var container = document.getElementById('visualization');
+    var items = [
+        {x: '2014-06-13', y: 30, group: 0},
+        {x: '2014-06-14', y: 10, group: 0},
+        {x: '2014-06-15', y: 15, group: 1},
+        {x: '2014-06-16', y: 30, group: 1},
+        {x: '2014-06-17', y: 10, group: 1},
+        {x: '2014-06-18', y: 15, group: 1},
+        {x: '2014-06-19', y: 52, group: 1},
+        {x: '2014-06-20', y: 10, group: 1},
+        {x: '2014-06-21', y: 20, group: 2},
+        {x: '2014-06-22', y: 60, group: 2},
+        {x: '2014-06-23', y: 10, group: 2},
+        {x: '2014-06-24', y: 50, group: 2},
+        {x: '2014-06-25', y: 30, group: 2},
+        {x: '2014-06-26', y: 20, group: 3},
+        {x: '2014-06-27', y: 60, group: 3},
+        {x: '2014-06-28', y: 10, group: 3},
+        {x: '2014-06-29', y: 85, group: 3},
+        {x: '2014-06-30', y: 30, group: 3}
+    ];
+
+    var dataset = new vis.DataSet(items);
+    var options = {
+        legend: {right: {position: 'top-left'}},
+        yAxisOrientation: 'right', // right, left
+        dataAxis: {icons: true},
+        start: '2014-06-10',
+        end: '2014-07-04',
+        movable: false
+    };
+    var graph2d = new vis.Graph2d(container, dataset, groups, options);
+
+</script>
+</body>
+</html>

examples/graph2d/05_bothAxis.html

@@ -0,0 +1,138 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | Both Axis Example</title>
+    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+    <style type="text/css">
+        body, html {
+            font-family: sans-serif;
+        }
+
+        .customStyle1 {
+            fill: #f2ea00;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #b3ab00;
+        }
+
+        .customStyle2 {
+            fill: #00a0f2;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #050092;
+        }
+
+        .customStyle3 {
+            fill: #00f201;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #029200;
+        }
+        path.customStyle3.fill {
+            fill-opacity:0.5 !important;
+            stroke: none;
+        }
+    </style>
+
+    <script src="../../dist/vis.js"></script>
+
+</head>
+<body>
+<h2>Graph2d | Both Axis Example</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    This example shows the some of the graphs outlined on the right side using the <code>yAxisOrientation</code> option within the groups.
+    We also show a few more custom styles for the graphs. Finally, the legend is manually positioned. Both the left and right axis
+    have their own legend. If one of the axis is unused, the legend is not shown. The options for the legend have been split
+    in a <code>left</code> and a <code>right</code> segment. The default position of the left axis has been changed.
+
+
+</div>
+<br />
+<div id="visualization"></div>
+
+<script type="text/javascript">
+    // create a dataSet with groups
+    var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
+    var groups = new vis.DataSet();
+    groups.add({
+        id: 0,
+        content: names[0],
+        className: 'customStyle1',
+        options: {
+            drawPoints: {
+                style: 'square' // square, circle
+            },
+            shaded: {
+                orientation: 'bottom' // top, bottom
+            }
+        }});
+
+    groups.add({
+        id: 1,
+        content: names[1],
+        className: 'customStyle2',
+        options: {
+            style:'bar',
+            drawPoints: {style: 'circle',
+                size: 10
+            }
+        }});
+
+    groups.add({
+        id: 2,
+        content: names[2],
+        options: {
+            yAxisOrientation: 'right', // right, left
+            drawPoints: false
+        }
+    });
+
+    groups.add({
+        id: 3,
+        content: names[3],
+        className: 'customStyle3',
+        options: {
+            yAxisOrientation: 'right', // right, left
+            drawPoints: {
+                style: 'circle' // square, circle
+            },
+            shaded: {
+                orientation: 'top' // top, bottom
+            }
+        }});
+
+    var container = document.getElementById('visualization');
+    var items = [
+        {x: '2014-06-12', y: 0 , group: 0},
+        {x: '2014-06-13', y: 30, group: 0},
+        {x: '2014-06-14', y: 10, group: 0},
+        {x: '2014-06-15', y: 15, group: 1},
+        {x: '2014-06-16', y: 30, group: 1},
+        {x: '2014-06-17', y: 10, group: 1},
+        {x: '2014-06-18', y: 15, group: 1},
+        {x: '2014-06-19', y: 52, group: 1},
+        {x: '2014-06-20', y: 10, group: 1},
+        {x: '2014-06-21', y: 20, group: 2},
+        {x: '2014-06-22', y: 600, group: 2},
+        {x: '2014-06-23', y: 100, group: 2},
+        {x: '2014-06-24', y: 250, group: 2},
+        {x: '2014-06-25', y: 300, group: 2},
+        {x: '2014-06-26', y: 200, group: 3},
+        {x: '2014-06-27', y: 600, group: 3},
+        {x: '2014-06-28', y: 1000, group: 3},
+        {x: '2014-06-29', y: 250, group: 3},
+        {x: '2014-06-30', y: 300, group: 3}
+    ];
+
+    var dataset = new vis.DataSet(items);
+    var options = {
+        dataAxis: {showMinorLabels: false},
+        legend: {left:{position:"bottom-left"}},
+        start: '2014-06-09',
+        end: '2014-07-03'
+    };
+    var graph2d = new vis.Graph2d(container, dataset, groups, options);
+
+</script>
+</body>
+</html>

examples/graph2d/06_interpolation.html

@@ -0,0 +1,101 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | Interpolation</title>
+    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+    <style type="text/css">
+        body, html {
+            font-family: sans-serif;
+        }
+    </style>
+
+    <script src="../../dist/vis.js"></script>
+
+</head>
+<body>
+<h2>Graph2d | Interpolation</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    The Graph2d makes use of <a href="http://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline" target="_blank">Catmull-Rom spline interpolation</a>.
+    The user can configure these per group, or globally. In this example we show all 4 possiblities. The differences are in the parametrization of
+    the curves. The options are <code>uniform</code>, <code>chordal</code> and <code>centripetal</code>. Alternatively you can disable the Catmull-Rom interpolation and
+    a linear interpolation will be used. The <code>centripetal</code> parametrization produces the best result (no self intersection, yet follows the line closely) and is therefore the default setting.
+    <br /><br />
+    For both the <code>centripetal</code> and <code>chordal</code> parametrization, the distances between the points have to be calculated and this makes these methods computationally intensive
+    if there are very many points. The <code>uniform</code> parametrization still has to do transformations, though it does not have to calculate the distance between point. Finally, the
+    linear interpolation is the fastest method. For more on the Catmull-Rom method, <a href="http://www.cemyuksel.com/research/catmullrom_param/catmullrom.pdf" target="_blank">C. Yuksel et al. have an interesting paper titled &Prime;On the parametrization of Catmull-Rom Curves&Prime;</a>.
+</div>
+<br />
+<div id="visualization"></div>
+
+<script type="text/javascript">
+    // create a dataSet with groups
+    var names = ['centripetal', 'chordal', 'uniform', 'disabled'];
+    var groups = new vis.DataSet();
+    groups.add({
+        id: 0,
+        content: names[0],
+        options: {
+            drawPoints: false,
+            catmullRom: {
+                parametrization: 'centripetal'
+            }
+        }});
+
+    groups.add({
+        id: 1,
+        content: names[1],
+        options: {
+            drawPoints: false,
+            catmullRom: {
+                parametrization: 'chordal'
+            }
+        }});
+
+    groups.add({
+        id: 2,
+        content: names[2],
+        options: {
+            drawPoints: false,
+            catmullRom: {
+                parametrization: 'uniform'
+            }
+        }
+    });
+
+    groups.add({
+        id: 3,
+        content: names[3],
+        options: {
+            drawPoints: { style: 'circle' },
+            catmullRom: false
+        }});
+
+    var container = document.getElementById('visualization');
+    var dataset = new vis.DataSet();
+    for (var i = 0; i < names.length; i++) {
+        dataset.add( [
+            {x: '2014-06-12', y: 0 , group: i},
+            {x: '2014-06-13', y: 40, group: i},
+            {x: '2014-06-14', y: 10, group: i},
+            {x: '2014-06-15', y: 15, group: i},
+            {x: '2014-06-15', y: 30, group: i},
+            {x: '2014-06-17', y: 10, group: i},
+            {x: '2014-06-18', y: 15, group: i},
+            {x: '2014-06-19', y: 52, group: i},
+            {x: '2014-06-20', y: 10, group: i},
+            {x: '2014-06-21', y: 20, group: i}
+        ]);
+    }
+
+    var options = {
+        dataPoints: false,
+        dataAxis: {visible: false},
+        legend: true,
+        start: '2014-06-11',
+        end: '2014-06-22'
+    };
+    var graph2d = new vis.Graph2d(container, dataset, groups, options);
+
+</script>
+</body>
+</html>

examples/graph2d/07_scrollingAndSorting.html

@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Graph2d | Scrolling and Sorting</title>
+
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+    }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Scrolling and Sorting</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    You can determine the height of the Graph2d seperately from the height of the frame. If the <code>graphHeight</code>
+    is defined, and the <code>height</code> is not, the frame will auto-scale to accommodate the graphHeight. If the <code>height</code>
+    is defined as well, the user can scroll up and down vertically as well as horizontally to view the graph.
+    <br /><br />
+    Vertical scrolling is planned, though not yet available. The graphHeight also does not conform if only the <code>height</code> is defined.
+    <br /><br />
+    You can manually disable the automatic sorting of the datapoints by using the <code>sort</code> option. However, doing so does reduce the optimization
+    of the drawing so if you have a lot of points, keep <code>sort</code> turned on for the best results.
+</div>
+<br />
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+  var container = document.getElementById('visualization');
+  var items = [
+      {x: '2014-06-11', y: 10},
+      {x: '2014-06-12', y: 25},
+      {x: '2014-06-13', y: 30},
+      {x: '2014-06-14', y: 10},
+      {x: '2014-06-15', y: 15},
+      {x: '2014-06-16', y: 30},
+      {x: '2014-06-11', y: 100},
+      {x: '2014-06-12', y: 250},
+      {x: '2014-06-13', y: 300},
+      {x: '2014-06-14', y: 100},
+      {x: '2014-06-15', y: 150},
+      {x: '2014-06-16', y: 300},
+      {x: '2014-06-11', y: 400},
+      {x: '2014-06-12', y: 450},
+      {x: '2014-06-13', y: 400},
+      {x: '2014-06-14', y: 500},
+      {x: '2014-06-15', y: 420},
+      {x: '2014-06-16', y: 600},
+      {x: '2014-06-11', y: 810},
+      {x: '2014-06-12', y: 825},
+      {x: '2014-06-13', y: 830},
+      {x: '2014-06-14', y: 810},
+      {x: '2014-06-15', y: 815},
+      {x: '2014-06-16', y: 900}
+  ];
+
+  var dataset = new vis.DataSet(items);
+  var options = {
+      legend: true,
+      sort: false,
+      defaultGroup: 'doodle',
+      graphHeight: '1500px',
+      height: '500px',
+      start: '2014-06-10',
+      end: '2014-06-18'
+  };
+  var graph2d = new vis.Graph2d(container, dataset, options);
+
+</script>
+</body>
+</html>

examples/graph2d/08_performance.html

@@ -0,0 +1,150 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | Performance</title>
+
+    <style>
+        body, html {
+            font-family: arial, sans-serif;
+            font-size: 11pt;
+        }
+        span.label {
+            width:150px;
+            display:inline-block;
+        }
+    </style>
+
+    <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
+
+    <script src="../../dist/vis.js"></script>
+    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Performance</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    This example is a test of the performance of the Graph2d. Select the amount of datapoints you want to plot and press draw.
+    You can choose between the style of the points as well as the interpolation method. This can only be toggled with the buttons.
+    The interpolation options may not look different for this dataset but you can see their effects clearly in example 7.
+    <br /><br />
+    Linear interpolation and no points are the settings that will render quickest. By default, Graph2d will downsample when there are more
+    than 1 point per pixel. This can be manually disabled at the cost of performance by using the <code>sampling</code> option.
+</div>
+<br />
+<p>
+    <span class="label">Number of items:</span><input id="count" value="50000">
+    <input id="draw" type="button" value="draw" style="width:200px;"> <span id="description"><b>Click the draw button to load the data!</b></span>
+    <br />
+
+    <span class="label">Interpolation method:</span><input id="interpolation" value="linear">
+    <input id="toggleInterpolation" type="button" value="toggle Interpolation" style="width:200px;">
+    <br />
+    <span class="label">Points style:</span><input id="points" value="none">
+    <input id="togglePoints" type="button" value="toggle Points" style="width:200px;">
+
+</p>
+<div id="visualization"></div>
+
+<script>
+    var points = 'none';
+    var interpolation = 'linear';
+
+    function togglePoints() {
+        var pointsOptions = {};
+        var pointsField = document.getElementById("points");
+        if (points == "none") {
+            points = 'circle';
+            pointsOptions = {drawPoints: {style: points}};
+        }
+        else if (points == "circle") {
+            points = 'square';
+            pointsOptions = {drawPoints: {style: points}};
+        }
+        else if (points == "square") {
+            points = 'none';
+            pointsOptions = {drawPoints: false};
+        }
+        pointsField.value = points;
+
+        graph2d.setOptions(pointsOptions);
+    }
+
+    function toggleInterpolation() {
+        var interpolationOptions = {};
+        var interpolationField = document.getElementById("interpolation");
+        if (interpolation == "linear") {
+            interpolation = 'centripetal';
+            interpolationOptions = {catmullRom: {parametrization: interpolation}};
+        }
+        else if (interpolation == "centripetal") {
+            interpolation = 'chordal';
+            interpolationOptions = {catmullRom: {parametrization: interpolation}};
+        }
+        else if (interpolation == "chordal") {
+            interpolation = 'uniform';
+            interpolationOptions = {catmullRom: {parametrization: interpolation}};
+        }
+        else if (interpolation == "uniform") {
+            interpolation = 'linear';
+            interpolationOptions = {catmullRom: false};
+        }
+        interpolationField.value = interpolation;
+        graph2d.setOptions(interpolationOptions);
+    }
+
+
+    // create a dataset with items
+    var now = moment().minutes(0).seconds(0).milliseconds(0);
+    var dataset = new vis.DataSet({
+        type: {start: 'ISODate', end: 'ISODate' }
+    });
+
+
+    var startPoint = now;
+    var endPoint = now + 3600000 * 5000;
+
+    // create data -- this is seperated into 3 functions so we can update the span.
+    function createData() {
+        var span = document.getElementById("description");
+        span.innerHTML = 'Generating data... (just javascript, not vis.graph2D)...';
+        setTimeout(generateData,10);
+    }
+
+    function generateData() {
+        var count = parseInt(document.getElementById('count').value) || 100;
+        var newData = [];
+        var span = document.getElementById("description");
+        var start = now;
+        for (var i = 0; i < count; i++) {
+            var yval = Math.sin(i/100) * Math.cos(i/50) * 50 + Math.sin(i/1000) * 50;
+            newData.push({id: i, x: start + 3600000 * i, y: yval});
+        }
+        span.innerHTML = 'Loading data into Graph2d...';
+        setTimeout(function() {loadDataIntoVis(newData);},10);
+
+    }
+
+    function loadDataIntoVis(newData) {
+        var span = document.getElementById("description");
+        dataset.clear();
+        dataset.add(newData);
+        span.innerHTML = 'Done!';
+    }
+
+    document.getElementById('draw').onclick = createData;
+    document.getElementById('toggleInterpolation').onclick = toggleInterpolation;
+    document.getElementById('togglePoints').onclick = togglePoints;
+
+    var container = document.getElementById('visualization');
+    var options = {
+        sampling: true,
+        drawPoints: {enabled:false, size:3},
+        catmullRom: false,
+        start: startPoint,
+        end: endPoint
+    };
+
+    var graph2d = new vis.Graph2d(container, dataset, options);
+</script>
+</body>
+</html>

examples/graph2d/09_external_legend.html

@@ -0,0 +1,367 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | External legend Example</title>
+    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+    <style type="text/css">
+        body, html {
+            font-family: sans-serif;
+        }
+
+        .customStyle1 {
+            fill: #f2ea00;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #b3ab00;
+        }
+
+        .customStyle2 {
+            fill: #00a0f2;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #050092;
+        }
+
+        .customStyle3 {
+            fill: #00f201;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #029200;
+        }
+
+        path.customStyle3.fill {
+            fill-opacity:0.5 !important;
+            stroke: none;
+        }
+
+         .graphGroup0 {
+            fill:#4f81bd;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #4f81bd;
+        }
+
+         .graphGroup1 {
+            fill:#f79646;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #f79646;
+        }
+
+         .graphGroup2 {
+            fill: #8c51cf;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #8c51cf;
+        }
+
+         .graphGroup3 {
+            fill: #75c841;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #75c841;
+        }
+
+         .graphGroup4 {
+            fill: #ff0100;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #ff0100;
+        }
+
+         .graphGroup5 {
+            fill: #37d8e6;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #37d8e6;
+        }
+
+         .graphGroup6 {
+            fill: #042662;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #042662;
+        }
+
+         .graphGroup7 {
+            fill:#00ff26;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #00ff26;
+        }
+
+         .graphGroup8 {
+            fill:#ff00ff;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #ff00ff;
+        }
+
+         .graphGroup9 {
+            fill: #8f3938;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #8f3938;
+        }
+
+         .fill {
+            fill-opacity:0.1;
+            stroke: none;
+        }
+
+
+         .bar {
+            fill-opacity:0.5;
+            stroke-width:1px;
+        }
+
+         .point {
+            stroke-width:2px;
+            fill-opacity:1.0;
+        }
+
+
+         .legendBackground {
+            stroke-width:1px;
+            fill-opacity:0.9;
+            fill: #ffffff;
+            stroke: #c2c2c2;
+        }
+
+
+         .outline {
+            stroke-width:1px;
+            fill-opacity:1;
+            fill: #ffffff;
+            stroke: #e5e5e5;
+        }
+
+         .iconFill {
+            fill-opacity:0.3;
+            stroke: none;
+        }
+
+        div.descriptionContainer {
+            float:left;
+            height:30px;
+            width:160px;
+            padding-left:5px;
+            padding-right:5px;
+            line-height: 30px;
+        }
+
+        div.iconContainer {
+            float:left;
+        }
+
+        div.legendElementContainer {
+            display:inline-block;
+            width:200px;
+            height:30px;
+            border-style:solid;
+            border-width:1px;
+            border-color: #e0e0e0;
+            background-color: #ffffff;
+            margin:4px;
+            padding:4px;
+            -webkit-touch-callout: none;
+            -webkit-user-select: none;
+            -khtml-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+            cursor:pointer;
+        }
+        div.legendElementContainer.hidden {
+            background-color: #d3e6ff;
+        }
+
+        svg.legendIcon {
+            width:30px;
+            height:30px;
+        }
+
+        div.externalLegend {
+            position:relative;
+            margin-left: -5px;
+            width: 900px;
+        }
+
+
+
+
+    </style>
+
+    <script src="../../dist/vis.js"></script>
+
+</head>
+<body>
+<h2>Graph2d | External custom legend</h2>
+<div style="width:800px; font-size:14px; text-align: justify;">
+    This example shows how to create an external custom legend using the getLegend function. We use normal JavaScript to show and hide the
+    groups by updating the dataset.
+
+</div>
+<br />
+<div id="Legend" class="externalLegend"></div>
+<div id="visualization"></div>
+
+
+<script type="text/javascript">
+    // create a dataSet with groups
+    var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
+    var groups = new vis.DataSet();
+    groups.add({
+        id: 0,
+        content: names[0],
+        className: 'customStyle1',
+        options: {
+            drawPoints: {
+                style: 'square' // square, circle
+            },
+            shaded: {
+                orientation: 'bottom' // top, bottom
+            }
+        }});
+
+    groups.add({
+        id: 1,
+        content: names[1],
+        className: 'customStyle2',
+        options: {
+            style:'bar',
+            drawPoints: {style: 'circle',
+                size: 10
+            }
+        }});
+
+    groups.add({
+        id: 2,
+        content: names[2],
+        options: {
+            yAxisOrientation: 'right', // right, left
+            drawPoints: false
+        }
+    });
+
+    groups.add({
+        id: 3,
+        content: names[3],
+        className: 'customStyle3',
+        options: {
+            yAxisOrientation: 'right', // right, left
+            drawPoints: {
+                style: 'circle' // square, circle
+            },
+            shaded: {
+                orientation: 'top' // top, bottom
+            }
+        }});
+
+    var container = document.getElementById('visualization');
+    var items = [
+        {x: '2014-06-12', y: 0 , group: 0},
+        {x: '2014-06-13', y: 30, group: 0},
+        {x: '2014-06-14', y: 10, group: 0},
+        {x: '2014-06-15', y: 15, group: 1},
+        {x: '2014-06-16', y: 30, group: 1},
+        {x: '2014-06-17', y: 10, group: 1},
+        {x: '2014-06-18', y: 15, group: 1},
+        {x: '2014-06-19', y: 52, group: 1},
+        {x: '2014-06-20', y: 10, group: 1},
+        {x: '2014-06-21', y: 20, group: 2},
+        {x: '2014-06-22', y: 600, group: 2},
+        {x: '2014-06-23', y: 100, group: 2},
+        {x: '2014-06-24', y: 250, group: 2},
+        {x: '2014-06-25', y: 300, group: 2},
+        {x: '2014-06-26', y: 200, group: 3},
+        {x: '2014-06-27', y: 600, group: 3},
+        {x: '2014-06-28', y: 1000, group: 3},
+        {x: '2014-06-29', y: 250, group: 3},
+        {x: '2014-06-30', y: 300, group: 3}
+    ];
+
+    var dataset = new vis.DataSet(items);
+    var options = {
+        dataAxis: {showMinorLabels: false},
+        start: '2014-06-09',
+        end: '2014-07-03'
+    };
+    var graph2d = new vis.Graph2d(container, items, groups, options);
+
+
+    /**
+     * this function fills the external legend with content using the getLegend() function.
+     */
+    function populateExternalLegend() {
+        var groupsData = groups.get();
+        var legendDiv = document.getElementById("Legend");
+        legendDiv.innerHTML = "";
+
+        // get for all groups:
+        for (var i = 0; i < groupsData.length; i++) {
+            // create divs
+            var containerDiv = document.createElement("div");
+            var iconDiv = document.createElement("div");
+            var descriptionDiv = document.createElement("div");
+
+            // give divs classes and Ids where necessary
+            containerDiv.className = 'legendElementContainer';
+            containerDiv.id = groupsData[i].id + "_legendContainer"
+            iconDiv.className = "iconContainer";
+            descriptionDiv.className = "descriptionContainer";
+
+            // get the legend for this group.
+            var legend = graph2d.getLegend(groupsData[i].id,30,30);
+
+            // append class to icon. All styling classes from the vis.css have been copied over into the head here to be able to style the
+            // icons with the same classes if they are using the default ones.
+            legend.icon.setAttributeNS(null, "class", "legendIcon");
+
+            // append the legend to the corresponding divs
+            iconDiv.appendChild(legend.icon);
+            descriptionDiv.innerHTML = legend.label;
+
+            // determine the order for left and right orientation
+            if (legend.orientation == 'left') {
+                descriptionDiv.style.textAlign = "left";
+                containerDiv.appendChild(iconDiv);
+                containerDiv.appendChild(descriptionDiv);
+            }
+            else {
+                descriptionDiv.style.textAlign = "right";
+                containerDiv.appendChild(descriptionDiv);
+                containerDiv.appendChild(iconDiv);
+            }
+
+            // append to the legend container div
+            legendDiv.appendChild(containerDiv);
+
+            // bind click event to this legend element.
+            containerDiv.onclick = toggleGraph.bind(this,groupsData[i].id);
+        }
+    }
+
+    /**
+     * This function switchs the visible option of the selected group on an off.
+     * @param groupId
+     */
+    function toggleGraph(groupId) {
+        // get the container that was clicked on.
+        var container = document.getElementById(groupId + "_legendContainer")
+        // if visible, hide
+        if (graph2d.isGroupVisible(groupId) == true) {
+            groups.update({id:groupId, visible:false});
+            container.className = container.className + " hidden";
+        }
+        else { // if invisible, show
+            groups.update({id:groupId, visible:true});
+            container.className = container.className.replace("hidden","");
+        }
+    }
+
+    populateExternalLegend()
+
+</script>
+</body>
+</html>

examples/graph2d/10_barsSideBySide.html

@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | Bar Graphs Side by Side Example</title>
+
+    <style type="text/css">
+        body, html {
+            font-family: sans-serif;
+        }
+    </style>
+
+    <script src="../../dist/vis.js"></script>
+    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Bar Graphs Side by Side Example</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    When using Bar graphs, it can often be the case that there are multiple bars on the same timepoint. This may not always be the desired result. You can use the
+    barChart.handleOverlap option to automatically plot the bars next to eachother or stacked on top of eachother if they occupy the same timeslot. By default, this option is on, the bars overlap.
+    Use the dropdown box to experiment with the options. The stacked only really makes sense when using groups as is shown in the <a href="./11_barsSideBySideGroups.html">next example</a>.
+
+    <br /><br />
+    Handle overlap: <select id="dropdownID">
+    <option value="overlap">overlap</option>
+    <option value="sideBySide">sideBySide</option>
+    <option value="stack">stack</option>
+</select><br/>
+</div>
+<br />
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+    var container = document.getElementById('visualization');
+    var items = [
+        {x: '2014-06-11', y: 10},
+        {x: '2014-06-12', y: 25},
+        {x: '2014-06-13', y: 30},
+        {x: '2014-06-14', y: 10},
+        {x: '2014-06-15', y: 15},
+        {x: '2014-06-16', y: 30},
+        {x: '2014-06-11', y: 12},
+        {x: '2014-06-14', y: 24},
+        {x: '2014-06-15', y: 5},
+        {x: '2014-06-16', y: 12}
+    ];
+
+    var dataset = new vis.DataSet(items);
+    var options = {
+        style:'bar',
+        barChart: {width:50, align:'center'}, // align: left, center, right
+        drawPoints: false,
+        dataAxis: {
+            icons:true
+        },
+        orientation:'top',
+        start: '2014-06-10',
+        end: '2014-06-18'
+    };
+    var graph2d = new vis.Graph2d(container, items, options);
+
+
+    var dropdown = document.getElementById("dropdownID");
+    dropdown.onchange = update;
+
+    function update() {
+        var options = {barChart:{handleOverlap:dropdown.value}};
+        graph2d.setOptions(options);
+    }
+
+</script>
+</body>
+</html>

examples/graph2d/11_barsSideBySideGroups.html

@@ -0,0 +1,87 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | Bar Graphs Side by Side Example with Groups</title>
+
+    <style type="text/css">
+        body, html {
+            font-family: sans-serif;
+        }
+    </style>
+
+    <script src="../../dist/vis.js"></script>
+    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Bar Graphs Side by Side Example with Groups</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    When using Bar graphs, it can often be the case that there are multiple bars on the same timepoint. This may not always be the desired result. You can use the
+    barChart.handleOverlap option to automatically plot the bars next to eachother or stacked on top of eachother if they occupy the same timeslot. By default, this option is on, the bars overlap.
+    Use the dropdown box to experiment with the options. The stacked only really makes sense when using groups as is shown here.
+
+    <br /><br />
+    Handle overlap: <select id="dropdownID">
+    <option value="overlap">overlap</option>
+    <option value="sideBySide" selected="selected">sideBySide</option>
+    <option value="stack">stack</option>
+    </select>
+</div>
+<br />
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+    var container = document.getElementById('visualization');
+    var groups = new vis.DataSet();
+    groups.add({id: 0, content: "group0"})
+    groups.add({id: 1, content: "group1"})
+    groups.add({id: 2, content: "group2"})
+
+    var items = [
+        {x: '2014-06-11', y: 10, group:0},
+        {x: '2014-06-12', y: 25, group:0},
+        {x: '2014-06-13', y: 30, group:0},
+        {x: '2014-06-14', y: 10, group:0},
+        {x: '2014-06-15', y: 15, group:0},
+        {x: '2014-06-16', y: 30, group:0},
+        {x: '2014-06-11', y: 12, group:1},
+        {x: '2014-06-12', y: 15, group:1},
+        {x: '2014-06-13', y: 34, group:1},
+        {x: '2014-06-14', y: 24, group:1},
+        {x: '2014-06-15', y: 5, group:1},
+        {x: '2014-06-16', y: 12, group:1},
+        {x: '2014-06-11', y: 22, group:2},
+        {x: '2014-06-12', y: 14, group:2},
+        {x: '2014-06-13', y: 24, group:2},
+        {x: '2014-06-14', y: 21, group:2},
+        {x: '2014-06-15', y: 30, group:2},
+        {x: '2014-06-16', y: 18, group:2}
+    ];
+
+    var dataset = new vis.DataSet(items);
+    var options = {
+        style:'bar',
+        barChart: {width:50, align:'center', handleOverlap:'sideBySide'}, // align: left, center, right
+        drawPoints: false,
+        dataAxis: {
+            icons:true
+        },
+        orientation:'top',
+        start: '2014-06-10',
+        end: '2014-06-18'
+    };
+    var graph2d = new vis.Graph2d(container, items, groups, options);
+
+    var dropdown = document.getElementById("dropdownID");
+    dropdown.onchange = update;
+
+    function update() {
+        var options = {barChart:{handleOverlap:dropdown.value}};
+        graph2d.setOptions(options);
+    }
+
+
+</script>
+</body>
+</html>

examples/graph2d/12_customRange.html

@@ -0,0 +1,96 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | Bar Graph Example</title>
+
+    <style type="text/css">
+        body, html {
+            font-family: sans-serif;
+        }
+    </style>
+
+    <script src="../../dist/vis.js"></script>
+    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Custom axis range</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    You can define a custom range for the Y axis. Since there are two Y axis, you can define both of them. You can also
+    only define the min or max values. Since one of the Y axis is slaved to the other one (the right one is slaved to the left one),
+    you cannot absolutely define the range of the slaved axis because it has to use the same lines. The values you supply are used as guidelines however.
+    If the zero-lines have to be aligned, you can use the option alignZeros. It is enabled by default.
+
+<pre class="prettyprint lang-js">
+var options = {
+    dataAxis: {
+        customRange: {
+            left: {
+                min:-5, max:30
+            },
+            right: {
+                min:-5
+            }
+        }
+    }
+};
+</pre>
+</div>
+<br />
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+    var container = document.getElementById('visualization');
+    var groups = new vis.DataSet();
+    groups.add({id: 0, content: "group0"})
+    groups.add({id: 1, content: "group1"})
+    groups.add({id: 2, content: "group2",options:{ yAxisOrientation:'right'}})
+
+    var items = [
+        {x: '2014-06-11', y: 10, group:0},
+        {x: '2014-06-12', y: 25, group:0},
+        {x: '2014-06-13', y: 30, group:0},
+        {x: '2014-06-14', y: 10, group:0},
+        {x: '2014-06-15', y: 15, group:0},
+        {x: '2014-06-16', y: 30, group:0},
+        {x: '2014-06-11', y: 12, group:1},
+        {x: '2014-06-12', y: 15, group:1},
+        {x: '2014-06-13', y: 34, group:1},
+        {x: '2014-06-14', y: 24, group:1},
+        {x: '2014-06-15', y: 5, group:1},
+        {x: '2014-06-16', y: 12, group:1},
+        {x: '2014-06-11', y: 22, group:2},
+        {x: '2014-06-12', y: 14, group:2},
+        {x: '2014-06-13', y: 24, group:2},
+        {x: '2014-06-14', y: 21, group:2},
+        {x: '2014-06-15', y: 30, group:2},
+        {x: '2014-06-16', y: 18, group:2}
+    ];
+
+    var dataset = new vis.DataSet(items);
+    var options = {
+        style:'bar',
+        barChart: {width:50, align:'center', handleOverlap:"sideBySide"}, // align: left, center, right
+        drawPoints: true,
+        dataAxis: {
+            customRange: {
+                left: {
+                    min:-5, max:30
+                },
+                right: {
+                    min:-5
+                }
+            },
+            icons:true
+        },
+        orientation:'top',
+        start: '2014-06-10',
+        end: '2014-06-18'
+
+    };
+    var graph2d = new vis.Graph2d(container, items, groups, options);
+
+</script>
+</body>
+</html>

examples/graph2d/13_localization.html

@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+  <meta content="utf-8" http-equiv="encoding">
+  <title>Graph2d | Localization</title>
+
+  <style type="text/css">
+    body, html, select {
+      font-family: sans-serif;
+      font-size: 11pt;
+    }
+  </style>
+
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment-with-langs.min.js"></script>
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Localization</h2>
+<p>
+  To localize Graph2d, one has to load a version of moment.js including locales. To set a locale, specify option <code>{locale: STRING}</code>.
+</p>
+
+<p>
+  <label for="locale">Select a locale:</label>
+  <select id="locale">
+    <option value="en" selected>en</option>
+    <option value="nl">nl</option>
+  </select>
+</p>
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+  var container = document.getElementById('visualization');
+  var items = [
+    {x: '2014-06-11', y: 10},
+    {x: '2014-06-12', y: 25},
+    {x: '2014-06-13', y: 30},
+    {x: '2014-06-14', y: 10},
+    {x: '2014-06-15', y: 15},
+    {x: '2014-06-16', y: 30}
+  ];
+
+  var dataset = new vis.DataSet(items);
+  var options = {
+    start: '2014-06-10',
+    end: '2014-06-18'
+  };
+  var graph2d = new vis.Graph2d(container, dataset, options);
+
+  // update the locale when changing the select box value
+  var select = document.getElementById('locale');
+  select.onchange = function () {
+    graph2d.setOptions({
+      locale: this.value
+    });
+  };
+  select.onchange();
+</script>
+</body>
+</html>

examples/graph2d/14_toggleGroups.html

@@ -0,0 +1,145 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Graph2d | Toggle Groups Example</title>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+    <meta content="utf-8" http-equiv="encoding">
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+    }
+
+      div.graphs {
+          width:300px;
+          display:inline-block;
+      }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Groups Example</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    This example shows the groups visibility functionality within Graph2d. Groups have their own visibility option. By using this,
+    all graph2d instances using those groups would show or hide that group. If you have multiple instances sharing the same data and groups,
+    you can use the groups.visibility option to set it on an instance level. The graphs below all share the same groups, items and initial options.
+    We then use a setOptions like so:
+
+
+    <pre class="prettyprint lang-js">
+        graph2d1.setOptions({
+            groups:{
+                visibility:{
+                    0:true,               // group id:0 visible
+                    1:false,              // group id:1 hidden
+                    2:false,              // group id:2 hidden
+                    3:false,              // group id:3 hidden
+                    "__ungrouped__":false // default group hidden
+                }
+            }
+        })
+    </pre>
+</div>
+<br />
+
+<div class="graphs" id="visualization1"></div>
+<div class="graphs" id="visualization2"></div>
+<div class="graphs" id="visualization3"></div>
+<div class="graphs" id="visualization4"></div>
+<div class="graphs" id="visualization5"></div>
+<div class="graphs" id="visualization6"></div>
+
+<script type="text/javascript">
+    // create a dataSet with groups
+    var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
+    var groups = new vis.DataSet();
+        groups.add({
+        id: 0,
+        content: names[0],
+        options: {
+            drawPoints: {
+                style: 'square' // square, circle
+            },
+            shaded: {
+                orientation: 'bottom' // top, bottom
+            }
+        }});
+
+    groups.add({
+        id: 1,
+        content: names[1],
+        options: {
+            style:'bar'
+        }});
+
+    groups.add({
+        id: 2,
+        content: names[2],
+        options: {drawPoints: false}
+    });
+
+    groups.add({
+        id: 3,
+        content: names[3],
+        options: {
+            drawPoints: {
+                style: 'circle' // square, circle
+            },
+            shaded: {
+                orientation: 'top' // top, bottom
+            }
+        }});
+
+  var container = document.getElementById('visualization');
+  var items = [
+    {x: '2014-06-13', y: 60},
+    {x: '2014-06-14', y: 40},
+    {x: '2014-06-15', y: 55},
+    {x: '2014-06-16', y: 40},
+    {x: '2014-06-17', y: 50},
+    {x: '2014-06-13', y: 30, group: 0},
+    {x: '2014-06-14', y: 10, group: 0},
+    {x: '2014-06-15', y: 15, group: 1},
+    {x: '2014-06-16', y: 30, group: 1},
+    {x: '2014-06-17', y: 10, group: 1},
+    {x: '2014-06-18', y: 15, group: 1},
+    {x: '2014-06-19', y: 52, group: 1},
+    {x: '2014-06-20', y: 10, group: 1},
+    {x: '2014-06-21', y: 20, group: 2},
+    {x: '2014-06-22', y: 60, group: 2},
+    {x: '2014-06-23', y: 10, group: 2},
+    {x: '2014-06-24', y: 25, group: 2},
+    {x: '2014-06-25', y: 30, group: 2},
+    {x: '2014-06-26', y: 20, group: 3},
+    {x: '2014-06-27', y: 60, group: 3},
+    {x: '2014-06-28', y: 10, group: 3},
+    {x: '2014-06-29', y: 25, group: 3},
+    {x: '2014-06-30', y: 30, group: 3}
+  ];
+
+  var dataset = new vis.DataSet(items);
+  var options = {
+      defaultGroup: 'ungrouped',
+      legend: false,
+      graphHeight:200,
+      start: '2014-06-10',
+      end: '2014-07-04',
+      showMajorLabels:false,
+      showMinorLabels:false
+  };
+  var graph2d1 = new vis.Graph2d(document.getElementById('visualization1'), dataset, groups, options);
+  var graph2d2 = new vis.Graph2d(document.getElementById('visualization2'), dataset, groups, options);
+  var graph2d3 = new vis.Graph2d(document.getElementById('visualization3'), dataset, groups, options);
+  var graph2d4 = new vis.Graph2d(document.getElementById('visualization4'), dataset, groups, options);
+  var graph2d5 = new vis.Graph2d(document.getElementById('visualization5'), dataset, groups, options);
+  var graph2d6 = new vis.Graph2d(document.getElementById('visualization6'), dataset, groups, options);
+
+  graph2d1.setOptions({groups:{visibility:{0:true, 1:false, 2:false, 3:false, "__ungrouped__":false}}})
+  graph2d2.setOptions({groups:{visibility:{0:false, 1:true, 2:false, 3:false, "__ungrouped__":false}}})
+  graph2d3.setOptions({groups:{visibility:{0:false, 1:false, 2:true, 3:false, "__ungrouped__":false}}})
+  graph2d4.setOptions({groups:{visibility:{0:false, 1:false, 2:false, 3:true, "__ungrouped__":false}}})
+  graph2d5.setOptions({groups:{visibility:{0:false, 1:false, 2:false, 3:false, "__ungrouped__":true}}})
+</script>
+</body>
+</html>

examples/graph2d/15_streaming_data.html

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

examples/graph2d/16_bothAxis_titles.html

@@ -0,0 +1,215 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | Axis Titles and Styling</title>
+    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+    <style type="text/css">
+        body, html {
+            font-family: sans-serif;
+        }
+
+        .customStyle1 {
+            fill: #f2ea00;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #b3ab00;
+        }
+
+        .customStyle2 {
+            fill: #00a0f2;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #050092;
+        }
+
+        .customStyle3 {
+            fill: #00f201;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #029200;
+        }
+        path.customStyle3.fill {
+            fill-opacity:0.5 !important;
+            stroke: none;
+        }
+    </style>
+
+    <script src="../../dist/vis.js"></script>
+
+</head>
+<body>
+<h2>Graph2d | Axis Titles and Styling</h2>
+<div style="width:800px; font-size:14px; text-align: justify;">
+<table>
+    <tr>
+        <td>
+            This example shows setting a title for the left and right axis. Optionally the example allows the user
+            to show icons and labels on the left and right axis.
+        </td>
+        <td>
+            <table>
+                <tr>
+                    <td><input type="button" onclick="showIcons(true)" value="Show Icons" /></td>
+                    <td><input type="button" onclick="showIcons(false)" value="Hide Icons" /></td>
+                </tr>
+                <tr>
+                    <td><input type="button" onclick="showTitle('left', true)" value="Show Left Title" /></td>
+                    <td><input type="button" onclick="showTitle('left', false)" value="Hide Left Title" /></td>
+                </tr>
+                <tr>
+                    <td><input type="button" onclick="showTitle('right', true)" value="Show Right Title" /></td>
+                    <td><input type="button" onclick="showTitle('right', false)" value="Hide Right Title" /></td>
+                </tr>
+                <tr>
+                    <td><input type="button" onclick="styleTitle('left')" value="Color Left Title" /></td>
+                    <td><input type="button" onclick="styleTitle('right')" value="Color Right Title" /></td>
+                </tr>
+                <tr>
+                    <td>Left decimals</td>
+                    <td><select id="decimals" onchange="styleDecimals()">
+                        <option value="0">0</option>
+                        <option value="1">1</option>
+                        <option value="2">2</option>
+                        </select>
+                    </td>
+                </tr>
+            </table>
+        </td>
+    </tr>
+</table>
+</div>
+<br />
+<div id="visualization"></div>
+
+<script type="text/javascript">
+    // create a dataSet with groups
+    var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
+    var groups = new vis.DataSet();
+    groups.add({
+        id: 0,
+        content: names[0],
+        className: 'customStyle1',
+        options: {
+            drawPoints: {
+                style: 'square' // square, circle
+            },
+            shaded: {
+                orientation: 'bottom' // top, bottom
+            }
+        }});
+
+    groups.add({
+        id: 1,
+        content: names[1],
+        className: 'customStyle2',
+        options: {
+            style:'bar',
+            drawPoints: {style: 'circle',
+                size: 10
+            }
+        }});
+
+    groups.add({
+        id: 2,
+        content: names[2],
+        options: {
+            yAxisOrientation: 'right', // right, left
+            drawPoints: false
+        }
+    });
+
+    groups.add({
+        id: 3,
+        content: names[3],
+        className: 'customStyle3',
+        options: {
+            yAxisOrientation: 'right', // right, left
+            drawPoints: {
+                style: 'circle' // square, circle
+            },
+            shaded: {
+                orientation: 'top' // top, bottom
+            }
+        }});
+
+    var container = document.getElementById('visualization');
+    var items = [
+        {x: '2014-06-12', y: 0 , group: 0},
+        {x: '2014-06-13', y: 30, group: 0},
+        {x: '2014-06-14', y: 10, group: 0},
+        {x: '2014-06-15', y: 15, group: 1},
+        {x: '2014-06-16', y: 30, group: 1},
+        {x: '2014-06-17', y: 10, group: 1},
+        {x: '2014-06-18', y: 15, group: 1},
+        {x: '2014-06-19', y: 52, group: 1},
+        {x: '2014-06-20', y: 10, group: 1},
+        {x: '2014-06-21', y: 20, group: 2},
+        {x: '2014-06-22', y: 600, group: 2},
+        {x: '2014-06-23', y: 100, group: 2},
+        {x: '2014-06-24', y: 250, group: 2},
+        {x: '2014-06-25', y: 300, group: 2},
+        {x: '2014-06-26', y: 200, group: 3},
+        {x: '2014-06-27', y: 600, group: 3},
+        {x: '2014-06-28', y: 1000, group: 3},
+        {x: '2014-06-29', y: 250, group: 3},
+        {x: '2014-06-30', y: 300, group: 3}
+    ];
+
+    var dataset = new vis.DataSet(items);
+    var options = {
+        dataAxis: {
+            showMinorLabels: false,
+            title: {
+                right: {
+                    text: 'Title (right axis)'
+                }
+            }
+        },
+        legend: {left:{position:"bottom-left"}},
+        start: '2014-06-09',
+        end: '2014-07-03'
+    };
+    var graph2d = new vis.Graph2d(container, items, groups, options);
+
+    function showIcons(show) {
+        graph2d.setOptions({dataAxis: {icons: show}});
+    }
+
+    function showTitle(axis, show) {
+        var title;
+        if(show == true) {
+            title = {text: "Title (" + axis + " axis)"};
+        }
+        else {
+            title = undefined;
+        }
+
+        if(axis == 'left') {
+            graph2d.setOptions({dataAxis: {title: {left: title}}});
+        }
+        else {
+            graph2d.setOptions({dataAxis: {title: {right: title}}});
+        }
+    }
+
+    var colors=['red','green','blue','black','yellow','purple','pink'];
+    function styleTitle(axis) {
+        var title;
+        title = {style: "color: " + colors[Math.floor(Math.random() * colors.length) + 1]};
+
+        if(axis == 'left') {
+            graph2d.setOptions({dataAxis: {title: {left: title}}});
+        }
+        else {
+            graph2d.setOptions({dataAxis: {title: {right: title}}});
+        }
+    }
+
+    function styleDecimals() {
+        var x = document.getElementById("decimals");
+        graph2d.setOptions({dataAxis: {format: {left: {decimals: Number(x.value)}}}});
+    }
+
+</script>
+</body>
+</html>

examples/graph2d/17_dynamicStyling.html

@@ -0,0 +1,256 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+    <meta content="utf-8" http-equiv="encoding">
+    <title>Graph2d | Dynamic Styling</title>
+
+    <style type="text/css">
+        body, html {
+            font-family: sans-serif;
+        }
+    </style>
+
+    <script src="../../dist/vis.js"></script>
+    <link href="../../dist/vis.css" rel="stylesheet" type="text/css"/>
+</head>
+<body>
+<h2>Graph2d | Dynamic Styling Example</h2>
+
+<div style="width:800px; font-size:14px; text-align: justify;">
+    This example shows how to programmatically change the styling of a group. While this can also
+    be done in CSS, this must be statically defined, and the programmatic interface allows the
+    user to define the look of the graph at runtime.
+</div>
+<br/>
+
+
+<table>
+    <col width="600">
+    <col width="220">
+    <tr>
+        <td style="padding-right: 20px; border-right: 1px solid;">
+            <div id="visualization"></div>
+        </td>
+        <td style="padding-left: 5px;">
+            <table style="font-size: 12px;">
+                <col width="150">
+                <col width="50">
+                <tr>
+                    <td>Line Color</td>
+                    <td>
+                        <select id="color" onchange="updateStyle()">
+                            <option value="stroke:green;">green</option>
+                            <option value="stroke:red;">red</option>
+                            <option value="stroke:blue;" selected="selected">blue</option>
+                            <option value="stroke:black;">black</option>
+                        </select>
+                    </td>
+                </tr>
+                <tr>
+                    <td>Line Style</td>
+                    <td>
+                        <select id="line" onchange="updateStyle()">
+                            <option value="stroke-dasharray:1 0;" selected="selected">line</option>
+                            <option value="stroke-dasharray:10 10;">dash</option>
+                            <option value="stroke-dasharray:2 2;">dot</option>
+                            <option value="stroke-dasharray:10 5 2 5;">dash-dot</option>
+                        </select>
+                    </td>
+                </tr>
+                <tr>
+                    <td>Line thickness</td>
+                    <td>
+                        <select id="thickness" onchange="updateStyle()">
+                            <option value="stroke-width:0;">0</option>
+                            <option value="stroke-width:1;">1</option>
+                            <option value="stroke-width:2;" selected="selected">2</option>
+                            <option value="stroke-width:3;">3</option>
+                            <option value="stroke-width:4;">4</option>
+                            <option value="stroke-width:5;">5</option>
+                            <option value="stroke-width:6;">6</option>
+                        </select>
+                    </td>
+                </tr>
+                <tr>
+                    <td>Fill Position</td>
+                    <td>
+                        <select id="fill" onchange="updateStyle()">
+                            <option value="">none</option>
+                            <option value="top">top</option>
+                            <option value="bottom" selected="selected">bottom</option>
+                        </select>
+                    </td>
+                </tr>
+                <tr>
+                    <td>Fill Color</td>
+                    <td>
+                        <select id="fillcolor" onchange="updateStyle()">
+                            <option value="fill:green;">green</option>
+                            <option value="fill:red;">red</option>
+                            <option value="fill:blue;" selected="selected">blue</option>
+                            <option value="fill:black;">black</option>
+                        </select>
+                    </td>
+                </tr>
+                <tr>
+                    <td>Fill Opacity</td>
+                    <td>
+                        <select id="fillopacity" onchange="updateStyle()">
+                            <option value="opacity:0.1;">0.1</option>
+                            <option value="opacity:0.2;">0.2</option>
+                            <option value="opacity:0.3;">0.3</option>
+                            <option value="opacity:0.4;">0.4</option>
+                            <option value="opacity:0.5;">0.5</option>
+                            <option value="opacity:0.6;" selected="selected">0.6</option>
+                            <option value="opacity:0.7;">0.7</option>
+                            <option value="opacity:0.8;">0.8</option>
+                            <option value="opacity:0.9;">0.9</option>
+                            <option value="opacity:1;">1</option>
+                        </select>
+                    </td>
+                </tr>
+                <tr>
+                    <td>Points Shape</td>
+                    <td>
+                        <select id="points" onchange="updateStyle()">
+                            <option value="">none</option>
+                            <option value="circle">circle</option>
+                            <option value="square" selected="selected">square</option>
+                        </select>
+                    </td>
+                </tr>
+                <tr>
+                    <td>Points Size</td>
+                    <td>
+                        <select id="pointsize" onchange="updateStyle()">
+                            <option value="1">1</option>
+                            <option value="2">2</option>
+                            <option value="3">3</option>
+                            <option value="4">4</option>
+                            <option value="5">5</option>
+                            <option value="6" selected="selected">6</option>
+                            <option value="8">8</option>
+                            <option value="10">10</option>
+                            <option value="15">15</option>
+                            <option value="20">20</option>
+                        </select>
+                    </td>
+                </tr>
+                <tr>
+                    <td>Points Color</td>
+                    <td>
+                        <select id="pointcolor" onchange="updateStyle()">
+                            <option value="stroke:green;">green</option>
+                            <option value="stroke:red;">red</option>
+                            <option value="stroke:blue;" selected="selected">blue</option>
+                            <option value="stroke:black;">black</option>
+                        </select>
+                    </td>
+                </tr>
+                <tr>
+                    <td>Point Line Thickness</td>
+                    <td>
+                        <select id="pointthickness" onchange="updateStyle()">
+                            <option value="stroke-width:0;">0</option>
+                            <option value="stroke-width:1;">1</option>
+                            <option value="stroke-width:2;" selected="selected">2</option>
+                            <option value="stroke-width:3;">3</option>
+                            <option value="stroke-width:4;">4</option>
+                            <option value="stroke-width:5;">5</option>
+                            <option value="stroke-width:6;">6</option>
+                        </select>
+                    </td>
+                <tr>
+                </tr>
+                  <td>Points Fill Color</td>
+                    <td>
+                        <select id="pointfill" onchange="updateStyle()">
+                            <option value="fill:green;">green</option>
+                            <option value="fill:red;">red</option>
+                            <option value="fill:blue;" selected="selected">blue</option>
+                            <option value="fill:black;">black</option>
+                        </select>
+                    </td>
+                </tr>
+            </table>
+        </td>
+    </tr>
+</table>
+
+
+<script type="text/javascript">
+
+    var container = document.getElementById('visualization');
+    var items = [
+        {x: '2014-06-11', y: 10, group: 0},
+        {x: '2014-06-12', y: 25, group: 0},
+        {x: '2014-06-13', y: 30, group: 0},
+        {x: '2014-06-14', y: 10, group: 0},
+        {x: '2014-06-15', y: 15, group: 0},
+        {x: '2014-06-16', y: 30, group: 0}
+    ];
+
+    var dataset = new vis.DataSet(items);
+    var options = {
+        start: '2014-06-10',
+        end: '2014-06-18',
+        dataAxis: {
+            showMinorLabels: false,
+            icons: true
+        }
+    };
+
+    var groupData = {
+        id: 0,
+        content: "Group Name",
+        options: {
+            drawPoints: {
+                style: 'square' // square, circle
+            },
+            shaded: {
+                orientation: 'bottom' // top, bottom
+            }
+        }
+    };
+
+    var groups = new vis.DataSet();
+    groups.add(groupData);
+
+    var graph2d = new vis.Graph2d(container, dataset, groups, options);
+    updateStyle();
+
+    function updateStyle() {
+        groupData.style = "";
+        groupData.style += document.getElementById("color").value;
+        groupData.style += document.getElementById("line").value;
+        groupData.style += document.getElementById("thickness").value;
+
+        groupData.options.drawPoints = {};
+        groupData.options.drawPoints.styles = "";
+        groupData.options.drawPoints.style = document.getElementById("points").value;
+        groupData.options.drawPoints.styles += document.getElementById("pointcolor").value;
+        groupData.options.drawPoints.styles += document.getElementById("pointthickness").value;
+        groupData.options.drawPoints.styles += document.getElementById("pointfill").value;
+        groupData.options.drawPoints.size = Number(document.getElementById("pointsize").value);
+        if (groupData.options.drawPoints.style == "") {
+            groupData.options.drawPoints = false;
+        }
+
+        groupData.options.shaded = {};
+        groupData.options.shaded.style = "";
+        groupData.options.shaded.style += document.getElementById("fillcolor").value;
+        groupData.options.shaded.style += document.getElementById("fillopacity").value;
+        groupData.options.shaded.orientation = document.getElementById("fill").value;
+        if (groupData.options.shaded.orientation == "") {
+            groupData.options.shaded = false;
+        }
+
+        var groups = new vis.DataSet();
+        groups.add(groupData);
+        graph2d.setGroups(groups);
+    }
+</script>
+</body>
+</html>

examples/graph2d/18_scatterplot.html

@@ -0,0 +1,63 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Graph2d | Scatterplot</title>
+
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+    }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Scatterplot</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    You can manually disable the automatic sorting of the datapoints by using the <code>sort</code> option. You can use this with the
+    <code>style: 'points'</code> option for making a scatterplot!
+</div>
+<pre class="prettyprint lang-js">
+var options = {
+    sort: false,
+    sampling:false,
+    style:'points'
+};
+</pre>
+<br />
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+  var container = document.getElementById('visualization');
+  var items = [];
+  for (var i = 0; i < 100; i++) {
+      items.push({x: new Date('2014-06-11').valueOf() + Math.floor(Math.random() * 30000), y: 500 + (Math.random() * 100)});
+  }
+
+  var dataset = new vis.DataSet(items);
+  var options = {
+      sort: false,
+      sampling:false,
+      style:'points',
+      dataAxis: {
+          customRange: {
+              left: {
+                  min: 300, max: 800
+              }
+          }
+      },
+      drawPoints: {
+          enabled: true,
+          size: 6,
+          style: 'circle' // square, circle
+      },
+      defaultGroup: 'Scatterplot',
+      height: '600px'
+  };
+  var graph2d = new vis.Graph2d(container, dataset, options);
+
+</script>
+</body>
+</html>

examples/graph2d/19_labels.html

@@ -0,0 +1,64 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+  <meta content="utf-8" http-equiv="encoding">
+  <title>Graph2d | Basic Example</title>
+
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+    }
+
+    .red {
+      fill:red;
+    }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Label Example</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+  This example shows the how to add a label to each point in Graph2d. Each item can have a label object which contains the content and CSS class.In addition, xOffset and yOffset will adjust the location of the label relative to the point being labelled. 
+
+  
+  <br /><br />
+  
+</div>
+<br />
+<div id="visualization"></div>
+
+<script type="text/javascript">
+
+  var container = document.getElementById('visualization');
+  var label1 = {
+    content: "offset label",
+    xOffset: 20,
+    yOffset: 20
+  }
+
+  var label2 = {
+    content: "Label2",
+    className: "red"
+  }
+  var items = [
+    {x: '2014-06-11', y: 10,label:label1},
+    {x: '2014-06-12', y: 25,label:label2},
+    {x: '2014-06-13', y: 30},
+    {x: '2014-06-14', y: 10},
+    {x: '2014-06-15', y: 15},
+    {x: '2014-06-16', y: 30}
+  ];
+
+  var dataset = new vis.DataSet(items);
+  var options = {
+    start: '2014-06-10',
+    end: '2014-06-18',
+  };
+  var graph2d = new vis.Graph2d(container, dataset, options);
+</script>
+</body>
+</html>

examples/graph2d/default.css

@@ -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;
+}

examples/graph2d/index.html

@@ -0,0 +1,32 @@
+<html>
+<head>
+  <link rel='stylesheet' href='default.css' type='text/css'>
+</head>
+<body>
+<div id="container">
+
+  <h1>Graph2d Examples</h1>
+
+  <p><a href="01_basic.html">01_basic.html</a></p>
+  <p><a href="02_bars.html">02_bars.html</a></p>
+  <p><a href="03_groups.html">03_groups.html</a></p>
+  <p><a href="04_rightAxis.html">04_rightAxis.html</a></p>
+  <p><a href="05_bothAxis.html">05_bothAxis.html</a></p>
+  <p><a href="06_interpolation.html">06_interpolation.html</a></p>
+  <p><a href="07_scrollingAndSorting.html">07_scrollingAndSorting.html</a></p>
+  <p><a href="08_performance.html">08_performance.html</a></p>
+  <p><a href="09_external_legend.html">09_external_legend.html</a></p>
+  <p><a href="10_barsSideBySide.html">10_barsSideBySide.html</a></p>
+  <p><a href="11_barsSideBySideGroups.html">11_barsSideBySideGroups.html</a></p>
+  <p><a href="12_customRange.html">12_customRange.html</a></p>
+  <p><a href="13_localization.html">13_localization.html</a></p>
+  <p><a href="14_toggleGroups.html">14_toggleGroups.html</a></p>
+  <p><a href="15_streaming_data.html">15_streaming_data.html</a></p>
+  <p><a href="16_bothAxis_titles.html">16_bothAxis_titles.html</a></p>
+  <p><a href="17_dynamicStyling.html">17_dynamicStyling.html</a></p>
+  <p><a href="18_scatterplot.html">18_scatterplot.html</a></p>
+  <p><a href="19_labels.html">19_labels.html</a></p>
+
+</div>
+</body>
+</html>

examples/graph3d/default.css

@@ -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;
+}

examples/graph3d/example01_basis.html

@@ -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>

examples/graph3d/example02_camera.html

@@ -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>

examples/graph3d/example03_filter.html

@@ -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>

examples/graph3d/example04_animate.html

@@ -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>

examples/graph3d/example05_line.html

@@ -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>

examples/graph3d/example06_moving_dots.html

@@ -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>

examples/graph3d/example07_dot_cloud_colors.html

@@ -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>

examples/graph3d/example08_dot_cloud_size.html

@@ -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>

examples/graph3d/example09_mobile.html

@@ -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>

examples/graph3d/example10_styles.html

@@ -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>

examples/graph3d/example11_tooltips.html

@@ -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>

examples/graph3d/example12_ticks.html

@@ -0,0 +1,115 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+  <title>Graph 3D Axis Ticks</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) * 1000;
+    }
+
+    // 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>';
+        },
+        
+        xValueLabel: function(value) {
+            return vis.moment().add(value, 'days').format('DD MMM');
+        },
+        
+        yValueLabel: function(value) {
+            return value * 10 + '%';
+        },
+
+        zValueLabel: function(value) {
+            return value / 1000 + 'K';
+        },
+
+        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>

examples/graph3d/index.html

@@ -0,0 +1,28 @@
+<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>
+  <p><a href="example12_ticks.html">example12_ticks.html</a></p>
+
+  <h1>Playground</h1>
+  <p><a href="playground">Open the playground</a></p>
+
+</div>
+</body>
+</html>

examples/graph3d/playground/csv2array.js

@@ -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;
+}

examples/graph3d/playground/csv2datatable.html

@@ -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>

examples/graph3d/playground/datasource.html

@@ -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>