JSFiddle - React, Tailwind, and code Playground

by Matt Anderson

HTML

<script src="http://d3js.org/d3.v2.min.js"></script>
<div id = "outerElement">
    <div id = "insertElement">
    
    </div>
    <div id = "dataOutlet">Hover To View Counts</div>
</div>

CSS

#outerElement {
    width: 100%;
    border: 1px solid #ccc;
}

#insertElement {
    height: 180px;
}

#dataOutlet {
    border-top: 1px solid #ccc;
    line-height: 24px;
    font-size: 12px;
    font-family: "Arial";
    text-align: center;
}

.axis path,
.axis line {
    fill: none;
    stroke: #ddd;
    shape-rendering: crispEdges;
}

svg text {
    font-size: 10px;
    font-family: "Arial";
}

svg rect{
    stroke: none;
    shape-rendering: crispEdges;
    fill: rgb(0, 180, 0);
    stroke-width: 1px;
    stroke-rendering: crispEdges;
}

JavaScript

console.clear();

var data = [ [ { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 } ],
  [ { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, total: 0 },
    { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6':...