d3.chart.js

/*! d3.chart - v0.1.3
 *  License: MIT Expat
 *  Date: 2013-10-07
 */
(function(t){"use strict";var e=t.d3Chart,r=t.d3Chart={},n=t.d3;r.noConflict=function(){return t.d3Chart=e,r},r.assert=function(t,e){if(!t)throw Error("[d3.chart] "+e)},r.assert(n,"d3.js is required"),r.assert("string"==typeof n.version&&n.version.match(/^3/),"d3.js version 3 is required")})(this),function(t){"use strict";var e=t.d3Chart,r=t.d3,n=function(t){e.assert(t,"Layers must be initialized with a base."),this._base=t,this._handlers={}};n.prototype.dataBind=function(){e.assert(!1,"Layers must specify a `dataBind` method.")},n.prototype.insert=function(){e.assert(!1,"Layers must specify an `insert` method.")},n.prototype.on=function(t,e,r){r=r||{},t in this._handlers||(this._handlers[t]=[]),this._handlers[t].push({callback:e,chart:r.chart||null})},n.prototype.off=function(t,e){var r,n=this._handlers[t];if(n){if(1===arguments.length)return n.length=0,undefined;for(r=n.length-1;r>-1;--r)n[r].callback===e&&n.splice(r,1)}},n.prototype.draw=function(t){var n,i,s,a,o,h,c,l;n=this.dataBind.call(this._base,t),e.assert(n&&n.call===r.selection.prototype.call,"Invalid selection defined by `Layer#dataBind` method."),e.assert(n.enter,"Layer selection not properly bound."),i=n.enter(),i._chart=this._base._chart,s=[{name:"update",selection:n},{name:"enter",selection:this.insert.bind(i)},{name:"merge",selection:n},{name:"exit",selection:n.exit.bind(n)}];for(var u=0,p=s.length;p>u;++u){if(h=s[u].name,a=s[u].selection,"function"==typeof a&&(a=a()),e.assert(a&&a.call===r.selection.prototype.call,"Invalid selection defined for '"+h+"' lifecycle event."),o=this._handlers[h])for(c=0,l=o.length;l>c;++c)a._chart=o[c].chart||this._base._chart,a.call(o[c].callback);if(o=this._handlers[h+":transition"],o&&o.length)for(a=a.transition(),c=0,l=o.length;l>c;++c)a._chart=o[c].chart||this._base._chart,a.call(o[c].callback)}},r.selection.prototype.layer=function(t){var e,r=new n(this);if(r.dataBind=t.dataBind,r.insert=t.insert,"events"in t)for(e in t.events)r.on(e,t.events[e]);return this.on=function(){return r.on.apply(r,arguments)},this.off=function(){return r.off.apply(r,arguments)},this.draw=function(){return r.draw.apply(r,arguments)},this}}(this),function(t,e){"use strict";function r(t){var e,r,n,i;if(!t)return t;for(r=arguments.length,e=1;r>e;e++)if(n=arguments[e])for(i in n)t[i]=n[i];return t}var n=t.d3Chart,i=t.d3,s=Object.hasOwnProperty,a=function(t){this.constructor=t},o=function(t,e){var r;return a.prototype=t.prototype,r=new a(t),t.apply(r,e),r},h=function(t,e){var r=this.constructor.__super__;r&&h.call(r,t,e),s.call(this.constructor.prototype,"initialize")&&this.initialize.apply(t,e)},c=function(t){this.base=t,this._layers={},this._mixins=[],this._events={},h.call(this,this,Array.prototype.slice.call(arguments,1))};c.prototype.unlayer=function(t){var e=this.layer(t);return delete this._layers[t],delete e._chart,e},c.prototype.layer=function(t,e,r){var i;if(1===arguments.length)return this._layers[t];if(2===arguments.length){if("function"==typeof e.draw)return e._chart=this,this._layers[t]=e,this._layers[t];n.assert(!1,"When reattaching a layer, the second argument must be a d3.chart layer")}return i=e.layer(r),this._layers[t]=i,e._chart=this,i},c.prototype.initialize=function(){},c.prototype.transform=function(t){return t},c.prototype.mixin=function(t,e){var r=Array.prototype.slice.call(arguments,2);r.unshift(e);var n=c[t],i=o(n,r);return this._mixins.push(i),i},c.prototype.draw=function(t){var e,r,n;t=this.transform(t);for(e in this._layers)this._layers[e].draw(t);for(r=0,n=this._mixins.length;n>r;r++)this._mixins[r].draw(t)},c.prototype.on=function(t,e,r){var n=this._events[t]||(this._events[t]=[]);return n.push({callback:e,context:r||this,_chart:this}),this},c.prototype.once=function(t,e,r){var n=this,i=function(){n.off(t,i),e.apply(this,arguments)};return this.on(t,i,r)},c.prototype.off=function(t,e,r){var n,i,s,a,o,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(n=t?[t]:Object.keys(this._events),o=0;n.length>o;o++)for(i=n[o],s=this._events[i],h=s.length;h--;)a=s[h],(e&&e===a.callback||r&&r===a.context)&&s.splice(h,1);return this},c.prototype.trigger=function(t){var r,n,i=Array.prototype.slice.call(arguments,1),s=this._events[t];if(s!==e)for(r=0;s.length>r;r++)n=s[r],n.callback.apply(n.context,i);return this},c.extend=function(t,e,n){var i,a=this;i=e&&s.call(e,"constructor")?e.constructor:function(){return a.apply(this,arguments)},r(i,a,n);var o=function(){this.constructor=i};return o.prototype=a.prototype,i.prototype=new o,e&&r(i.prototype,e),i.__super__=a.prototype,c[t]=i,i},i.chart=function(t){return 0===arguments.length?c:1===arguments.length?c[t]:c.extend.apply(c,arguments)},i.selection.prototype.chart=function(t){if(0===arguments.length)return this._chart;var e,r=c[t];return n.assert(r,"No chart registered with name '"+t+"'"),e=Array.prototype.slice.call(arguments,1),e.unshift(this),o(r,e)},i.selection.enter.prototype.chart=function(){return this._chart},i.transition.prototype.chart=i.selection.enter.prototype.chart}(this);

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pie chart</title>
    <script src="http://d3js.org/d3.v3.js"></script>
    <script src="d3.chart.js"></script>
    <script src="pie.js"></script>
    <style>
        svg
        {
            height: 400px;
        }
    </style>
</head>
<body>
    <div>
        <input class="add-data" type="button" value="More data" />
    </div>
    <svg></svg>
    <script>
        d3.select('.add-data').on('click', function () {
            data.push({
                name: 'someName',
                value: Math.floor(Math.random() * 100000)
            });

            pieChart.draw(data);
        });

        var data = [
            {
                name: 'Chrome',
                value: 150000
            },
            {
                name: 'Firefox',
                value: 125000
            },
            {
                name: 'Opera',
                value: 100000
            },
            {
                name: 'Safari',
                value: 80000
            }
        ];
        var pieChart = d3.select('svg')
                .chart('pie');

        pieChart.draw(data);
    </script>
</body>
</html>

pie.js

d3.chart('pie', {
    initialize: function () {
        var chart = this;

        chart.margin = {
            top: 10,
            right: 10,
            bottom: 10,
            left: 10
        };

        chart.width = parseInt(chart.base.style('width')) - chart.margin.left - chart.margin.right;
        chart.height = parseInt(chart.base.style('height')) - chart.margin.top - chart.margin.bottom;
        chart.radius = Math.floor(Math.min(chart.height, chart.width) / 2);
        chart.color= d3.scale.ordinal()
            .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

        chart.arc = d3.svg.arc()
            .outerRadius(chart.radius)
            .innerRadius(chart.radius * 0.5);

        chart.pie = d3.layout.pie()
            .sort(null)
            .value(function (d) { return d.value; });

        chart.areas = {};

        chart.areas.slices = chart.base.append('g')
            .classed('pieWrap', true)
            .attr('transform', 'translate(' + (chart.width / 2) + ', ' + (chart.height / 2) + ')');

        chart.layer('slices', chart.areas.slices, {
            dataBind: function (data) {
                var chart = this.chart();
                return this.selectAll('.pieWrap')
                    .data(chart.pie(data));
            },

            insert: function () {
                return this.append('g')
                    .classed('slice', true)
                    .append('path')
                    .on('mouseover', function (d, i) {
                        d3.select(this)
                            .classed('hover', true)
                            .attr('fill-opacity', '0.75');
                    })
                    .on('mouseout', function () {
                        d3.select(this)
                            .classed('hover', false)
                            .attr('fill-opacity', '1');
                    });
            },

            events: {
                enter: function () {
                    var chart = this.chart();

                    this
                        .attr('d', chart.arc)
                        .attr('stroke', '#fff')
                        .attr('fill', function (d, i) {
                            return chart.color(i);
                        });
                },
                update: function () {
                    var chart = this.chart();

                    this.select('path')
                        .attr('d', chart.arc)
                        .attr('stroke', '#fff')
                        .attr('fill', function (d, i) {
                            return chart.color(i);
                        });

                }
            }
        });
    }
});