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

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

• javascript
• d3.js
• observablehq

• Make sure you wait for the DOM to be loaded, before changing it. – ABC Commented Apr 26, 2019 at 9:47

2 Answers 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.

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.