javascript - "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':

var svg = d3.select('body').append('svg').attr('width', 500).attr('height', 50);

It is used, for example, in Scott Murray's book Interactive Data Visualization for the Web, 2nd Edition here. More recently I've seen this pattern:

const svg = d3.select(DOM.svg(500, 50));

(e.g. in this example or this tutorial).

I'd like to work out what this line does, but when I include it in my script I get the console error

Uncaught ReferenceError: DOM is not defined

What am I missing? I've read through the Scott Murray book and the D3 selection documentation (here) but I cannot find the DOM.svg stuff. (Google doesn't help much either.)

Answer 1

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.