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/[email protected]/dist/taucharts.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/taucharts.min.css">
<div id="scatter"></div>

CSS

html,
body,
#scatter {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#scatter>svg {
  display: block;
}

JavaScript

var defData = [{
    "team": "d",
    "cycleTime": 1,
    "effort": 1,
    "count": 1,
    "priority": "low"
  }, {
    "team": "d",
    "cycleTime": 2,
    "effort": 2,
    "count": 5,
    "priority": "low"
  }, {
    "team": "d",
    "cycleTime": 3,
    "effort": 3,
    "count": 8,
    "priority": "medium"
  }, {
    "team": "d",
    "cycleTime": 4,
    "effort": 4,
    "count": 3,
    "priority": "high"
  }, {
    "team": "l",
    "cycleTime": 2,
    "effort": 1,
    "count": 1,
    "priority": "low"
  }, {
    "team": "l",
    "cycleTime": 3,
    "effort": 2,
    "count": 5,
    "priority": "low"
  }, {
    "team": "l",
    "cycleTime": 4,
    "effort": 3,
    "count": 8,
    "priority": "medium"
  }, {
    "team": "l",
    "cycleTime": 5,
    "effort": 4,
    "count": 3,
    "priority": "high"
  },
  {
    "team": "k",
    "cycleTime": 2,
    "effort": 4,
    "count": 1,
    "priority": "low"
  }, {
    "team": "k",
    "cycleTime": 3,
    "effort": 5,
    "count": 5,
    "priority": "low"
  }, {
    "team": "k",
    "cycleTime": 4,
    "effort": 6,
    "count": 8,
    "priority": "medium"
  }, {
    "team": "k",
    "cycleTime": 5,
    "effort": 8,
    "count": 3,
    "priority": "high"
  }
];
var chart = new Taucharts.Chart({
  data: defData,
  type: 'scatterplot',
  x: 'cycleTime',
  y: 'effort',
  color: 'team',
  size: 'count',
  plugins: [Taucharts.api.plugins.get('tooltip')(), Taucharts.api.plugins.get('legend')()]
});
chart.renderTo('#scatter');