JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>

<body>
  <div class="ES__buttons"></div>
  <div class="ES__graph__container"></div>
</body>

CSS

.arc.platform1 {
  fill: #e74341;
}

.arc.platform2 {
  fill: #3c5a96;
}

.arc.platform3 {
  fill: #3c94d1;
}

.arc.platform4 {
  fill: #837369;
}

JavaScript

function drawESGraph() {
  d3.selectAll('.ES__graph__container svg')
    .remove();

  d3.selectAll('.ES__buttons button')
    .remove();

  var $container = $('.ES__graph__container');

  var width = $container.width() / 3;

  var m = 40,
    r = width / 3,
    labelr = r + 20;

  var arc = d3.svg.arc()
    .outerRadius(r)
    .innerRadius(r / 2);

  var pie = d3.layout.pie()
    .value(function(d) {
      return +d.val;
    })
    .sort(null);

  var data = [{
    brand: 'brand1',
    platform: 'platform1',
    year: '2012-2013',
    val: 85.8
  }, {
    brand: 'brand1',
    platform: 'platform2',
    year: '2012-2013',
    val: 14
  }, {
    brand: 'brand1',
    platform: 'platform3',
    year: '2012-2013',
    val: 0.2
  }, {
    brand: 'brand1',
    platform: 'platform4',
    year: '2012-2013',
    val: 0
  }, {
    brand: 'brand1',
    platform: 'platform1',
    year: '2013-2014',
    val: 91
  }, {
    brand: 'brand1',
    platform: 'platform2',
    year: '2013-2014',
    val: 8
  }, {
    brand: 'brand1',
    platform: 'platform3',
    year: '2013-2014',
    val: 1
  }, {
    brand: 'brand1',
    platform: 'platform4',
    year: '2013-2014',
    val: 0
  }, {
    brand: 'brand1',
    platform: 'platform1',
    year: '2014-2015',
    val: 77
  }, {
    brand: 'brand1',
    platform: 'platform2',
    year: '2014-2015',
    val: 8
  }, {
    brand: 'brand1',
    platform: 'platform3',
    year: '2014-2015',
    val: 2
  }, {
    brand: 'brand1',
    platform: 'platform4',
    year: '2014-2015',
    val: 13
  }, {
    brand: 'brand2',
    platform: 'platform1',
    year: '2012-2013',
    val: 76.9
  }, {
    brand: 'brand2',
    platform: 'platform2',
    year: '2012-2013',
    val: 23
  }, {
    brand: 'brand2',
    platform: 'platform3',
    year: '2012-2013',
    val: 0.1
  }, {
    brand: 'brand2',
    platform: 'platform4',
    year: '2012-2013',
    val: 0
  }, {
    brand: 'brand2',
    platform: 'platform1',
    year: '2013-2014',
    val: 87.6
  },...