JSFiddle - React, Tailwind, and code Playground

by eyalkaspi

HTML

<!--[if lte IE 8]> <script type="text/javascript" charset="utf-8">
        !function(t){var e,n,r="0.3.4",i="hasOwnProperty",a=/[\.\/]/,o="*",u=function(){},s=function(t,e){return t-e},l={n:{}},c=function(t,r){var i,a=n,o=Array.prototype.slice.call(arguments,2),u=c.listeners(t),l=0,f=[],h={},p=[],d=e;e=t,n=0;for(var g=0,m=u.length;m>g;g++)"zIndex"in u[g]&&(f.push(u[g].zIndex),u[g].zIndex<0&&(h[u[g].zIndex]=u[g]));for(f.sort(s);f[l]<0;)if(i=h[f[l++]],p.push(i.apply(r,o)),n)return n=a,p;for(g=0;m>g;g++)if(i=u[g],"zIndex"in i)if(i.zIndex==f[l]){if(p.push(i.apply(r,o)),n)break;do if(l++,i=h[f[l]],i&&p.push(i.apply(r,o)),n)break;while(i)}else h[i.zIndex]=i;else if(p.push(i.apply(r,o)),n)break;return n=a,e=d,p.length?p:null};c.listeners=function(t){var e,n,r,i,u,s,c,f,h=t.split(a),p=l,d=[p],g=[];for(i=0,u=h.length;u>i;i++){for(f=[],s=0,c=d.length;c>s;s++)for(p=d[s].n,n=[p[h[i]],p[o]],r=2;r--;)e=n[r],e&&(f.push(e),g=g.concat(e.f||[]));d=f}return g},c.on=function(t,e){for(var n=t.split(a),r=l,i=0,o=n.length;o>i;i++)r=r.n,!r[n[i]]&&(r[n[i]]={n:{}}),r=r[n[i]];for(r.f=r.f||[],i=0,o=r.f.length;o>i;i++)if(r.f[i]==e)return u;return r.f.push(e),function(t){+t==+t&&(e.zIndex=+t)}},c.stop=function(){n=1},c.nt=function(t){return t?new RegExp("(?:\\.|\\/|^)"+t+"(?:\\.|\\/|$)").test(e):e},c.off=c.unbind=function(t,e){var n,r,u,s,c,f,h,p=t.split(a),d=[l];for(s=0,c=p.length;c>s;s++)for(f=0;f<d.length;f+=u.length-2){if(u=[f,1],n=d[f].n,p[s]!=o)n[p[s]]&&u.push(n[p[s]]);else for(r in n)n[i](r)&&u.push(n[r]);d.splice.apply(d,u)}for(s=0,c=d.length;c>s;s++)for(n=d[s];n.n;){if(e){if(n.f){for(f=0,h=n.f.length;h>f;f++)if(n.f[f]==e){n.f.splice(f,1);break}!n.f.length&&delete n.f}for(r in n.n)if(n.n[i](r)&&n.n[r].f){var g=n.n[r].f;for(f=0,h=g.length;h>f;f++)if(g[f]==e){g.splice(f,1);break}!g.length&&delete n.n[r].f}}else{delete n.f;for(r in n.n)n.n[i](r)&&n.n[r].f&&delete n.n[r].f}n=n.n}},c.once=function(t,e){var n=function(){var r=e.apply(this,arguments);return c.unbind(t,n),r};return...

CSS

.bar {
  fill: steelblue;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

JavaScript

var margin = { top: 10, right: 30, bottom: 0, left: 30 },
          width = 660 - margin.left - margin.right,
          height = 250 - margin.top - margin.bottom,
          colors = ['white', '#9fc5e6', '#2997e6', '#1686e5'];

var numRows = 10;
var numCols = 40;

var REFRESH_RATE = 2000;
function generateTimeSlot(col) {
    var res = [];
    for (var i=0; i < numRows; i++) {    
        var value = Math.floor(Math.random()*colors.length);
        res.push({y:value, col:col, row:i});
    }
    return res;
}

function generateData() {
    var res=[];
    for (var col=0; col < numCols; col++) {
        res = res.concat(generateTimeSlot(col));
    }
    return res;
}


function generateIops(num) {
    var res = [];
    for (var i=0; i<num; i++) {
        var randomIops = Math.floor(Math.random()*3000);
        res.push({index: i, value : randomIops});
    }
    return res;
}

var heatMapSVG = d3.select("#heatmap-chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 var barChartSVG = d3.select("#bar-chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", 60 + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 var lineChartSVG = d3.select("#line-chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", 60 + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var drawHeatMap = function (data) {    
    var colorScale = d3.scale.quantile()
        .domain([0, colors.length - 1, d3.max(data, function (d) { return d.value; })])
        .range(colors);
    
    var x = d3.scale.linear()
        .domain([data[0].col, data[data.length-1].col])
        .range([0,...