BangaloreJS: D3 + Backbone (Part 4)

by edwardmsmith

HTML

<script src="http://d3js.org/d3.v2.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<html>
<body>
    <h1>BangaloreJS: D3 + Backbone -- Part 2</h1>
    <p>This fiddle is based on <a href="http://mbostock.github.com/d3/tutorial/bar-1.html">http://mbostock.github.com/d3/tutorial/bar-1.html</a>
    <hr>
    <div id="graph">
    </div
</body>
</html>

CSS

.chart rect {
   stroke: white;
   fill: steelblue;
}

JavaScript

var w = 440,
    h = 200;


var DataPoint = Backbone.Model.extend({

    initialize: function(x) {
    },

    type: "point",

    randomize: function() {
        this.set({
            x: Math.round(Math.random() * 10)
        });
    }

});

var DataSeries = Backbone.Collection.extend({

    model: DataPoint,

    fetch: function() {
        this.reset();
        this.add([
            new DataPoint({x:10}),
            new DataPoint({x:12}),
            new DataPoint({x:15}),
            new DataPoint({x:18})
            ]);
    },

    randomize: function() {
        this.each(function(m) {
            m.randomize();
        });
    }

});

var BarGraph = Backbone.View.extend({

    "el": "#graph",

    initialize: function() {

        _.bindAll(this, "render", "frame");
        this.collection.bind("reset", this.frame);
        this.collection.bind("change", this.render);


        this.chart = d3.selectAll($(this.el)).append("svg").attr("class", "chart").attr("width", w).attr("height", h).append("g").attr("transform", "translate(10,15)");

        this.collection.fetch();
    },

    render: function() {

        var data = this.collection.models;

        var x = d3.scale.linear().domain([0, d3.max(data, function(d) {
            return d.get("x");
        })]).range([0, w - 10]);

        var y = d3.scale.ordinal().domain([0, 1, 2, 3]).rangeBands([0, h - 20]);

        var self = this;
        var rect = this.chart.selectAll("rect").data(data, function(d, i) {
            return i;
        });

        rect.enter().insert("rect", "text").attr("y", function(d) {
            return y(d.get("x"));
        }).attr("width", function(d) {
            return x(d.get("x"));
        }).attr("height", y.rangeBand());

        rect.transition().duration(1000).attr("width", function(d) {
            return x(d.get("x"));
        }).attr("height", y.rangeBand());

        rect.exit().remove();
        
        var text = this.chart.selectAll("text").data(data,...