minimum spanning tree

_.md

[ Launch: coffee_template ] 6475474 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":"minimum spanning tree","endpoint":"","display":"svg","public":true,"require":[{"name":"seedrandom","url":"http://davidbau.com/encode/seedrandom-min.js"}],"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},"edges.csv":{"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/28ebkkD.gif"}

edges.csv

v1 v2 w
9 13
1 2 4
2 3 8
3 4 7
4 5 9
5 6 10
6 3 4
6 7 2
7 8 1
8 1 8
8 2 11
8 9 7
9 3 2
9 7 6

inlet.coffee

# using randomseed.js by David Bau
# http://davidbau.com/archives/2010/01/30/random_seeds_coded_hints_and_quintillions.html
# http://davidbau.com/encode/seedrandom-min.js


# HELPERS

items_wide = 4
offset = {x: 116, y: 138}
Math.seedrandom 'baiiii55iiiiiiiii'

datum2object = (d) -> 
  [v1, v2, w] = d.split(' ')
  {'v1': v1, 'v2': v2, 'w': w}

rnd_co = -> Math.random() * 25
rnd_vec = -> x: rnd_co(), y: rnd_co()
  
unroll = (items) ->
  [t for t in [d.x, d.y] for d in items]
  
get_location = (i) ->
  p = rnd_vec() 
  x: offset.x * (i % items_wide) + p.x
  y: offset.y * Math.floor(i / items_wide) + p.y

# VARS  

key = 'v1 v2 w'
data = tributary.edges[1..]
data = (datum2object(d[key]) for d in data)
num_items = tributary.edges[0][key].split(' ')[0]
verts = (get_location(i) for i in [0...num_items])

svg = d3.select("svg")
group1 = svg.append("g").classed("group1", true)
d3.select("body").style "background-color", d3.rgb(25, 25, 25)

# DRAWING SVG

group1 
.attr("transform", "translate(" + [115, 89] + ")")

edges = group1.append('g').classed('edges', true)
.style
  fill:  "none"
  stroke: "#FFA0A0"
  'stroke-width': 2.16
.selectAll('path').data(data).enter()
.append('path')
.attr
  'd': (d) -> 
    line = (verts[v - 1] for v in [d.v1, d.v2])
    'M' + unroll(line)


balls = group1.append('g').classed('balls', true)
.style
  fill: "#aaaaaa"
  stroke: "none"
.selectAll('circle').data(verts)
.enter()
.append('circle')
.attr
  'r': 5.0
  'transform': (d) ->  "translate(" + [d.x, d.y] + ")"

  
    


  

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