31:T106d,# Beware d3.select on Observable ## Which is to say, beware document.querySelector On September 18, 1995, Netscape 2 launched with support for the [Level 0 DOM](https://www.quirksmode.org/js/dom0.html), which let you get arrays of certain document elements in JavaScript: document.images, document.forms, document.links, and document.anchors. That was it! Around 1998, the [Level 1 DOM](https://www.quirksmode.org/dom/intro.html) added support for document.getElementById, document.getElementsByName, and document.getElementsByTagName. At the same time, CSS was up to level 2 with its own syntax to “get” one or more elements, called [selectors](https://en.wikipedia.org/wiki/CSS#Selector). In 2003, Simon Willison published a [short script](https://simonwillison.net/2003/Mar/25/getElementsBySelector/) that let you call document.getElementsBySelector with a CSS selector string and get back an array of elements. That [inspired](https://johnresig.com/blog/annotated-version-of-the-original-jquery-release/) John Resig to include a selector engine in jQuery, launched in 2006, which acclimated a generation to writing `$("div.sidebar li")` to refer to list items in a DIV element with the class name “sidebar”. The W3C moved to standardize that functionality, and Firefox 3.5 [added support](https://web.archive.org/web/20110604150348/https://developer.mozilla.org/devnews/index.php/2009/06/30/firefox-3-5-is-now-available-for-download/) for the W3C Selectors API in June 2009. When D3 launched in 2011, the standard was [becoming ubiquitous](https://caniuse.com/queryselector) in modern browsers, but D3 still checked to see if jQuery’s Sizzle engine was already on the page until version 4, at which point it relied solely on the standard document.querySelector and document.querySelectorAll. The first example on d3js.org selects all paragraph elements and turns them blue: ```js d3.selectAll("p").style("color", "blue"); ``` For years a statement like that was a natural way to start a D3 project. But today, it is an anti-pattern: it tends to select things it shouldn’t, and not select things it should. The web has moved away from global selectors and toward isolated components, with new abstractions for managing the DOM. This notebook focuses on Observable, but similar points apply to React and other frameworks. **You should start by calling d3.select with a DOM element, not a selector string, and all subsequent selections should be chained off of that parent selection.**

❌	d3.select(_selector_)	`d3.select("#chart")`
❌	d3.selectAll(_selector_)	`d3.selectAll("li")`
✅	d3.select(_element_)	d3.select(cellName) d3.select(htl.html\`<svg>\`)
✅	d3.selectAll(_elements_)	`d3.selectAll(cellName.children)`
✅	selection.select(_selector_)	`d3.select(cellName).select("h2")`
✅	selection.selectAll(_selector_)	`d3.select(cellName).select("li")`
✅	d3.create(_name_)	`d3.create("table").selectAll("tr")`

Or, equivalently, in vanilla JavaScript terms: **you should call querySelector on a DOM element, not the whole document.**

❌	document.querySelector(_selection_)	`document.querySelector("#chart")`
❌	document.querySelectorAll(_selection_)	`document.querySelectorAll("li")`
✅	element.querySelector(_selector_)	`cellName.querySelector("h2")`
✅	element.querySelectorAll(_selector_)	`cellName.querySelectorAll("li")`

Let’s explore why not to use those first two, and what to do instead.32:[] 2f:{"title":"Beware d3.select on Observable","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":63,"value":"---\n## d3.select(_selector_) spills all over the document\nI’m trying to add a 2-pixel green border to my chart. Why is it red?","pinned":false,"hidden":false,"mode":"md"},{"id":75,"value":"htl.svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"d3.selectAll(\"svg.chart\").style(\"border\", \"2px solid green\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"Those couple of lines look fine by themselves: I create an SVG with the class “chart”, then select all SVGs with the class “chart” and add a 2-pixel green border. But it’s not working, because elsewhere in my contrived example, I’ve imported an unrelated chart that _also_ uses d3.selectAll, but to add a _red_ border. And it’s running in an order I can’t control, after the line above.","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"import {chart} from \"507f2e71a0ffc623\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"chart","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"Different code using selectors that collide with each other is nothing new. It’s manageable if one person has a clear view of all the code that’ll run on the page. But as imports have gotten easier on the web, the risk of collisions has increased, and people have increasingly eschewed global effects in favor of writing self-contained components without side effects. What JavaScript thinks of as the “document” — what we once might have called “the page” but which is today often more of an application — is less often the relevant scope.","pinned":false,"hidden":false,"mode":"md"},{"id":226,"value":"✅ _Instead:_ pass d3.select the name of the cell with your DOM node. You can then sub-select off of that if necessary, e.g. to set the stroke width.","pinned":false,"hidden":false,"mode":"md"},{"id":228,"value":"chart1 = htl.svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":361,"value":"d3.select(chart1).style(\"border\", \"2px solid green\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"d3.select(chart1).select(\"path\").style(\"stroke-width\", \"2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":435,"value":"Another example of unintended side effects we often see in notebooks: SVGs in the document may include your chart, but also the little black triangle that expands and collapses arrays in the inspector. If you un-comment and run the d3.selectAll line below, you can make them all red:","pinned":false,"hidden":false,"mode":"md"},{"id":135,"value":"[1, 2, 3]","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"// d3.selectAll(\"path\").attr(\"fill\", \"red\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"---\n## d3.select(_selector_) can’t see detached nodes\n\nWhereas elsewhere (or in the past) one might write HTML directly in a .html file, it’s common to use [htl](https://observablehq.com/@observablehq/htl) or other tagged template literals to create elements on Observable: ","pinned":false,"hidden":false,"mode":"md"},{"id":168,"value":"{\n return htl.html`\n \n \n

Country	Population
United States	330 million

`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"It’s nice because it looks a lot like writing HTML in an HTML file. But it’s not exactly like that, because it’s inside JavaScript. When you write the HTML inside the backticks, it doesn’t automatically go on the page. It creates a detached node (or DocumentFragment) — a trippy idea if you’re accustomed to the reified context of writing HTML in an HTML file. It creates a JavaScript object that doesn’t show up anywhere on the page. It’s the same _kind of thing_ as elements on the page, but not… on the page. Observable only inserts (i.e. renders) the fragment if a cell _returns_ it. If you don’t, you don’t see it. Compare to the above cell, which returns, to the one below, which doesn’t:","pinned":false,"hidden":false,"mode":"md"},{"id":182,"value":"{\n htl.html`\n \n \n

Country	Population
United States	329.5 million

`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"If you want to use D3 to manipulate this stuff, document-wide selectors won’t work if the node hasn’t actually been inserted into the document yet. In the table below, we have a TD element with the class “highlight”, but d3.selectAll can’t find it, because it won’t be added to the document until the return line:","pinned":false,"hidden":false,"mode":"md"},{"id":193,"value":"{\n const node = htl.html`\n \n \n

Country	Population
United States	330 million

`;\n d3.selectAll(\"td.highlight\").style(\"color\", \"red\");\n return node;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"✅ _Instead:_ pass d3.select the reference to your detached DOM nodes, then sub-select off of that if necessary.","pinned":false,"hidden":false,"mode":"md"},{"id":274,"value":"{\n const node = htl.html`\n \n \n

Country	Population
United States	330 million

`;\n d3.select(node).selectAll(\"td.highlight\").style(\"color\", \"red\");\n return node;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"---\n## d3.select(_selector_) is ignorant of dataflow \nMuch of Observable works because, when a cell changes, any cell that refers to it automatically re-runs. But this isn’t magic! Observable cannot tell all the subtle ways one cell may depend on another — only that it literally references it.\n\nHere we have a country picker and a table. If you’re lucky, the D3 cell below the table will have run after the table, and “United States” may be highlighted red in the table. But when you switch the country toggle, neither country will be highlighted.","pinned":false,"hidden":false,"mode":"md"},{"id":203,"value":"viewof country = Inputs.radio([\"United States\", \"China\"], {label: \"Country\", value: \"United States\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":331,"value":"htl.html`\n \n \n \n

Country	Population
United States	330 million
China	1,402 million

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":336,"value":"d3.selectAll(\".table-picker\").select(\".highlight\").style(\"color\", \"red\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":391,"value":"If you manually re-run the cell above, it’ll make the selected country red again in the table above. But then if you toggle the radio buttons again, you’ll lose it again. Observable doesn’t know to re-run the line of D3 when the toggle changes, because nothing in the D3 code refers to the name of a cell.","pinned":false,"hidden":false,"mode":"md"},{"id":396,"value":"✅ _Instead:_ Name the table something like “table”, and call `d3.select(table)`. Now, when you toggle the country above, the line of D3 below will re-run every time, highlighted the selected country.","pinned":false,"hidden":false,"mode":"md"},{"id":344,"value":"table = htl.html`\n \n \n \n

Country	Population
United States	330 million
China	1,402 million

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"d3.select(table).select(\".highlight\").style(\"color\", \"red\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":407,"value":"---\nYou can read more about using d3-selection on Observable in [this collection](https://observablehq.com/collection/@d3/d3-selection). \n\nWriting this made me feel somewhat wistful. It’s a piece of a very broad shift. (Anywhere we talk about passing an Observable cell name that refers to a DOM node, you could pass a React ref that refers to one, instead of a selector string.) Are we at the end of the age of selectors? What a creature the selector is, a meeting place of several languages, an addressing system for a shared territory, a pub-sub taxonomy where libraries and frameworks and plug-ins collide over contested turf. Hm.","pinned":false,"hidden":false,"mode":"md"}],"files":"$W32","stdlib":"1","titling":"auto"}