JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<div id="display"></div>
<svg></svg>

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: #eee;
    stroke: white;
}

.active rect{
   fill: steelblue;   
}

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

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

CoffeeScript

kernelDensityEstimator = (kernel, x) ->
  (sample) ->
    x.map (x) ->
      [
        x
        d3.mean(sample, (v) ->
          kernel x - v
        )
      ]

epanechnikovKernel = (scale) ->
  (u) ->
    if Math.abs(u /= scale) <= 1 then .75 * (1 - u * u) / scale else 0

d3.viz = {}
            
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) ->
      #S.y.domain [0, d3.max(datum_(data), A.y)]
      #S.x.domain datum_(data).map(A.x)
      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) ->
  that = this
  ydomain = d3.functor(S.y.domain())
  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
    #fill: (d, i) -> S.c(i) 
  exports = (selection) ->
    selection.each (data) ->
      #S.y.domain [0, d3.max(datum_(data), A.y)]
      #S.x.domain datum_(data).map(A.x)
      d3.select(this).selectAll("rect")
        .data(datum_).enter()
        .append("rect")
        .attr that.G
  exports.ydomain = (_) ->
    ydomain = _; exports
  exports.datum = (_) ->
    datum_ = _; exports
  exports
  
Axis = (S) ->
  that = this
  @xAxis = d3.svg.axis().scale(S.x).orient("bottom")
  exports = (selection) ->
    selection.each (data) ->
      d3.select(this).append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0, #{S.y.range()[0]})")
        .call(that.xAxis)
  d3.rebind(exports, xAxis, "ticks", "tickFormat",...