JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container">
    <button id="update2" class='btn btn-default'>Update</button>
    <br/><br/>
    <div id="mytable"></div>
    <button id='update' class='btn btn-default'>Update</button><br/><br/>
    <div class='counter' id = 'counter2'></div>
</div>

CSS

body {
  margin-top: 50px;
}

.counter svg text {
  font-family: "Helvetica";
  font-weight: bold;
  font-size: 32px;
}
.odometer {
  width: 80px;
  margin: 10px;
  padding: 10px;
  background: #444;
  color: white;
  border-radius: 5px;
}

.tablechart{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

CoffeeScript

createAccessors = (visExport) ->
  for n of visExport.opts
    continue  unless visExport.opts.hasOwnProperty(n)
    visExport[n] = ((n) ->
      (v) ->
        (if arguments.length then (visExport.opts[n] = v
        this
        ) else visExport.opts[n])
    )(n)
  return

Panel2 = () ->
  exports = (selection) ->
    selection.each (data) ->
      d3.select(@)
        .classed("odometer", true)
        .append("text")
        
d3Table = ->
  exports = (selection) ->
    selection.each (data) -> 
      div = d3.select(this).classed("table-responsive", true)
      headers = Object.keys(data)
      table = div.selectAll("table").data([data])
      tableEnter = table.enter().append("table").classed("table", true)
      tableEnter.append("thead").append("tr")
      tableEnter.append("tbody")
        
      thead = div.select("table thead tr")
      tbody = div.select("table tbody")
     
      th= thead.selectAll("th").data(headers)
      thEnter = th.enter().append("th")
        
      thead.selectAll("th").html (d, i) ->
            if i is 0
                d
            else 
                "<span class='header'>#{d}</span>"
        
      tr = tbody.selectAll("tr").data(d3.transpose(d3.values(data).slice(1)))
        
      trEnter = tr.enter().append("tr")
        
      trEnter.append("th").attr("scope", "row")
        
      tbody.selectAll("tr").select("th")
        .text((d, i) -> d3.values(data)[0][i] || "Model " + i)
        .style("color", "darkgray")

      td = tbody.selectAll("tr").selectAll("td")
        .data((d) -> d)
        
      tdEnter = td.enter().append("td")
        
      tr.selectAll("td").text((d) -> d3.round(d, 2))
        
      th.exit().remove()
      tr.exit().remove()
      td.exit().remove()

data4 = {
   "M": ["a", "b", "c"],
  "A": [ 0.52687, 0.16979, 0.62826 ],
  "B": [ 0.93025, 0.04373, 0.68598 ],
  "C": [ 0.16982, 0.98372, 0.17907 ],
  "D": [ 0.30342, 0.33136, 0.80005 ],
  "E":  [ 0.55381, 0.37318, 0.72127 ] 
}


# This...