biovisualize/flipper.js

## flipper.js
var Flipper = function(d, i){
    var size = [300, 300],
        margin = [0, 0, 0, 0],
        flipSpeed = 0.6,
        frontParent, backParent;
    var dispatch = d3.dispatch("hover");

    function exports(_selector){
        var parent = d3.select(_selector)
        var contentWidth = size[0] - margin[0] - margin[2];
        var contentHeight = size[1] - margin[1] - margin[3];
        var root = parent.selectAll("div.flipper-root").data([0]);
        root.enter().append("div").attr("class", "flipper-root")
            .html('<div class="flipper"><div class="front"></div><div class="back"></div></div>');
        root.exit().remove();

        if (frontParent){
            var frontDiv = parent.selectAll('.front').style({
                    width: contentWidth[0] + 'px',
                    height: contentHeight[1] + 'px'
                });
            var frontContent = d3.select(frontParent);
            frontDiv.node().appendChild(frontContent.node());
        }
        if (backParent){
            var backDiv = parent.selectAll('.back').style({
                    width: contentWidth[0] + 'px',
                    height: contentHeight[1] + 'px'
                })
            var backContent = d3.select(backParent);
            backDiv.node().appendChild(backContent.node());
        }

        parent.selectAll('.flipper-root').style({
                '-webkit-perspective': 1000,
                '-moz-perspective': 1000,
                perspective: 1000
            })
            .on('mouseover', function(d, i){
                d3.select(this).select('.flipper')
                    .style({
                        '-webkit-transform': 'rotateY(180deg)',
                        '-moz-transform': 'rotateY(180deg)',
                        transform: 'rotateY(180deg)'
                    });
                dispatch.hover(d, i);
            })
            .on('mouseout', function(){
                d3.select(this).select('.flipper')
                    .style({
                        '-webkit-transform': null,
                        '-moz-transform': null,
                        transform: null
                    });
            });

        parent.selectAll('.flipper-root, .front, .back').style({
                width: size[0] + 'px',
                height: size[1] + 'px'
            });

        parent.selectAll('.flipper').style({
                '-webkit-transition': flipSpeed + 's',
                '-webkit-transform-style': 'preserve-3d',
                '-moz-transition': flipSpeed + 's',
                '-moz-transform-style': 'preserve-3d',
                transition: flipSpeed + 's',
                'transform-style': 'preserve-3d',
                position: 'relative'
            });

        parent.selectAll('.front, .back').style({
                '-webkit-backface-visibility': 'hidden',
                '-moz-backface-visibility': 'hidden',
                'backface-visibility': 'hidden',
                position: 'absolute',
                top: 0,
                left: 0
            });

        parent.selectAll('.front').style({
                'z-index': 2
            });

        parent.selectAll('.back').style({
                '-webkit-transform': 'rotateY(180deg)',
                '-moz-transform': 'rotateY(180deg)',
                transform: 'rotateY(180deg)'
            });

    }

    exports.size = function(_x) {
        if (!arguments.length) return size;
        size = _x;
        return this;
    };

    exports.flipSpeed = function(_x) {
        if (!arguments.length) return flipSpeed;
        flipSpeed = _x;
        return this;
    };

    exports.frontParent = function(_x) {
        if (!arguments.length) return frontParent;
        frontParent = _x;
        return this;
    };

    exports.backParent = function(_x) {
        if (!arguments.length) return backParent;
        backParent = _x;
        return this;
    };

    d3.rebind(exports, dispatch, "on");

    return exports;
}

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="./flipper.js"></script>
    <style>
    .back-div{ background: lightblue }
    .front-div{ background: lightgreen }
    </style>

</head>
<body>

<div class="front-div">Front</div>
<div class="back-div">Back</div>
<div class="root-container"></div>

<script type="text/javascript">

    d3.select('.front-div')
        .append('svg')
        .attr({width: 300, height: 300})
        .append('rect')
        .attr({x: 100, y: 100, width: 100, height: 100})
        .style({'fill': 'aliceblue'});

    d3.select('.back-div')
        .append('svg')
        .attr({width: 300, height: 300})
        .append('circle')
        .attr({cx: 150, cy: 150, r: 100})
        .style({'fill': 'orange'});

    var flipper = Flipper();
    flipper.size([400, 300]).flipSpeed(0.3).frontParent('.front-div').backParent('.back-div');
    flipper('.root-container');

</script>
</body>
</html>
	var Flipper = function(d, i){
	var size = [300, 300],
	margin = [0, 0, 0, 0],
	flipSpeed = 0.6,
	frontParent, backParent;
	var dispatch = d3.dispatch("hover");

	function exports(_selector){
	var parent = d3.select(_selector)
	var contentWidth = size[0] - margin[0] - margin[2];
	var contentHeight = size[1] - margin[1] - margin[3];
	var root = parent.selectAll("div.flipper-root").data([0]);
	root.enter().append("div").attr("class", "flipper-root")
	.html('<div class="flipper"><div class="front"></div><div class="back"></div></div>');
	root.exit().remove();

	if (frontParent){
	var frontDiv = parent.selectAll('.front').style({
	width: contentWidth[0] + 'px',
	height: contentHeight[1] + 'px'
	});
	var frontContent = d3.select(frontParent);
	frontDiv.node().appendChild(frontContent.node());
	}
	if (backParent){
	var backDiv = parent.selectAll('.back').style({
	width: contentWidth[0] + 'px',
	height: contentHeight[1] + 'px'
	})
	var backContent = d3.select(backParent);
	backDiv.node().appendChild(backContent.node());
	}

	parent.selectAll('.flipper-root').style({
	'-webkit-perspective': 1000,
	'-moz-perspective': 1000,
	perspective: 1000
	})
	.on('mouseover', function(d, i){
	d3.select(this).select('.flipper')
	.style({
	'-webkit-transform': 'rotateY(180deg)',
	'-moz-transform': 'rotateY(180deg)',
	transform: 'rotateY(180deg)'
	});
	dispatch.hover(d, i);
	})
	.on('mouseout', function(){
	d3.select(this).select('.flipper')
	.style({
	'-webkit-transform': null,
	'-moz-transform': null,
	transform: null
	});
	});

	parent.selectAll('.flipper-root, .front, .back').style({
	width: size[0] + 'px',
	height: size[1] + 'px'
	});

	parent.selectAll('.flipper').style({
	'-webkit-transition': flipSpeed + 's',
	'-webkit-transform-style': 'preserve-3d',
	'-moz-transition': flipSpeed + 's',
	'-moz-transform-style': 'preserve-3d',
	transition: flipSpeed + 's',
	'transform-style': 'preserve-3d',
	position: 'relative'
	});

	parent.selectAll('.front, .back').style({
	'-webkit-backface-visibility': 'hidden',
	'-moz-backface-visibility': 'hidden',
	'backface-visibility': 'hidden',
	position: 'absolute',
	top: 0,
	left: 0
	});

	parent.selectAll('.front').style({
	'z-index': 2
	});

	parent.selectAll('.back').style({
	'-webkit-transform': 'rotateY(180deg)',
	'-moz-transform': 'rotateY(180deg)',
	transform: 'rotateY(180deg)'
	});

	}

	exports.size = function(_x) {
	if (!arguments.length) return size;
	size = _x;
	return this;
	};

	exports.flipSpeed = function(_x) {
	if (!arguments.length) return flipSpeed;
	flipSpeed = _x;
	return this;
	};

	exports.frontParent = function(_x) {
	if (!arguments.length) return frontParent;
	frontParent = _x;
	return this;
	};

	exports.backParent = function(_x) {
	if (!arguments.length) return backParent;
	backParent = _x;
	return this;
	};

	d3.rebind(exports, dispatch, "on");

	return exports;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" src="./flipper.js"></script>
	<style>
	.back-div{ background: lightblue }
	.front-div{ background: lightgreen }
	</style>

	</head>
	<body>

	<div class="front-div">Front</div>
	<div class="back-div">Back</div>
	<div class="root-container"></div>

	<script type="text/javascript">

	d3.select('.front-div')
	.append('svg')
	.attr({width: 300, height: 300})
	.append('rect')
	.attr({x: 100, y: 100, width: 100, height: 100})
	.style({'fill': 'aliceblue'});

	d3.select('.back-div')
	.append('svg')
	.attr({width: 300, height: 300})
	.append('circle')
	.attr({cx: 150, cy: 150, r: 100})
	.style({'fill': 'orange'});

	var flipper = Flipper();
	flipper.size([400, 300]).flipSpeed(0.3).frontParent('.front-div').backParent('.back-div');
	flipper('.root-container');

	</script>
	</body>
	</html>