D3 Examples - X-Ray

xxxxxxxxxx
 
<!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 );
​
        var grid = d3.select("body").selectAll("div");
        
        // there must be a better way to do it
        grid.filter(function(d) { return d > startingBlockYIndex  && d <= startingBlockYIndex + startingBlockXIndex; })
            .transition()
            .delay(function(d, i) { return ( i - startingBlockYIndex) * 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';
                            }
                    );
                }
        );
​
        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);
        }
​
        var delay = 0;
        grid.filter(function(d) { return data.indexOf(d) > -1;})
                .transition()
                .delay(function(d, i) { return (delay++)*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';
                            }
                    );
                }
        );
​
        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>
    