
//Width and height
var kCellCount = 9;
var kBallRadius = 35;
var kSpacing = kBallRadius/2;
var kCellSize = kBallRadius*1.3;
var kBoardSize = kCellSize * kCellCount * 1.4;
var kNewBallCount = 3;
var kMinMatchBallCount = 5;

var kMarginSize = 30;

var board = [];
for (var i=0;i<kCellCount;i++) {
    for (var j=0;j<kCellCount;j++) {
        board[j*kCellCount + i] = {
            cx : (i + 0.5) * kCellSize,
            cy : (j + 0.5) * kCellSize,
            x : i * kCellSize,
            y : j * kCellSize,
            color: "none",
        }
    }
}

//Create SVG element
var svg = d3.select("body")
            .append("svg")
                .attr("width", kBoardSize)
                .attr("height", kBoardSize)
            // .append("rect")
            // .attr("width", kBoardSize)
            // .attr("height", kBoardSize)
            // .attr("stroke", "grey")
            ;


// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Text_formatting
var canvas = svg.append("g")
            .attr("transform", "translate(" + kMarginSize + ", " +  kMarginSize + ")")
            ;

// https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle
var chesses = canvas.selectAll("circle")
    .data(board)
    .enter()
    .append("circle")
        .attr("cx", function(d, i) { return d.cx; })
        .attr("cy", function(d, i) { return d.cy; })
        .attr("r", kBallRadius / 2)
        .attr("fill", function(d, i) { return d.color; })
        .attr("stroke", "none")
    ;

// https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect
var cells = canvas.selectAll("rect")
    .data(board)
    .enter()
    .append("rect")
        .attr("x", function(d, i) { return d.x; })
        .attr("y", function(d, i) { return d.y; })
        .attr("width", kCellSize)
        .attr("height", kCellSize)
        .attr("fill", "none")
        .attr("stroke", "grey")
    ;
@@ -524,20 +524,25 @@
 color: %22
-none
+lightgrey
 %22,%0A     
@@ -888,16 +888,122 @@
      ;%0A%0A
+// svg.on('click', function() %7B%0A//     var coords = d3.mouse(this);%0A//     // console.log(coords);%0A// %7D);%0A
 %0A// http
@@ -1271,25 +1271,21 @@
 ent/
-circle
+rect
 %0Avar c
-hesse
+ell
 s = 
@@ -1302,22 +1302,20 @@
 ectAll(%22
-circle
+rect
 %22)%0A    .
@@ -1356,14 +1356,12 @@
 nd(%22
-circle
+rect
 %22)%0A 
@@ -1374,17 +1374,16 @@
  .attr(%22
-c
 x%22, func
@@ -1404,17 +1404,16 @@
 eturn d.
-c
 x; %7D)%0A  
@@ -1425,17 +1425,16 @@
  .attr(%22
-c
 y%22, func
@@ -1455,17 +1455,16 @@
 eturn d.
-c
 y; %7D)%0A  
@@ -1480,85 +1480,95 @@
 tr(%22
-r%22, kBallRadius / 2)%0A        .attr(%22fill%22, function(d, i) %7B return d.color; %7D
+width%22, kCellSize)%0A        .attr(%22height%22, kCellSize)%0A        .attr(%22fill%22, %22lightgrey%22
 )%0A  
@@ -1586,28 +1586,28 @@
 (%22stroke%22, %22
-none
+grey
 %22)%0A    ;%0A%0A//
@@ -1660,37 +1660,41 @@
 SVG/Element/
-rect
+circle
 %0Avar c
-ell
+hesse
 s = canvas.s
@@ -1695,36 +1695,38 @@
 nvas.selectAll(%22
-rect
+circle
 %22)%0A    .data(boa
@@ -1747,36 +1747,38 @@
 ()%0A    .append(%22
-rect
+circle
 %22)%0A        .attr
@@ -1771,32 +1771,33 @@
 %0A        .attr(%22
+c
 x%22, function(d, 
@@ -1802,32 +1802,33 @@
 , i) %7B return d.
+c
 x; %7D)%0A        .a
@@ -1824,32 +1824,33 @@
 %0A        .attr(%22
+c
 y%22, function(d, 
@@ -1855,32 +1855,33 @@
 , i) %7B return d.
+c
 y; %7D)%0A        .a
@@ -1889,60 +1889,85 @@
 tr(%22
-width%22, kCellSize)%0A        .attr(%22height%22, kCellSize
+r%22, kBallRadius / 2)%0A        .attr(%22fill%22, function(d, i) %7B return d.color; %7D
 )%0A  
@@ -1975,28 +1975,30 @@
      .attr(%22
-fill
+stroke
 %22, %22none%22)%0A 
@@ -2009,32 +2009,361 @@
    .
-attr(%22stroke
+on('click', function(d)%7B%0A            // http://jsfiddle.net/GordyD/0o71rhug/1/%0A            // var nodeSelection = d3.select(this).style(%7Bopacity:'0.8'%7D);%0A            // nodeSelection.select(%22text%22).style(%7Bopacity:'1.0'%7D);%0A            console.log(this);%0A            console.log(d3.select(this));%0A            d3.select(this).attr(%22fill
 %22, %22
-g
 re
-y
+d
 %22)
+;
 %0A    
-;
+    %7D);%0A%0A

Add mouse event