JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.2-rc.1/mithril.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.19.1/ramda.min.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//rawgit.com/kristw/75b61f9beeab9b530612/raw/389e984e4041117a9185cf6edad9f6b85a38097a/d3kit.min.js"></script>
<script src="//rawgit.com/jstat/jstat/master/dist/jstat.min.js"></script>
<div class="container" id="main">
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <div class="col-xs-12 well">
        <div id="app">
      </div>
      </div>
    </div>
  </div>
</div>

CSS

#main{
  margin-top: 20px;
}
.param-min,
.param-max{
   margin-top: 4px;
   background: steelblue; 
   color: white;
   padding-left: 5px;
   padding-right: 5px;
   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;
}

CoffeeScript

AreaChart = d3Kit.factory.createChart(
  {
    margin: {top: 20, right: 20, bottom: 20, left: 30},
    initialWidth: 800,
    initialHeight: 200
  },
  [],
  (skeleton) ->
    L = skeleton.getLayerOrganizer()
    S = 
      x: d3.scale.linear()
      y: d3.scale.linear()
    A = 
      x: (d) -> d.x
      y: (d) -> d.y
    L.create(['area', 'x-axis', 'y-axis'])
    visualize = d3Kit.helper.debounce ->
      data = skeleton.data()
      W = skeleton.getInnerWidth()
      H = skeleton.getInnerHeight()
      S.x.range([0, W]).domain d3.extent(data, A.x)
      S.y.range([H, 0]).domain [0, d3.max(data, A.y)]
      area = d3.svg.area()
        .x((d) -> S.x A.x(d))
        .y0(H)
        .y1((d) -> S.y A.y(d))
      areaL = L.get('area').selectAll('path').data([data])
      areaL.enter().append("path")
        
      xAxis = d3.svg.axis()
        .scale(S.x.nice())
        .orient('bottom')
        .ticks(4)
      L.get('x-axis')
        .attr("transform", "translate(0, #{H})")
        .transition('x-axis')
        .call(xAxis)
      yAxis = d3.svg.axis()
        .scale(S.y.nice())
        .orient('left')
        .ticks(4)
      L.get('y-axis')
        .transition('y-axis')
        .call(yAxis)
        
      areaL
        .attr
          d: area
          stroke: "none"
          fill: "steelblue"
    skeleton
      .resizeToFitContainer()
      .autoResize('width')
      .on('resize', visualize)
      .on('data', visualize);
)

Chart = view: (ctrl, props) ->
  draw = (el, isInitialized, ctx) ->
    if (!isInitialized) then ctx.chart = new AreaChart(el)
    ctx.chart.data(props.data)
  m 'div', {config: draw, style: {"margin-bottom": "20px"}}

ComboNumericSlider = view: (ctrl, props) ->
  m '.comboslider',
    m '.clearfix',
      m 'label.pull-left', props.label
      m 'input.pull-right',
        class: "form-control input-sm", type: 'number'
        , style: {width: '60px'}
        , min: props.min(), max: props.max()
        , value: props.value(), step:...