Bubble Chart Fail

by DJ Martin

HTML

<link rel="stylesheet" href="http://dc-js.github.io/dc.js/css/dc.css">
<link rel="stylesheet" href="http://dc-js.github.io/dc.js/css/bootstrap.min.css">
<script src="http://dc-js.github.io/dc.js/js/crossfilter.js"></script>
<script src="http://dc-js.github.io/dc.js/js/dc.js"></script>
<body>
    <div class="container">
        <div class="row">
            <div id="bubble-chart" class="dc-chart">
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</body>

JavaScript

var data = [
		{label: "reads", count: 247},
		{label: "listens", count: 175},
		{label: "quizzes", count: 145},
		];
        
var ndx = crossfilter(data);

var countDim = ndx.dimension(function(d) {return d.label;});
var countGroup = countDim.group().reduceSum(function(d){return d.count;});

var xRange = [0, 9],
    yRange = [0, 2];
var i = 1;

var bubbleChart  = dc.bubbleChart("#bubble-chart"); 

bubbleChart
	.dimension(countDim)
	.group(countGroup)
	.x(d3.scale.linear().domain(xRange))
	.y(d3.scale.linear().domain(yRange))
	.width(400)
    .height(200)
    .maxBubbleRelativeSize(0.08)
    .keyAccessor(function (p) {
        if(p.key == "reads") return 2.5;
        if(p.key == "listens") return 5;
        if(p.key == "quizzes") return 7.5;    
    })
    .valueAccessor(function (p) {
        return 1;
    })
    .radiusValueAccessor(function (p) {
        return p.value;
    })
    .renderLabel(true)
    .label(function (p) {
            return p.key;
    });
	bubbleChart.xAxis().tickValues([]);
	bubbleChart.yAxis().tickValues([]);
    dc.renderAll();