Transitions -- jp_doodle demo

jp_doodle makes implementing special purpose interactive visualizations easy.

Code

var element = $('#target_div');
// Attach a dual canvas associated with the element as a child of the element
// configured with width 400 and height 400.
var config = {
            width: 400,
            height: 400,
        };
element.dual_canvas_helper(config);

var small_radius = 10;
var big_radius = 20;
var offset = 50;
var selected_color = "magenta";
var normal_color = "cyan";
var selected_text = "yellow";
var normal_text = "blue";
var duration = 3;
var text_duration = 5;
var n_circles = 10;
var theta = 2 * Math.PI / n_circles;

var texts = {};
var circles = {};

// Draw a circle of numbered circles
var draw = function() {
    for (var i=0; i<n_circles; i++) {
        var name = ""+i;
        var cx = offset * Math.cos(theta * i);
        var cy = offset * Math.sin(theta * i);
        circles[name] = element.circle({name: true, 
            x:cx, y:cy, r:small_radius, color:normal_color,
            normal_position: [cx, cy]});
        texts[name] = element.text({name: true, text: name, degrees: 0,
            x: cx, y: cy, color:normal_text, align:"center", valign:"center"});
        // cover the circle and the text with an invisible circle to receive events
        var invisible_circle = element.circle({name: name, x:cx, y:cy, r:small_radius, 
            color: "rgba(0,0,0,0)",         // invisible
            });
        // Bind an event to invisible circle
        invisible_circle.on("mouseover", do_transition);
    }
}

var selected_name = null;
var selected_position = null;

// attach event handler
draw()

// Fit the figure into the available space
element.fit(null, 20);

Discussion

Mouse over the circles to see the circle and the text on the circle transition in color and move to the center over a period of time.