JSFiddle - React, Tailwind, and code Playground

by superhead

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: ['costs'],
  y: ['team', 'effort'],
  color: 'priority',
  size: 'costs',
  label: 'costs',
  plugins: [
    tauCharts.api.plugins.get('tooltip')(),
    tauCharts.api.plugins.get('legend')(),
    tauCharts.api.plugins.get('quick-filter')(),
    tauCharts.api.plugins.get('floating-axes')(),
    tauCharts.api.plugins.get('trendline')(),
    tauCharts.api.plugins.get('annotations')({
      items: [{
        dim: 'costs',
        val: 40,
        text: 'Budget',
        color: '#4a1'
      }, {
        dim: 'effort',
        val: [70, 100],
        text: 'Overtime',
        color: '#f52'
      }]
    })
  ]
});
chart.renderTo('#bar');

function getData() {
  var data = [];
  var teams = [
    'alpha',
    'beta',
    'gamma',
    'mamba',
    'cocojamba'
  ];
  var priorities = [
    'trivial',
    'minor',
    'major',
    'critical',
    'blocker'
  ];
  for (var i = 0; i < 50; i++) {
    data.push({
      effort: random(100),
      costs: random(100),
      team: teams[random(teams.length)],
      priority: priorities[random(priorities.length)]
    });
  }
  return data;
}

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