Transitioning from one Data set to another

In class we changed the Processing>Examples>Topics>Advanced Data>LoadSaveXML example to swap data between two static XML files – ‘data.xml’ and ‘dataOther.xml’ on a key press. Right now the transition is instant, or in other words not really a transition. If you completed the HTML 5 Part 2, you can see that the ds3.js library has a transition method to facilitate sophisticated transitions from one set of data to another, as shown in the NY Times Obama Budget Visualization.

To keep things simple, I’ve added to the Processing example to create a simple transition from one data set to another:

Download: LoadTransitionXMLExample.zip .

The sketch runs fine in Java, but does not show the transition in javascript mode, so I won’t embed the sketch into this page.

Conceptually, here is what I added to the LoadXML example sketch:

• add a void move() function to the Bubble class
• pass an x,y coordinate to the move function that gradually moves from an old position to a new position
• store the x,y coordinates in both datasets so we can easily pass old and new values back and forth

The move() function is using a common math function in most drawing programs – Lerp().  The lerp does the magic of moving here, by gradually incrementing from one value to another value.

This works by passing a value, say 10, that we want to become 100 with an increment of 1% change each loop.  We do this once, and 10 becomes 11. We now want to go from 11 to 100, with a change of 1%.  The new value will be incremented by slightly less than 1 because we’re a little closer to 100 when we start at 11. So, 11 is increased to say 11.88  as it moves closer to 100. You could write a sketch and use println() to see the exact values.

The end effect is the move starts fast, and gradually ‘eases’ into place as it gets closer to the target because the incremental value is smaller as we approach the target.