JSFiddle - React, Tailwind, and code Playground

by Eeedgar

HTML

<link rel="stylesheet" href="https://visualise.datanirvana.org/Styles/Site.min.css">
<link rel="stylesheet" href="https://datanirvana.github.io/dn.js/Styles/DN.min.css">
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://datanirvana.github.io/dn.js/Scripts/ColourBrewer.min.js"></script>
<script src="https://datanirvana.github.io/dn.js/Scripts/DN.min.js"></script>
<script src="https://datanirvana.github.io/dn.js/Scripts/d3-sankey.min.js"></script>
<script src="https://datanirvana.github.io/dn.js/Scripts/D3RangeSlider.min.js"></script>
<div id="DataVis">
  <div id="VisSummary" class="ChartBox">
    <div class="ChartTitle">Summary</div>
    <div class="VisDeliveries">
      Total deliveries shown:
      <div id="TotalDeliveries"></div>
    </div>
    <div class="VisRating">
      Average rating (5 is best):
      <div id="AverageRating"></div>
    </div>
    <div class="ResetWidget">
    <a href="javascript: chartGroup.ResetAll();">&#8634; Reset dashboard</a>
    </div>
  </div>
</div>

CSS

/* Override the default chart boxes */
.ChartBox {
    position: absolute;
    margin: 0px 0px 0px 0px;    
    border-radius: 1px 1px 1px 1px;    
    border: none;
    border: 1px solid rgba(240,240,240,1);
    overflow: hidden;
}
.ChartTitle
{
    margin:0 auto;
    font-weight:300;
    font-size:1.3em;
    color:#505050; /*0c4c70*/
    width:100%;
    text-align:center;
    position:relative;
    background: rgba(240,240,240,0.2);
    border-radius:0px 0px 0px 0px;
    border-bottom:solid 1px #dddddd; /* 2c8ac1 */
    padding-left:0px;
    padding-top:5px;
    padding-bottom:5px;
}

#DataVis {
    position: relative;
    min-height: 520px;
    margin-left:10px;
}

/* Column charts */
.CChart {
    fill: #2c8ac1;
}
.CChart4 {
    fill:#fadfa9;
}
.CChart5 {
    fill: #999999;
}

.CChartDisabled {
  fill:#cccccc;
}
.CChartHover {
  fill:#f7bb16;
}
.CChartClicked {
  fill:#ff00ff;
}
.CCAxis
{
    stroke:none;
    fill:#505050;
    font:11px Open Sans;
}
.CCAxis path,
.CCAxis line {
  fill:none;
  stroke:#dddddd;
  stroke-width:1px;
  shape-rendering:crispEdges;
}
.CCAxisGrid line {
  stroke: #eeeeee;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}
.CCAxisGrid path {
  stroke-width: 0;
}
.CCSliderWrapper {
    position: absolute;
    left: 0px;
    top: 0px;
    height:16px;
    margin-top:3px;
    /* Shuffle the slider left or right*/
    margin-left:28px;
    margin-right:0px;
}
.CCSliderLabel {
    position: absolute;
    left: 0px;
    top: 0px;
    height:20px;
    width: 200px;
}

.PCLegend {
    font-size: 16px;
}

.slider {
    background-color: #eeeeee;
}

#VisSummary{
  min-height:240px;
  min-width:200px;
}
.VisDeliveries {
    font-size:1.3em;
    margin-left: 20px;
    margin-top: 5px;
}
#TotalDeliveries {
    font-size: 2.0em;
    text-align: right;
    margin-right: 20px;
    font-weight: 500;
}
.VisRating {
    font-size: 1.3em;
    margin-left: 20px;
    margin-top: 5px;
}
#AverageRating {
    font-size: 2.0em;
    text-align: right;
   ...

JavaScript

// Our data source
let urlData = "https://dl.dropboxusercontent.com/s/bbtk32ci3719g8v/DN_Example_Data.csv?dl=1" + "&ym=" + dn.YearMonth();
// Instantiate our DNChartGroup and our pie/donut colour range, and the look up lists we will generate for the type of food, location of delivery and the dates
var chartGroup, lookupListFood, lookupListLocation, lookupListDate = null;
var pieColourRange = colourbrewer.IAPink[5].reverse();

//----- PROCESS DATA
function LoadData() {
    // Load the data using d3.csv
    d3.csv(urlData).then(function (data) {

        // Build the lookup lists for Food and location (dn is our DN object)
        lookupListFood = dn.BuildLookupList(data, "Food", 100);
        lookupListLocation = dn.BuildLookupList(data, "Location", 200);

        // Loop through and ensure that the raw data is numeric 
        // and set the codes for the food and location data
        data.map(d => {
            d.Count = +d.Count;
            d.FO = dn.GetObjInList(lookupListFood, "Title", d.Food).ID;
            d.RA = +d.RA;
            d.DA = +(d.Date.replace(/-/g, "")).substring(0,6); // Create YYYYMM
            d.LO = dn.GetObjInList(lookupListLocation, "Title", d.Location).ID;
            return d;
        });
        // Create the lookups for the dates
        lookupListDate = dn.GetYearMonthDescriptionList(dn.Unique(data.map(d => d.DA)));

        // Create the chart group
        CreateChartGroup(data);
    });
}      

//----- INSTANTIATE
function CreateChartGroup(data) {
    // Create the chart group
    chartGroup = new DNChartGroup(data);

    // Setup the default font, hide the dropshadows and tweak the margins
    chartGroup.defaultFont = "Open Sans";
    chartGroup.SetDropShadow(false);
    dn.defaultPieDonutWidth = 30;
    dn.defaultColumnChartMargins.bottom = 50;
    dn.defaultPieDonutLegendRectangleSize = 16;
    dn.defaultBarChartMargins.right = 60;

    VisualiseData();
}      

//----- VISUALISE
function VisualiseData() {
   ...