JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="//cdn.rawgit.com/ramnathv/a5a3199538f86817ec1b/raw/96dde67abbf386b571d62dc366f15dc057085092/visutils.js"></script>
<script src="//cdn.rawgit.com/mweststrate/mobservable/master/dist/mobservable.min.js"></script>
<div id="controls">
  <select name="" id="fill">
    <option value="red">Scale 1</option>
    <option value="blue">Scale 2</option>
  </select>
</div>
<div id="chart"></div>

CoffeeScript

Chart = () ->
  defaults = {r: 5, cy: 40, fill: "steelblue"}
  opts = extend(defaults, arguments[0])
  exports = (selection) ->
    selection.each (data) ->
      svg = d3.select(@)
      circles = svg.selectAll('circle')
        .data(data.val)
      circlesEnter = circles.enter()
        .append('circle')
      circlesEnter.attr fill: '#ccc'
      circles
        .attr("cx", (d, i) -> i*20 + 40)
        .attr("cy", data.cy)
        .attr("r", opts.r)
      circles.transition()
        .delay((d, i) -> Math.random()*6000)
        .attr("fill", opts.fill)

      circles.exit().remove()

  exports.opts = opts
  createAccessors(exports)
  exports
  
svgContainer = (el, width, height) ->
  margin = 
    left: 20
    right: 20
    top: 20
    bottom: 20
  svg = d3.select(el).append('svg')
    .attr('width', width)
    .attr('height', height)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
  return svg

input = {}
bind = (id, event = 'change') ->
  el = document.getElementById(id)
  if (typeof input[id] is 'undefined')
    input[id] = mobservable.observable(el.value)
  el.addEventListener event, (e) ->
    input[id](e.target.value)
    console.log input[id]()

bind('fill')
input

svg = svgContainer('#chart', 600, 400)
Sc = d3.scale.category20()



# Example 1    
data = d3.range(11).map (d, i) -> 
  val: d3.range(11), cy: (i + 1)*22 
g = svg.selectAll("g")
  .data(data).enter()
  .append("g")
  

mobservable.autorun -> 
  myChart = Chart({r: 8})
   .fill (d, i) -> Sc(Math.round(Math.random()*20))
  #.fill(input.fill())
  g.call(myChart)