D3 Examples - Big screen .exit()

xxxxxxxxxx
 
<!DOCTYPE html>
​
<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Saira" rel="stylesheet">
    <style>
        body {
            margin: 50;
            font-family: 'Saira', sans-serif;
        }
​
        div {
            float: left;
        }
​
        line, rect {
            shape-rendering: crispEdges
        }
​
        .actor-rect {
            fill: SaddleBrown;
        }
​
        .axis {
            stroke: grey;
            stroke-width: 1
        }
​
        .beam {
            stroke: none;
            fill: PaleGoldenRod;
            opacity: 0.5
        }
​
        .shadow {
            stroke: none;
            fill: grey;
        }
​
        .umbrella line {
            stroke-width: 2;
            stroke: black;
        }
​
        .umbrella path {
            fill: black;
        }
​
        .water {
            fill: LightSkyBlue;
        }
​
        .glasses line {
            stroke: SaddleBrown;
        }
​
        .glasses circle {
            fill: SaddleBrown;
        }
​
    </style>
</head>
​
<body>
    <h1>Big Screen .exit()</h1>
    <script>
        const body = d3.select("body");
​
        const width = 250;
        const height = width;
        const margin = { "top": 50, "bottom": 50, "left": 50, "right": 50 };
​
        const rectWH = 50;
​
        const xScale = d3.scaleLinear()
            .domain([0, 100])
            .range([0, width])
​
        const yScale = d3.scaleLinear()
            .domain([0, 100])
            .range([height, 0]);
​
        const data1 = [50, 25, 75];
        const data2 = [50];
​
        let shane = body.append("div")
            .attr("id", "shane")
        
        shane.append("h2").text("Shane")
​
        let alien = body.append("div")
            .attr("id", "alien")
​
        alien.append("h2").text("X-Files")
​
        let freeWilly = body.append("div")
            .attr("id", "free-willy")
​
        freeWilly.append("h2").text("Free Willy")
​
        let wickedWitch = body.append("div")
            .attr("id", "wicked-witch")
​
        wickedWitch.append("h2").text("Wizard of Oz")
​
        let maryPoppins = body.append("div")
            .attr("id", "mary-poppins")
​
        maryPoppins.append("h2").text("Mary Poppins")
​
        let invisibleMan = body.append("div")
            .attr("id", "invisible-man")
​
        invisibleMan.append("h2").text("Invisible Man")
​
        let divs = body.selectAll("div");
        divs.call(createChart)
​
        function createChart(selection) {
​
​
            let svg = selection.append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
​
            let g = svg.append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
            let yAxis = g.append("g")
                .append("line")
                .attr("class", "axis")
                .attr("x1", 0)
                .attr("y1", 0)
                .attr("x2", 0)
                .attr("y2", height)
​
            let xAxis = g.append("g")
                .attr("transform", "translate(" + 0 + "," + height + ")")
                .append("line")
                .attr("class", "axis")
                .attr("x1", 0)
                .attr("y1", 0)
                .attr("y2", 0)
                .attr("x2", width)
​
            let actor = g.selectAll(".actor")
                .data(data1, function(d){ return d; })
                .enter()
                .append("g")
                .attr("transform", function (d) {
                    return "translate(" + xScale(d) + "," + yScale(d) + ")";
                })
                .attr("class", "actor")
​
            actor.append("rect")
                .attr("class", "actor-rect")
                .attr("x", -(rectWH / 2))
                .attr("y", -(rectWH / 2))
                .attr("width", rectWH)
                .attr("height", rectWH)
                .attr("rx", 3)
​
        };
      
        exitShane()
                
        let exit = 0;
                let timer = window.setInterval(startExit, 4000);
      
        function startExit() {
          console.log(exit);
          switch (exit) {
              case 0: 
                exitAlien()
                break;
              case 1: 
                exitFreeWilly()
                break;
              case 2: 
                exitWickedWitch()
                break;
              case 3: 
                exitMaryPoppins()
                break;
              case 4: 
                exitInvisibleMan()
                break;
                default: 
                clearInterval(timer)
                
          }
                            
                    exit = exit + 1;
        }
​
        function exitShane() {
​
            let update = shane.selectAll(".actor")
                .data(data2, function(d){ return d; })
            
            let enterSelection = update.enter();
            let mergeSelection = update.merge(enterSelection)
            let exitSelection = update.exit();
​
            let t0 = shane.transition().duration(5000);
            let t1 = shane.transition().duration(5000);
​
            exitSelection.select(".actor-rect")
                .transition(t0)
                .attr("width", 0)
                .attr("x", 0)
                .attr("height", 0);
​
            exitSelection.transition(t1)
                .attrTween("transform", didHeOrDidntHe());
​
            mergeSelection.append("text")
                .text("Come back Shane")
                .attr("x", (rectWH/2) + 5)
                .style("opacity", 0)
                .transition(t1)
                .style("opacity", 1)
            
       
        };
​
        function exitAlien() {
​
            let update = alien.selectAll(".actor")
                .data(data2, function(d){ return d; })
            
            let exitSelection = update.exit();
​
            let beamWidth = rectWH + 20;
            let shadowHeight = 20;
​
            let beam = exitSelection.append("rect")
                .attr("class", "beam")
                .attr("x", 0)
                .attr("y", function(d){
                    return -(yScale(d) + margin.top);
                })
                .attr("width", 0)
                .attr("height", 0)
                .lower()
​
            let shadow = exitSelection.append("rect")
                .attr("class", "shadow")
                .attr("x", 0)
                .attr("y", (rectWH / 2))
                .attr("width", 0)
                .attr("height", shadowHeight)
​
            let t0 = alien.transition().duration(1000)
            let t1 = t0.transition()
                .delay(50)
                .duration(1000)
                .ease(d3.easeSinIn);
            let t2 = t1.transition().duration(1000)
​
            t0.selectAll(".beam")
                .attr("x", -(beamWidth / 2))
                .attr("width", beamWidth)
                .attr("height", function(d){
                    return (yScale(d) + margin.top + (rectWH / 2));
                })
                
            t0.selectAll(".shadow")
                .attr("x", -(rectWH / 2))
                .attr("width", rectWH);
​
            exitSelection.selectAll(".actor-rect")
                .transition(t1)
                .attr("y", function(d){
                    return -(yScale(d) + margin.top + (rectWH));
                })
​
            t1.selectAll(".shadow")
                .attr("width", 0)
                .attr("x", 0)
                    .attr("height", 0)
​
            t2.selectAll(".beam")
                .attr("x", 0)
                .attr("width", 0);
​
        };
​
        function exitFreeWilly() {
​
            let update = freeWilly.selectAll(".actor")
                .data(data2, function(d){ return d; })
            
            let enterSelection = update.enter();
            let mergeSelection = update.merge(enterSelection);
            let exitSelection = update.exit();
​
            let t0 = freeWilly.transition().duration(1000)
            let t1 = t0.transition()
                .duration(3000)
                .ease(d3.easeQuadInOut)
            let t2 = t1.transition().duration(500)
            let t3 = freeWilly.transition()
                .delay(1500)    
                .duration(3000)
​
            exitSelection.transition(t0)
                .attr("transform", function (d) {
                    return "translate(" + margin.left + "," + yScale(d) + ")";
                })
            exitSelection.transition(t1)
                .attrTween("transform", jump());
​
            exitSelection.transition(t2)
                .attr("transform", function (d) {
                    return "translate(" + -(margin.left + rectWH) + "," + yScale(d) + ")";
                });
          
            mergeSelection.append("text")
                .text("You could be free!")
                .attr("x", (rectWH/2) + 5)
                .style("opacity", 0)
                .transition(t3)
                .style("opacity", 1)
​
        };
​
        function exitWickedWitch() {
​
            let update = wickedWitch.selectAll(".actor")
                .data(data2, function(d){ return d; })
            
            let exitSelection = update.exit();
​
            let water = exitSelection.append("rect")
                .attr("class", "water")
                .attr("x", -(rectWH / 2))
                .attr("y", -((height / 2) + margin.top))
                .attr("width", rectWH)
                .attr("height", 0)
                .lower()
​
            let t0 = wickedWitch.transition()
                .duration(1000)
                .ease(d3.easeLinear)
            let t1 = t0.transition()
                .duration(1000)
                .ease(d3.easeLinear)
            let t2 = t0.transition()
                .duration(3000)
                .ease(d3.easeBounce)
            
            exitSelection.selectAll(".actor-rect")
                    .transition(t0)
                    .style("fill", "darkgreen")
​
            t0.selectAll(".water")
                .attr("height", (height / 2) + margin.top + (rectWH / 2));
​
            t1.selectAll(".water")
                .attr("y", (rectWH / 2))
                .attr("height", 0);
​
            exitSelection.selectAll(".actor-rect")
                .transition(t2)
                .attr("width", (rectWH * 2))
                .attr("height", 0)
                .attr("y", rectWH / 2)
                .attr("x", -rectWH);
          
            let enter = update.enter();
            let merge = update.merge(enter);
                     
            merge.append("text")
                .text("Ding dong!")
                .attr("x", (rectWH/2) + 5)
                .style("opacity", 0)
                .transition(t2)
                .style("opacity", 1)
​
        }
​
        function exitMaryPoppins() {
​
            let update = maryPoppins.selectAll(".actor")
                .data(data2, function(d){ return d; })
            
            let exitSelection = update.exit();
​
            let umbrellaHeight = rectWH;
​
            let umbrellaWidth = rectWH + 20
​
            let umbrella = exitSelection.append("g")
                .attr("class", "umbrella")
                .lower()
​
            umbrella.append("line")
                .attr("x1", 0)
                .attr("y1", 0)
                .attr("x2", 0)
                .attr("y2", 0)
​
            umbrella.append("path")
                .attr("d", "M" + -(umbrellaWidth / 2) + "," + -(umbrellaHeight) + " a1,1 0 0,1 " + umbrellaWidth + ",0")
                .attr("transform", "scale(0)")
​
            let t0 = maryPoppins.transition()
                .duration(1000)
                .ease(d3.easeBounce)
    
            let t1 = t0.transition()
                .delay(50)
                .duration(3000)
                .ease(d3.easeSinIn);
​
            t0.selectAll(".umbrella").selectAll("line")
                .attr("y2", -umbrellaHeight)
​
            t0.selectAll(".umbrella").selectAll("path")
                .attr("transform", "scale(1)")
​
            exitSelection.transition(t1)
                .attr("transform", "translate(" + (width + margin.left + margin.right) + "," + -(height + margin.top) + ")");
​
        };
​
        function exitInvisibleMan() {
​
            let update = invisibleMan.selectAll(".actor").data(data2)
            let exitSelection = update.exit();
​
            let glasses = exitSelection.append("g")
                .attr("class", "glasses")
​
            glasses.append("line")
                .attr("x1", -20)
                .attr("y1", -3)
                .attr("x2", 20)
                .attr("y2", -3)
​
            glasses.append("circle")
                .attr("cx", -15)
                .attr("cy", 0)
                .attr("r", 10)
​
            glasses.append("circle")
                .attr("cx", 15)
                .attr("cy", 0)
                .attr("r", 10)
​
            let t0 = invisibleMan.transition().duration(1000)
            let t1 = t0.transition()
                .delay(50)
                .duration(3000)
                .ease(d3.easeSinIn);
​
            exitSelection.selectAll(".actor-rect").transition(t0)
                .style("opacity", 0)
            
            glasses.selectAll("circle").transition(t0)
                .style("fill", "black")
            
            glasses.selectAll("line").transition(t0)
                .style("stroke", "black")
​
            exitSelection.transition(t1)
                .attr("transform", function(d) {
                    return "translate(" + (width + margin.left + margin.right) + "," + yScale(d) + ")";
                });
​
        };
​
        function jump() {
​
            return function (d, i, a) {
                return function (t) {
​
                    let jumpDistance = margin.left * 2;
                    let jumpHeight = yScale(d) + 60;
                
                    let heightT = (0.25 - (Math.pow((t - 0.5), 2))) / 0.25
​
                    let x = margin.left - (t * jumpDistance);
                    let y = yScale(d) - (heightT * jumpHeight);
​
                    return "translate(" + x + "," + y + ")";
                };
            };
        }
​
        function didHeOrDidntHe() {
​
            return function (d, i, a) {
                return function (t) {
​
                    let rotation = -15 * t;
                    let xy = (rectWH/2 * t);
​
                    x = xScale(d) + xy;
                    y = yScale(d) + xy;
​
                    return "translate(" + x + "," + y + ") rotate(" + rotation +"," + 0 + "," + 0 + ")";
                };
            };
        }
    </script>
</body>
    