JSFiddle - React, Tailwind, and code Playground

by chrisguzman

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<body>
    <div id='Chart'>
        <h3>I just want a Bubble Chart, Bubble Chart, Bubble, Bubble, Bubble Chart</h3>
    </div>

</body>

JavaScript

var data = [{
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "50"
}, {
    Category: "A",
    ID: "2"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "2"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "100"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "4"
}, {
    Category: "C",
    ID: "1"
}, {
    Category: "C",
    ID: "2"
}, {
    Category: "C",
    ID: "3"
}, {
    Category: "C",
    ID: "4"
}, {
    Category: "C",
    ID: "1"
}, {
    Category: "C",
    ID: "5"
}];
data.forEach(function (d) {
    d.ID = parseInt(d.ID, 10);
    });
    
var ndx = crossfilter(data);

var XDimension = ndx.dimension(function (d) {
    return d.Category;
});
var YDimension = XDimension.group()

function reduceAdd(p, v) {
  return p + v.ID;
}

function reduceRemove(p, v) {
  return p - v.ID;
}

function reduceInitial() {
  return 0;
}

dc.bubbleChart("#Chart")
  .width(990).height(250)  
  .transitionDuration(1500)
  .margins({top: 10, right: 50, bottom: 30, left: 40})
  .dimension(ndx.dimension(function (d) {return d.Category;}))
  .group(ndx.dimension(function (d) {return d.Category;}).group().reduce(reduceAdd,reduceRemove,reduceInitial))
  .colorAccessor(function (d) {return d.value;})
  .keyAccessor(function (p) {return p.value;})
  .valueAccessor(function (p) {return p.value;})
  .radiusValueAccessor(function (p) {return p.value;})
  .maxBubbleRelativeSize(0.3)
  .x(d3.scale.linear().domain([-1000000, 10000000000]))
  .y(d3.scale.linear().domain([-1000000, 1000000000]))
  .r(d3.scale.linear().domain([0, 10000000]))
  .elasticY(true)
  .elasticX(true)
  .yAxisPadding(100)
  .xAxisPadding(500)
  .renderHorizontalGridLines(true)
  .renderVerticalGridLines(true)
  .xAxisLabel('Index Gain') 
  .yAxisLabel('Index Gain %')
  ;  



dc.renderAll();