D3 Starter Experiments

by ramnathv

HTML

<script src="\\d3js.org/d3.v3.min.js"></script>
<script src="//rawgit.com/1wheel/d3-starterkit/master/d3-jetpack.js"></script>
<script src="//rawgit.com/1wheel/d3-starterkit/master/d3-starterkit.js"></script>
<svg></svg>
<button id="update">Update</button>

CoffeeScript

data = [1, 2, 3, 4, 5]

svg = d3.select("svg")
  .attr {width: 400, height: 200}
    
d3.selection.prototype.dataAppend2 =  (data, name) ->
  sel = this.selectAll(name).data(data)
  sel.enter().append(name)
  #return sel

circles = svg.dataAppend2(data, "circle.main.main2")
circles.attr
    cx: (d, i) -> i*30 + 20
    cy: 40
    r: 10
    fill: "steelblue"
    

d3.select("#update").on "click", ->
  svg.dataAppend2([1, 2, 3, 4, 5, 6], 'circle.main')
  svg.selectAll("circle.main")
      .transition()
      .delay((d, i) -> i/6*1000)
      .attr
        cx: (d, i) -> i*30 + 20
        cy: 40
        r: 10
        fill: "green"

    
svg
  .dataAppend(data, "rect.main")
  .attr
    x: (d, i) -> i*30 + 10
    y: 80
    fill: 'darkblue'
    height: 20
    width: 20