Dance.js - The Barchart Dance

readme.mkd

Dance.js is dancing based on data. It's much like Backbone.js, but with a foundation for building interactive visualizations in the spirit of D3.js. It comes with Data.js, a uniform interface for handling your domain data.

barchart.css

body {
  font: 15px 'Helvetica Neue' Arial
}

#canvas {
  margin-top: 20px;
  width: 550px;
  height: 350px;
  background: #eee;
  position: relative;
  border-right: 60px solid #EEE;;
}

.bar {
  -moz-transition-duration: 0.8s;
  -webkit-transition-duration: 0.8s;
  transition-duration: 0.8s;
  position: absolute;
  bottom: 0px;
  background: steelblue;
  opacity: 0.7;
}

.bar:hover { opacity: 1.0; }

.bar .label {
  text-transform: uppercase;
  position: absolute;
  bottom: -25px;
  left: 0;
  right: 0;
  text-align: center;
}

.bar .value {
  font-weight: bold;
  text-transform: uppercase;
  position: absolute;
  top: -25px;
  left: 0;
  right: 0;
  text-align: center;
}

barchart.js

(function(exports) {

// Collections you wanna dance with
// ------------

function htmlId(obj) {
  return obj._id.split('/').join('_');
}

// console.log(htmlId("/tpye/foo"));

var collections = {
  "items": {
    enter: function(items) {
      items.each(function(item) {

        var bar = $('<div class="bar" id="'+htmlId(item)+'"><div class="label">'+item._id+'</div><div class="value">'+item.pos.dy+'</div></div>')
                     .css('left', item.pos.x)
                     .css('bottom', 0)
                     .css('width', item.pos.dx)
                     .css('height', 0);
        $('#canvas').append(bar);
      });

      // Delegate to update (motion tweening fun)
      _.delay(this.collections["items"].update, 200, items);
    },

    update: function(items) {
      items.each(function(item) {
        var cell = $('#'+htmlId(item))
                     .css('left', item.pos.x)
                     .css('width', item.pos.dx)
                     .css('height', item.pos.dy)
                     .find('.value').html(item.pos.dy)
      });
    },

    exit: function(items) {
      items.each(function(i) { $('#'+htmlId(i)).remove() });
    }
  }
};

// Barchart Visualization
// ------------

var Barchart = Dance.Performer.extend({

  collections: collections,

  initialize: function(options) {
    this.data["items"] = options.items;
  },

  layout: function(property) {
    var margin = 50;
    this.data["items"].each(function(item, key, index) {

      item.pos = {
        x: margin+index*50,
        dx: 40,
        dy: item.get(property)
      };
    });
  },

  update: function(items, property) {
    this.data["items"] = items;
    this.layout(property);
    this.refresh();
  }
});

exports.Barchart = Barchart;

})(window);

countries.js

window.countries_data = {
  "type": {
    "_id": "/type/country",
    "name": "Countries",
    "properties": {
      "name": {"name": "Country Name", "type": "string" },
      "languages": {"name": "Languages spoken", "type": "string" },
      "population": { "name": "Population", "type": "number" },
      "gdp": { "name": "GDP per capita", "type": "number" }
    },
    "indexes": {
      "by_name": ["name"]
    }
  },
  "objects": [
    {
      "_id": "at",
      "name": "Austria",
      "languages": ["German", "Austrian"],
      "population": 8.3,
      "gdp": 41.805
    },
    {
      "_id": "de",
      "name": "Germany",
      "languages": ["German"],
      "population": 82,
      "gdp": 46.860
    },
    {
      "_id": "us",
      "name": "United States of America",
      "languages": ["German", "English", "Spanish", "Chinese", "French"],
      "population": 311,
      "gdp": 36.081
    },
    {
      "_id": "uk",
      "name": "United Kingdom",
      "languages": ["English", "Irish", "Scottish Gaelic"],
      "population": 62.3,
      "gdp": 36.081
    },
    {
      "_id": "es",
      "name": "Spain",
      "languages": ["Spanish"],
      "population": 30.6,
      "gdp": 36.081
    },
    {
      "_id": "gr",
      "name": "Greece",
      "languages": ["Greek"],
      "population": 11.0,
      "gdp": 36.081
    },
    {
      "_id": "ca",
      "name": "Canada",
      "languages": ["English", "French", "Spanish"],
      "population": 40.1,
      "gdp": 40.457
    }
  ]
};

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'/>
  <title>Dance.js - The Barchart Dance</title>
  <link rel='stylesheet' href='barchart.css'>
  <script src='https://raw.github.com/documentcloud/underscore/87cac5bd057ceafd6f779b1df33de61ca21b5e1d/underscore.js'></script>
  <!--<script src='https://raw.github.com/michael/data/a38f5fd92a5490dc5ab6a2e95e88ecba2e644c71/data.js'></script>-->
  <script src='https://raw.github.com/michael/data/fe65cb9ab32fbee59f14f44e17e186cf69ff16a7/data.js'></script>
  <script src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
  <script src='https://raw.github.com/michael/dance/96cb9a6384acce19202275c6dce9b7fbdac87763/dance.js'></script>

  <!-- Countries data -->
  <script src='countries.js'></script>
  <!-- Dance Performers -->
  <script src="barchart.js"></script>

  <script>    
    $(function() {
      var countries = new Data.Collection(countries_data);
      window.barchart = new Barchart({});

      barchart.update(countries, "gdp");

      // Update
      function update() {
        var language = $('#language').val();
        var query = {};
        if (language) query["languages"] = [ language ];
        var items = countries.find(query);
        barchart.update(items, $('#property').val());
      }

      $('#property').change(update);
      $('#language').change(update);
    });
  </script>

</head>
<body>
  <div id='container'>
    <select id="property">
      <option value="gdp">GDP (thousands, per capita)</option>
      <option value="population">Population (millions)</option>
    </select>
    <select id="language">
      <option value="">All</option>
      <option value="English">English</option>
      <option value="French">French</option>
      <option value="German">German</option>
      <option value="Greek">Greek</option>
      <option value="Spanish">Spanish</option>
      <option value="Scottish Gaelic">Scottish Gaelic</option>
    </select>
    <div id='canvas'></div>
  </div>
</body>
</html>

Hi,
Is there any quick way to to make the bars horizontal without digging too much into the code?
Thanks!