JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/taucharts/latest/tauCharts.min.css">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//cdn.jsdelivr.net/taucharts/latest/tauCharts.min.js"></script>
<div id="bar"></div>

CSS

html,
body,
#bar {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #f3f5f6;
}

#bar > svg {
  display: block;
}

JavaScript

var chart = new tauCharts.Chart({
  data: getData(),
  type: 'scatterplot',
  x: ['team', 'costs'],
  y: ['season', 'effort'],
  color: 'priority',
  size: 'people',
  settings: {
    asyncRendering: true,
    renderingTimeout: 500,
    syncRenderingDuration: 0
  },
  plugins: [
    tauCharts.api.plugins.get('legend')()
  ]
});
chart.renderTo('#bar');

function getData() {
  var data = [];
  var teams = [
    'alpha',
    'beta',
    'gamma'
  ];
  var seasons = [
    '2000',
    '2001',
    '2002',
    '2003'
  ];
  var priorities = [
    'trivial',
    'minor',
    'major',
    'critical'
  ];
  for (var i = 0; i < 10000; i++) {
    data.push({
      effort: random(100),
      costs: random(100),
      people: random(10),
      team: teams[random(teams.length)],
      season: seasons[random(seasons.length)],
      priority: priorities[random(priorities.length)]
    });
  }
  return data;
}

function random(n) {
  return Math.min(Math.floor(Math.random() * n, n - 1));
}