Widget API

Widget are smaller reusable UI components.

Slider

Create a simple interactive slider without labels.

var slider:networkcube.Slider = new Slider(x-pos, y-pos, width, min-value, max-value, steps);

Set a call back for when the mouse is released:

slider.setDragEndCallBack(f);   

Set the initial slider value:

slider.set(value);

Attach the slider to an html element:

var sliderSvg = d3.select('body')
    .append('svg')

slider.appendTo(sliderSvg);

Attach a label to the slider:

sliderSvg.append('text')
   .attr('x', 10)
   .attr('y', height-15)
   .text('My label')

Time Slider

Create a time slider with labels

var timeSlider:TimeSlider = new TimeSlider(graph, width, timeChangedHandler);
var sliderSvg = d3.select('body')
    .append('svg')
timeSlider.appendTo(sliderSvg);

Write the timeChangedHandler:

function timeChangedHandler(start:networkcube.Time, end:networkcube.Time, propagate:boolean){
    // .. modify states
    // .. update visualization
}