JSFiddle - React, Tailwind, and code Playground

by chrisguzman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.js"></script>
<script src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.js"></script>
<script src="https://cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css">
<body>
    <div class='pie-graph span6' id='dc-magnitude-chart'>
         <h4>Events by Magnitude</h4>

    </div>
</body>

JavaScript

new Firebase('https://barchartfilter.firebaseio.com/UniqueActivities')
    .on('value', function (snapshot) {
    var lst = [];
    snapshot.forEach(function (childSnapshot) {
        lst.push(childSnapshot.val());
    });

 
    ndx = new crossfilter(lst);

    var XDimension = ndx.dimension(function (d) {
        return d.Owner;
    });

    var YDimension = XDimension.group().reduceCount(function (d) {
        return d.Owner;
    });



    dc.barChart("#dc-magnitude-chart")
        .width(480).height(300)
        .dimension(XDimension)
        .group(YDimension)
        .centerBar(true)
        .gap(56)
        .x(d3.scale.ordinal().domain(XDimension))
        .xUnits(dc.units.ordinal)
        .xAxisLabel("Market Developer")
        .yAxisLabel("Unique Counts")
        .elasticY(true)
        .xAxis().tickFormat(function (v) {
        return v;
    });
    dc.renderAll();

});