JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.css">
<div id="target"></div>

CSS

html,
body,
#target {
  width: 600px;
  height: 300px;
  margin: 0;
  padding: 0;
}

#target > svg {
  display: block;
}

JavaScript

var chart = new Taucharts.Chart({
  type: 'scatterplot',
  x: 'xx',
  y: 'yy',
	data: [
  	{'xx': 'A', 'yy': 'X'},
    {'xx': 'B', 'yy': 'Y'},
    {'xx': 'C', 'yy': 'Z'}
  ],
  settings: {
  	fitModel: 'minimal',
    xDensityPadding: 1,
    yDensityPadding: 30
  }
});

chart.renderTo('#target');