VisDock

VisDock Libraries

VisDock is an interactive web-visualization framework written in JavaScript. VisDock allows visualization creators to import various VisDock tools into their host visuailzations for exploration and annotation purposes.

VisDock.js

VisDock.js library contains various tools: such tools include cross-cutting selection tools, pan/zoom tool, query management tools, and annotation tools. VisDock can be imported into any SVG rendered visualizations.

2D.js and IntersectionLibrary.js

These libraries provide functions to determine whether the user-drawn shapes or lines cross the boundaries of SVG objects. These files were obtained from Kevin Lindsey Software Development (www.kevlindev.com). Cross-cutting selections can be made between:

Path and Polygon
Path and Elllipse
Path and Line
Polygon and Polygon
Polygon and Ellipse
Polygon and Line
Ellipse and Ellipse
Ellipse and Line
Line and Line

visdock.utils.js

2D.js and IntersectionLibrary.js provide functions to determine the intersection of any two SVG objects. For VisDock.js users, the type of intersection is limited to between user-drawn shapes (polygons, ellipses, and lines) and SVG objects in the host visualization. visdock.utils.js summarizes these intersections in a more compact form.

Functions for Initializations and Sub-classes

Once the users have drawn a shape using Polygon, Lasso, or Rectangle tool, the array of the x and y coordinates of the verticies will be passed to the VisDock event handler. This array cannot be used directly for the verification of intersection because the 2D.js and IntersectionUtilities.js libraries require specific object formats. The following functions initialize path, polygon, ellipse, and line elements from the In order to check the intersection between shapes, it may require to initialize the shapes as an SVG shape class before passing them as argument. Here are the functions that initialize such shapes. But note that not all shapes need to be initialized. We will explain further when an object needs to be initialized.

createPolygon (points): initializes a polygon object created when Lasso, Polygon, and Rectangle selections are made.
```
var NewPolygon = new createPolygon(points)
```
- points: when the users use Lasso, Polygon, and Rectangle tools, VisDock stores an array of points for the lasso, polygon, and rectangle in the array form [[x1, y1], [x2, y2], [x3, y3], ... , [xn, yn]].
- Sub-classes: its sub-classes are used to verify intersection between NewPolygon and any SVG object.
  - NewPolygon.intersectPath(path, inclusive): checks the inclusive/exclusive intersection between NewPolygon and an SVG path element.
  - NewPolygon.intersectPolygon(polygon, inclusive): checks the inclusive/exclusive intersection between NewPolygon and an SVG polygon element.
  - NewPolygon.intersectEllipse(path, inclusive): checks the inclusive/exclusive intersection between NewPolygon and an SVG ellipse element.
  - NewPolygon.intersectLine(path, inclusive): checks the inclusive/exclusive intersection between NewPolygon and an SVG line element.
createEllipse (points): initializes an ellipse object created when Ellipse selections are made.
```
var NewEllipse = new createEllipse(points)
```
- points: when the users use Ellipse tool, VisDock stores an array of points for such ellipse in the form [cx, cy, r1, r2].
- Sub-classes: its sub-classes are used to verify intersection between NewEllipse and any SVG object.
  - NewEllipse.intersectPath(path, inclusive): checks the inclusive/exclusive intersection between NewEllipse and an SVG path element.
  - NewEllipse.intersectPolygon(polygon, inclusive): checks the inclusive/exclusive intersection between NewEllipse and an SVG polygon element.
  - NewEllipse.intersectEllipse(path, inclusive): checks the inclusive/exclusive intersection between NewEllipse and an SVG ellipse element.
  - NewEllipse.intersectLine(path, inclusive): checks the inclusive/exclusive intersection between NewEllipse and an SVG line element.
createLine (points): initializes a line/polylinee object created when StraightLine, Polyline and Freeselect selections are made.
```
var NewLine = new createLine(points)
```
- points: when the user uses StraightLine, Polyline, and Freeselection tools, VisDock stores an array of points for such in the form [[x1, y1], [x2, y2], [x3, y3], ... , [xn, yn]]. Note that if the line is a straight line, the array would contain only 2 elements.
- Sub-classes: its sub-classes are used to verify intersection between NewLine and any SVG object.
  - NewLine.intersectPath(path, inclusive): checks the inclusive/exclusive intersection between NewLine and an SVG path element.
  - NewLine.intersectPolygon(polygon, inclusive): checks the inclusive/exclusive intersection between NewNew and an SVG polygon element.
  - NewLine.intersectEllipse(path, inclusive): checks the inclusive/exclusive intersection between NewLine and an SVG ellipse element.
  - NewLine.intersectLine(path, true): checks the inclusive intersection between NewLine and an SVG line element (note that there cannot be any exclusive intersection between a line and another line).

Other important functions:

Inside the visdock class are a few important functions that are desgined to aid proper display of the layers. The newly created layers have visibility and color attributes. Some of these functions can add/change these attributes as the users desire.

Query attributes retrieval: the following functions return the color and visibility attributes of the query.
- VisDock.utils.getQueryColor(index): returns the RGB color (#0000FF) or color name (blue) of the query. The input argument is the index of the query.
- VisDock.utils.getQueryVisibility(index): returns the visibility of the query layers.
Layer management: the following functions create layers for the queried objects.
- VisDock.utils.addPathLayer(path): creates an SVG path layer on top of the SVG path element passed as argument. Its 'path data' attribute would be the same but its color and visibility attributes are governed by Query Manager. Its 'class' attribute would be "VisDockPathLayer."
- VisDock.utils.addPolygonLayer(polygon): creates an SVG polygon layer on top of the SVG polygon element passed as argument. Its 'points' attribute would be the same but its color and visibility attributes are governed by Query Manager. Its 'class' attribute would be "VisDockPolygonLayer."
- VisDock.utils.addEllipseLayer(ellipse): creates an SVG ellipse layer on top of the SVG ellipse element passed as argument. Its radii and center cooridinates attributes would be the same but its color and visibility attributes are governed by Query Manager. Its 'class' attribute would be "VisDockEllipseLayer."
- VisDock.utils.addLineLayer(line): creates an SVG line/polyline layer on top of the SVG line/polyline elemtnt passed as argument. Its 'points' attribute would be the same but its color and visibility attributes are governed by Query Manager. Its 'class' attribute would be "VisDockLineLayer."
- VisDock.utils.addTextLayer(label): creates an SVG label layer on top of the SVG label elemtnt passed as argument. Its 'style' attribute and text would be the same but its color and visibility attributes are governed by Query Manager. Its 'class' attribute would be "VisDockTextLayer."

Newvisdock

VisDock 1.0