breadBoard by mpmckenna8

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
          <link rel="stylesheet" href="style.css">

</head>

<body>
  
  <svg id="board"></svg>
  <script>
var rows = 14;



var boardHeight = 20 + 25* rows;
var boardWidth = 250;
var buffer = boardWidth/20;

var holeRadius = 4;

var board = d3.select("#board")
                .attr('height', boardHeight)
                .attr('width', boardWidth);


//console.log(board);

var sideWidth = boardWidth/25;
var sideHeight = boardHeight - 20;

var leftright = [0,1, 2, 3];


var side = board.selectAll('.recs')
    .data(leftright)
    .enter()
    .append('g')

    .attr('transform', function(d,i){
      console.log(i)
  var xer = buffer *i + buffer/2;
  if(i > 1){
    xer = boardWidth - buffer * i + buffer/2;
  }

//  console.log(d,i);
  return "translate(" + xer +","+ 10 + ")"

})
    .attr('class', function(){
      return 'dish'
    })

var siderecs = side.append('rect').attr('width', sideWidth)
.attr('height', sideHeight)
.attr('x', function(d){
 //console.log(d)
    var x = 0//10;
    if(d >0){
    //  x += boardWidth - sideWidth -20;
    }
    return x;
})
.attr('class', function(d){
 return "side " + d;
})
//.attr('y', 10)




var midHeight = (boardHeight-20)/rows - 5;

var midWidth = (boardWidth/2)-(buffer*3+sideWidth);
var midrow = [];

for( i = 0; i < rows; i++){
  midrow.push(i)
}


var middar = ['leftmid', 'rightmid'];
for( i in middar){
  addmiddles(middar[i])
  console.log(i)
}


function addmiddles(dclass){

  console.log(dclass);

  var sideselstr = '.' + dclass;
  var ymid =  (midHeight + 5) + buffer;

  var middles = board.selectAll(sideselstr)
        .data(midrow)
        .enter()
        .append('g')
        .attr('class', function(d,i){

          return 'midBars ' + i
      })
        .attr('transform', function(d, i){

          var x = sideWidth*2 + buffer*1.5 ;
          var y = i * (midHeight+5) + buffer

          if(dclass === "rightmid"){
            x += midWidth + buffer*2 - sideWidth;
          }

          return "translate(" + x + "," + y + ")";

        })





  var middAttr = middles.append('rect').attr('width', midWidth)
      .attr('height', midHeight)
      .attr('x', function(d){
        var x = sideWidth + buffer*1.5 ;

        if(dclass === "rightmid"){
          x += midWidth + buffer*2;
        }
        return 0// x;
      })

      .attr('y', function(d){
        console.log('y mid', d)
        return 0//d * (midHeight + 5) + buffer;
      })
      .attr('class', 'middles')
      .attr('opacity', .5);

}

addholes();

function addholes(){
  var alphaHole = ['a', 'b', 'c', 'd', 'e']

  var midplugs = d3.selectAll('.midBars')
        .selectAll('.circs').data(alphaHole).enter().append('circle')
  .attr('r', holeRadius)
  .attr('cx', function(d,i){
    //  console.log(this)
      return 10 + 14 * i;
    })
  .attr('cy', 8)
  .attr('fill', 'red')
  .attr('class', function(d, i){

  return 'circsd'
})


var rowsArr = [];

for(i = 0; i < rows; i++){
  rowsArr.push(i);
}

console.log(rowsArr)

  var sideHoles = d3.selectAll('.dish').selectAll('.holes')
    .data(rowsArr)
    .enter()
    .append('circle')
    .attr('r', holeRadius)
    .attr('cx', function(d,i){
    //  console.log(this)
      return  4;
    })
    .attr('cy', function(d,i){
    return i * holeRadius*6 + buffer;
    })
    .attr('fill', 'red')
    .attr('class', function(d, i){

      return 'holes'
  })


}

  </script>
</body>

style.css

h2 {
    color: green;
}

#board{

 background: grey;
}


.rightmid, .leftmid{
  fill: yellow;
}