Skip to content

Instantly share code, notes, and snippets.

@eesur

eesur/README.md

Last active January 22, 2018 12:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eesur/4c1012422e4fd8afbb60 to your computer and use it in GitHub Desktop.
Save eesur/4c1012422e4fd8afbb60 to your computer and use it in GitHub Desktop.
Download ZIP
d3 | Travelling to planets
Raw
README.md

Travelling to planets

Came across this vintage data viz (the b/w image), not sure how they got the figures, perhaps plane speeds at the time? I've added some more recent ones for comparison, referenced from astronomycafe and also dustbunny. note: dustbunny had the data from the Sun, so used it to calculate it from the Earth as the reference.

Just move over the planets to view. As the planets move along their orbital paths they move nearer and further in comparison to each other all the time, so all just for play.

It's very hard for us to understand just how large the solar system is. Scientists tell us that the largest number our minds can really comprehend, or grasp, is about a hundred thousand (100,000). When you begin talking about the distances between planets, which are measured in millions, or billions, of miles, our minds just don't keep up very well. When you add the habit that adults have of making things more complicated than they need to be, it gets even harder …

… we will also tell you how long it would take to drive to the planets in your car at seventy miles per hour, as well as fly there in a jet plane going 600 miles per hour. Remember, the planets are not in a straight line going out from the Sun. They are always moving around the Sun, so they are hardly ever lined up in a row. The distances we use are from the Sun to the planets' average distance from the Sun.

source

How long will it take to get to each of the planets by various means?

It depends a lot on the particular trajectory that you take.

The Space Shuttle, of course, can't leave Earth orbit but its speed is typical of manned spacecraft. The Galileo spacecraft which recently explored Jupiter traveled twice as fast. Ion rocket motors get their speed by being constantly accelerated 24-hours a day for many months, and two versions of this technology are given for a low-power and high-power ion engine. Finally, solar sails can reach speeds of nearly that of the solar wind, and engineers are hopeful that this technology will be tested in space very soon. As you can see, we are currently stuck in the mode of travel where it takes nearly 10 years to get to Pluto. Perhaps in another hundred years, this travel time will be reduced to a year or less...assuming Humanity feels a compelling economic need to continue this kind of exploration.

source

Raw
d3_code_grid.js
(function() {
'use strict';
var width = 960,
height = 630;
// margin not used as want it to be flush
var svg = d3.select('#vis').append('svg')
.attr({
class: 'axis',
width: width,
height: height
});
function renderXAxis() {
var scale = d3.scale.linear()
.domain([0, width])
.range([0, width]);
var xAxis = d3.svg.axis()
.scale(scale)
.orient('top')
.ticks(40);
svg.append('g')
.attr({
class: 'x-axis',
transform: function() {
return 'translate(0,' + height + ')';
}
})
.call(xAxis);
d3.selectAll('g.x-axis g.tick')
.append('line')
.classed('grid-line', true)
.attr({
x1: 0,
y1: 0,
x2: 0,
y2: -height
});
}
function renderYAxis() {
var scale = d3.scale.linear()
.domain([0, height]) // want to keep y as it is
.range([0, height]);
var yAxis = d3.svg.axis()
.scale(scale)
.orient('right')
.ticks(20);
svg.append('g')
.attr({
class: 'y-axis',
transform: 'translate(0, 0)'
})
.call(yAxis);
d3.selectAll('g.y-axis g.tick')
.append('line')
.classed('grid-line', true)
.attr({
x1: 0,
y1: 0,
x2: width,
y2: 0
});
}
d3.select('#grid-bt').on('click', function() {
var grid = d3.selectAll('g.tick');
if (grid.empty()) {
renderYAxis();
renderXAxis();
} else {
grid.remove();
}
});
})();
Raw
d3_code_hotspots.js
(function() {
'use strict';
var data = [
{
planet: 'Moon',
shuttle: null,
galileo:null,
ionA: null,
ionB: null,
solarSail: null,
poster: 0.134,
jet: null,
car: null,
x: 120,
y: 300,
r: 60
},
{
planet: 'Neptune',
shuttle: 11.4,
galileo: 5.9,
ionA: 4.9,
ionB: 0.490086, // 179d,
solarSail: 1.6,
poster: 1528,
jet: 495,
car: 4248,
x: 365,
y: 30,
r: 30
},
{
planet: 'Uranus',
shuttle: 7.3,
galileo: 3.8,
ionA: 3.1,
ionB: 0.309384,// 113d
solarSail: 1,
poster: 917,
jet: 310,
car: 2657,
x: 440,
y: 75,
r: 30
},
{
planet: 'Saturn',
shuttle: 3.6,
galileo: 1.8,
ionA: 1.5 ,
ionB: 0.150585, //55d
solarSail: 0.490086 ,//179d
poster: 425,
jet: 145,
car: 1244,
x: 570,
y: 75,
r: 60
},
{
planet: 'Nearest Star',
shuttle: null,
galileo: null,
ionA: null,
ionB: null,
solarSail: null,
poster: 425,
jet: null,
car: null,
x: 608,
y: 172,
r: 5
},
{
planet: 'Jupiter',
shuttle: 1.9,
galileo: 1,
ionA: 0.829587, //303d
ionB: 0.0848752, //31d
solarSail: 0.273791,//100d
poster: 209,
jet: 71,
car: 610,
x: 705,
y: 125,
r: 55
},
{
planet: 'Mars',
shuttle: 0.574961,//210d
galileo: 0.298432,//109d
ionA: 0.246412 ,//90d
ionB: 0.0246412,//9d
solarSail: 0.0793994,//29d
poster: 20,
jet: 8,
car: 71,
x: 600,
y: 300,
r: 35
},
{
planet: 'Pluto',
shuttle: 15.1,
galileo: 7.8,
ionA: 6.5 ,
ionB: 0.651622,//238d
solarSail: 2.1,
poster: 20,
jet: 657,
car: 5548,
x: 867,
y: 187,
r: 25
},
{
planet: 'Venus',
shuttle: 0.273791,//100d
galileo: 0.142371,//52d
ionA: 0.11773,//43d
ionB: 0.011773,//4.3d
solarSail: 0.011773,//14d
poster: 14,
jet: 6,
car: 46,
x: 650,
y: 418,
r: 40
},
{
planet: 'Sun',
shuttle: null,
galileo: null,
ionA: null,
ionB: null,
solarSail: null,
poster: 53,
jet: 18,
car: 152,
x: 845,
y: 410,
r: 75
},
{
planet: 'Mercury',
shuttle: 0.142371,//52d
galileo: 0.0739236,// 27d
ionA: 0.060234,//22d
ionB: 0.0060234,//2.2d
solarSail: 0.0199867,//7.3d
poster: 28,
jet: 11,
car: 95,
x: 930,
y: 503,
r: 30
}
]
console.log(data);
// vars
var svg = d3.select('svg'); // already added via the grid
svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr({
r: function(d) { return d.r },
cx: function(d) { return d.x },
cy: function(d) { return d.y }
})
.style({
fill: 'transparent',
stroke: 'none'
})
.on('mouseover', function(d, i) {
d3.select('header h1').text(d.planet);
d3.select('header p').html(
'<span>Shuttle @ 28,000mph: </span>' + d.shuttle + '<br>' +
'<span>Galileo @ 54,000mph: </span>' + d.galileo + '<br>' +
'<span>Ion A @ 65,000mph: </span>' + d.ionA + '<br>' +
'<span>Ion B @ 650,000mph: </span>' + d.ionB + '<br>' +
'<span>Solar Sail @ 200,000mph: </span>' + d.solarSail + '<br>' +
'<span id="poster">Poster time: ' + d.poster + ' </span><br>' +
'<span>Jet plane @ 600mph: </span>' + d.jet + '<br>' +
'<span>By car @ 70mph: </span>' + d.car + '<br>'
);
});
})();
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>d3 | hotspots</title>
<meta name="author" content="Sundar Singh | eesur.com">
<link rel="stylesheet" href="main.css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<header>
<h1>move over planets</h1>
<p>Duration in years to 'planets'</p>
<nav><button id="grid-bt">GRID</button></nav>
</header>
<section id="vis"></section>
<script src="d3_code_grid.js" charset="utf-8"></script>
<script src="d3_code_hotspots.js" charset="utf-8"></script>
</body>
</html>
Raw
main.css
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400,600);
body {
font-family: "Source Code Pro", Consolas, monaco, monospace;
line-height: 1.5;
font-weight: 400;
background-color: #130C0E;
padding: 0;
/*margin: 0;*/
margin: 0 auto;
width: 960px;
height: 100px;
}
h1 {
font-size: 48px;
color: #7AC143;
font-weight: 400;
margin: 0;
padding: 0;
line-height: 100%;
}
p {
font-size: 18px;
color: #7AC143;
font-weight: 400;
margin: 0;
padding: 0;
letter-spacing: 6px;
text-transform: uppercase;
}
p span {
letter-spacing: 1px;
color: #EE3124;
font-size: 14px;
}
span#poster {
color: #FDBB30;
}
text {
font-size: 14px;
fill: #7AC143;
}
#vis {
background-image: url("https://dl.dropboxusercontent.com/s/o70zlvdmfzwggni/panets_distance_viz.jpg");
background-repeat: no-repeat;
background-size: 960px 630px;
}
header {
background: transparent;
z-index: 22;
position: absolute;
height: 88px;
padding: 20px;
pointer-events: none;
}
button {
font-family: "Source Code Pro", Consolas, monaco, monospace;
font-size: 14px;
background: #130C0E;
color: #7AC143;
border: none;
outline:none;
padding: 4px 8px;
letter-spacing: 1px;
pointer-events: all;
}
button:hover {
background: #7AC143;
color: #130C0E;
}
nav {
width: 960px;
}
#grid-bt {
position: absolute;
display: block;
right: 40px;
top: 0;
}
.axis path, .axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis line {
stroke: black;
}
.axis text {
font: 10px sans-serif;
}
.axis .grid-line{
stroke: #7AC143;
shape-rendering: crispEdges;
stroke-opacity: .8;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment