NVD3 - Is there a way to increase the size of the bubbles?

Question

Currently my chart looks as follows.

http://jsfiddle.net/darcyvoutt/qNnLx/2/

Here's the code:

nv.addGraph(function () {
    var yourProductColor = "rgba(242,94,34,0.58)";
    var competitorColor = "rgba(57,198,226,58)";
    var marketColor = "rgba(255,255,255,0.75)";

    var chart = nv.models.scatterChart()
        .color([marketColor, competitorColor, yourProductColor])
        .transitionDuration(350)
        .margin({
        bottom: 60
    })
        .showDistX(true)
        .showDistY(true);

    //Configure how the tooltip looks.
    chart.tooltipContent(function (key) {
        return '<h3>' + key + '</h3>';
    });

    chart.yAxis.tickFormat(d3.format('.02f'))
        .axisLabel("Frequency");


    chart.xAxis.axisLabel("Tranditional Media -> Digital & Social Media")
        .tickFormat(d3.format('.02f'));

    //We want to show shapes other than circles.
    chart.scatter.onlyCircles(true);

    d3.select('#marketingChart svg')
        .datum(exampleData())
        .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;

    function exampleData() {
        return [{
            "key": "Market",
                "values": [{
                "x": 0.2,
                "y": 25,
                "size": 230
            }, {
                "x": 0.4,
                "y": 39,
                "size": 350
            }, {
                "x": 0.7,
                "y": 5,
                "size": 200
            }, {
                "x": 0.9,
                "y": 23,
                "size": 200
            }]
        }, {
            "key": "Competitor",
                "values": [{
                "x": 0.2,
                "y": 20,
                "size": 150
            }, {
                "x": 0.45,
                "y": 45,
                "size": 200
            }, {
                "x": 0.7,
                "y": 70,
                "size": 180
            }, {
                "x": 0.3,
                "y": 30,
                "size": 340
            }]
        }, {
            "key": "Your Product",
                "values": [{
                "x": 0.5,
                "y": 30,
                "size": 50,
                "label": "YourProduct"
            }]
        }]
    }
});

But I want it to look more like this in terms of the size of bubbles.

Does anyone know how to increase the overall size (without loosing proportions).

Thanks

Answer 1

I believe this previous SO answer addresses your question. You can control the radii of the circles in the scatter plot using .sizeRange([minArea, maxArea]). For example, in your code:

var chart = nv.models.scatterChart()
  .color([marketColor, competitorColor, yourProductColor])
  .transitionDuration(350)
  .margin({bottom: 60})
  .showDistX(true)
  .showDistY(true)
  .sizeRange([1000, 5000]); # added sizeRange

NOTE: As of version 1.7.1 .sizeRange was changed to .pointRange

This results in the following scatterplot: