d3.chartで棒グラフを描いてみた。

d3.chart.min.js

/*! d3.chart - v0.1.0
 *  License: MIT Expat
 *  Date: 2013-05-27
 */
(function(t){"use strict";var n=t.d3,e={noBase:Error("d3.layer must be initialized with a base"),noDataBind:Error("d3.layer must specify a `dataBind` method."),noInsert:Error("d3.layer must specify an `insert` method.")},r=function(t){if(!t)throw e.noBase;this._base=t,this._handlers={}};r.prototype.dataBind=function(){throw e.noDataBind},r.prototype.insert=function(){throw e.noInsert},r.prototype.on=function(t,n,e){e=e||{},t in this._handlers||(this._handlers[t]=[]),this._handlers[t].push({callback:n,chart:e.chart||null})},r.prototype.off=function(t,n){var e,r=this._handlers[t];if(r){if(1===arguments.length)return r.length=0,undefined;for(e=r.length-1;e>-1;--e)r[e].callback===n&&r.splice(e,1)}},r.prototype.draw=function(t){var e,r,i,s,o,a,h,c;if(e=this.dataBind.call(this._base,t),!(e instanceof n.selection))throw Error("Invalid selection defined by `dataBind` method.");r=e.enter(),r._chart=this._base._chart,i=[{name:"update",selection:e},{name:"enter",selection:this.insert.bind(r)},{name:"merge",selection:e},{name:"exit",selection:e.exit.bind(e)}];for(var l=0,u=i.length;u>l;++l){if(a=i[l].name,s=i[l].selection,"function"==typeof s&&(s=s()),!(s instanceof n.selection))throw Error('Invalid selection defined for "'+a+"' lifecycle event.");if(o=this._handlers[a])for(h=0,c=o.length;c>h;++h)s._chart=o[h].chart||this._base._chart,s.call(o[h].callback);if(o=this._handlers[a+":transition"],o&&o.length)for(s=s.transition(),h=0,c=o.length;c>h;++h)s._chart=o[h].chart||this._base._chart,s.call(o[h].callback)}},n.selection.prototype.layer=function(t){var n,e=new r(this);if(e.dataBind=t.dataBind,e.insert=t.insert,"events"in t)for(n in t.events)e.on(n,t.events[n]);return this.on=function(){return e.on.apply(e,arguments)},this.off=function(){return e.off.apply(e,arguments)},this.draw=function(){return e.draw.apply(e,arguments)},this}})(this),function(t){"use strict";function n(t){var n,e,r,i;if(!t)return t;for(e=arguments.length,n=1;e>n;n++)if(r=arguments[n])for(i in r)t[i]=r[i];return t}var e=t.d3,r=function(t){this.constructor=t},i=function(t,n){var e;return r.prototype=t.prototype,e=new r(t),t.apply(e,n),e},s=function(t,n){var e=this.constructor.__super__;e&&s.call(e,t,n),Object.hasOwnProperty.call(this.constructor.prototype,"initialize")&&this.initialize.apply(t,n)},o=function(t){this.base=t,this._layers={},this._mixins=[],this._events={},s.call(this,this,Array.prototype.slice.call(arguments,1))};o.prototype.unlayer=function(t){var n=this.layer(t),e=this._layerList.indexOf(n);return delete this._layers[t],this._layerList.splice(e,1),this},o.prototype.layer=function(t,n,e){var r;return 1===arguments.length?this._layers[t]:(r=n.layer(e),this._layers[t]=r,n._chart=this,r)},o.prototype.initialize=function(){},o.prototype.transform=function(t){return t},o.prototype.mixin=function(t,n){var e=Array.prototype.slice.call(arguments,2);e.unshift(n);var r=o[t],s=i(r,e);return this._mixins.push(s),s},o.prototype.draw=function(t){var n,e;t=this.transform(t);for(n in this._layers)this._layers[n].draw(t);for(e in this._mixins)this._mixins[e].draw(t)},o.prototype.on=function(t,n,e){var r=this._events[t]||(this._events[t]=[]);return r.push({callback:n,context:e||this,_chart:this}),this},o.prototype.once=function(t,n,e){var r=this,i=function(){r.off(t,i),n.apply(this,arguments)};return this.on(t,i,e)},o.prototype.off=function(t,n,e){var r,i,s,o,a,h;if(0===arguments.length){for(t in this._events)this._events[t].length=0;return this}if(1===arguments.length)return s=this._events[t],s&&(s.length=0),this;for(r=t?[t]:Object.keys(this._events),a=0;r.length>a;a++)for(i=r[a],s=this._events[i],h=s.length;h--;)o=s[h],(n&&n===o.callback||e&&e===o.context)&&s.splice(h,1);return this},o.prototype.trigger=function(t){var n,e,r=Array.prototype.slice.call(arguments,1),i=this._events[t];for(n=0;i.length>n;n++)e=i[n],e.callback.apply(e.context,r);return this},o.extend=function(t,e,r){var i,s=this;i=e&&Object.hasOwnProperty.call(e,"constructor")?e.constructor:function(){return s.apply(this,arguments)},n(i,s,r);var a=function(){this.constructor=i};return a.prototype=s.prototype,i.prototype=new a,e&&n(i.prototype,e),i.__super__=s.prototype,o[t]=i,i},e.chart=function(t){return 0===arguments.length?o:1===arguments.length?o[t]:o.extend.apply(o,arguments)},e.selection.prototype.chart=function(t){if(0===arguments.length)return this._chart;var n=Array.prototype.slice.call(arguments,1);n.unshift(this);var e=o[t];return i(e,n)},e.selection.enter.prototype.chart=function(){return this._chart},e.transition.prototype.chart=e.selection.enter.prototype.chart}(this);

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis path,
.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.bar {
  fill: blue;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="./d3.chart.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
    w  = 960 - margin.left - margin.right,
    h = 500 - margin.top - margin.bottom;

var dataset = (function(){
      var data = [];
      var keycount = 26;
      for (i = 0; i < keycount; i++){ 
        data.push({'name':String.fromCharCode('a'.charCodeAt(0) + i),'value':Math.random()*100});
      }
      return data;
    })();

d3.chart('BarChart', {

  initialize: function() {

    this.w;
    this.h;
    this.xScale = d3.scale.ordinal();
    this.yScale = d3.scale.linear();

    this.width(this.base.attr('width'));
    this.height(this.base.attr('height'));

    this.layer('bars', this.base.append('g'), {
      dataBind: function(data) {
        var chart = this.chart();
        chart.xScale
          .domain(data.map(function(d) { return d.name; }));
        chart.yScale
          .domain([0, d3.max(data, function(d) { return d.value; })]).nice();
        return this.selectAll('.bar')
          .data(data);
      },
      insert: function() {
        return this.append('rect');
      },
      events: {
        'enter': function() {
          var chart = this.chart();
          return this.attr('class', 'bar')
            .attr('x', function(d) { return chart.xScale(d.name); })
            .attr('width', chart.xScale.rangeBand())
            .attr('y', chart.h)
            .attr('height',0);
        },
        'enter:transition': function() {
          var chart = this.chart();
          return this
            .delay(500)
            .duration(1000)
            .ease('bounce')
            .attr('y', function(d) { return chart.yScale(d.value); })
            .attr('height', function(d) { return chart.h - chart.yScale(d.value); });
        }
      }
    });
  },

  width: function(newWidth) {
    if (arguments.length === 0) {
      return this.w;
    }
    this.w = newWidth;
    this.xScale.rangeRoundBands([0, newWidth], .1);
    return this;
  },

  height: function(newHeight) {
    if (arguments.length === 0) {
      return this.h;
    }
    this.h = newHeight;
    this.yScale.range([newHeight, 0]);
    return this;
  },

  drawAxis: function() {
    var xAxis = d3.svg.axis()
        .scale(this.xScale)
        .orient('bottom');
    var yAxis = d3.svg.axis()
        .scale(this.yScale)
        .orient('left');
    this.base.append('g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0,' + this.h + ')')
        .call(xAxis);
    this.base.append('g')
        .attr('class', 'y axis')
        .call(yAxis);
    return this;
  }
});

var svg = d3.select('body').append('svg')
    .attr('width', w + margin.left + margin.right)
    .attr('height', h + margin.top + margin.bottom)
  .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var chart = svg.chart('BarChart')
    .width(w)
    .height(h);
chart.draw(dataset);
chart.drawAxis();
</script>
</body>