title: Uncaught (in promise) TypeError: d3.group is not a function
body: <p>I have a data set of pokemon and I want to group them by type. So there will be group of pokemon that is type fire, water, grass etc... And <strong>d3.js</strong> has a function called <a href="https://github.com/d3/d3-array/blob/master/README.md#group" rel="nofollow noreferrer">d3.group</a>.</p>
  <p>In the docs it states <em><code>Groups</code> the specified iterable of values into a <code>Map</code> from key to array of value</em>. I tried following this <a href="https://observablehq.com/@d3/d3-group" rel="nofollow noreferrer">observable tutorial</a> and I keep getting the error <code>Uncaught (in promise) TypeError: d3.group is not a function</code></p>
  <p>I have no idea what I'm doing wrong. Here is my code.
  bar_chart.js</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>drawBarChart = async() =&gt; {
    // 1. Access the data
    const dataset = await d3.csv('./pokemon.csv');
    console.log(dataset);
  
    pokemon = d3.group(dataset, d =&gt; d.type1)
  
  
    const metricAccesor = d =&gt; d.type1;
  
    // 2. create the dimensions
    const width = 600;
  }
  
  drawBarChart()</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="wrapper"&gt;&lt;/div&gt;
    &lt;script src="http://d3js.org/d3.v5.min.js"&gt;&lt;/script&gt;
    &lt;script src="./bar_chart.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://www.kaggle.com/rounakbanik/pokemon?select=pokemon.csv" rel="nofollow noreferrer">Pokemon dataset from Kaggle</a></p>
  <p>Here is my code on <a href="https://github.com/zaynaib/dataVizPractice/tree/master/Day5" rel="nofollow noreferrer">github</a></p>