coffee_template

_.md

[ Launch: coffee_template ] 6443132 by zeffii
[ Launch: coffee_template ] 6442341 by zeffii
[ Launch: boomstick_motion_wcolor_coffee ] 6399870 by zeffii
[ Launch: boomstick_motion_wcolor_coffee ] 6382272 by zeffii
[ Launch: boomstick_motion_wcolor_coffee ] 6382237 by zeffii
[ Launch: boomstick_motion_wcolor_coffee ] 6379220 by zeffii
[ Launch: boomstick_motion_wcolor ] 6376715 by zeffii
[ Launch: boomstick_motion2 ] 6365156 by zeffii
[ Launch: boomstick_motion ] 6364686 by zeffii
[ Launch: boomstick ] 6364584 by zeffii
[ Launch: zeffii default ] 6364028 by zeffii
[ Launch: zeffii default ] 5033869 by zeffii

config.json

{"description":"coffee_template","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.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},"data2.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"util.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"injet.coffee":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.coffee":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/OqFYJQH.png"}

inlet.coffee

get_points = (angle, amp) ->
  x: Math.cos(angle) * amp
  y: Math.sin(angle) * amp

d3.select("body").style "background-color", d3.rgb(25, 25, 25)

svg = d3.select("svg")
defs = svg.append("defs")
group1 = svg.append("g").classed("group1", true)
group2 = svg.append("g").classed("group2", true)
group3 = svg.append("g").classed("group3", true)

group1
.attr
  "transform": "translate(" + [37, 150] + ")"
  opacity: 1.0
.style
  fill: "none"
  stroke: "#aeaeae"

data = d3.range(20)

balls = group1.selectAll('circle').data(data)

balls.enter()
.append('circle')
.attr
  r: 5.0
  transform: (d) -> "translate(" + [d*30.0, 40.0] + ")"

group2
.attr
  opacity: 1.0
.append("circle")
.attr
  r: 30
  cx: 70
  cy: 70
.style
  fill: 'orange'

    
show_overlay = true
show_original = true

button_function = (classname, pos, text, destination, switcher) ->

  button1 = group3.append('g').classed(classname, true)
  .attr
    transform: 'translate(' + pos + ')'
    
  button1  
  .append('rect')
  .attr 
    height: 20, width: 33
  .style fill: '#79CEB3'

  button1  
  .append('text')
  .text(text)
  .attr 
    transform: 'translate(' + [40, 16] + ')'
  .style 
    fill: 'white'
    
  button1
  .on('click', (d) ->
    g = d3.select(destination)
    .transition()
    .duration(1400)
    .attr
      'opacity': if switcher then 0.001 else .99

    switcher = !switcher

  ) 
      
button_function('button1', [40, 150], 'hide/show overlay', '.group1', show_overlay)
button_function('button2', [275, 150], 'hide/show original', '.group2', show_original)

style.css

.cm-s-elegant.CodeMirror { background: #1e2426; color: #696969;  }
.cm-s-elegant div.CodeMirror-selected {background: #064968 !important;} /* 33322B*/
.cm-s-elegant span.cm-variable { color:#22EFFF; }
.cm-s-elegant span.cm-variable-2 { color: #FFCCB4; }
.cm-s-elegant span.cm-variable-3 { color: white; }
.cm-s-elegant span.cm-string { color: Chartreuse; }
.cm-s-elegant span.cm-string-2 {color: Chartreuse;}
.cm-s-elegant span.cm-def {color: #FFCCB4; opacity: 1.0}
.cm-s-elegant span.cm-bracket { color: #EBEFE7; }
.cm-s-elegant pre { color:#FFF; }
.cm-s-elegant span.cm-qualifier { color:#C0C0C0; }
.cm-s-elegant span.cm-comment { color: #AFB4B4;}
.cm-s-elegant span.cm-property {color: #FDA676;}
.cm-s-elegant span.cm-number { color: #FF92EE;}
.cm-s-elegant span.cm-keyword { color: #FFFF18; }
.cm-s-elegant .CodeMirror-cursor { border-left: 1px solid white !important; }
.cm-s-elegant .CodeMirror-gutters {background: #505050;}
.cm-s-elegant .CodeMirror-linenumber {color: #D3D3D3;}