JSFiddle - React, Tailwind, and code Playground

by emepyc

HTML

<!DOCTYPE html>
<html>
<head>
    <script src="http://d3js.org/d3.v2.js"></script>
</head>
<body>
   <div id="overview">
</div>

CSS

.chart {
 background-color : steelblue;   
}

JavaScript

var data1 = [
    {total_job_counts : 8,
     job_counts : [2,3,2,1],
     logic_name : "analysis1"},
    {total_job_counts : 6,
     job_counts : [2,1,1,2],
     logic_name : "analysis2"},
    {total_job_counts : 12,
     job_counts : [1,1,2,8],
     logic_name : "analysis3"},
    {total_job_counts : 4,
     job_counts : [1,1,1,1],
     logic_name : "analysis4"}
];

var data2 = [
    {total_job_counts : 12,
     job_counts : [6,2,1,3],
     logic_name : "analysis1"},
    {total_job_counts : 11,
     job_counts : [2,7,1,1],
     logic_name : "analysis2"},
    {total_job_counts : 12,
     job_counts : [2,2,6,2],
     logic_name : "analysis3"},
    {total_job_counts : 6,
     job_counts : [1,1,3,1],
     logic_name : "analysis4"}
];


function transformData(data) {
    var transfData = [];
    for (var i=0; i<data[0].job_counts.length; i++) {
       transfData[i] = [];   
    }
    for (var i=0; i<data.length; i++) {
        for (var j=0; j<data[0].job_counts.length; j++) {
            transfData[j].push({x:i, y:data[i].job_counts[j]})
        }
    }
    console.log(transfData);
    return transfData;
}

function getRandomData() {
    var data = [];
    for (var i=0; i<4; i++) {
             data[i] = Math.floor(Math.random()*20);
    }    
    return(data);
}

function bumpLayer(n, o) {
  function bump(a) {
    var x = 1 / (.1 + Math.random()),
        y = 2 * Math.random() - .5,
        z = 10 / (.1 + Math.random());
    for (var i = 0; i < n; i++) {
      var w = (i / n - y) * z;
      a[i] += x * Math.exp(-w * w);
    }
  }
    
  var a = [], i;
  for (i = 0; i < n; ++i) a[i] = o + o * Math.random();
  for (i = 0; i < 5; ++i) bump(a);
  return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
}
   
function new_scale(svg, layers) {
    var yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });
    console.log("MAXY: " + yStackMax);    
    var width = d3.select("svg").attr("width");
    
    var y...