breadBoard

forked from anonymous's block: fresh block

forked from anonymous's block: breadBoard

forked from mpmckenna8's block: breadBoard

<!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 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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js