Grids

_.md

[ Launch: Tributary inlet ] 6540391 by tarvaina

config.json

{"description":"Grids","endpoint":"","display":"svg","public":true,"require":[{"name":"underscore","url":"http://underscorejs.org/underscore-min.js"}],"fileconfigs":{"inlet.js":{"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},"inlet.coffee":{"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,"thumbnail":"http://i.imgur.com/HEZ1cDF.png"}

inlet.coffee

appendRect = (parent) ->
  parent.append("rect").attr
    width: 1
    height: 1
    fill: (d, i) -> color(i)

appendG = (parent) ->
  parent.append("g")
    
gridConfig = [
  {
    height: 6
    width: 6
    selector: "g"
    subGrid: appendG
    leaf: appendRect
    value: 31
  }
  {
    height: 5
    width: 5
    selector: "rect"
    subGrid: appendG
    leaf: appendRect
    value: 23
  }
  {
    height: 5
    width: 5
    selector: "rect"
    subGrid: appendG
    leaf: appendRect
    value: 10
  }
]


color = d3.scale.linear().domain([0, 30]).range(["#FF0000", "#0000FF"])

  
# starting from lower left, going up and then right
placeInGrid = (i, gridWidth, gridHeight) ->
  column = Math.floor(i / gridHeight)
  row = (i % gridHeight)
  { x: column / gridWidth, y: (gridHeight - row - 1) / gridHeight }

transform = (transforms)->
  _.map(transforms, (t) ->
    "" + t[0] + "(" + t[1..] + ")"
  ).join(" ")


svg = d3.select("svg")
topGrid = svg.append("g").attr
  transform: "scale(" + [500, 500] + ")"

_.reduce(gridConfig,
  ((supergrid, config) ->
    data = _.map([0...config.value], -> "leaf")
    data.push("subGrid")

    enter = supergrid.selectAll(config.selector).data(data).enter()
    grid = config.subGrid(enter)
    grid.attr
      transform: (d, i) -> 
        place = placeInGrid(i, config.width, config.height)
        transform([
          ["translate", place.x, place.y]
          ["scale", 1/config.width, 1/config.height]
        ])
      class: (d) -> d
    
    leaf = supergrid.selectAll(".leaf")
    config.leaf(leaf)
    
    supergrid.selectAll(".subGrid")
  ),
  topGrid
)