Built with blockbuilder.org
forked from anonymous's block: fresh block
forked from anonymous's block: breadBoard
forked from mpmckenna8's block: breadBoard
forked from mpmckenna8's block: breadBoard
Built with blockbuilder.org
forked from anonymous's block: fresh block
forked from anonymous's block: breadBoard
forked from mpmckenna8'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 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> |
h2 { | |
color: green; | |
} | |
#board{ | |
background: grey; | |
} | |
.rightmid, .leftmid{ | |
fill: yellow; | |
} |