Skip to content

Instantly share code, notes, and snippets.

/README.md

Created March 21, 2016 22:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/9c72a94ca5a0d04c68e4 to your computer and use it in GitHub Desktop.
Save anonymous/9c72a94ca5a0d04c68e4 to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
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>
</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>
Raw
style.css
h2 {
color: green;
}
#board{
//height: 100px;
//width:100px;
background: blue;
}
.rightmid, .leftmid{
fill: yellow;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment