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>
<link rel="stylesheet" href="//keen.github.io/dashboards/assets/css/keen-dashboards.css">
<div class="container">
  <div class="row">
      <div class="col-md-6 col-sm-12 col-xs-8 no-more-tables" id='mychart'>
      </div>
  </div>
</div>

CSS

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

.header {
  color: black;
  font-weight: normal;
}
th span.header.sorted {
    font-weight: bold;
    color: darkred;
}
.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%;
}
.chart-wrapper .table-responsive{
  border: 0px;
}

body { font-family: 'Helvetica Neue', Helvetica; font-weight: 300; padding: 20px;}
th { text-align: left; }
th, td { padding: 0 1em 0.5ex 0;}
th.center, td.center { text-align: center; }
th.num, td.num { text-align: right; }

@media only screen and (max-width: 600px) {
	#mychart td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
	}
}

@media only screen and (max-width: 600px) {
    /* Force table to not be like tables anymore */
	.no-more-tables table, 
	.no-more-tables thead, 
	.no-more-tables tbody, 
	.no-more-tables th, 
	.no-more-tables td, 
	.no-more-tables tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for...

CoffeeScript

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", "chart-wrapper")
      panel.append("div")
          .attr("class", "chart-title")
          .text(data.heading)
            
      table2 = panel.append("div")
           .attr("class", "chart-stage table-responsive")
         .append("table")
           .attr("class", "table table-hover tablechart")
            
      panel.append("div")
          .attr("class", "chart-notes")
        .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")


      tr.append("th")
        .attr("scope", "row")
        .text((d, i) -> data.models[i] || "Model " + i)
        .style("color", "darkgray")


      td = tr.selectAll("td")
        .data(Object).enter()
        .append("td")
        .attr('data-title', (d, i) -> h[i])
    
      barwidth = parseFloat(td.style("width"))

      svg = td.append("svg")
        #.attr("width", barwidth)
        .attr("width", "100%")
        .attr("height", 20)
        
      
  
      bars = svg.append("rect")
        .attr("transform", "translate(5)")
        .attr("height", 20)
        .attr("width", (d, i) -> d*95 + "%")
        .attr("fill", "steelblue")
    
      tip = d3.tip()
        .attr("class", "d3-tip")
        .direction("e")
        .html (d, i) ->...