"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.)

Vaccine

Make sure you wait for the DOM to be loaded, before changing it. – Agate

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.

Gravois

So how does one "create an SVG" outside of Observable? – Gloxinia

@EthanT selection.append("svg"). – Gravois

Answer 2

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.

Reopen

So to reference the legend function from this link observablehq.com/@d3/color-legend?collection=@d3/d3-scale one would have to download module tarball and go from there? – Mulish