JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://nickqizhu.github.io/dc.js/css/dc.css">
<script src="http://nickqizhu.github.io/dc.js/js/d3.js"></script>
<script src="http://nickqizhu.github.io/dc.js/js/crossfilter.js"></script>
<script src="http://nickqizhu.github.io/dc.js/js/dc.js"></script>
<div id="barchart">
</div>

<div id="barchart2">
</div>

JavaScript

var dims={};
var groups ={};
var recordsx;
var pnlPerDaybarChart;
	var pnlPerDaylineChart;
    var otherPieChart;

$(function() {    
    url = "/gh/get/response.json/elChapoSing/testcrossfilter/tree/master/";
	$.ajax({
		url: url,
        success: function (jsondata) {
		    //console.log(jsondata);
			records=jsondata.records;
			var parseDate = d3.time.format("%Y-%m-%d").parse;
			records.forEach(function(d) {
				d.date = parseDate(d.date);
			});		
			
			recordsx = crossfilter(records);
			    

			initData();
			showData();
		}
	});    
});   

function initData() {                            

     dims.date = recordsx.dimension(function(d) {return(+d.date);});
	groups.date={};
groups.date.pnlSum = dims.date.group().reduceSum(function(d) {return(d.pnl);});         

	
 };

function showData() {
        
   var numberFormat = d3.format("$0,.0f");
	var dateFormat = d3.time.format("%Y-%m-%d");                        
     var minDate = dims.date.bottom(1)[0].date;
    var maxDate = dims.date.top(1)[0].date;

        var colorChoice = d3.scale.ordinal().domain(["negative","positive"])
										.range(["#FF7878","#BFEB88"]);
										
	var colorAccessorPosNeg = function(d) {
				//console.log(d);
				if (+d.value>0) {
					return("positive");
				} else {
					return("negative");
				}
			};
    
        pnlPerDaybarChart = dc.barChart("#barchart");

    
    
    pnlPerDaybarChart
		.height(300)
		.width(700)
		.dimension(dims.date)
		.group(groups.date.pnlSum)
		.valueAccessor(function(d) {
			return Math.abs(d.value);
		})
		.renderTitle(false)
		.x(d3.time.scale().domain([minDate,maxDate]))
		.xUnits(d3.time.days)
		.colors(colorChoice)
		.colorAccessor(colorAccessorPosNeg)
		.brushOn(true)
		.margins({left: 70 ,top: 10, bottom: 30, right: 50})
		.centerBar(true);
    
    dc.renderAll();
	
};