JSFiddle - React, Tailwind, and code Playground

by jrab227

HTML

<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 representing the d3 interface for CV visualization. */
class CrossValidation {
  constructor() {
    const height = 100;
    const margin = 10;
    const padding = 0;
    const labelHeight = 35;
    const axisHeight = 15;
    const barHeight =
      height - (2 * (margin + padding) + labelHeight + axisHeight);
    this.config = {
      transitionDuration: 2000,
      skipTransition: false,
      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',
      training: 'training',
      holdout: 'holdout',
      validation: 'validation',
    };

    this.config.style[this.labels.training] = {
      fill: '#3ca3e8',
    };

    this.config.style[this.labels.validation] = {
      fill: '#00c96e',
    };

    this.config.style[this.labels.holdout] = {
      fill: '#e55653',
    };

    this.config.style[this.labels.xAxis] = { yBumpOffset: 2 };
  }

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