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>
<div class="container">
  <div class="row">
      <div class="col-md-5 col-xs-8" id='mypanel'>        
      </div>
  </div>
</div>

CSS

body {
   margin-top: 20px;
}
h1 {
  font-family: sans-serif;
  text-align: left;
}
.panel-body{
    background: #hhh;
}
.measures {
    font-size: 12px;
    font-family: sans-serif;
    color: #aaa;
    margin-left: auto
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 2px;
}
li.active {
    color: black;
    font-weight: bold;
    background: whitesmoke;
}
.value {
   color: steelblue;   
}

CoffeeScript

data = {
 "measure": [ "ME", "RMSE", "MAE", "MPE", "MAPE", "MASE", "ACF1" ],
 "value": [   43.5, 873.28,  490.8, -0.396, 11.723,    0.4,  0.117 ],
 "definitions": [
  "Mean Error",
  "Root Mean Square Error",
  "Mean Absolute Error",
  "Mean Percent Error",
  "Mean Absolute Percent Error",
  "Mean Absolute Square Error",
  "Autocorrelation"
  ]
}

footnote = "Mouseover to switch error measure. Click to see the definition"

heading = "Error Measure"
subheading = " (in sample)"

chart2 = ->
  exports = (selection) ->
    selection.each (data) ->
        mypanel = d3.select(this)
          .append("div")
            .attr("class", "panel panel-default")
            
        ["heading", "body", "footer"].forEach (d) ->
          mypanel.append("div").attr("class", "panel-#{d}")

        heading = "Error Measure"
        subheading = " (in sample)"
          
        panelHeading = mypanel.select(".panel-heading")
        panelHeading
          .append("h4")
             .text(data.heading)
          .append("small")
             .attr("class", "text-muted")
             .text(data.subheading)


        panelBody = mypanel.select(".panel-body")
        panelBody.append("h1").append("span")
          .attr("class", "value")
          .text(data.measures.value[0])
         
        panelBody.append("h4")
          .attr("class", "text-muted error")
          .text(data.measures.definitions[0])
            
        panelFooter = mypanel.select(".panel-footer")
        panelFooter
          .append("small")
          .text(data.footnote)
        panelFooterUl = panelFooter
          .append("ul")
          .attr("class", "list-inline measures")

        measures = panelFooterUl.selectAll("li")
            .data(data.measures.measure).enter()
            .append("li")
            .text((d) -> d)
            .classed("active", (d, i) -> i is 0)
            .attr("data-toggle", "popover")
            .attr "data-content", (d) -> "Definition of #{d}"
              
          ...