X-Ray

A bit of fun with d3.

Click on the squares...

There could be some intersting thing to do, like

Making the code less ugly :)
Calculating the timing of the transition, so all the rays meet at the same time
Implements a deminer
Whatever else

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
        max-width: 960px;
        margin: 1px;
    }

div {
        width: 10px;
        height: 10px;
        margin: 1px 0 0 1px;
        float: left;
        background: #eee;
        display: inline-block;
        cursor: pointer;
    }

</style>
<body>
<script src="//d3js.org/d3.v4.0.0-alpha.24.min.js"></script>
<script>

var n = 4002;
    var bodyWidth = 960;
    var width = 10 + 1; // width + margin
    var elementPerLines = Math.round(bodyWidth/(10+1));
    var numberOfLines = Math.floor(n/elementPerLines)+1;

var whiteblue = d3.interpolateRgb("#eee", "steelblue"),
            blueorange = d3.interpolateRgb("steelblue", "orange"),
            orangewhite = d3.interpolateRgb("orange", "#eee");

var grid = d3.select("body").selectAll("div")
            .data(d3.range(n), function(d) { return d;})
            .enter().append("div")
            .on('click', function(d, i, nodes) {
                console.log(i, elementPerLines);
                var startingBlockYIndex = Math.floor(i / elementPerLines) * elementPerLines;
                var startingBlockXIndex = i % elementPerLines;
                crossAnimation(startingBlockXIndex, startingBlockYIndex);
            });

function crossAnimation(startingBlockXIndex, startingBlockYIndex) {
        // Y moves on X
        // X moves on Y

// we now we have 89 elements per line

startingBlockYIndex--;

var oppositeYIndex = startingBlockYIndex + elementPerLines-1;
        var oppositeXIndex = + (numberOfLines - 2  ) * ( elementPerLines ) + startingBlockXIndex;
        var numberOfLinesToGo = (numberOfLines - 2) - Math.floor(startingBlockYIndex / elementPerLines);
        var lastLine = (numberOfLines - 2  ) * ( elementPerLines );

grid.filter(function(d) { return d < oppositeYIndex && d > oppositeYIndex - (elementPerLines - startingBlockXIndex - 1); })
                .transition()
                .delay(function(d, i) { return Math.abs(i - startingBlockYIndex - elementPerLines) * 10; })
                .ease(d3.easeLinear)
                .on("start", function repeat() {
                    d3.active(this)
                            .styleTween("background-color", function () {
                                return whiteblue;
                            }
                    ).transition()
                            .delay(100)
                            .style("background-color", function () {
                                return '#eee';
                            }
                    );
                }
        );

var data = [];
        for (var i = 0; i <=  Math.floor(startingBlockYIndex / elementPerLines); i++) {
            data.push(startingBlockXIndex + elementPerLines * i);
        }

data = [];
        for (var i = 0; i <= numberOfLinesToGo; i++) {
            data.push(oppositeXIndex - elementPerLines * i);
        }
        var delay2 = numberOfLines - numberOfLinesToGo;
        // that would be easier if we could reverse the whole stuff
        grid.filter(function(d) { return data.indexOf(d) > -1;})
                .transition()
                .delay(function(d, i) { return (delay2--) * 10; })
                .ease(d3.easeLinear)
                .on("start", function repeat() {
                    d3.active(this)
                            .styleTween("background-color", function () {
                                return whiteblue;
                            }
                    ).transition()
                            .delay(100)
                            .style("background-color", function () {
                                return '#eee';
                            }
                    );
                }

);
    }

</script>

https://d3js.org/d3.v4.0.0-alpha.24.min.js