JSFiddle - React, Tailwind, and code Playground

by jrab227

HTML

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<div class='vis-horizontal'>

</div>

<div class='vis-vertical'>

</div>

Babel + JSX

const defaultOptions = {
	height: 400,
  width: 600,
  xAxisGutter: 30,
  yAxisGutter: 30,
  padding: 10
};

/**
 * Data, scale, and axis setup for the pairwise feature plot layer.
 */
class PairwiseFeaturePlotDataLayer {
	constructor(d3ViewSelector, data, opts={}) {
    this.options = _.extend({}, defaultOptions, opts);
    this.d3 = {
    	selections: {
        view: d3ViewSelector,
      },
    };
    this.data = data;
  }
  
  /**
   * Defines the d3 x scale and bottom axis.
   */
  setXScale() {
  	const visXGutterPad = this.options.xAxisGutter +
      this.options.padding;
      
    const visXWidthPad = this.options.width -
      this.options.padding;
      
  	const xDomain = this.data.x.range;
    
  	const xScale = d3.scaleLinear()
    	.domain(xDomain)
      .range([visXGutterPad, visXWidthPad]);
      
    const xAxis = d3.axisBottom(xScale);
      
    _.extend(this.d3, {
    	xAxis,
      xScale,
    });
    
    return this;
  }
  
  /**
   * Defines the d3 y scale and vertical axis.
   */
  setYScale() {
  	const visHeight = this.options.height -
    	this.options.yAxisGutter -
      this.options.padding;
    
    const yDomain = this.data.y.range;
    const yScale = d3.scaleLinear()
    	.domain(yDomain)
      .range([visHeight, this.options.padding]);
    
    const yAxis = d3.axisLeft(yScale);
    
    _.extend(this.d3, {
      yAxis,
      yScale,
    });
    
    return this;
  }

  setScales() {
    return this.setXScale().setYScale();
  }
  
  drawXAxis() {
  	const xScaleYTranslate = this.options.height -
    	this.options.yAxisGutter -
      this.options.padding;
      
    const xScaleXTranslate = 0;
      
  	const xTransform = `translate(${xScaleXTranslate}, ${xScaleYTranslate})`;
    
    const xAxisSelection = this.d3.selections.svg
    	.append('g')
      .attr('class', 'x-axis')
      .attr("transform", xTransform);
      
    xAxisSelection.call(this.d3.xAxis);
    
    _.extend(this.d3.selections, {
    	xAxisSelection,
    });
 ...