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>
<script src="//omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.min.js"></script>
<link rel="stylesheet" href="//bootswatch.com/simplex/bootstrap.min.css">
<div class="container">
  <div class="row">
      <div id="mytable"></div>
      <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%;
}
.jqstooltip{
    box-sizing: content-box;
}

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.measures = [ [ 0.52687, 0.16979, 0.62826 ],
[ 0.93025, 0.04373, 0.68598 ],
[ 0.16982, 0.98372, 0.17907 ],
[ 0.30342, 0.33136, 0.80005 ],
[ 0.55381, 0.37318, 0.72127 ] ]

x = data.measures.map (d) ->
  d.map (d_) -> [d_, 0.2, 0.3, 0.8, 1.5]

data.measures = x
   
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"]

data.headers = Object.keys(data2[0])


metadata = {
  "cells" : {
     "0": {type: "bullet"}         
   },
  "columns" : {
    "Assignments": {type: "bar"},
    "scores": {type: "bar"}
   }
}
d = {"names":["Alison Perry","Amala Singh","Anthony Harper","Bae Kim","Blaine Harper","Brian Francis","Britta Jones","Christopher Murphy","David Chenowith","Donald Chase","Fariah Jackson","Fiona Reeves","Frederick Chandler","George Smith","Hannah Li","Holly Norton","Jaime Goss","James Martin","James Snow","Jose Domingo","Kirsten Holmes","Lawrence Parker","Maria Garcia","Nikolas Mikhailovich","Regan Potrero","Roshawn Dawson","Samuel Miller","Sarah Jameson","Scott Ortiz","Xu...