JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dashboard">

CSS

body {
    width:100% auto;
    margin:0px auto;
}
path {
    stroke: #fff;
}
path:hover {
    opacity:0.9;
}
rect:hover {
    fill:blue;
}
.axis {
    font: 10px sans-serif;
}
.legend tr {
    border-bottom:1px solid grey;
}
.legend tr:first-child {
    border-top:1px solid grey;
}
.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
.x.axis path {
    display: none;
}
.legend {
    margin-bottom:76px;
    display:inline-block;
    border-collapse: collapse;
    border-spacing: 0px;
}
.legend td {
    padding:4px 5px;
    vertical-align:bottom;
}
.legendFreq, .legendPerc {
    align:right;
    width:50px;
}

JavaScript

function dashboard(id, fData, fData2, fData3) {
    var barColor = 'steelblue';

    function segColor(c) {
        return {
            low: "#807dba",
            mid: "#e08214"
        }[c];
    }

    // compute total for each Month.
    fData.forEach(function (d) {
        d.total = 100;
    });

    // compute total for each Month.
    fData2.forEach(function (d2) {
        d2.total = d2.freq2.lower + d2.freq2.upper;
    });

    // compute total for each Month.
    fData3.forEach(function (d3) {
        d3.total = d3.freq3.lower2 + d3.freq3.upper2;
    });

    // function to handle histogram.
    function histoGram(fD) {
        var hG = {}, hGDim = {
            t: 60,
            r: 0,
            b: 30,
            l: 0
        };
        hGDim.w = 500 - hGDim.l - hGDim.r,
        hGDim.h = 150 - hGDim.t - hGDim.b;

        //create svg for histogram.
        var hGsvg = d3.select(id).append("svg")
            .attr("width", hGDim.w + hGDim.l + hGDim.r)
            .attr("height", hGDim.h + hGDim.t + hGDim.b).append("g")
            .attr("transform", "translate(" + hGDim.l + "," + hGDim.t + ")");

        // create function for x-axis mapping.
        var x = d3.scale.ordinal().rangeRoundBands([0, hGDim.w], 0.1)
            .domain(fD.map(function (d) {
            return d[0];
        }));

        // Add x-axis to the histogram svg.
        hGsvg.append("g").attr("class", "x axis")
            .attr("transform", "translate(0," + hGDim.h + ")")
            .call(d3.svg.axis().scale(x).orient("bottom"));

        // Create function for y-axis map.
        var y = d3.scale.linear().range([hGDim.h, 0])
            .domain([0, d3.max(fD, function (d) {
            return d[1];
        })]);

        // Create bars for histogram to contain rectangles and freq labels.
        var bars = hGsvg.selectAll(".bar").data(fD).enter()
            .append("g").attr("class", "bar");

        //create the rectangles.
        bars.append("rect")
            .attr("x",...