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. An introduction video on VisDock implementation is available on YouTube.

Say you have built a visualization like the one shown above (original work by M. Bostock).

VisDock.init('body', {width: w, height:h});  // VisDock Initialization
var viewport = VisDock.getViewport();

VisDock Toolkit and the Overview can be loaded with only two lines of codes (to learn more go to Tutorial). Be sure to populate the original elements in "viewport"

var svg = viewport;

VisDock Toolkit offers various navigation options. In the figures above, pan, zoom, rotation tools, and magnifying lenses (the box with grey-stroke) have been showcased. Up to this point, no coding effort is required at all. All you have to do is just to import VisDock libraries and initialize the VisDock. Beyond this point where selection and annotations are used, minor additional coding will be required.

VisDock.eventHandler = {
        getHitsPolygon: function(points, inclusive, t) {
            var shapebound = new createPolygon(points); 
            return shapebound.intersectEllipse(d3.selectAll("circle")[0], inclusive)
        },
        getHitsEllipse: function(points, inclusive, t) {
            var shapebound = new createEllipse(points); 
            return shapebound.intersectEllipse(d3.selectAll("circle")[0], inclusive)
        },
        getHitsLine: function(points, inclusive) {
            var shapebound = new createLine(points); 
            return shapebound.intersectEllipse(d3.selectAll("circle")[0], inclusive)
        },
        setColor: function(hits) {
            for (var i = 0; i < hits.length; i++) {
                VisDock.utils.addEllipseLayer(hits[i], undefined);
            }
        },
        changeColor: function(color, query, index) {
            VisDock.utils.changeColor(color, query, "fill")
        },
        changeVisibility: function(vis, query, index) {
            VisDock.utils.changeVisibility(vis, query)
        },
        removeColor: function(hits, index) {
            for (var i = 0; i < hits.length; i++) {
                hits[i].remove();
            }
        }
}

In order to implement selections, the user-defined selection handler must be added to your original code. In this selection handler, you may define what event occurs when users use rectangle, ellipse, lasso, or line tools. Users may use these various shapes to select objects and you, the developer, can decide what happens to the selected. For instance, in the tutorial, we show how to create clone elements to hightlight the selection.

Currently, We are working on VisDock such that it is responsive to change in the size of the window. So far the VisDock changes its size in reponse to the window size adjustment. This concept can be expanded to arrangement of the buttons or re-alignment of the menu/query box, and etc.

As shown in the figure above, the toolkit expands and shrinks as the window size changes.

VisDock now supports Multiple viewport canvases. In order to import VisDock and control more than one viewport, you can initialize VisDock in the following manner:

var container = ["#div1", "#div2"];
var sizes = [{width: w1, height: h1}, {width: w2, height: h2}];
VisDock.init(container, sizes);
var viewport1 = VisDock.getViewport(0);
var viewport2 = VisDock.getViewport(1);