JSFiddle - React, Tailwind, and code Playground

by konijn_gmail_com

HTML

<script src="https://rawgithub.com/DmitryBaranovskiy/g.raphael/master/g.raphael.js"></script>
<script src="https://rawgithub.com/DmitryBaranovskiy/g.raphael/master/g.bar.js"></script>
<script src="https://rawgithub.com/DmitryBaranovskiy/raphael/master/raphael.js"></script>
<div id="safety02-mobile"></div>
<button id="viewFreqFirst-big">small</button>
<button id="viewFreqSecond-big">big</button>

CSS

div{
    height:400px;
    width:100%;
    background:#EEE;
}

JavaScript

var barTitle = { "font-size": 9};
var svgWidth = 480;
var svgHeight = 300;
var safety02 = new Raphael('safety02-mobile', 'svgWidth', 'svgHeight');
safety02.setViewBox(-30, 0, svgWidth, svgHeight, false); //false
safety02.setSize('100%', '100%');
var bars = [];
var barWidth = 30;
var setPadding = 20;
var barsOffset = 10;
var i;
var barColors = [ '#F6A01A', '#CCC' ];

var barSets = [
  [{ height:150, y:50 }, { height:130, y:70 }],
  [{ height:165, y:35 }, { height:100, y:100}],
  [{ height:130, y:70 }, { height:65,  y:135}],
  [{ height:120, y:80 }, { height:100, y:100}]
];

//This assumes that we pass bars from left to right..
//It calculates the `x` from an offset, barWidth and setPadding
function createBar( bar, setNumber , barNumber ){
    createBar.x = (createBar.x || barsOffset) + barWidth + ( barNumber?0:setPadding );
    return { width: barWidth , height: bar.height , x:createBar.x, y:bar.y };
}

function createBarSet( set , setNumber )
{
    for( var i = 0 ; i < set.length ; i++ ){
        var bar = createBar( set[i] , setNumber , i );
        console.log( bar );        
        var rect = safety02.rect(bar.x, 200, bar.width, 0)
                           .attr({ fill:barColors[i] , stroke:'#000'});
    }
}

             
for( i = 0 ; i < barSets.length ; i++ ){
    createBarSet( barSets[i] , i );              
}
              
function createRectangle( bar )
{

}




// Create options object that specifies the rectangle
var safetyBar1_1 = { width:30, height:150, x:60,  y:50};
var safetyBar1_2 = { width:30, height:130, x:90,  y:70};
var safetyBar2_1 = { width:30, height:165, x:140, y:35};
var safetyBar2_2 = { width:30, height:100, x:170, y:100};
var safetyBar3_1 = { width:30, height:130, x:220, y:70};
var safetyBar3_2 = { width:30, height:65,  x:250, y:135};
var safetyBar4_1 = { width:30, height:120, x:300, y:80};
var safetyBar4_2 = { width:30, height:100, x:330, y:100};

var rect1_1 = safety02.rect(safetyBar1_1.x, 200, safetyBar1_1.width, 0).attr({fill:...