selections

_.md

[ Launch: selections ] 6556951 by zeffii
[ Launch: coffee_template ] 6556738 by zeffii
[ Launch: coffee_template ] 6527689 by zeffii
[ Launch: coffee_template ] 6448693 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":"selections","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},"util.coffee":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":true,"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

svg = d3.select("svg")
svg.append("rect").attr({width:"100%", height:"100%", fill: d3.rgb(25,25,25) });

group1 = svg.append("g").classed("group1", true)

text_style1 =
  "fill": "#D8D8D8" 
  "font-size": 0.7 + "em" 
  "font-face": "sans-serif"
  stroke: "none"


graph = [
  {x: 20, y: 50},
  {x: 120, y: 31},
  {x: 5, y: 166},
  {x: 95, y: 151},
  {x: 152, y: 88},
]

circles = group1.append('g').classed('circles', true)
.attr
  transform: 'translate(' + [120, 130] + ')'

c = circles.selectAll('g').data(graph).enter()

m = c.append('g')
.style
  fill: 'white'

m.append('circle')
.attr
  cx: (d) -> d.x
  cy: (d) -> d.y
  r: 30
  
m.append('circle')
.attr
  cx: (d) -> d.x + Math.sin(tributary.anim(0,2*Math.PI))*20
  cy: (d) -> d.y + Math.cos(tributary.anim(0,2*Math.PI))*20
  r: 30
.style
  'fill-opacity': 0.5
  
m.append('circle')
.attr
  cx: (d) -> d.x + Math.sin(tributary.anim(0,2*Math.PI))*40
  cy: (d) -> d.y + Math.cos(tributary.anim(0,2*Math.PI))*40
  r: 30
.style
  'fill-opacity': 0.2  

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;}

util.coffee

tributary.between = (p1, p2) ->
  x: (p1.x + p2.x) * 0.5
  y: (p1.y + p2.y) * 0.5