title: D3 v5 bubble chart using pack not rendering
body: <p>I am trying to render a bubble chart using <code>.pack()</code> in D3 v5. The tutorial I'm following is outdated and uses v3 APIs which are no longer supported.</p>
  
  <p>I got stuck in rendering the nodes part, </p>
  
  <p>This is my data fetch code:</p>
  
  <pre><code>d3.json('/data').then((quotes) =&gt; {
      const root = d3.hierarchy(quotes).sum(d =&gt; Number(d.price));
      bubble(root);
      const node = svg.selectAll('.node')
        .data(root.descendants())
        .filter(d =&gt; !d.children)
        .enter().append('g')
        .attr('class', 'node')
        .each(function (d) { d.node = this })
        .attr('transform', d =&gt; `translate(${d.x}, ${d.y})`)
  </code></pre>
  
  <p>This is my bubble:</p>
  
  <pre><code>//declare layout
    const bubble = d3.pack()
      .size([width, height])
      .padding(1)
      .radius((d) =&gt; 20 + (sizeOfRadius(d) * 30))
  </code></pre>
  
  <p>And this is a subset of the data I'm trying to render:</p>
  
  <pre><code>children: [
  {
  name: "Activision Blizzard Inc",
  net_change: "-0.65",
  percent_change: "-1.36",
  price: "47.1",
  symbol: "ATVI",
  value: "-.4",
  volume: "9458326"
  },
  ]
  </code></pre>
  
  <p>My browser isn't showing any error and the svg container is empty. My guess is that I'm not feeding the correct structure of data into <code>d3.hierarchy()</code> but after some digging online, I was only able to come up with the above code which produces no error and no chart. </p>