Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Don't be shy - take your data for a dance.

tree: 4b5c23b20e

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 examples
Octocat-spinner-32 lib
Octocat-spinner-32 .gitignore Birthday. March 23, 2012
Octocat-spinner-32 .gitmodules Added scatterplot dance. April 22, 2012
Octocat-spinner-32 LICENSE Added LICENSE. April 25, 2012
Octocat-spinner-32 README.md Changed Instructor to Choreographer for obvious reasons. July 01, 2012
Octocat-spinner-32 dance.js Changed Instructor to Choreographer for obvious reasons. July 01, 2012
README.md

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

Something went wrong with that request. Please try again.