Skip to content

Instantly share code, notes, and snippets.

@TVerduyn

TVerduyn/index.html

Last active May 16, 2018 17:40
Download ZIP
Raw
index.html
<html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id="vis"></div>
<script>
var height = 500;
var width = 700;
var margin = {top: 20, right: 20, bottom: 30, left: 50};
var vis = d3.select("#vis")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var globe = vis.append("circle")
.attr("r", 100)
.attr("cy", margin.top + height/2)
.attr("cx", margin.left + width/3)
.attr("opacity", 0.4)
.style("fill", "#00abff") ;
vis.append("line")
.style("stroke", "black")
.attr("y1", margin.top + height/2 + 110 * Math.cos(Math.PI/4))
.attr("x1", margin.left + width/3 - 110 * Math.sin(Math.PI/4))
.attr("y2", margin.top + height/2 - 110 * Math.cos(Math.PI/4))
.attr("x2", margin.left + width/3 + 110 * Math.sin(Math.PI/4));
vis.append("line")
.style("stroke", "black")
.attr("y1", margin.top + height/2 - 110 * Math.cos(Math.PI/4))
.attr("x1", margin.left + width/3 - 110 * Math.sin(Math.PI/4))
.attr("y2", margin.top + height/2 + 110 * Math.cos(Math.PI/4))
.attr("x2", margin.left + width/3 + 110 * Math.sin(Math.PI/4));
vis.append("line")
.style("stroke", "black")
.attr("y1", margin.top + height/2)
.attr("x1", margin.left + width/3 - 130)
.attr("y2", margin.top + height/2)
.attr("x2", margin.left + width/3 + 130);
vis.append("line")
.style("stroke", "black")
.attr("y1", margin.top + height/2 + 130)
.attr("x1", margin.left + width/3)
.attr("y2", margin.top + height/2 - 130)
.attr("x2", margin.left + width/3);
vis.append("line")
.style("stroke", "black")
.attr("y1", margin.top + 150)
.attr("x1", margin.left + 2*width/3 - 5)
.attr("y2", margin.top + 150)
.attr("x2", margin.left + width + 100)
.attr("opacity", 0.5);
vis.append("line")
.style("stroke", "black")
.attr("y1", margin.top + 200)
.attr("x1", margin.left + 2*width/3 - 5)
.attr("y2", margin.top + 200)
.attr("x2", margin.left + width + 100)
.attr("opacity", 0.5);
vis.append("line")
.style("stroke", "black")
.attr("y1", margin.top + 250)
.attr("x1", margin.left + 2*width/3 - 5)
.attr("y2", margin.top + 250)
.attr("x2", margin.left + width + 100)
.attr("opacity", 0.5);
var container = vis.append("g")
.attr("transform", "translate(" + (margin.left + width/3) + "," + (margin.top + height/2) + ")");
var plane1 = container.append("rect")
.attr("x", 0 )
.attr("y", 150)
.attr("width", 10)
.attr("height", 10)
.attr("opacity", 0.4)
.style("fill", "red")
var plane2 = container.append("rect")
.attr("x",0 )
.attr("y", 180)
.attr("width", 10)
.attr("height", 10)
.attr("opacity", 0.4)
.style("fill", "purple")
var plane3 = container.append("rect")
.attr("x",0 )
.attr("y", 210)
.attr("width", 10)
.attr("height", 10)
.attr("opacity", 0.4)
.style("fill", "green")
var fuel1_back = vis.append("rect")
.attr("x", margin.left + 2*width/3)
.attr("y", margin.top + 100)
.attr("width", 50)
.attr("height", 200)
.attr("opacity", 0.5)
.style("fill", "red")
var fuel1 = vis.append("rect")
.attr("x", margin.left + 2*width/3)
.attr("y", margin.top + 100)
.attr("width", 50)
.attr("height", 200)
.attr("opacity", 1)
.style("fill", "red")
var fuel2_back = vis.append("rect")
.attr("x", margin.left + 2*width/3 + 100)
.attr("y", margin.top + 100)
.attr("width", 50)
.attr("height", 200)
.attr("opacity", 0.5)
.style("fill", "purple")
var fuel2 = vis.append("rect")
.attr("x", margin.left + 2*width/3 + 100)
.attr("y", margin.top + 100)
.attr("width", 50)
.attr("height", 200)
.attr("opacity", 1)
.style("fill", "purple")
var fuel3_back = vis.append("rect")
.attr("x", margin.left + 2*width/3 + 200)
.attr("y", margin.top + 100)
.attr("width", 50)
.attr("height", 200)
.attr("opacity", 0.5)
.style("fill", "green")
var fuel3 = vis.append("rect")
.attr("x", margin.left + 2*width/3 + 200)
.attr("y", margin.top + 100)
.attr("width", 50)
.attr("height", 200)
.attr("opacity", 1)
.style("fill", "green")
var timer = 2000;
flight();
function flight() {
// fly 1/4 distance
plane1.transition()
.duration(timer)
.attr("transform", "rotate(-45)");
plane2.transition()
.duration(timer)
.attr("transform", "rotate(-45)");
plane3.transition()
.duration(timer)
.attr("transform", "rotate(-45)");
fuel1.transition()
.duration(timer)
.attr("height", 150)
.attr("y", margin.top + 150);
fuel2.transition()
.duration(timer)
.attr("height", 150)
.attr("y", margin.top + 150);
fuel3.transition()
.duration(timer)
.attr("height", 150)
.attr("y", margin.top + 150);
// top up fuel tanks
fuel1.transition()
.duration(timer/2)
.delay(timer)
.attr("height", 200)
.attr("y", margin.top + 100);
fuel2.transition()
.duration(timer/2)
.delay(timer)
.attr("height", 200)
.attr("y", margin.top + 100);
fuel3.transition()
.duration(timer/2)
.delay(timer)
.attr("height", 50)
.attr("y", margin.top + 250);
// 3 goes back
plane1.transition()
.duration(timer)
.delay(1.5*timer)
.attr("transform", "rotate(-90)");
plane2.transition()
.duration(timer)
.delay(1.5*timer)
.attr("transform", "rotate(-90)");
plane3.transition()
.duration(timer)
.delay(1.5*timer)
.attr("transform", "rotate(0)");
fuel1.transition()
.duration(timer)
.delay(1.5*timer)
.attr("height", 150)
.attr("y", margin.top + 150);
fuel2.transition()
.duration(timer)
.delay(1.5*timer)
.attr("height", 150)
.attr("y", margin.top + 150);
fuel3.transition()
.duration(timer)
.delay(1.5*timer)
.attr("height", 0)
.attr("y", margin.top + 300);
// 3 fills up, 2 fills 1
fuel1.transition()
.duration(timer/2)
.delay(2.5*timer)
.attr("height", 200)
.attr("y", margin.top + 100);
fuel2.transition()
.duration(timer/2)
.delay(2.5*timer)
.attr("height", 100)
.attr("y", margin.top + 200);
//2 goes back
plane1.transition()
.duration(timer)
.delay(3*timer)
.attr("transform", "rotate(-135)");
plane2.transition()
.duration(timer)
.delay(3*timer)
.attr("transform", "rotate(-45)");
fuel1.transition()
.duration(timer)
.delay(3*timer)
.attr("height", 150)
.attr("y", margin.top + 150);
fuel2.transition()
.duration(timer)
.delay(3*timer)
.attr("height", 50)
.attr("y", margin.top + 250);
fuel3.transition()
.duration(timer)
.delay(3*timer)
.attr("height", 200)
.attr("y", margin.top + 100);
plane1.transition()
.duration(timer)
.delay(4*timer)
.attr("transform", "rotate(-180)");
plane2.transition()
.duration(timer)
.delay(4*timer)
.attr("transform", "rotate(-0)");
fuel1.transition()
.duration(timer)
.delay(4*timer)
.attr("height", 100)
.attr("y", margin.top + 200);
fuel2.transition()
.duration(timer)
.delay(4*timer)
.attr("height", 0)
.attr("y", margin.top + 300);
// 2 fills up, 3 sets off
plane1.transition()
.duration(timer)
.delay(5*timer)
.attr("transform", "rotate(135)");
plane3.transition()
.duration(timer)
.delay(5*timer)
.attr("transform", "rotate(45)");
fuel1.transition()
.duration(timer)
.delay(5*timer)
.attr("height", 50)
.attr("y", margin.top + 250);
fuel2.transition()
.duration(timer)
.delay(5*timer)
.attr("height", 200)
.attr("y", margin.top + 100);
fuel3.transition()
.duration(timer)
.delay(5*timer)
.attr("height", 150)
.attr("y", margin.top + 150);
// 3 meets 1
plane1.transition()
.duration(timer)
.delay(6*timer)
.attr("transform", "rotate(90)");
plane3.transition()
.duration(timer)
.delay(6*timer)
.attr("transform", "rotate(90)");
fuel1.transition()
.duration(timer)
.delay(6*timer)
.attr("height", 0)
.attr("y", margin.top + 300);
fuel3.transition()
.duration(timer)
.delay(6*timer)
.attr("height", 100)
.attr("y", margin.top + 200);
// 3 refuels 1
fuel1.transition()
.duration(timer/2)
.delay(7*timer)
.attr("height", 50)
.attr("y", margin.top + 250);
fuel3.transition()
.duration(timer/2)
.delay(7*timer)
.attr("height", 50)
.attr("y", margin.top + 250);
// 2 meets 3 and 1
plane1.transition()
.duration(timer)
.delay(7.5*timer)
.attr("transform", "rotate(45)");
plane2.transition()
.duration(timer)
.delay(7.5*timer)
.attr("transform", "rotate(45)");
plane3.transition()
.duration(timer)
.delay(7.5*timer)
.attr("transform", "rotate(45)");
fuel1.transition()
.duration(timer)
.delay(7.5*timer)
.attr("height", 0)
.attr("y", margin.top + 300);
fuel2.transition()
.duration(timer)
.delay(7.5*timer)
.attr("height", 150)
.attr("y", margin.top + 150);
fuel3.transition()
.duration(timer)
.delay(7.5*timer)
.attr("height", 0)
.attr("y", margin.top + 300);
// 2 refuels 1 and 3
fuel1.transition()
.duration(timer/2)
.delay(8.5*timer)
.attr("height", 50)
.attr("y", margin.top + 250);
fuel2.transition()
.duration(timer/2)
.delay(8.5*timer)
.attr("height", 50)
.attr("y", margin.top + 250);
fuel3.transition()
.duration(timer/2)
.delay(8.5*timer)
.attr("height", 50)
.attr("y", margin.top + 250);
//return home
plane1.transition()
.duration(timer)
.delay(9*timer)
.attr("transform", "rotate(0)");
plane2.transition()
.duration(timer)
.delay(9*timer)
.attr("transform", "rotate(0)");
plane3.transition()
.duration(timer)
.delay(9*timer)
.attr("transform", "rotate(0)");
fuel1.transition()
.duration(timer)
.delay(9*timer)
.attr("height", 0)
.attr("y", margin.top + 300);
fuel2.transition()
.duration(timer)
.delay(9*timer)
.attr("height", 0)
.attr("y", margin.top + 300);
fuel3.transition()
.duration(timer)
.delay(9*timer)
.attr("height", 0)
.attr("y", margin.top + 300);
//refuel
fuel1.transition()
.duration(timer)
.delay(10*timer)
.attr("height", 200)
.attr("y", margin.top + 100);
fuel2.transition()
.duration(timer)
.delay(10*timer)
.attr("height", 200)
.attr("y", margin.top + 100);
fuel3.transition()
.duration(timer)
.delay(10*timer)
.attr("height", 200)
.attr("y", margin.top + 100);
fuel3.transition()
.duration(timer/2)
.delay(11*timer)
.attr("height", 200)
.attr("y", margin.top + 100)
.on("end", flight);;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment