JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    body {
        font: 10px sans-serif;
    }
    .axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }
    .bar {
        fill: steelblue;
    }
    .x.axis path {
        display: none;
    }
</style>
<body>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>
        function getTextWidth(text, fontSize, fontName) {
            c = document.createElement("canvas");
            ctx = c.getContext("2d");
            ctx.font = fontSize + ' ' + fontName;
            return ctx.measureText(text).width;
        }
        function DataSegregator(array, on) {
            var SegData;
            OrdinalPositionHolder = {
                valueOf: function () {
                    thisObject = this;
                    keys = Object.keys(thisObject);
                    keys.splice(keys.indexOf("valueOf"), 1);
                    keys.splice(keys.indexOf("keys"), 1);
                    return keys.length == 0 ? -1 : d3.max(keys, function (d) { return thisObject[d] })
                }
                , keys: function () {
                    keys = Object.keys(thisObject);
                    keys.splice(keys.indexOf("valueOf"), 1);
                    keys.splice(keys.indexOf("keys"), 1);
                    return keys;
                }
            }
            array[0].map(function (d) { return d[on] }).forEach(function (b) {
                value = OrdinalPositionHolder.valueOf();
                OrdinalPositionHolder[b] = OrdinalPositionHolder > -1 ? ++value : 0;
            })
            SegData = OrdinalPositionHolder.keys().map(function () {
                return [];
            });
            array.forEach(function (d) {
                d.forEach(function (b) {
                    SegData[OrdinalPositionHolder[b[on]]].push(b);
                })
            });
            return SegData;
        }
        Data = [
{ Date:...

CSS

.mytooltip {
  position:absolute;
  text-align: center;
  width: 200px;
  height:auto;
  background-color: #EDE3D1;
  border-radius: 10px;
  color: #787777;
  padding: 6px 12px;
  z-index:3;
}

.mytooltip:after {
  box-sizing: border-box;
  display: inline;
  width: 100%;
  line-height: 1;
  color: #EDE3D1;
  content: "\25BC";
  position: absolute;
  text-align: center;
  margin: -3px 0 0 0;
  top: 50%;
  left: 50%;
}

.mytooltip span {
    display: block;
    text-align: center;
    width: 200px;
    height: auto;
    margin: 5px auto;
  }

#thumbnail {
    width: 200px;
    height: auto;
    margin: 0 auto;
    color: #787777;
    text-align: center;
  }