JSFiddle - React, Tailwind, and code Playground

by Andy Jones

HTML

<div id="planetarium">
    </div>

CSS

.orbit {
        stroke : #000000;
        fill : none;
      }
      .planet {
        stroke : #000000;
        fill : #FFFFFF;
      }
      .sun {
        stroke : #000000;
        fill : #000000;
      }

JavaScript

var w = 400, h = 300;
      var t0 = Date.now();

      var planets = [
        { R: 50, r: 5, speed: 2, phi0: 190}
      ];


      var svg = d3.select("#planetarium").insert("svg")
        .attr("width", w).attr("height", h);

     

      var container = svg.append("g")
        .attr("transform", "translate(" + w/2 + "," + h/2 + ")")

      container.selectAll("g.planet").data(planets).enter().append("g")
        .attr("class", "planet").each(function(d, i) {
          d3.select(this).append("circle").attr("class", "orbit")
            .attr("r", d.R);
          d3.select(this).append("circle").attr("r", d.r).attr("cx",d.R)
            .attr("cy", 0).attr("class", "planet");
        });

      d3.timer(function() {
        var delta = (Date.now() - t0);
        svg.selectAll(".planet").attr("transform", function(d) {
          return "rotate(" + d.phi0 + delta * d.speed/200 + ")";
        });
      });