title: Access svg attributes from index.html in d3.js
body: <p>I am trying to replicate this <code>d3.js</code> worldmap:</p>
  <p><a href="https://www.d3-graph-gallery.com/graph/backgroundmap_basic.html" rel="nofollow noreferrer">https://www.d3-graph-gallery.com/graph/backgroundmap_basic.html</a></p>
  <p>However I want to reorganize the code into two parts, <code>index.html</code> and <code>Worldmap.js</code>,</p>
  <p><code>index.html</code>:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;/&gt;
      &lt;title&gt;Worldmap&lt;/title&gt;
      &lt;script src=&quot;https://d3js.org/d3.v6.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=Worldmap.js&gt;&lt;/script&gt;
  
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;svg id=&quot;my_dataviz&quot; width=&quot;400&quot; height=&quot;300&quot;&gt;&lt;/svg&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><code>Worldmap.js</code>:</p>
  <pre><code>
  // The svg
  var svg = d3.select(&quot;svg&quot;),
      width = +svg.attr(&quot;width&quot;),
      height = +svg.attr(&quot;height&quot;);
  
  // Map and projection
  var projection = d3.geoNaturalEarth1()
      .scale(width / 1.3 / Math.PI)
      .translate([width / 2, height / 2])
  
  // Load external data and boot
  d3.json(&quot;https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson&quot;,
     function(data){
  
      // Draw the map
      svg.append(&quot;g&quot;)
          .selectAll(&quot;path&quot;)
          .data(data.features)
          .enter().append(&quot;path&quot;)
              .attr(&quot;fill&quot;, &quot;#69b3a2&quot;)
              .attr(&quot;d&quot;, d3.geoPath()
                  .projection(projection)
              )
              .style(&quot;stroke&quot;, &quot;#fff&quot;)
  })
  
  </code></pre>
  <p>However I get the following error:</p>
  <pre><code>Uncaught TypeError: node is null
  
  selection_attr https://d3js.org/d3.v6.js:1835
  &lt;anonymous&gt; Worldmap.js:6
  
  </code></pre>
  <p>What am I doing wrong here?
  I suppose the <code>d3.js</code> cant select the <code>svg</code> attributes from the index.html?</p>