title: D3 draw sub circle
body: <p>I'm new to D3 and I'm trying to draw something like this</p>
  
  <p><a href="https://i.stack.imgur.com/DmWuL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DmWuL.png" alt="enter image description here"></a></p>
  
  <p>What I have done so far is here: 
  <a href="https://jsfiddle.net/834wg3g9/" rel="nofollow noreferrer">https://jsfiddle.net/834wg3g9/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  
  &lt;style&gt;
      .cover {
          width: 400px;
          height: 400px;
          /* border: 1px solid; */
          margin: auto;
          margin-top: 100px;
      }
  
  &lt;/style&gt;
  
  &lt;div class="cover"&gt;
      &lt;svg&gt;&lt;/svg&gt;
  &lt;/div&gt;
  
  &lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      // let width = window.innerWidth
      // let height = window.innerHeight
      let width = 400
      let height = 400
      let svg = d3.select("svg")
      svg.attr("width", width)
      .attr("height", height)
  
      // let nodes = [
      //     {'id': 0,'r': 50, 'color': '#E8837B'},
      //     {'id': 1,'r': 100, 'color': '#FBCB43'},
      //     {'id': 2,'r': 150, 'color': '#16A05D'},
      //     {'id': 3,'r': 200, 'color': '#4C8BF5'},
      // ]
  
      let nuts = [
          {r: 15},
          {r: 15},
          {r: 15},
          {r: 15},
          {r: 15},
          {r: 15},
      ]
  
      let nodes = [
          {'id': 3,'r': 400, 'color': '#E8837B'},
          {'id': 1,'r': 330, 'color': '#FBCB43'},
          {'id': 2,'r': 250, 'color': '#16A05D'},
          {'id': 0,'r': 150, 'color': '#4C8BF5'},
      ]
  
      let simulation = d3.forceSimulation()
      .force('center', d3.forceCenter(width/2, height/2))
  
      let simulation_2 = d3.forceSimulation()
      .force('charge', d3.forceManyBody().strength(-30))
      .force('center', d3.forceCenter(width/2, height/2))
  
      let nodeElements = svg.append('g')
      .selectAll('circle')
      .data(nodes)
      .enter().append('circle')
          .attr("class", "node")
          .attr('r', function(d) {
              return d.r
          })
          .attr('fill', function(d) {
              return d.color
          })
  
      let bottomLineElements = svg.append('g')
      .selectAll('text')
      .data(nodes)
      .enter().append('text')
          .text(function(d) {
              return d.color
          })
  
      let nutElements = svg.append('g')
      .selectAll('circle')
      .data(nuts)
      .enter().append('circle')
          .attr('fill', 'white')
          .attr('r', function(d) { return d.r })
  
      simulation_2.nodes(nuts)
      .on('tick', function() {
          nutElements
          .attr('cx', function (d) { return d.x })
          .attr('cy', function (d) { return d.y })
      })
      simulation.nodes(nodes)
      .on('tick', function() {
          nodeElements
          .attr('cx', function (d) { return 400 })
          .attr('cy', function (d) { return 400 })
          bottomLineElements
          .attr('x', function (d) { return 20 + (d.id * 80) })
          .attr('y', function (d) { return 400 })
      })
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Now I'm stuck at draw "New or moved" and "No change" part
  How can append a bunch of sub circle to each area and make sure they don't display in wrong area</p>
  
  <p>For example: 
  hold = [{}, {}, {}] 
  so 3 small circles will display in Hold area</p>
  
  <p>Any advice, keywords to solve this
  Thank you.</p>