D3 Examples - Create a simplified prototype using Sketch and d3.js

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  width: 960px;
  padding-top: 40px;
  margin: auto;
  position: relative;
}
svg {
    width: 100%;
    max-height: 400px;
}
</style>
​
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type='text/javascript'>
​
(function () {
    function animateGrowingCircle(fromRadius, toRadius) {
        var animateFunction = function () {
            d3.select(this)
                .attr('r', fromRadius)
                .transition()
                .duration(1000)
                .attr('r', toRadius)
                .transition()
                .duration(1000)
                .attr('r', fromRadius)
                .each('end', animateFunction);
        };
        return animateFunction;
    }
​
    window.addEventListener('load', function () {
        d3.xml('SafeSignal2.svg', 'image/svg+xml', function (error, data) {
            d3.select('body').node().appendChild(data.documentElement);
            svg = d3.select('svg');
​
            var connectedCircle = svg.select('#ConnectedCircle');
            var r = +connectedCircle.attr('r');
            connectedCircle.each(animateGrowingCircle(r, 1.4*r));
​
            var menuScreen = svg.select('#MenuScreen');
            var mainScreen = svg.select('#MainScreen');
            var mapScreen = svg.select('#MapScreen');
            var menuToggle = mainScreen.select('#MenuToggle')
                .style('pointer-events', 'all');
            var mapToggle = mainScreen.select('#MapToggle')
                .style('pointer-events', 'all');
    
            var state = 'main'; // can be 'main', 'menu' & 'right'
    
            var returnToOrigPos = function () {
                mainScreen
                        .transition()
                        .duration(500)
                        .attr('transform', 'translate(0, 0)');
                mapScreen
                        .transition()
                        .duration(500)
                        .attr('transform', 'translate(320, 0)');
                state = 'main';
            };
            var showMenu = function () {
                mainScreen
                    .transition()
                    .duration(500)
                    .attr('transform', 'translate(180, 0)');
                mapScreen
                    .transition()
                    .duration(500)
                    .attr('transform', 'translate(320, 0)');
                state = 'menu';
            };
            var slideMapScreen = function () {
                mainScreen
                    .transition()
                    .duration(500)
                    .attr('transform', 'translate(-320, 0)');
                mapScreen
                    .transition()
                    .duration(500)
                    .attr('transform', 'translate(0, 0)');
                state = 'right';
            };
    
            menuToggle.on('click', function () {
                if (state == 'menu') { returnToOrigPos(); }
                else { showMenu(); }
            });
            menuScreen.on('click', returnToOrigPos);
            mapToggle.on('click', function () {
                if (state == 'right') { returnToOrigPos(); }
                else { slideMapScreen(); }
            });
            mapScreen.on('click', returnToOrigPos);
        });
    });
})();
​
</script>
​
    