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

// Define plugin
var ExtraPlugin = function(settings) {

  var counter = 0;

  return {

    // Initialize plugin
    init: function(chart) {

      // Create plugin content
      this._label = document.createElement('label');
      this._button = document.createElement('button');
      this._button.textContent = settings.label;
      this._button.addEventListener('click', function() {
        var newData = getData();
        chart.setData(newData);
      }.bind(this));

      // Insert plugin content to chart panel
      chart.insertToFooter(this._label);
      chart.insertToFooter(this._button);
    },

    // Cleanup plugin resources
    destroy: function() {
      if (this._button.parentElement) {
        this._button.parentElement.removeChild(this._button);
        this._label.parentElement.removeChild(this._label);
      }
    },

    // Handle chart `render` event
    onRender: function() {
      this._label.textContent = 'Renderings count: ' + (++counter) + ' ';
    }
  };
};

// Render chart
var chart = new tauCharts.Chart({
  data: getData(),
  type: 'scatterplot',
  x: ['costs'],
  y: ['team'],
  color: 'effort',
  size: 'costs',
  label: 'costs',
  settings: {
    handleRenderingErrors: false
  },
  plugins: [
    ExtraPlugin({
      label: 'Update data'
    }),
    tauCharts.api.plugins.get('tooltip')(),
    tauCharts.api.plugins.get('legend')(),
  ]
});
chart.renderTo('#bar');

// Create random data
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));
}