JSFiddle - React, Tailwind, and code Playground

by HattrickNZ

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>
    <title>Dimensional Charting</title>


<div id="chart-ring-year"></div>
<div id="chart-row-spenders"></div>

CSS

.dc-chart g.row text {
  fill: black;  
}

JavaScript

// taken from this tutorial 
// http://www.benjaminmbrown.com/2016/02/tutorial-how-to-build-real-time-data-visualization-with-d3-crossfilter-and-websockets-in-python-by-example/
    
    var yearRingChart   = dc.pieChart("#chart-ring-year"),
        spenderRowChart = dc.rowChart("#chart-row-spenders");
    //var connection = new WebSocket('ws://localhost:8001/websocket');
    var data1 = [
        {Name: 'Ben', Spent: 330, Year: 2014, 'total':1},
        {Name: 'Aziz', Spent: 1350, Year: 2012, 'total':2},
        {Name: 'Vijay', Spent: 440, Year: 2014, 'total':2},
        {Name: 'Jarrod', Spent: 555, Year: 2015, 'total':1},
        {Name: 'Ben2', Spent: 330, Year: 2014, 'total':1},
        {Name: 'Aziz2', Spent: 1350, Year: 2012, 'total':2},
        {Name: 'Vijay2', Spent: 440, Year: 2014, 'total':2},
        {Name: 'Jarrod2', Spent: 555, Year: 2015, 'total':1},
        {Name: 'Ben23', Spent: 330, Year: 2014, 'total':1},
        {Name: 'Aziz23', Spent: 1350, Year: 2012, 'total':2},
        {Name: 'Vijay23', Spent: 440, Year: 2014, 'total':2},
        {Name: 'Jarrod23', Spent: 555, Year: 2015, 'total':1},
        {Name: 'Ben234', Spent: 330, Year: 2014, 'total':1},
        {Name: 'Aziz234', Spent: 1350, Year: 2012, 'total':2},
        {Name: 'Vijay234', Spent: 440, Year: 2014, 'total':2},
        {Name: 'Jarrod234', Spent: 555, Year: 2015, 'total':1},
    ];
    // set crossfilter with first dataset
    var xfilter = crossfilter(data1),
        yearDim  = xfilter.dimension(function(d) {return +d.Year;}),
        spendDim = xfilter.dimension(function(d) {return Math.floor(d.Spent/10);}),
        nameDim  = xfilter.dimension(function(d) {return d.Name;}),
      
        spendPerYear = yearDim.group().reduceSum(function(d) {return +d.Spent;}),
        spendPerName = nameDim.group().reduceSum(function(d) {return +d.Spent;});
    function render_plots(){
        yearRingChart
            .width(200).height(200)
            .dimension(yearDim)
           ...