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

.color-red {
  fill: red;
}

.color-green {
  fill: green;
}

.color-blue {
  fill: 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:{text:'Cycle Time in days', padding:35},padding:20},
              y:{label:'Effort in points',padding:20},
              padding:{b:70,l:70,t:10,r:10},
              showGridLines:'xy',
              color:{                
                brewer:['color-red', 'color-green', 'color-blue']
              }
            },
            data: defData,
            type: 'scatterplot',           
            x: 'cycleTime',
            y: 'effort',
            color: 'team',
            size: 'count'
        });
chart.renderTo('#scatter');