Dance.js
Dance.js is a simple data-driven
visualization framework. It's basically a flavor of
Backbone.js, but enriched
with some of the ideas of the very popular
D3.js visualization framework.
A Dance.js dance involves several Performers (aka views or
visualizations) who are performing on screen. Users of Backbone.js might
already be familiar with the API, as it's pretty much the same as for
Backbone.View. Dance.js comes with its own data manipulation
framework, Data.js which
functions as a replacement for Backbone.Model.
Download and Installation
There's no official release yet.
Checkout the Source Code on Github.
Dance.js depends on Data.js and
Underscore.js, make sure
to have included a recent version of each.
Dance.Performer
In order to have a good dance, you need at least one experienced
Dance.Performer. Okay, performers as individuals are all different.
Some might be unbeatable in dancing the classic waltz (speaking of
classical HTML Views), while others shine when it comes to modern
artistic dancing (aka data visualizations).
var Barchart = Dance.Performer.extend({
events: {
"click .bar": "open",
},
render: function() {
...
}
});
Please use the Backbone.js API
docs.
Dance.Choreographer
If your dance performance involves many performers, it's most likely
that you need a Dance.Choreographer, coordinating your dance.
var Choreographer = Dance.Choreographer.extend({
routes: {
"methodology": "methodology", // #methodology
"power_consumption/:state": "powerConsumption", // #power_consumption/dc
},
bars: function() {
...
},
search: function(state) {
...
}
});
Once you have setup your choreographer you are ready to perform that dance.
window.choreographer = new Choreographer({});
Dance.performance.start(); // Starts responding to routes
Enter / Exit / Update
Much like in the spirit of D3.js, you can specify transformations, based
on data-changes. Application developers may consider three different
cases here: The updating nodes to modify, the entering nodes to add, and
the exiting nodes to remove. An example implementation for an animated
Barchart could look like this:
var Barchart = Dance.Performer.extend({
collections: {
"items": {
enter: function(items) {
items.each(function(item) {
var bar = $('<div class="bar" id="'+item.html_id+'"></div>')
.css('left', item.pos.x)
.css('bottom', 0)
.css('width', item.pos.dx)
.css('height', item.pos.dy)
.appendTo($('#canvas'));
});
},
update: function(items) {
items.each(function(item) {
$('#'+item.html_id)
.css('left', item.pos.x)
.css('width', item.pos.dx)
.css('height', item.pos.dy)
});
},
exit: function(items) {
items.each(function(i, key) { $('#'+key).remove(); });
}
}
},
...
}
You can specify transformations for an arbitrary number of collections
your visualization is using.
First-time dances
A good way to start is probably reading trough the tutorial Dancing with Data
plus checking out a couple of first-time dances:
