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 cross validation plot. It is expected to initialize with `new CrossValidation()`,
 * 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 CrossValidation
 */
class CrossValidation {

	constructor() {
  
    let height = 100,
    		margin = 10,
        padding = 0,
        labelHeight = 35,
        axisHeight = 15,
        barHeight = height - (2 * (margin + padding) + labelHeight + axisHeight);
    
  	this.config = {
    	transitionDuration: 2000,
    	style: {
      	labelHeight,
        barHeight,
        axisHeight,
        svg: {
          width: 650,
          height,
          margin,
          padding,
          backgroundColor: 'white'
        },
        text: {fill: 'black'},
        legendCircles: { radius: 10 },
      },
    };
    
    this.labels = {
    	xAxis: 'x-axis',
      legend: 'legend',
      folds: 'folds',
      holdout: 'holdout',
      background: 'background'
    };
    
    this.config.style[this.labels.folds] = {
    	fill: "#3ca3e8"
    };
    
    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.transitionEvents = {
    	folds: 'folds-transition-update'
    };
  }

  
  /**
   * Builds static svg frame content that should not be updated when data is updated.
   *
   * @returns this
   */
  setFrame() {
  	this.rendered = {};
    this.rendered.frame = this.element;
    this.rendered.svg = this.rendered.frame.append('svg')
    	.attr('width', this.config.style.svg.width)
      .attr('height', this.config.style.svg.height)
      .style('background-color', this.config.style.svg.backgroundColor);
    return this;
  }
  
  /**
   *...