Skip to content

Instantly share code, notes, and snippets.

@mwburke

mwburke/index.html

Last active August 17, 2017 17:15
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 mwburke/408cfac0771f88a87391aaa00b189c75 to your computer and use it in GitHub Desktop.
Save mwburke/408cfac0771f88a87391aaa00b189c75 to your computer and use it in GitHub Desktop.
Download ZIP
Chess Viz Small Multiples
Raw
index.html
<head>
<script src="https://d3js.org/d3.v3.min.js"></script>
<!--script src="piecetable.js"></script> -->
</head>
<body>
<div id="piecetable"></div>
<script type="text/javascript">
var width = 400;
var height = 200;
var bPawnImg = 'https://upload.wikimedia.org/wikipedia/commons/c/c7/Chess_pdt45.svg';
var bBishopImg = 'https://upload.wikimedia.org/wikipedia/commons/9/98/Chess_bdt45.svg';
var bKnightImg = 'https://upload.wikimedia.org/wikipedia/commons/e/ef/Chess_ndt45.svg';
var bRookImg = 'https://upload.wikimedia.org/wikipedia/commons/f/ff/Chess_rdt45.svg';
var bQueenImg = 'https://upload.wikimedia.org/wikipedia/commons/4/47/Chess_qdt45.svg';
var bKingImg = 'https://upload.wikimedia.org/wikipedia/commons/f/f0/Chess_kdt45.svg';
var wPawnImg = 'https://upload.wikimedia.org/wikipedia/commons/4/45/Chess_plt45.svg';
var wBishopImg = 'https://upload.wikimedia.org/wikipedia/commons/b/b1/Chess_blt45.svg';
var wKnightImg = 'https://upload.wikimedia.org/wikipedia/commons/7/70/Chess_nlt45.svg';
var wRookImg = 'https://upload.wikimedia.org/wikipedia/commons/7/72/Chess_rlt45.svg';
var wQueenImg = 'https://upload.wikimedia.org/wikipedia/commons/1/15/Chess_qlt45.svg';
var wKingImg = 'https://upload.wikimedia.org/wikipedia/commons/4/42/Chess_klt45.svg';
var data = [
{"url":bRookImg,
"row":1,
"column":1,
"piece":"a8"
},
{"url":bKnightImg,
"row":1,
"column":2,
"piece":"b8"
},
{"url":bBishopImg,
"row":1,
"column":3,
"piece":"c8"
},
{"url":bQueenImg,
"row":1,
"column":4,
"piece":"d8"
},
{"url":bKingImg,
"row":1,
"column":5,
"piece":"e8"
},
{"url":bBishopImg,
"row":1,
"column":6,
"piece":"f8"
},
{"url":bKnightImg,
"row":1,
"column":7,
"piece":"g8"
},
{"url":bRookImg,
"row":1,
"column":8,
"piece":"h8"
},
{"url":bPawnImg,
"row":2,
"column":1,
"piece":"a7"
},
{"url":bPawnImg,
"row":2,
"column":2,
"piece":"b7"
},
{"url":bPawnImg,
"row":2,
"column":3,
"piece":"c7"
},
{"url":bPawnImg,
"row":2,
"column":4,
"piece":"d7"
},
{"url":bPawnImg,
"row":2,
"column":5,
"piece":"e7"
},
{"url":bPawnImg,
"row":2,
"column":6,
"piece":"f7"
},
{"url":bPawnImg,
"row":2,
"column":7,
"piece":"g7"
},
{"url":bPawnImg,
"row":2,
"column":8,
"piece":"h7"
},
{"url":wPawnImg,
"row":3,
"column":1,
"piece":"a2"
},
{"url":wPawnImg,
"row":3,
"column":2,
"piece":"b2"
},
{"url":wPawnImg,
"row":3,
"column":3,
"piece":"c2"
},
{"url":wPawnImg,
"row":3,
"column":4,
"piece":"d2"
},
{"url":wPawnImg,
"row":3,
"column":5,
"piece":"e2"
},
{"url":wPawnImg,
"row":3,
"column":6,
"piece":"f2"
},
{"url":wPawnImg,
"row":3,
"column":7,
"piece":"g2"
},
{"url":wPawnImg,
"row":3,
"column":8,
"piece":"h2"
},
{"url":wRookImg,
"row":4,
"column":1,
"piece":"a1"
},
{"url":wKnightImg,
"row":4,
"column":2,
"piece":"b1"
},
{"url":wBishopImg,
"row":4,
"column":3,
"piece":"c1"
},
{"url":wQueenImg,
"row":4,
"column":4,
"piece":"d1"
},
{"url":wKingImg,
"row":4,
"column":5,
"piece":"e1"
},
{"url":wBishopImg,
"row":4,
"column":6,
"piece":"f1"
},
{"url":wKnightImg,
"row":4,
"column":7,
"piece":"g1"
},
{"url":wRookImg,
"row":4,
"column":8,
"piece":"h1"
}
];
var drawPieceTable = function(data) {
var svg = d3.select("#piecetable")
.append("svg")
.attr("width", width)
.attr("height", height);
//console.log(data);
svg.selectAll("img")
.data(data)
.enter()
.append("svg:image")
.attr("xlink:href", function(d) {return d.url;})
.attr("x", function(d) {return (d.column - 1) * (width / 8);})
.attr("y", function(d) {return (d.row - 1) * (height / 4);})
.attr("width", width / 8)
.attr("height", height / 4)
.on('click', function(d) {console.log(d.piece);});
}
drawPieceTable(data);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment