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-12 col-xs-12" 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%;
}

.line {
    fill: none;
    stroke: steelblue;
}

.area {
    fill: steelblue;
    fill-opacity: 0.8;
    stroke-width: 1px;
}

/*
.bar {
    fill: steelblue;
}
*/
/*
th[scope="row"]:before {
   content: "\25CF";  
   color: "red";
}
*/

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_, d_ + 0.02, d_ + 0.1, d_ + 0.15]

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])


d = {
  "Models": [ "a", "b", "c" ],
  "A": [
     [ 0.72874, 0.82027, 0.18196, 0.98597, 0.98294 ],
     [ 0.83775, 0.53639, 0.88963, 0.14375, 0.97468 ],
     [ 0.41216, 0.37176, 0.23419, 0.50692, 0.77298 ] 
  ],
  "B": [
     [ 0.082903, 0.75963, 0.89793, 0.6147, 0.8558 ],
    [ 0.63874, 0.29292, 0.77349, 0.33273, 0.8771 ],
    [ 0.9795, 0.94559, 0.57838, 0.74391, 0.088379 ] 
  ],
  "C": [
     [ 0.86734, 0.94629, 0.2977, 0.39494, 0.51984 ],
     [ 0.24999, 0.8764, 0.0035478, 0.009703, 0.9524],
     [ 0.25408, 0.59808, 0.74551, 0.86769, 0.4834 ] 
  ]
}


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...