JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//cdn.rawgit.com/twitter/d3kit/master/dist/d3kit.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.3/mithril.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <div id="app"></div>
    </div>
  </div>
</div>

CSS

#main{
  margin-top: 20px;
}
.param-min,
.param-max{
   margin-top: 4px;
   background: steelblue;
   color: white;
   padding-left: 8px;
   padding-right: 8px;
   border-radius: 5px;
   font-size: 11px;
 }
.comboslider{
  margin-bottom: 30px;
}

.x-axis-layer path,
.y-axis-layer path,
.y-axis-layer line,
.x-axis-layer line {
  fill: none;
  stroke: black;
  stroke-opacity: 0.6;
  shape-rendering: crispEdges;
}
.x-axis-layer text,
.y-axis-layer text{
  fill: black;
  fill-opacity: 0.6;
  font-size: 11px;
}
#app{
  min-height: 500px;
}
.cell{
  fill: #eee;
  stroke: white;
}
.active{
  fill: steelblue;
}

.comboslider input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    box-shadow: 0.1px 0.1px 0px #005900, 0px 0px 0.1px #007200;
    background: #1891C7;
}
.comboslider input[type=range]::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px rgba(0, 0, 62), 0px 0px 0px rgba(0, 0, 88, 0.67);
    height: 24px;
    width: 12px;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -8.65px;
    /* background: url("../../../../../img/toggle-handle.svg") no-repeat center; */
    background-color: black;
}

CoffeeScript

getData = (layers) ->
  dat = layers.get('cells').selectAll('.active').data();
  dat2 = d3.nest()
    .key((d) -> d.x)
    .rollup((d) -> d3.max(d, (d_) -> d_.y) + 1)
    .map(dat);


RouletteChart = d3Kit.factory.createChart(
  {
    margin: {top: 20, right: 20, bottom: 20, left: 30},
    initialWidth: "auto",
    initialHeight: 400
  },
  [],
  (skeleton) ->
    L = skeleton.getLayerOrganizer()
    S =
      x: d3.scale.ordinal()
      y: d3.scale.ordinal()
    A =
      x: (d) -> d.x
      y: (d) -> d.y
    L.create(['cells', 'x-axis', 'y-axis'])

    getData = ->
      dat = L.get('cells')
        .selectAll('.active')
        .data()
      dat2 = d3.nest()
        .key((d) -> d.x)
        .rollup((d) -> d3.max(d, (d_) -> d_.y) + 1)
        .map(dat)

    visualize = d3Kit.helper.debounce ->
      data = skeleton.data()
      opts = skeleton.options()
      W = skeleton.getInnerWidth()
      H = skeleton.getInnerHeight()
      W = Math.min(W, H); H = Math.min(W, H)
      S.x.rangeRoundBands([0, W]).domain data.map(A.x)
      S.y.rangeRoundBands([H, 0]).domain data.map(A.y)

      # create grid
      grid = L.get('cells').selectAll("rect").data(data)
      grid.enter().append('rect').classed('cell', true)

      # activate grid cells based on initial state
      if (state.dist is 'Custom' && state.params)
        Object.keys(state.params).forEach (k) ->
          grid
            .filter((d) -> d.x is +k && d.y < state.params[k])
            .classed("active", true)


      grid.attr
        x: (d) -> S.x A.x(d)
        y: (d) -> S.y A.y(d)
        width: (d) -> S.x.rangeBand()
        height: (d) -> S.y.rangeBand()

      xAxis = d3.svg.axis()
        .scale(S.x)
        #.tickValues(d3.range(10))
        .outerTickSize(0)
        .orient('bottom')
      L.get('x-axis')
        .attr transform: "translate(#{[-S.x.rangeBand() / 2, H]})"
        .call(xAxis);
      L.get('x-axis').select('.domain')
        .attr transform: "translate(#{[S.x.rangeBand()/2,...