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",
    Value: 200
}, {
    Category: "B",
    ID: 30
}, {
    Category: "B",
    ID: 30
}, {
    Category: "C",
    ID: 45
}];

    
var ndx = crossfilter(data);


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

function reduceRemove(p, v) {
     --p.count;

  return p - v.ID;
}

function reduceInitial() {
            return {count: 0};
}


var X =  ndx.dimension(function (d) {return d.Category;});
var Y = X.group().reduce(reduceAdd,reduceRemove,reduceInitial);

dc.bubbleChart("#Chart")
  .dimension(X)
  .group(Y)
  .colorAccessor(function (d) {return d.value;})
  .keyAccessor(function (p) {return p.value;})
  .valueAccessor(function (p) {return p.value;})
  .radiusValueAccessor(function (p) {return p.value;})
  .x(d3.scale.linear().domain([0, 200]))
  .y(d3.scale.linear().domain([0, 500]))
  .r(d3.scale.linear().domain([0, 500]))
  ;  



dc.renderAll();