JSFiddle - React, Tailwind, and code Playground

by Gordon Woodhull

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>
<script src="https://rawgit.com/crossfilter/reductio/master/reductio.js"></script>
<script src="https://npmcdn.com/universe@latest/universe.js"></script>
    <div id="test"></div>

JavaScript

/* const dateNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];
 */

var data = [
    {date: "2011-01-14T16:17:54Z", quantity: 2, active: 1000, inactive: 100, type: "tab", city: " "},
    {date: "2011-02-14T16:20:19Z", quantity: 2, active: 190, inactive: 100, type: "tab", city: "Berlin"},
    {date: "2011-03-14T16:28:54Z", quantity: 1, active: 300, inactive: 200, type: "visa", city: " "},
    {date: "2011-04-14T16:30:43Z", quantity: 2, active: 90, inactive: 0, type: "tab", city: "Amsterdam"},
    {date: "2011-05-14T16:48:46Z", quantity: 2, active: 90, inactive: 0, type: "tab", city: " "},
    {date: "2011-06-14T16:53:41Z", quantity: 2, active: 90, inactive: 0, type: "tab", city: " "},
    {date: "2011-07-14T16:54:06Z", quantity: 1, active: 100, inactive: 0, type: "cash", city: " "},
    {date: "2011-08-14T16:58:03Z", quantity: 2, active: 90, inactive: 0, type: "tab", city: " "},
    {date: "2011-09-14T17:07:21Z", quantity: 2, active: 90, inactive: 0, type: "tab", city: " "},
    {date: "2011-10-14T17:22:59Z", quantity: 2, active: 90, inactive: 0, type: "tab", city: " "},
    {date: "2011-11-14T17:25:45Z", quantity: 2, active: 200, inactive: 0, type: "cash", city: " "},
    {date: "2011-12-14T17:29:52Z", quantity: 1, active: 200, inactive: 100, type: "visa", city: ""}
  ];

  data.forEach(function(d){
    var tempDate = new Date(d.date);
    d.date = tempDate;
  
  })
  
  var facts = crossfilter(data);
  var all = facts.groupAll();
  
  
  //table
  var dateDimension = facts.dimension(function(d){ return d3.timeMonth(d.date); });
  //line chart
  
  var dateGroup = dateDimension.group().reduceSum(function(d){ return d.active; });
  var dateGroupTip = dateDimension.group().reduceSum(function(d){ return d.inactive; });
  
  var minDate = d3.timeMonth(dateDimension.bottom(1)[0].date);
  var maxDate = d3.timeMonth(dateDimension.top(1)[0].date);
  
  console.log(minDate);

  var...