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;
}

.tau-chart__legend__guide--color.color-red,
.color-red {
  fill: red;
  background-color: red;
}

.tau-chart__legend__guide--color.color-green,
.color-green {
  fill: green;
  background-color:green;
}

.tau-chart__legend__guide--color.color-blue,
.color-blue {
  fill: blue;
  background-color:blue;
}

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({
  guide: {
    x: {
      label: 'Cycle Time in days'
    },
    y: {
      label: 'Effort in points'
    },
    padding: {
      b: 40,
      l: 40,
      t: 10,
      r: 10
    },
    color: {
      brewer: ['color-red', 'color-green', 'color-blue']
    }
  },
  data: defData,
  type: 'scatterplot',
  x: 'cycleTime',
  y: 'effort',
  color: 'team',
  size: 'count',
  plugins: [Taucharts.api.plugins.get('legend')()]
});
chart.renderTo('#scatter');