JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js"></script>
<script src="//benpickles.github.io/peity/jquery.peity.min.js"></script>
<div class="container">
  <div class="row">
      <div class="col-md-5 col-sm-10 col-xs-10" id='mychart'>
      </div>
  </div>
</div>

CSS

body{
    margin-top: 20px;
}
.tablechart{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.header {
  color: black;
  font-weight: normal;
}
.sorted {
    font-weight: bold;
}
.sorted:after{
   content: "";
}
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
  pointer-events: none;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  position: absolute;
  pointer-events: none;
}

/* Northward tooltips */
.d3-tip.n:after {
  content: "\25BC";
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
  text-align: center;
}

/* Eastward tooltips */
.d3-tip.e:after {
  content: "\25C0";
  margin: -4px 0 0 0;
  top: 50%;
  left: -8px;
}

/* Southward tooltips */
.d3-tip.s:after {
  content: "\25B2";
  margin: 0 0 1px 0;
  top: -8px;
  left: 0;
  text-align: center;
}

/* Westward tooltips */
.d3-tip.w:after {
  content: "\25B6";
  margin: -4px 0 0 -1px;
  top: 50%;
  left: 100%;
}

CoffeeScript

data = {
  "MAPE": [43.55, 2, 1],
  "MSE": [73.22, 9, 7],
  "MAD": [89.11, 1, 4]
}

data2 = [
 {MAPE: 43.55, MSE: 2, MAD: 1},
 {MAPE: 73.22, MSE: 9, MAD: 7},
 {MAPE: 89.11, MSE: 1, MAD: 4}
]

data2 = [
  {ME: 1858, RMSE: 2943, MAE: 2706, MPE: 17, MAPE: 23},
  {ME: 4097, RMSE: 5115, MAE: 4420, MPE: 38.1, MAPE: 39},
  {ME: 4097/2, RMSE: 5115/2, MAE: 4420/2, MPE: 38.1/2, MAPE: 39}
]

data = {}

data.measures = data2

data.footnote = "This table allows you to compare models using different accuracy measures. Click on a measure to sort by it, click on the question mark to get a definition. Mouseover a bar to get the error value."

data.heading = 'Accuracy Measures'

data.models = ["Booking_ETS", "Booking_ARIMA", "Booking_M2"]



tablechart = ->
  exports = (selection) ->
    selection.each (data) ->
      h = Object.keys(data.measures[0])
      x = h.map (y) ->
        m_ = d3.max(data.measures, (d) -> d[y])
        data.measures.map (d) -> d[y]/m_
      headers = d3.merge([["Model"], h])
      viz = d3.select(this)
       
      panel = viz.append("div")
        .attr("class", "panel panel-default")
      panel.append("div")
          .attr("class", "panel-heading")
        .append("h4")
          .text(data.heading)
            
      table2 = panel.append("div")
           .attr("class", "table-responsive")
         .append("table")
           .attr("class", "table table-hover tablechart")
            
      panel.append("div")
          .attr("class", "panel-footer")
        .append("small")
          .text(data.footnote)

      thead = table2.append("thead")
      tbody = table2.append("tbody")

      question = ''

      thead.append("tr")
        .selectAll("th")
        .data(headers).enter()
        .append("th")
          .html (d, i) ->
             if i > 0
               "<span class='header'>" + d + "</span> " + question
             else
               d

      tr = tbody.selectAll("tr")
        .data(d3.transpose(x)).enter()
        .append("tr")


   ...