JSFiddle - React, Tailwind, and code Playground

by adamist521

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.js"></script>
<script src="http://dc-js.github.io/dc.js/js/dc.js"></script>
<link rel="stylesheet" href="http://dc-js.github.io/dc.js/css/dc.css">
<div id="compChart"></div> 
<div id="projectChart"></div>
<div id="costChart"></div>

JavaScript

// year company income  
data2 = [
  [2001, "AAAAAAA", 200],
  [2002, "AAAAAAA", 300],
  [2003, "AAAAAAA", 400],
  [2001, "BBBBBBB", 150],
  [2002, "BBBBBBB", 200],
  [2000, "CCCCCCC", 500],
  [2001, "CCCCCCC", 600],
  [2002, "CCCCCCC", 550]
];

data2 = data2.map(function(d) {
  return {
    year: d[0],
    company: d[1],
    income: d[2]
  };
});


var ndx2 = crossfilter(data2);
var compDim = ndx2.dimension(function(d) {
  return d.company;
});

var compGroup = compDim.group().reduceCount();


dc.barChart("#compChart")
  .dimension(compDim)
  .group(compGroup)




// project | subproject | budget
data = [
["PrA", "SubPr1", 100],
["PrA", "SubPr2", 150],
["PrA", "SubPr3", 200],
["PrB", "SubPr4", 300],
["PrB", "SubPr5", 500],
["PrC", "SubPr6", 450]];

data = data.map(function (d) {
    return {
        project: d[0],
        subproject: d[1],
        budget: d[2]
    };
});

var ndx = crossfilter(data)
var projDim = ndx.dimension(function(d){return d.project;});
var projGroup = projDim.group().reduceSum(function(d){return d.budget;});

function values_dimension(dim, group) {
    return {
        filter: function(v) {
            if(v !== null)
                throw new Error("don't know how to do this!");
            return dim.filter(null);
        },
        filterFunction: function(f) {
            var f2 = [];
            group.all().forEach(function(kv) {
                if(f(kv.value))
                    f2.push(kv.key);
            });
            dim.filterFunction(function(k) {
                return f2.indexOf(k) >= 0;
            });
            return this;
        }
    };
}

function values_group(group) {
    return {
        all: function() {
            var byv = [];
            group.all().forEach(function(kv) {
                if(kv.value === 0)
                    return;
                byv[kv.value] = (byv[kv.value] || 0) + 1;
            });
            var all2 = [];
            byv.forEach(function(d, i) {
                all2.push({key: i,...