All examples By author By category About

tomshanley

Full window Github gist

Big screen .exit()

Because our .exit()s should be given the big screen treatment

<!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>

https://d3js.org/d3.v4.min.js