Circles

_.md

[ Launch: Circles ] 0ae3a402c464c82b3f39 by ramnathv

app.css

circle, rect {
  stroke: #aaa;
}

svg text {
  text-anchor: middle;
  alignment-baseline: middle; 
}

config.json

{"description":"Circles","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.coffee":{"default":true,"vim":false,"emacs":false,"fontSize":12},"app.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/9FlZq5L.png"}

inlet.coffee

svg = d3.select("svg")
  .attr("width", 600)
  .attr("height", 400)
  .append("g")
  .attr("transform", "translate(200, 100)")
  
  
update = (data) ->
  elem = svg.selectAll("g").data(data)
  elemEnter = elem.enter().append("g")
  
  circleEnter = elemEnter.append("circle")
  rectEnter = elemEnter.append("rect")
  textEnter = elemEnter.append("text")

  svg.selectAll("circle")
    .attr("cx", (d, i) -> i*80 + 10)
    .attr("cy", 0)
    .attr("r", 20)
    .attr("fill", "#dbdbdb")
  
  svg.selectAll("text")
    .attr("x", (d, i) -> i*80 + 10)
    .text((d) -> d)
  
  
  H = 148
  
  svg.selectAll("rect")
    .attr("x", (d, i) -> i*80 - 10)
    .attr("y", (d) -> H - 2*d)
    .attr("width", 40)
    .attr("height", (d) -> 2*d)
    .attr("fill", "#dbdbdb")
    
    
draw = ->
  data = d3.range(5)
    .map(Math.random)
    .map((d) -> Math.round(50*d))
  console.log(data)
  update(data)
  return
  
# setInterval(draw, 1500)