JSFiddle - React, Tailwind, and code Playground

by jrab227

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<div id='vis'>
</div>

Babel + JSX

/**
 * This plots a OTV plot. It is expected to initialize with `new OTV()`,
 * then run `.bindData(data)` then `.render()`. There is some order to the internal functions and
 * due to state, it is expected to run `.setFrame()` before any painting is done like
 * `setVisualization()` or `.updateRender()`.
 *
 * @module OTV
 */
class OTV {

	constructor() {
  
    let margin = 10,
        padding = 10,
        labelHeight = 35,
        axisHeight = 15,
        observationsHeight = 70,
        observationsAxisHeight = 10,
        barHeight = 35;
    
  	this.config = {
    	style: {
      	labelHeight,
        barHeight,
        observationsHeight,
        observationsAxisHeight,
        axisHeight,
        svg: {
          width: 850,
          margin,
          padding,
          backgroundColor: 'white'
        },
        text: {fill: 'black'},
        legendCircles: { radius: 10 },
      },
    };
    
    this.labels = {
    	xAxis: 'x-axis',
      legend: 'legend',
      backtest: 'backtest',
      validation: 'validation',
      training: 'training',
      backtests: 'backtests',
      holdout: 'holdout',
      background: 'background',
      observations: 'observations',
      observation: 'observation',
      primary: 'primary',
      gap: 'gap'
    };
    
    this.config.style[this.labels.training] = {
    	fill: "#3ca3e8"
    };
    
    this.config.style[this.labels.validation] = {
    	fill: "green"
    };
    
    this.config.style[this.labels.holdout] = {
    	fill: "#e55653"
    };
    
    this.config.style[this.labels.background] = {
    	fill: "#454e58"
    };
    
    this.config.style[this.labels.xAxis] = {
    	yBumpOffset: 2,
    };
    
    this.config.style[this.labels.observations] = {
    	fill: 'orange',
    };
    
    this.config.style[this.labels.observation] = {
    	fill: 'orange',
      barPadding: 2
    };
    
    this.config.style[this.labels.primary] = {
    	fill: 'purple',
    };
    
    this.config.style[this.labels.gap] =...