Anyone who has read deeply into my blog knows that I am a huge fan of motion charts. However, adding that extra interactive dimension tends to add more than it’s share of complexity.
So, with inspiration derived from multiple sources such as Hans Rosling, Mike Bostock, James Curley, Alex de Muller and lastly Steve Wittens.
My idea was, why is a motion chart such as this a special case?
I asked myself, isn’t it really two independent components interacting with one another? In this case, a time slider driving a simple bubble chart. Furthermore, why can’t we implement them independently and in a reusable manner so that we can simplify things?
So the thoughts mulled around in my head, almost dying until I saw Alex de Muller’s three dimensional animation:
The controls are simple and serve as a dimensional filter, in this case a time dimension. As you step through the graph, it changes over time. However, I would also like to support numeric and categorical dimension in addition to time.
The next thing I would like to talk about is a term Mike Bostock introduced me to called Object Constancy.
Object constancy is the practice of allowing the eye to follow the transitions of visual state changes. It’s the realm of tweens, transitions and easing. If an element enters or exits the stage, give it some flourish (a dramatic entrance and exit if you will) so that the viewer can better wrap their mind around the changes from frame to frame. James Curley has been a prolithic producer of interesting visuals; genereously sharing them on bl.ocks.org. James tends to pay great attention to transitions as this NHL example shows.
Finally, Steve Wittens of Mathbox fame, state:
“I’ve found that, when in doubt, adding an extra dimension always helps. The moment I finally realized that every implicit graph in N dimensions is really just a slice of an explicit one in N+1 dimensions, a ridiculous amount of things clicked together.”
So true…and lead me to think of a design where there might be multiple dimensional filters interacting in tandem.
The Player Component
So without further adieu, let me introduce the Player component. In the coming weeks or months depending, I will github everything, sooner if there is avid interest.
The old deprecated project of mine DexCharts has evolved into an more general purpose wrapping framework for providing a consistent interface around different browser-based technologies. It’s called dex.js. So I implemented the Player in dex.js under the dex.ui module.
Here’s an example of the Player component interacting with C3 components also wrapped in the dex.js framework.
In this example, I kept the dataset to 4000 points in order to respect those viewing the visuals on mobile devices. However, it scales much higher on more powerful devices. This one has 11,000 datapoints.
The controls are simple and should be intuitive as they follow a media-player metaphor.
You can move to the first or last frame, step through the frames at a specified delay, or play the frames on a continuous loop.
All links are live so click the images for live versions.
C3 was an ideal choice due to Masayuki Tanaka’s strict adherence to the principles of re-usability and object constancy.
Within dex.js, this chart is pretty simple to describe. Essentially, the core of this program is as follows:
var player = new dex.ui.jqueryui.Player({
'parent' : '#toolbar',
'csv' : csv,
'delay' : 500
});
var linechart = new dex.charts.c3.LineChart({
'parent' : '#ChartArea',
'resizable' : true,
'color' : d3.scale.category20c(),
'linktype' : "line",
'csv' : player.attr("frames").frames[0]
});
linechart.subscribe(player, "new-frame", function(msg) {
linechart.attr('csv', msg.data).update();
});
player.render();
linechart.render();
We create a player with a 500ms delay based on a simple csv dataset.
The player separates the csv into frames based on column zero of the csv, though this is configurable.
Next, we create a linechart which is initialized to the contents of the first frame.
Then we add a pub-sub event where the linechart listens for “new-frame” events from the player. When received, it will update the csv data to the current frame. If the dexjs wrapped visual.
Lastly, we render both and the fun begins.
Wrapping Up
I have much more to say on this topic and more demos to come. I want to demonstrate some multi-dimensional players across multiple dimensions, and want to bring motion to more than just simple area/line/scatter/bubble charts.
For example, here is a motion-chord chart. It’s pretty much the same code as the first examples only using a chord instead of a C3 chart.
It’s not quite as polished due to my Chord diagram’s lack of object constancy, but you get the idea of where I am going.
That’s it for now…
Dex 
