JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-time/1.0.8/d3-time.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-scale/1.0.7/d3-scale.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.4.6/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.4/dc.min.js"></script>
<div>
  <div id="detailChart"></div>
  <div id="overviewChart"></div>
  <div id="heatmap"></div>
  <span >Select a time range to zoom in <button id="reset">Reset</button></span>
</div>
<div id="filteredItems">
</div>

JavaScript

var items = [
  { date: "2017-04-28 09:00", text: "Lorem ipsum dolor sit amet"},
  { date: "2017-04-15 09:00", text: "Lorem ipsum dolor sit amet"},
  { date: "2017-04-15 08:00", text: "Lorem ipsum dolor sit amet"},
  { date: "2017-03-21 09:00", text: "Lorem ipsum dolor sit amet"},
  { date: "2017-03-20 09:00", text: "Lorem ipsum dolor sit amet"},
  { date: "2017-03-12 09:00", text: "Lorem ipsum dolor sit amet"},
  { date: "2017-03-10 09:00", text: "Lorem ipsum dolor sit amet"},
  { date: "2017-02-19 11:00", text: "Lorem ipsum dolor sit amet"},
  { date: "2017-02-19 10:00", text: "Lorem ipsum dolor sit amet"},
  { date: "2017-02-19 09:00", text: "Lorem ipsum dolor sit amet"},
  { date: "2017-02-12 09:00", text: "Lorem ipsum dolor sit amet"},
  { date: "2017-01-30 09:00", text: "Lorem ipsum dolor sit amet"},
  { date: "2017-01-27 09:00", text: "Lorem ipsum dolor sit amet"},
  { date: "2017-01-26 09:00", text: "Lorem ipsum dolor sit amet"},
  { date: "2017-01-10 09:00", text: "Lorem ipsum dolor sit amet"},
  { date: "2016-12-10 09:00", text: "Lorem ipsum dolor sit amet"},
  { date: "2016-11-15 09:00", text: "Lorem ipsum dolor sit amet"},
  { date: "2016-11-15 08:00", text: "Lorem ipsum dolor sit amet"},
  { date: "2016-11-14 09:00", text: "Lorem ipsum dolor sit amet"},
  { date: "2016-11-14 08:00", text: "Lorem ipsum dolor sit amet"},
  { date: "2016-11-14 07:00", text: "Lorem ipsum dolor sit amet"},
  { date: "2016-11-13 09:00", text: "Lorem ipsum dolor sit amet"},
  { date: "2016-11-12 09:00", text: "Lorem ipsum dolor sit amet"},
  { date: "2016-11-11 09:00", text: "Lorem ipsum dolor sit amet"},
  { date: "2016-11-10 09:00", text: "Lorem ipsum dolor sit amet"},
]

var dayTranslation = [6, 5, 4, 3, 2, 1, 0]
var days = ['Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon', 'Sun']

items.forEach(i => i.date = new Date(i.date))

var reset = () => {
	dc.filterAll()
  dc.renderAll()
}

document.getElementById('reset').addEventListener('click', reset)

var ndx =...