JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js"></script>
<link rel="stylesheet" href="//rawgithub.com/Caged/d3-tip/master/examples/example-styles.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.2/yeti/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-xs-5" id="display">
              <div class="checkbox">
    <label> 
        <input type="checkbox"  id='showfreq' />Show Frequency Polygon
    </label>
  </div>
        </div>
        <div class='col-xs-7'>
            <div class="panel" id ='main-panel'>
                <div class="panel-heading"><h4></h4></div>
                <div class="panel-body" id='main'>
                    
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.axis line, .axis path {
  fill: none;
  stroke: #aaa;
}
.axis text {
    font-size: 11px;
    font-family:"Helvetica"
}
path {
  fill: none;
  stroke: black;
}

.axis {
  fill: #aaa
}

g rect {
    fill: #aaa;
    fill-opacity: 0.6;
    stroke: white;
}

.active rect{
   fill: #0072b9;
   fill-opacity: 1;
}

.title {
    font-size: 12px;
    font-family: Helvetica;
    fill: #aaa;
}
.layer2 path{
    stroke: steelblue;
    stroke-width: 2px;
}

.active path {
   stroke: none;  
}
.active text {
    fill: black;
}

.layer4 circle {
  fill: #ed541d;
  fill-opacity: 0.2;
}

/*
.active circle {
  fill-opacity: 0;
}
*/

div.active {
  background: lightgoldenrodyellow;
  opacity: 0.8;
}

.x.axis .tick line {
   stroke: none;
}
div.hist {
  float:left;
}
.layer5 rect{
    fill: #aaa;
    stroke: none;
    pointer-events: none;
}

.d3-tip {
    font-size: 12px;
    font-family: Arial;
}

.axis path,
.axis line{
   stroke: none;
}

.panel {
  margin-bottom: 0px;   
}


body {
  margin-top: 40px;  
}

.d3-tip {
  font-size: "10px";
  font-weight: normal;
  padding: 7px;
}
.layer1 rect {
  fill: #0090C8;
  fill-opacity: 1;
}

#main {
  min-height: 400px;
}

CoffeeScript

d3.viz = {}
d3.viz.line2 = (S, A) ->
  that = this
  datum_ = (d) -> d
  d_ = d3.svg.line()
    .x((d) -> S.x A.x d)
    .y((d) -> S.y A.y d)
  @G = {d: d_}
  exports = (selection) ->
    selection.each (data) ->
     g = d3.select(this).selectAll("g")
      .data(datum_);
     gEnter = g.enter().append("g")
     gEnter.append("path").attr("class", "line")
     g.select(".line").attr that.G
  exports.ydomain = (_) ->
    ydomain = _; exports
  exports.datum = (_) ->
    datum_ = _; exports
  d3.rebind(exports, d_, "interpolate")
  exports
    
d3.viz.line = (S, A) ->
  that = this
  datum_ = (d) -> d
  #ydomain = d3.functor(S.y.domain())
  d_ = d3.svg.line()
    .x((d) -> S.x A.x d)
    .y((d) -> S.y A.y d)
  @G =
    d: d_
  exports = (selection) ->
    selection.each (data) ->
      d3.select(this).append("path")
        .attr("class", "line")
        .datum(datum_)
        .attr that.G
  exports.ydomain = (_) ->
    ydomain = _; exports
  exports.datum = (_) ->
    datum_ = _; exports
  d3.rebind(exports, d_, "interpolate")
  exports

# Reusable Bar Chart Code
# Primitives are redefined to be
# S -> Scales
# A -> Accessors
# O -> Options (width, height, margin)
d3.viz.bar = (S, A) ->
  viz = this
  datum_ = (d) -> d
  @G =
    x: (d) -> S.x A.x d
    y: (d) -> S.y A.y d
    width: S.x.rangeBand()
    height: (d) -> S.y.range()[0] - S.y A.y d
  exports = (selection) ->
    selection.each (data) ->
      bars = d3.select(this).selectAll("rect").data(datum_)
      barsEnter = bars.enter().append("rect")
      bars.attr viz.G
  exports.datum = (_) ->
    datum_ = _; exports
  exports
    
d3.selectAll(".panel").on "mouseover", ->
  console.log "clicked"
    
dat =...