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">
<script src="//rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<div class="container">
  <div class="row">
      <div class="col-md-5 col-xs-10" id='table2'>
          
      </div>
  </div>
  <div class="row">
      <div class="col-md-5 col-xs-10">
         <div id="mytable" class='tablechart'>
             <!-- <nav id="paginate"></nav> -->
         </div>
         
      </div>
      <div class="col-md-5 col-sm-10 col-xs-10" id='mychart'>
      </div>
  </div>
</div>

CSS

body{
    margin-top: 20px;
}
#table2 {
    display: none;
}
.tablechart table{
    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

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

# http://gomakethings.com/vanilla-javascript-version-of-jquery-extend/
extend = (defaults, options) ->
  extended = {}
  prop = undefined
  for prop of defaults
    `prop = prop`
    if Object::hasOwnProperty.call(defaults, prop)
      extended[prop] = defaults[prop]
  for prop of options
    `prop = prop`
    if Object::hasOwnProperty.call(options, prop)
      extended[prop] = options[prop]
  extended


d3Paginate = ->
  exports = (selection) ->
    selection.each (data) ->
      nav = d3.select(this)
      ul = nav.selectAll(".pagination")
        .data([{}]).enter()
        .append("ul")
        .classed("pagination", true)
      li = ul.selectAll("li").data(data)
      liEnter = li.enter().append("li")
      liEnter.classed("active", (d, i) -> i is 0)
      liEnter.append("a")
        .attr("href", "#")
        .text((d) -> d)
        
        
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")
      th.html (d, i) ->
        if i is 0 then 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")
      ...