Scale Solar System

_.md

[ Launch: Tributary inlet ] 235ff7614379f3f9dcee by seliopou

config.json

{"description":"Scale Solar System","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/A2RRuCI.png"}

inlet.js

var planets = [
  { 'name' : 'mercury', 'diameter' : 4879, 'distance' : 57.9 },
  { 'name' : 'venus', 'diameter' : 12104, 'distance' : 108.2 },
  earth = { 'name' : 'earth', 'diameter' : 12756, 'distance' : 149.6 },
  { 'name' : 'mars', 'diameter' : 6792, 'distance' : 227.9 },
  { 'name' : 'jupiter', 'diameter' : 142984, 'distance' : 778.6 },
  { 'name' : 'saturn', 'diameter' : 120536, 'distance' : 1433.5 },
  { 'name' : 'uranus', 'diameter' : 51118, 'distance' : 2872.5 },
  neptune = { 'name' : 'neptune', 'diameter' : 49528, 'distance' : 4495.1 }
];

// The svg variable is assigned to a selection containing the svg
// element that's dispayed to the left of this text box. Perform
// operations on this selection and they will immediately appear
// to the left as you code.
//
var svg = d3.select("svg")

// Create a scale model of the solar system. This will involve
// creating a circle to represent each planet. Their radii should
// be in relative proportion, as well as their distance from each
// other.
//
// The array of planetary data is availble in the `planet` variable. For
// convenience, both the `earth` and `neptune` variables are defined
// with the data for each respective planet. Pluto gets no respect.
//
// It may be a good idea to use earth to determine the basic radial
// unit for the circles. The width and height of the viewport to the
// left can be accessed through the variable:
//
//   tributary.sw
//   tributrary.sh
//
// The task of scaling the diameters and distances may trip you up. This
// tutorial is not about math so if you run into the least bit of trouble,
// please don't hesitate to ask for help.
//

d3.selectAll('circle.planet') //...

style.css

circle:nth-of-type(1) {
  fill : rgb(185, 189, 152);
}
circle:nth-of-type(2) {
  fill : rgb(205, 159, 63);
}
circle:nth-of-type(3) {
  fill : rgb(51, 133, 145);
}
circle:nth-of-type(4) {
  fill : rgb(162, 52, 37);
}
circle:nth-of-type(5) {
  fill : rgb(195, 162, 85);
}
circle:nth-of-type(6) {
  fill : rgb(188, 165, 51);
}
circle:nth-of-type(7) {
  fill : rgb(121, 161, 137);
}
circle:nth-of-type(8) {
  fill : rgb(87, 143, 130);
}