JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/d3@4.13.0/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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div>
<div id="target1" class="c"></div>
</div>

CSS

.c {
  border: solid 1px gray;
  width: 500px;
  height: 350px;
  margin: 0;
  padding: 0;
  float: left;
}

JavaScript

var chart = new Taucharts.Chart({
  type: 'scatterplot',
  x: 'dx',
  y: 'dy',
  color: 'sin_dist',
	data: _.times(1000, function (n) {
  		var x = Math.random(n) * 10;
      var y = Math.random(n) * 10;
      return {
      	dx: x,
        dy: y,
        sin_dist: Math.sin(Math.sqrt(Math.pow(x - 5, 2) + Math.pow(y - 5, 2)))
      };
  }),
  plugins: [
  	Taucharts.api.plugins.get('legend')()
  ]
});

chart.renderTo('#target1');