JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://dc-js.github.io/dc.js/css/dc.css">
<script src="https://dc-js.github.io/dc.js/js/d3.js"></script>
<script src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
<script src="https://dc-js.github.io/dc.js/js/dc.js"></script>
<div class="content">

    <div class='row trio-group'>
        <div class='span4' id='chart-bar-two'>
            <h4>Type</h4>
        </div>
    </div>

     <table id="dc-data-table">
                    <thead>
                    <tr class="header">
                        <th>ID</th>
                        <th>InDate</th>
                        <th>Type</th>
                        <th>Value</th>
                    </tr>
                    </thead>
                </table>
</div>

CSS

div.dc-chart {
    float: left;
}

.dc-chart rect.bar {
    stroke: none;
    cursor: pointer;
}

.dc-chart rect.bar:hover {
    fill-opacity: .5;
}

.dc-chart rect.stack1 {
    stroke: none;
    fill: red;
}

.dc-chart rect.stack2 {
    stroke: none;
    fill: green;
}

.dc-chart rect.deselected {
    stroke: none;
    fill: #ccc;
}

.dc-chart .pie-slice {
    fill: white;
    font-size: 12px;
    cursor: pointer;
}

.dc-chart .pie-slice :hover {
    fill-opacity: .8;
}

.dc-chart .selected path {
    stroke-width: 3;
    stroke: #ccc;
    fill-opacity: 1;
}

.dc-chart .deselected path {
    stroke: none;
    fill-opacity: .5;
    fill: #ccc;
}

.dc-chart .axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.dc-chart .axis text {
    font: 10px sans-serif;
}

.dc-chart .grid-line {
    fill: none;
    stroke: #ccc;
    opacity: .5;
    shape-rendering: crispEdges;
}

.dc-chart .grid-line line {
    fill: none;
    stroke: #ccc;
    opacity: .5;
    shape-rendering: crispEdges;
}

.dc-chart .brush rect.background {
    z-index: -999;
}

.dc-chart .brush rect.extent {
    fill: steelblue;
    fill-opacity: .125;
}

.dc-chart .brush .resize path {
    fill: #eee;
    stroke: #666;
}

.dc-chart path.line {
    fill: none;
    stroke-width: 1.5px;
}

.dc-chart circle.dot {
    stroke: none;
}

.dc-chart g.dc-tooltip path {
    fill: none;
    stroke: grey;
    stroke-opacity: .8;
}

.dc-chart path.area {
    fill-opacity: .3;
    stroke: none;
}

.dc-chart .node {
    font-size: 0.7em;
    cursor: pointer;
}

.dc-chart .node :hover {
    fill-opacity: .8;
}

.dc-chart .selected circle {
    stroke-width: 3;
    stroke: #ccc;
    fill-opacity: 1;
}

.dc-chart .deselected circle {
    stroke: none;
    fill-opacity: .5;
    fill: #ccc;
}

.dc-chart .bubble {
    stroke: none;
    fill-opacity: 0.6;
}

.dc-data-count {
    float: right;
    margin-top: 15px;
    margin-right: 15px;
}

.dc-data-count .filter-count {
    color:...

JavaScript

var data = [{"Id":"1","InDate":"31/10/2015","Type":"New","Category":"X1","Value":"1.400874145"},                             {"Id":"2","InDate":"21/10/2014","Type":"Old","Category":"X1","Value":"0"},
           {"Id":"2","InDate":"21/10/2014","Type":"Old","Category":"X2","Value":"0"},
           {"Id":"3","InDate":"21/10/2014","Type":"New","Category":"X1","Value":"4000.4645645665"},
           ];

setupCrossFilters(data);

function setupCrossFilters(data){

    var ndx = crossfilter(data);

    var parseDate = d3.time.format("%d/%m/%Y").parse;

    data.forEach(function(d) {
        d.date = parseDate(d.InDate);
        d.Value = parseFloat(d.Value).toFixed(2);
    });

    var dateDim = ndx.dimension(function(d) {return d.date;});
    var typeDim = ndx.dimension(function(d) {return d.Type;});
    var idDim = ndx.dimension(function(d) {return d.Id;});

    createCharts(dateDim, typeDim, idDim);
}

function createCharts(dateDim, typeDim, idDim){
   
    var timelineGroup = dateDim.group().reduceSum(function(d) {return parseFloat(d.Value);});
    var typeGroup = typeDim.group().reduceSum(function(d) {return parseFloat(d.Value);});

    var barTwoChart  = dc.barChart("#chart-bar-two");

    barTwoChart
        .width(600)
        .height(250)
        .margins({top: 10, right: 50, bottom: 30, left: 50})
        .x(d3.scale.ordinal())
        .xUnits(dc.units.ordinal)
        .brushOn(false)
        .dimension(typeDim)
        .group(typeGroup)
        .elasticY(true);
    
    var datatable   = dc.dataTable("#dc-data-table");
    datatable
        .dimension(idDim)
        .group(function(d) {return "";})
        .size(data.length)
        // dynamic columns creation using an array of closures
        .columns([
            function(d) { return d.Id; },
            function(d) {return d.date;},
            function(d) {return d.Type;},
            function(d) {return d.Value;}
        ]).sortBy(function(d) {
            return -d.Id;
        })
       ...