JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="//co2-radar.mybluemix.net/js/d3.v3.min.js"></script>
<svg></svg>

CSS

svg {
    height: 400px;
}

CoffeeScript

data = d3.range(11).map (d, i) -> 
  val: d3.range(11), cy: (i + 1)*22


createAccessors = (visExport) ->
  for n of visExport.opts
    continue  unless visExport.opts.hasOwnProperty(n)
    visExport[n] = ((n) ->
      (v) ->
        (if arguments.length then (visExport.opts[n] = v
        this
        ) else visExport.opts[n])
    )(n)
  return

chain = (obj, payload) ->
  Object.keys(payload).reduce ((p, k) ->
    p[k] payload[k]
  ), obj
    
merge_defaults = (x, defaults) ->
  d1 = {}
  keys = d3.merge(Object.keys(x), Object.keys(defaults))
  alert(JSON.stringify(keys))
  keys.forEach (k) ->
    d1[k] = x[k] || defaults[k]
  d1


Chart = () ->
  defaults = {r: 5, cy: 40, fill: "steelblue"}
  opts = arguments[0] || defaults
  exports = (selection) ->
    selection.each (data) ->
      # 
      svg = d3.select(@)
      circles = svg.selectAll('circle').data(data.val)
      circlesEnter = circles.enter()
        .append('circle')

      svg.selectAll('circle')
        .attr("cy", 0)
          .transition().ease("cubic")
          .delay((d, i) -> i/50*2000)
        .attr("cx", (d, i) -> i*20 + 40)
        .attr("cy", data.cy)
        .attr("r", opts.r)
        .attr("fill", opts.fill)
        
      circles.exit().remove()

  exports.opts = opts
  createAccessors(exports)
  exports



myChart = Chart().r(8).fill("#74bc00")
myChart2 = Chart({r: 8, fill: "blue"}).fill("darkgreen")
console.log(myChart2.opts)

d3.select("svg")
  .selectAll("g")
    .data(data).enter()
  .append("g")
  .call(myChart2)