Configuration

In the examples folder, find the flare example and open the flare.js file. Locate the following code block where we will create the configuration.

chart = new GravityBubbles({
    id: "vis",
    lanes: 5,
    width: sizes.max.width,
    height: sizes.max.height,
    debug: false,
    sizeById: "size",
    colorById: "perc",
    data: {
        tooltip: function(d) {
            return "<b>Name:</b>{name}<br><b>Size:</b> {size}<br><b>Size of Total:</b> {perc}%";
        },
        label: {
            template: "{name}\n{perc}%"
        },
        onclick: function(d, circle) {
            if (d.hasOwnProperty("children")) {
                //d3.select(circle).classed("drilldown", true);
                d3.selectAll(".bubble:not(.selected)")
                    .transition()
                    .duration(100)
                    .attr("r", 0);
                d3.select(circle).select("circle")
                    .transition()
                    .duration(1000)
                    .attr("fill-opacity", 0.1)
                    .attr("r", chart._config.width)
                    .each("end", function() {
                        d3.selectAll(".bubble").attr("r", 0).attr("fill-opacity", null);
                        chart.data(d.children);
                        nodes.push(d);
                        breadcrumb();
                    });
                d3.select(circle).select(".label").attr("class", "label selected");
                d3.selectAll(".label:not(.selected)")
                    .attr("visibility", "hidden");

            }
        }
    }
});

We will attempt to document a few of the key parts.

####Labels

summary: The label has same syntax as the tooltip. If you use "{}" string as template, the component will try to extract value of name property of item data. The labels will auto show depending on the width of text and diameter of bubble.

Also label can do an split if you use a new line "{name}\n{description}" to take advantage of available space.

future: I hope to do same with spaces, dash, underscore, to apply same logic to more complex texts.

example: labels