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:

• The Barchart Dance
• The Scatterplot Dance