In this part of our introductory series on D3 (index here), we will make the most minimal D3 program possible.
If you read the introduction, you know that we're going to create a Reversi (OthelloTM) game. The first step, which we'll accomplish with this post, is to put a black square on the page. It will serve as the background for the board. Just to be a little jazzy, we're going to round its corners. (Horray, SVG!) Click here to see how it will look.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Reversi</title>
<script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
<script type="text/javascript">
function createBoard() {
var squaresInRow = 8;
var squareSize = 60; // Size of a square in pixels.
var gapSize = squareSize / 10; // Gap between squares.
var boardBorder = gapSize * 2; // Border around the whole board.
var boardSize = squareSize * squaresInRow + gapSize * (squaresInRow - 1) + boardBorder * 2;
var svg = d3.select("body").append("svg")
.attr("width", boardSize)
.attr("height", boardSize);
svg.append("rect")
.attr("x", 0).attr("y", 0)
.attr("rx", boardBorder)
.attr("width", boardSize).attr("height", boardSize);
}
//**********************************************
// When the window is loaded, create the game.
//**********************************************
window.onload = function () {
createBoard();
}
</script>
</head>
<body>
</body>
</html>
You can run the above code by clicking here. This is how it works.
1) You might want to include a DOCTYPE that mentions SVG. An example is on line 2, but many others many others are possible.
2) You must include the D3 script as shown on line 7. I've included it directly from d3js.org, but you can download it to your Web server if you wish.
3) After some razzmatazz to calculate the size of our rectangle based on things that will be relevant in subsquent posts, we finally arrive at line 16. There, we use the D3 library, accessed through its d3 variable, to select the <body> element and dynamically append an <svg> element to it. The <svg> element becomes our drawing canvas. We give the <svg> element the appropriate width and height attributes.
4) On line 20, we put an SVG <rect> element on the SVG surface. Its x and y attributes position it at the upper-left corner of the SVG surface, its rx attribute sets the radius of the rounded corner, and we set width and height to the size of the board.
5) The window.onload event kicks all this off (line 29). The result is here.
We have now used D3 in the most rudimentary way: to add static elements to an SVG surface. Next time, we'll begin to use it as it was intended: to visualize data.