JSFiddle - React, Tailwind, and code Playground

by Chinna

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>
<pre id="data">
  miner,timestamp,no_of_transaction,blocknumber
0x829bd824b016326a401d083b33d092293333a830,1504853661,188,4250827
0xea674fdde714fd979de3edf0f56aa9716b898ec8,1504853711,168,4250828
0x829bd824b016326a401d083b33d092293333a830,1504853716,125,4250829
0xea674fdde714fd979de3edf0f56aa9716b898ec8,1504853728,76,4250830
0xea674fdde714fd979de3edf0f56aa9716b898ec8,1504853739,31,4250831
0xea674fdde714fd979de3edf0f56aa9716b898ec8,1504853778,137,4250832
0x829bd824b016326a401d083b33d092293333a830,1504854994,162,4250882
0x52bc44d5378309ee2abf1539bf71de1b7d7be3b5,1504855007,226,4250883
0xb2930b35844a230f00e51431acae96fe543a0347,1504855037,126,4250884
0x829bd824b016326a401d083b33d092293333a830,1504855044,170,4250885
0x6a7a43be33ba930fe58f34e07d0ad6ba7adb9b1f,1504855049,2,4250886
0x90e4be5cd24970a87e23e281f3ad40a89558b433,1504855068,152,4250887
0xea674fdde714fd979de3edf0f56aa9716b898ec8,1504855102,165,4250888
0x90e4be5cd24970a87e23e281f3ad40a89558b433,1504861688,154,4251162
0x829bd824b016326a401d083b33d092293333a830,1504861715,226,4251163
</pre>

CSS

pre#data {
  display: none;
}

JavaScript

var chart = dc.barChart("#test");
var experiments=
d3.csv.parse(d3.select('pre#data').text());

  var ndx            = crossfilter(experiments),
  fruitDimension = ndx.dimension(function(d) {
  
  var dt = new Date(d.timestamp*1000);
  return dt.getHours()+":"+dt.getMinutes()+":"+dt.getSeconds();
  }),
 sumGroup       = fruitDimension.group().reduceSum(function(d) {return d.no_of_transaction;});

   
      chart
          .width(768)
          .height(380)
          .x(d3.scale.ordinal())
          .xUnits(dc.units.ordinal)
          .brushOn(false)
          .xAxisLabel('TimeStamp')
          .yAxisLabel('No of Transaction')
          .dimension(fruitDimension)
          .barPadding(0.1)
          .outerPadding(0.7)
          .group(sumGroup);
      chart.render();