JSFiddle - React, Tailwind, and code Playground

by Chris Maloney

JavaScript

// Reference for planet data:
// http://www.windows2universe.org/our_solar_system/planets_table.html
var scale = {
  size: 0.002, // pixels / km
  orbit: 100,   // pixels / AU
  time: 5,    // second / earth year
};
var width = 200;
var height = 200;
var planets = [
  { name: "mercury",
    radius: 2439,    // in kilometers
    color: "yellow",
    orbit: {
      radius: 0.39,  // in AU
      angle: 5,      // initial value is arbitrary
      period: 0.24,  // in earth years
    },
  },
  { name: "venus",
    radius: 6052,
    color: "orange",
    orbit: {
      radius: 0.72,
      angle: 2,
      period: 0.62,
    },
  },
];
// These control transitions
var tick = 0.1;  // one second per iteration "tick"
// How much time is one tick, in units of earth years?
var earth_years_per_tick = tick / scale.time;

function orbitX(planet) { 
  var x = scale.orbit * planet.orbit.radius *
    Math.cos(planet.orbit.angle); 
  return x;
}
function orbitY(planet) { 
  var y = scale.orbit * planet.orbit.radius *
    Math.sin(-planet.orbit.angle)
  return y; 
}

var svg = d3.select('body').append('svg')
  .attr("width", width)
  .attr("height", height)
  .style("border", "1px solid black")
  .append("g")
    .attr("transform", 
      `translate(${width/2}, ${height/2})`);

svg.selectAll('circle').data(planets)
  .enter()
  .append('circle')
  .attr('r', planet => scale.size * planet.radius)
  .attr('fill', planet => planet.color)
  .attr('cx', orbitX)
  .attr('cy', orbitY)
  .style({
    stroke: "black",
    "stroke-width": "0.5px",
  })
  .each(orbit);

function orbit() {
  var planet = this.__data__;
  // how far around does this planet go in one tick?
  var orbital_fraction_per_tick = earth_years_per_tick /
    planet.orbit.period;
  // what's that in radians?
  var angle_per_tick = 2 * Math.PI * 
    orbital_fraction_per_tick;
  planet.orbit.angle += angle_per_tick;
  d3.select(this).transition()
    .duration(tick * 1000)
    .ease("linear")
    .attr('cx', orbitX)
   ...