patternCreationWithD3.js

(function() {
  var incrementWithoutSpace, incrementWithSpace, FirstColumnType, SecondColumnType;
 
  incrementWithoutSpace = 20; // I'm guessing this is in px
  incrementWithSpace = 40;
 
  FirstColumnType = function ColumnType1 () {
    var x, y, r;
    circle = {
      x : 20,
      y : 20,
      r : 10
    }
    // incrementWithSpace -> IncrementWithout -> IncrementWithout -> IncrementWith
  };

  SecondColumnType = function ColumnType2() {
    var x, y, r;
    circle = {
      x : 40,
      y : 30,
      r : 10
    }
    // incrementWithout -> incrementWith -> incrementWithout -> incrementWithout
  };

  drawCircles = function() (lattice, columnType, pattern) {
      var count, arbitraryNumber, usedZeroTimes, usedOnce, usedTwice;

      lattice.append(columnType.circle)

      arbitraryNumber = 30;
      while (count < arbitraryNumber) {
        if (columnType.name == 'ColumnType1') {
          // this time      : need to increment with space
          // next time      : check if the last circle placed used a space
          // next next time : if last circle had no space, but the circle previous to it did, add circle with no space, else add circle with space
          columnType.circle.y += incrementWithSpace; // what about iterations through the loop after this occurrence, eek!
        } else if (columnType.name == 'ColumnType2') {
          // I can't even think about this one yet
        };
        count +=1;
      }
  }

}).call(this);

successfulPatternCreation.js

view = d3.select('body').append('svg', {width: "100%", height: "100%"})
view.append('g')
view.append('circle').attr({cx: 20, cy: 20, r: 10, fill: 'orange', stroke: 'black'})
view.append('circle').attr({cx: 20, cy: 60, r: 10, fill: 'orange', stroke: 'black'})
view.append('circle').attr({cx: 40, cy: 30, r: 10, fill: 'orange', stroke: 'black'})
view.append('circle').attr({cx: 40, cy: 50, r: 10, fill: 'orange', stroke: 'black'})
view.append('circle').attr({cx: 60, cy: 20, r: 10, fill: 'orange', stroke: 'black'})
view.append('circle').attr({cx: 60, cy: 60, r: 10, fill: 'orange', stroke: 'black'})
view.append('circle').attr({cx: 80, cy: 30, r: 10, fill: 'orange', stroke: 'black'})
view.append('circle').attr({cx: 80, cy: 50, r: 10, fill: 'orange', stroke: 'black'})

// not programmatically created, but it is the pattern I'm trying to fill the screen with