Uncaught ReferenceError: $$ is not defined
<p>I'm trying to programmatically create a <strong>pie chart</strong> in hopes of turning it into a React Component to reuse. Basically I need a pie chart that is clickable and each slice expands into a whole pie when clicked. I'm trying to follow <a href="https://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/" rel="nofollow noreferrer">this tutorial</a> to making <strong>pie charts</strong> and at the bottom, I have a piece of <strong>JS</strong> that I tried to test out. I ended up getting <code>Uncaught Reference Error: $$ is not defined.</code> Here's a screenshot of error message.</p>

<p><a href="https://i.stack.imgur.com/0fonJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0fonJ.png" alt="enter image description here"></a></p>

<p>My understanding is that this is not <strong>jQuery</strong> and is simply Vanilla JS. I'm not sure if this is true. I imported <strong>jQuery</strong> via a <strong>CDN</strong> and still got the same error. I read this <a href="https://stackoverflow.com/questions/1463867/javascript-double-dollar-sign">SO post</a> and I'm thinking <code>$$</code> is simply a kind of variable name notation.</p>

<p>This is the code I have in <code>index.html</code>, nothing groundbreaking.</p>

<pre><code>&lt;body&gt;
  &lt;div class="pie"&gt;20%&lt;/div&gt;
  &lt;div class="pie"&gt;60%&lt;/div&gt;
  &lt;script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    $$('.pie').forEach(function(pie) {
      var p = parseFloat(pie.textContent);
      var NS = "http://www.w3.org/2000/svg";
      var svg = document.createElementNS(NS, "svg");
      var circle = document.createElementNS(NS, "circle");
      var title = document.createElementNS(NS, "title");
      circle.setAttribute("r", 16);
      circle.setAttribute("cx", 16);
      circle.setAttribute("cy", 16);
      circle.setAttribute("stroke-dasharray", p + " 100");
      svg.setAttribute("viewBox", "0 0 32 32");
      title.textContent = pie.textContent;
      pie.textContent = '';
      svg.appendChild(title);
      svg.appendChild(circle);
      pie.appendChild(svg);
    });
  &lt;/script&gt;
&lt;/body&gt;
</code></pre>

<p>What's causing the error? Am I misunderstanding? Is the tutorial I'm following outdated/wrong? Thank you!</p>