c3/extensions/chart-bubble/bubble.js

(function() {
    var extra = {};

    c3.chart.internal.fn.additionalConfig = {
        data_pairs: [],
    };

    c3.chart.internal.fn.beforeInit = function (config) {

        var that = this;

        // update internals only when chart type is "bubble"
        if (config.data.type !== 'bubble') {
            return;
        }

        // Set extra to ba able to be used in other part
        this.extra = extra;

        extra.getKey = function (x, y) {
            return x + '::' + y;
        };

        this.config.data_type = 'scatter';

        this.config.axis_x_padding = 0;
        this.config.axis_y_padding = 0;
        this.config.axis_x_tick_centered = true;
        this.config.axis_x_tick_format = function (d) {
            return extra.names[d];
        };
        this.config.axis_y_tick_format = function (d) {
            return extra.names[d];
        };

        if (!config.color || !config.color.pattern) {
            this.config.color_pattern = ['#1f77b4'];
        }

        this.config.point_r = function (d) {
            var names = extra.names, values = extra.values, base_length = extra.base_length,
                x = names[d.x], y = d.id,
                key = extra.getKey(x, y), value = !values[key] ? 0 : values[key],
                max, max_r, max_area, a, area, r;

            if (!base_length) {
                base_length = extra.base_length = d3.min([
                    that.svg.select('.c3-axis.c3-axis-y path').node().getTotalLength(),
                    that.svg.select('.c3-axis.c3-axis-x path').node().getTotalLength(),
                ]);
            }

            max = d3.max(Object.keys(values).map(function (key) { return values[key]; }));
            max_r = (base_length / (names.length * 2));
            max_area = max_r * max_r * Math.PI;

            a = max_area / max;

            area = value * a;
            r = Math.sqrt(area / Math.PI);

            return r;
        };
        this.config.point_sensitivity = 25;
        this.config.point_focus_expand_enabled = false;

        this.config.legend_show = false;

        if (!config.tooltip || !config.tooltip.contents) {
            this.config.tooltip_contents = function (d, defaultTitleFormat, defaultValueFormat, color) {
                var x = extra.names[d[0].x], y = d[0].name, v = extra.values[extra.getKey(x, y)], text;

                text = "<table class='" + this.CLASS.tooltip + "'>";
                text += "<tr><th colspan='2'>" + x + "&nbsp;/&nbsp;" + y + "</th></tr>";
                text += "<tr><td class='value'>" + (!v ? 0 : v) + "</td></tr>";
                text += "</table>";

                return text;
            };
        }

        // construct bubble chart data and setup config based on the values

        var xs = this.config.data_pairs.map(function (pair) { return pair.x; }),
            ys = this.config.data_pairs.map(function (pair) { return pair.y; });

        extra.names = d3.set(xs.concat(ys)).values().sort();

        this.config.axis_y_tick_values = extra.names.map(function (name, i) { return i; });

        var data_xs = {};
        extra.names.forEach(function (name) {
            data_xs[name] = name + '_x';
        });
        var data_columns_xs = Object.keys(data_xs).map(function (key) {
            return [data_xs[key]].concat(extra.names.map(function (name, i) { return i; }));
        });
        var data_columns_values = extra.names.map(function (name, i) {
            return [name].concat(extra.names.map(function (name) { return i; }));
        });
        this.config.data_xs = data_xs;
        this.config.data_columns = data_columns_xs.concat(data_columns_values);

        var values = {};
        this.config.data_pairs.forEach(function (pair) {
            if (!pair.x || !pair.y) {
                throw "x and y are required in data.";
            }
            values[extra.getKey(pair.x, pair.y)] = pair.value;
        });
        extra.values = values;

        this.config.axis_x_min = this.config.axis_y_min = -0.5;
        this.config.axis_x_max = this.config.axis_y_max = extra.names.length - 0.5;
    };
})(window);