Adding objects per each JSON data record
<p>How do I add new elements (by this I mean planets) to the below stellar system in the code snippet, based on JSON data such as this: </p>

<pre><code>        [{
           "rowid": 1,
           "Radius size": 3 ,
           "Distance": 110 pixels,
        },
         {
           "rowid": 2,
           "Size": 2.5,
           "Distance": 120 pixels,
        }]
</code></pre>

<p>Each row ID is its own planet with its own size and position. The distance is of course based on the distance of the planet from the sun element, which is center of the page. The distance per planet needs to be in a different angle, otherwise they'd all line up perfectly (unrealistic). Any ideas on how this can be achieved? </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var ball = {};

function makeBall(spec) {
  // Create the element
  var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  // Set its various attributes
  ["id", "cx", "cy", "r", "class"].forEach(function(attrName) {
    if (spec.element[attrName]) {
      circle.setAttribute(attrName, spec.element[attrName]);
    }
  });
  // Add it to the sun
  document.getElementById("Sun2").appendChild(circle);
  // Remember its animation settings in `ball`
  ball[spec.element.id] = spec.animation;
}

function addObject() {
  // Create a spec to use with makeBall from the fields
  var spec = {
    element: {
      id: document.getElementById("new-id").value,
      class: document.getElementById("new-class").value,
      r: parseFloat(document.getElementById("new-r").value)
    },
    animation: {
      speed: 2,
      spin: 30,
      side: 40
    }
  };
  // Some minimal validation
  if (!spec.element.id || !spec.element.r || !spec.animation.speed || !spec.animation.spin || isNaN(spec.animation.side)) {
    alert("Need all values to add a ball");
  } else if (ball[spec.element.id]) {
    alert("There is already a ball '" + spec.element.id + "'");
  } else {
    // Do it!
    makeBall(spec);
  }
}

function rotation(coorX, coorY, object) {
  object.side += (1.0 / object.speed);
  var ang = object.side * 2.0 * Math.PI / 180.0;
  var r = object.spin;

  return {
    x: Math.cos(ang) * r - Math.sin(ang) * r + coorX,
    y: Math.sin(ang) * r + Math.cos(ang) * r + coorY
  };
}

function rotationball(circle) {
  var x, y, x_black, y_black, e, newpos, black;

  // We always rotate around black
  black = document.getElementById("black");
  
  // Get this circle and update its position
  e = document.getElementById(circle);
  x_black = parseFloat(black.getAttribute("cx"));
  y_black = parseFloat(black.getAttribute("cy"));
  newpos = rotation(x_black, y_black, ball[circle]);

  e.setAttribute("cx", newpos.x);
  e.setAttribute("cy", newpos.y);
}

function animate() {
  Object.keys(ball).forEach(function(id) {
    rotationball(id);
  });
}

var animateInterval = setInterval(animate, 1000 / 60);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.st0 {
  fill: yellow;
}

.st1 {
  fill: orange;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;Add ball:
  &lt;label&gt;
    ID: &lt;input type="text" id="new-id" value="newball"&gt;
  &lt;/label&gt;
  &lt;label&gt;
    R: &lt;input type="text" id="new-r" value="10"&gt;
  &lt;/label&gt;
  &lt;label&gt;
    Speed: &lt;input type="text" id="new-speed" value="1.2"&gt;
  &lt;/label&gt;
  &lt;label&gt;
    Spin: &lt;input type="text" id="new-spin" value="80"&gt;
  &lt;/label&gt;
  &lt;label&gt;
    Side: &lt;input type="text" id="new-side" value="0.0"&gt;
  &lt;/label&gt;
  &lt;label&gt;
    Class: &lt;input type="text" id="new-class" value="st1"&gt;
  &lt;/label&gt;
  &lt;button type="button" onclick="addObject()"&gt;
    Make Ball
  &lt;/button&gt;
&lt;/div&gt;

&lt;div class="spinning"&gt;
  &lt;svg xmlns="http://www.w3.org/2000/svg" id="solly" viewBox="0 0 1000 600"&gt;
    &lt;g id="Sun2"&gt;
      &lt;circle id="black" class="st0" cx="500" cy="300.8" r="10" /&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
&lt;/div&gt;</code></pre>
</div>
</div>

The above is code (not entirely mine), that adds new balls (planets) if it has its own ID. I just want to switch this up with the JSON dataset. </p>

<p>EDIT: 
Below are original examples of two records. As you can see it offers a lot more but redundant properties. All I really require from each record are the size (Planet Radius [Jupiter radii] and distance (Distance [pc]). Distance would need to be converted to pixels, size is trickier. </p>

<pre><code>     [{
       "rowid": 1,
       "Host name": "TrES-3",
       "Number of Planets in System": 1,
       "Planet Mass or M*sin(i)[Jupiter mass]": 1.91,
       "Planet Radius [Jupiter radii]": 1.336,
       "Planet Density [g": {
          "cm**3]": 0.994
       },
       "Distance [pc]": 228,
       "Effective Temperature [K]": 5650,
       "Date of Last Update": "5/14/2014"
    },
     {
       "rowid": 2,
       "Host name": "UZ For",
       "Number of Planets in System": 2,
       "Planet Mass or M*sin(i)[Jupiter mass]": 6.3,
       "Planet Radius [Jupiter radii]": null,
       "Planet Density [g": {
          "cm**3]": null
       },
       "Distance [pc]": null,
       "Effective Temperature [K]": null,
       "Date of Last Update": "5/14/2014"
    }]
</code></pre>