block by kcsluis c9ab735a877931f347d8

Moons of the Solar System

Full Screen

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<head>
	<link href='https://fonts.googleapis.com/css?family=Quicksand:300' rel='stylesheet' type='text/css'>
</head>	
<style>

body {
  background: #111;
}

input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    /*fix for FF unable to apply focus style bug */
    /*border: 1px solid white;*/
    /*required for proper track sizing in FF*/
    width: 200px;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 200px;
    height: 3px;
    background: #888;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: white;
    margin-top: -4px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}
input[type=range]::-moz-range-track {
    width: 200px;
    height: 3px;
    background: #888;
    border: none;
    border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: white;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    /*outline: 1px solid white;*/
    outline-offset: -1px;
}
input[type=range]::-ms-track {
    width: 200px;
    height: 3px;
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;
    /*remove default tick marks*/
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: white;
}
input[type=range]:focus::-ms-fill-lower {
    background: #888;
}
input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
}

.system {
  display: block;
  position: relative;
  margin: 60px auto;
  vertical-align: middle;
}

.orbit {
  fill: none;
  stroke: #888;
  stroke-dasharray: 3,5;
}

.planet {
  position: absolute;
  top: 0;
  left: 0;
  -moz-animation-name: rotate;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -webkit-animation-name: rotate;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.reverse {
  -moz-animation-name: rotateBack;
  -webkit-animation-name: rotateBack;
  animation-name: rotateBack;
}

@-moz-keyframes rotate {
  from { -moz-transform: rotateZ(0deg); }
  to { -moz-transform: rotateZ(-360deg); }
}

@-webkit-keyframes rotate {
  from { -webkit-transform: rotateZ(0deg); }
  to { -webkit-transform: rotateZ(-360deg); }
}

@keyframes rotate {
  from { transform: rotateZ(0deg); }
  to { transform: rotateZ(-360deg); }
}

@-moz-keyframes rotateBack {
  from { -moz-transform: rotateZ(-360deg); }
  to { -moz-transform: rotateZ(0deg); }
}

@-webkit-keyframes rotateBack {
  from { -webkit-transform: rotateZ(-360deg); }
  to { -webkit-transform: rotateZ(0deg); }
}

@keyframes rotateBack {
  from { transform: rotateZ(-360deg); }
  to { transform: rotateZ(0deg); }
}

.thePlanet {
  fill: #fff;
}

.moonName {
	fill: #fff;
	font-size: 7px;
	text-transform: uppercase;
	font-family: sans-serif;
}
.moonLine {
	fill: none;
	stroke: #444;
	stroke-width: 0.5px;
}

.mPlanetCircle {
	fill: #aaa;
	stroke: #444;
}
.saturnRings {
	fill: #444;
}
.saturnRingsInner {
	fill: #111;
}
.mPlanetName {
	color: #fff;
	font-size: 28px;
	text-transform: uppercase;
	font-family: 'Quicksand', sans-serif;
}

.moonComp {
	fill: none;
	stroke: #fff;
}

.intro {
	margin: 160px auto;
}
h1 {
	color: #fff;
	text-align: center;
	font-family: 'Quicksand', sans-serif;
	font-size: 144px;
	margin-bottom: -24px;
}
h2 {
	color: #888;
	text-align: center;
	font-family: 'Quicksand', sans-serif;
	font-size: 18px;
}
h3 {
	color: #fff;
	text-align: center;
	font-family: 'Quicksand', sans-serif;
	font-size: 48px;
	margin-bottom: 24px;
	text-transform: uppercase;
}
p {
	color: #ddd;
	text-align: center;
	font-family: sans-serif;
	font-size: 11px;
	letter-spacing: 1.1px;
	line-height: 2;
	text-transform: uppercase;
}
p a {
	color: #ddd;
}
p a:hover {
	color: #fff;
}
p a:visited {
	color: #ddd;
}
.intro_copy {
	max-width: 540px;
	margin: 0px auto;
	margin-top: 80px;
}

.controls {
	position: fixed;
	width: 200px;
	right: 27px;
	bottom: 90px;
	z-index: 10000;
}
.controlBackground {
	position: fixed;
	right: 0px;
	bottom: 0px;
	height: 150px;
	width: 250px;
	z-index: 5000;
	background-color: rgba(17,17,17,0.8);
}
.slider {
	position: fixed;
	width: 200px;
	right: 25px;
	z-index: 10000;
}
.slider:hover {
	cursor: pointer;
}
.control_label {
	color: #fff;
	font-family: sans-serif;
	font-size: 9px;
}
.cl0 {
	position: relative;
	top: 4px;
}
.cl1 {
	position: relative;
	top: 10px;
}
.cl2 {
	position: relative;
	top: 41px;
}
.planetLabel {
	margin-left: 12.5%;
	position: relative;
	z-index: 1000;
}
.head_label {
	font-family: 'Quicksand', sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	margin-top: 10px;
}

.moonProfiles {
	color: #fff;
	text-align: center;
	font-family: sans-serif;
	font-size: 12px;
}
.moonProfile {
	margin: 60px auto;
}
.moonTitle {
	font-family: 'Quicksand', sans-serif;
	font-size: 28px;
	text-transform: uppercase;
	position: absolute;
}
.moonDetails {
	position: absolute;
	text-transform: uppercase;
	font-size: 9px;
	color: #888;	
}
.profileSVG {
	/*fill: none;*/
	fill: url(#diagonal-stripe-6);
	stroke: #fff;
	stroke-width: 3px;	
}
.moonShadow {
	fill: #111;
	stroke: none;
	opacity: 0.5;
}

.middle_text {
	margin-top: 80px;
	margin-bottom: 140px;
}

</style>
<body>

<div class="starryNight"></div>

<svg class="svg_pattern" height="10" width="10" xmlns="//www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="diagonal-stripe-6" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSdibGFjaycvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J3doaXRlJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+" x="0" y="0" width="10" height="10"> </image> </pattern> </defs> </svg>

<div class="intro">

	<h1>MOONS</h1>
	<h2>of the Solar System</h2>

	<div class="intro_copy">
		<p>Orbits of all round-bodied moons of the solar system</p>
	</div>

</div>

<div class="controlBackground"></div>
<div class="controls">
	<div class="control_label head_label">Orbit Scales</div>
	<div class="control_label cl0">Planet Diameter: 1 pixel = 6000 km</div>
	<div class="control_label cntrlRadius cl1">Moon Radius</div>
	<input 
		class="slider"
		style="bottom: 70px;"
		type="range"
		min="0.08333"
		max="8"
		step="0.1"
		id="moonRadius"
	>
	<div class="control_label cntrlSpeed cl2">Rotation Speed</div>
	<input 
		class="slider"
		style="bottom: 30px;"
		type="range"
		min="0.1"
		max="5"
		step="0.1"
		id="moonSpeed"
	>
</div>

<div class="planetSystems">
	<div class="system Earth"></div>
	<div class="system Jupiter"></div>
	<div class="system Saturn"></div>
	<div class="system Uranus"></div>
	<div class="system Neptune"></div>
</div>

<div class="moonProfiles">
	<p class="middle_text">All moons, together</p>
	<div class="profilesEarth"></div>
	<div class="profilesJupiter"></div>
	<div class="profilesSaturn"></div>
	<div class="profilesUranus"></div>
	<div class="profilesNeptune"></div>
</div>
	<p class="middle_text">Curious? <a href="https://en.wikipedia.org/wiki/List_of_natural_satellites">Learn more on Wikipedia</a></p>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>


function getWidth() {
  if (self.innerHeight) {
    return self.innerWidth;
  };
  if (document.documentElement && document.documentElement.clientHeight) {
    return document.documentElement.clientWidth;
  };
  if (document.body) {
    return document.body.clientWidth;
  };
};
var browserWidth = getWidth();
var topRange = browserWidth/20;


// Scales for semimajor axis, planet radius, and planet period.
var x = d3.scale.linear().range([0, topRange]),
    r = d3.scale.linear().domain([0.3, 5.2]).range([0,10]),
    mr = d3.scale.linear().domain([0, 1400]).range([0,120]),
    c = d3.scale.linear().domain([0.1, 6]).range([1,60]),
    t = d3.scale.linear().range([0, 3]);

// Detect the appropriate vendor prefix.
var prefix = "-webkit-transform" in document.body.style ? "-webkit-"
    : "-moz-transform" in document.body.style ? "-moz-"
    : "";

d3.csv('solarsystem.csv', function(error, mPlanets) {

	mPlanets.forEach( function (d) {

		if (d.mPlanetMoons === 'x'){  //no moons

		} else {											//moons

			var csv = d.mPlanetMoons;
			var mPlanetName = d.mPlanetName;


			// LOOPS THROUGH EACH SEPARATE CSV FOR MOONS (TODO: REFACTOR INTO ONE SHEET)

			d3.csv(csv + '.csv', type, function(error, planets) {

				var numMoons = planets.length;
				var maxRadius = x(planets[numMoons-1].semimajor_axis);
				var width = browserWidth-16;
				var moonWidth = maxRadius*2;
				var height = maxRadius*2+40;


				// MOON PROFILES

				var moonProfileScale = 40;
				var uniqueProfileName = 'div.profiles' + mPlanetName;	
				var profileSection = d3.select(uniqueProfileName).selectAll('div.moonProfile')
					.data(planets)
					.enter()
					.append('div')
					.attr('class', function (d) { return d.planet_name + 'Profile moonProfile'; });
				profileSection.append('div')
					.attr('class', 'moonTitle')
					.text( function (d) { return d.planet_name; })
					.style('left', (width*0.75+6) + 'px')
					.style('margin-top', function (d) { return (d.planet_radius*moonProfileScale-16) + 'px'; });
				profileSection.append('div')
					.attr('class', 'moonDetails')
					.style('left', (width*0.75+6) + 'px')
					.style('margin-top', function (d) { return (d.planet_radius*moonProfileScale+20) + 'px'; })
					.text( function (d) { 
						return "Diameter: " + d.planet_radius*1000 + " km"; 
					});
				profileSection.append('div')
					.attr('class', 'moonDetails')
					.style('left', (width*0.75+6) + 'px')
					.style('margin-top', function (d) { return (d.planet_radius*moonProfileScale+32) + 'px'; })
					.text( function (d) { 
						return "Period: " + Math.abs(d.period.toFixed(1)) + " days"; 
					});
				var moonProfileSVG = profileSection.append('svg')
					.attr('class', 'profileSVG')
					.attr('height', function (d) { return d.planet_radius*moonProfileScale*2+4; })
					.attr('width', function (d) { return d.planet_radius*moonProfileScale*2+4; });
				moonProfileSVG.append('circle')
					.attr("class", function (d) { return "moonProfileSVG " + d.planet_name; })
					.attr('r', function (d) { return d.planet_radius*moonProfileScale; })
					.attr('cx', function (d) { return d.planet_radius*moonProfileScale+2; })
					.attr('cy', function (d) { return d.planet_radius*moonProfileScale+2; });
				moonProfileSVG.append('rect')
					.attr('class', 'moonShadow')
					.attr('y', function (d) { return (d.planet_radius*moonProfileScale*2+4)/2; })
					.attr('x', 0)
					.attr('height', function (d) { return (d.planet_radius*moonProfileScale*2+4)/2; })
					.attr('width', function (d) { return d.planet_radius*moonProfileScale*2+4; });


				// PRIMARY ORBIT VIS

				d3.select("div." + mPlanetName)
				   .style("width", width + "px")
				   .style("height", height+40 + "px");
				var planet = d3.select('div.' + mPlanetName).selectAll(".planet")
				   .data(planets.sort(function(a, b) { return b.planet_radius - a.planet_radius; }))
				   .enter();
				var moons = planet.append("svg")
				    .attr("class", function (d) {
				    	if (d.period > 0) {
				    		return "planet";
				    	} else {
				    		return "planet reverse";
				    	};
				    })
				    .attr("width", width)
				    .attr("height", height)
				    .style(prefix + "animation-duration", function(d) { return t(Math.abs(d.period)) + "s";})
				    .style(prefix + "transform-origin", width / 2 + "px " + height / 2 + "px");
				moons.append('circle')
				  	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
				  	.attr('class', 'orbit')
				  	.attr('cx', 0)
				  	.attr('cy', 0)
				  	.attr("r", function(d) { return x(d.semimajor_axis); });
				moons.append("circle")
				    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
				    .attr("cx", function(d) { return x(d.semimajor_axis); })
				    .attr("r", function(d) { return r(d.planet_radius); })
				    .attr('class', 'thePlanet');

				var NC = d3.select('div.' + mPlanetName).append('svg').attr('class','nameContainer')
						.style("width", width + "px")
				    .style("height", height + "px");
				var NCS = NC.selectAll('svg.nameContainer')
						.data(planets)
						.enter();
				NCS.append('text')
						.attr('class', 'moonName')
						.attr('dx', width*0.75+6)
						.attr('dy', function (d) { return -x(d.semimajor_axis)+3; })
						.attr("transform", "translate(0," + height/2 + ")")
						.text(function (d) { return d.planet_name; });
				NCS.append('line')
						.attr("transform", "translate(0," + height/2 + ")")
						.attr('class', 'moonLine')
						.attr('x1', width*0.5)
						.attr('x2', width*0.75)
						.attr('y1', function (d) { return -x(d.semimajor_axis); })
						.attr('y2', function (d) { return -x(d.semimajor_axis); });
				if (csv === 'saturn_moons') {
						NCS.append('circle')
								.attr('class', 'saturnRings')
								.attr('r', mr(241))
								.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
						NCS.append('circle')
								.attr('class', 'saturnRingsInner')
								.attr('r', mr(150))
								.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
				};
				NCS.append('circle')
						.attr('class', 'mPlanetCircle')
						.attr('r', mr(d.mPlanetRadius))
						.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

				var thisPlanetName = d3.select("." + mPlanetName)
						.append('div')
						.style('top', (-(height/2+20)) + "px")
						.attr('class', 'planetLabel');
				thisPlanetName.append('div')
						.attr('class', 'mPlanetName')
						.text(mPlanetName);

				// controls for radius
				d3.select("#moonRadius").on("input", function() {
					moonRadius(+this.value);
				});
				moonRadius(4);
				// update the elements
				function moonRadius(moonRadius) {
				  d3.select("#moonRadius-value").text(moonRadius);
				  d3.select("#moonRadius").property("value", moonRadius);
				  r = d3.scale.linear().range([1,moonRadius]);
				  d3.selectAll('circle.thePlanet')
				  	.attr("r", function(d) { return r(d.planet_radius); });
				  d3.select('.cntrlRadius')
				  	.text("Moon Diameter : 1 pixel = " + (500/moonRadius).toFixed(0) + " km");
				};

				// controls for speed
				d3.select("#moonSpeed").on("input", function() {
					moonSpeed(+this.value);
				});
				moonSpeed(2.5);
				// update the elements
				function moonSpeed(moonSpeed) {
				  d3.select("#moonSpeed-value").text(moonSpeed);
				  d3.select("#moonSpeed").property("value", moonSpeed);
				  t = d3.scale.linear().range([0, moonSpeed]);
				  d3.selectAll('svg.planet')
				  	.style(prefix + "animation-duration", function(d) { return t(Math.abs(d.period)) + "s";})
				  d3.select('.cntrlSpeed')
				  	.text("Rotation Speed : 1 sec = " + moonSpeed.toFixed(1) + " days");
				};

			});

			function type(d) {
			  d.period = +d.period;
			  d.planet_radius = +d.planet_radius;
			  d.semimajor_axis = +d.semimajor_axis;
			  return d;
			};

		};

	});

});

</script>

earth_moons.csv

period,planet_radius,semimajor_axis,planet_name
27.321,3.474,1,Moon

jupiter_moons.csv

period,planet_radius,semimajor_axis,planet_name
1.769,3.6,1.097034339,Io
3.551,3.1,1.745665973,Europa
7.154,5.2,2.784630593,Ganymede
16.689,4.8,4.89778616,Callisto

neptune_moons.csv

period,planet_radius,semimajor_axis,planet_name
-5.87,2.7,0.922890219,Triton

saturn_moons.csv

period,planet_radius,semimajor_axis,planet_name
0.942,0.396,0.482320499,Mimas
1.37,0.504,0.619016649,Enceladus
1.888,1.062,0.766438606,Tethys
2.737,1.123,0.981779396,Dinoe
4.518,1.527,1.371248699,Rhea
15.945,5.149,3.178798127,Titan
79.322,1.467,9.263319459,Iapetus

solarsystem.csv

mPlanetName,mPlanetMoons,mPlanetRadius
Sun,x,1390
Mercury,x,4.8
Venus,x,12.1
Earth,earth_moons,12.6
Mars,x,6.6
Jupiter,jupiter_moons,142.2
Saturn,saturn_moons,120.4
Uranus,uranus_moons,51.1
Neptune,neptune_moons,49.4

uranus_moons.csv

period,planet_radius,semimajor_axis,planet_name
1.41,0.472,0.335587929,Miranda
2.52,1.157,0.496878252,Ariel
4.14,1.169,0.691987513,Umbriel
8.71,1.577,1.133975026,Titania
13.46,1.522,1.517950052,Oberon