title: "Uncaught ReferenceError: DOM is not defined"
body: <p>I understand this line of D3 code which adds an SVG element to the body of an HTML page, and stores a reference to the new element in the variable 'svg':</p>
  
  <pre class="lang-js prettyprint-override"><code>var svg = d3.select('body').append('svg').attr('width', 500).attr('height', 50);
  </code></pre>
  
  <p>It is used, for example, in Scott Murray's book Interactive Data Visualization for the Web, 2nd Edition <a href="https://github.com/alignedleft/d3-book/blob/master/chapter_06/08_drawing_svgs.html" rel="nofollow noreferrer">here</a>. More recently I've seen this pattern: </p>
  
  <pre class="lang-js prettyprint-override"><code>const svg = d3.select(DOM.svg(500, 50));
  </code></pre>
  
  <p>(e.g. in <a href="https://observablehq.com/@d3/box-plot" rel="nofollow noreferrer">this example</a> or <a href="https://recurse.henrystanley.com/post/blagging-your-way-through-d3js/" rel="nofollow noreferrer">this tutorial</a>).</p>
  
  <p>I'd like to work out what this line does, but when I include it in my script I get the console error</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: DOM is not defined  </p>
  </blockquote>
  
  <p>What am I missing? I've read through the Scott Murray book and the D3 selection documentation (<a href="https://github.com/d3/d3-selection" rel="nofollow noreferrer">here</a>) but I cannot find the DOM.svg stuff. (<a href="https://www.google.com/search?safe=active&amp;q=&quot;DOM.svg&quot;&amp;oq=&quot;DOM.svg&quot;" rel="nofollow noreferrer">Google</a> doesn't help much either.)</p>