JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="http://misoproject.com/js/d3.chart.js"></script>
<div id="vis"></div>

CoffeeScript

d3.chart "Circles", 
  initialize: () ->
    @_radius = 5; @_height = 50; @_color = "red"; @_width = 200
    @setAccessors(["color", "radius", "height", "width"])
    @xScale = d3.scale.linear()
    circleBase = @base.append('g')
        .classed('circles', true)
        .attr({height: @_height, width: @_width})
    @layer "circles", circleBase, 
        dataBind: (data) ->
          chart = @chart()
          chart.xScale.domain d3.extent(data)
          @selectAll("circle").data data
        insert: ->
          chart = @chart()
          chart.xScale.range [chart.radius(), chart.width() - chart.radius()]
          @append("circle")
           .classed("circle", true)
           .style("fill", chart.color())
           .attr {cy: chart.height()/2, r: chart.radius()}
        events: 
          enter: ->
            chart = @chart()
            @attr cx: (d) -> chart.xScale(d)
  
  setAccessors: (args) -> args.forEach (arg) =>
    @[arg] = (_) =>
       return @["_" + arg] if arguments.length is 0
       @["_" + arg] = _; return @


data = [1,3,4,6,10];

chart = d3.select("#vis")
  .append("svg")
  .chart("Circles")
  .color("steelblue")

chart.draw(data);