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>
    <script>
        //Create empty list
        //push filled list into cross filter

        var dataRef = new Firebase('https://shippy.firebaseIO.com/UniqueActivities');

        dataRef.auth('sa3wJ5tw15HOct8hCzNfnqW8UAqGBG9Qt0uTqX87', function() {});

        dataRef.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();

        });
    </script>
</body>