“Uncaught ReferenceError: DOM is not defined”

Question

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\':

Answer 1

To expand on the previous answer, DOM is indeed part of the standard library in Observable. You can use it and the rest of the standard library methods outside of Observable by exporting or embedding a notebook, as described in the Downloading and Embedding Notebooks documentation page.

Answer 2

That's neither a standard Javascript object nor a D3 method. That's an Observable method.

If you look at the introduction, you'll see that DOM is a collection of functions:

Object {
  canvas: ƒ(e, t)
  context2d: ƒ(e, t, n)
  download: ƒ(…)
  element: ƒ(e, t)
  input: ƒ(e)
  range: ƒ(e, t, n)
  select: ƒ(e)
  svg: ƒ(e, t)
  text: ƒ(e)
  uid: ƒ(e)
}

So, in an Observable notebook, one can do...

DOM.text("I am a text node.")

...to create a text node or, as you just found,

DOM.svg(500, 50)

...to create an SVG. However, that only works in an Observable notebook.