Moons of the Solar System

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

<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="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>

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

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

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js