2b:null 2c:["$","title",null,{"children":"coding | 123d | Observable"}] 31:T4a7,# coding D3.js is usually used for "data visualization", where "data" is something to be interpreted using visualization. In this series, we think of data more generally:

**data** is any object bound to an element on the web page.

In other words, we are not concerned with interpreting data, per se. Instead **we aim communicate concepts _using_ visualizations** Here, "data" refers to the definition above. that are themselves [data-driven documents](https://d3js.org/what-is-d3#d3-works-with-the-web). So, whereas most D3 tutorials are presented with the former definition in mind, this one will be based on the latter. The [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) (Document Object Model) is our interface to elements on a web page. There are many ways to manipulate the DOM, but we will focus on the following methods: - Hyper-text Markup Language (HTML) - Cascading Style Sheets (CSS) - **Scalable Vector Graphics (SVGs)** - **JavaScript** You should already be familiar with the first two, and that should be sufficient. In this notebook, we will introduce basics for the remaining two.32:T5fa,# JavaScript JavaScript is an object-oriented programming language that is very well introduced [here](https://observablehq.com/@nyuvis/javascript-basics) and [here](https://observablehq.com/@observablehq/learn-javascript-introduction?collection=@observablehq/tutorial). And, for the most part, these tutorials cover almost everything you need to know for our use case. Even still, I recommend also reviewing the following to round out your JavaScript knowledge: Don't expect to remember everything. Use all these links as references later. - the difference between [_let_, _var_, and _const_](https://observablehq.com/@chi37/var-let-const-for-beginners) - how [_new_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new) works - the asynchronous nature of [JavaScript in Observable](https://observablehq.com/@observablehq/introduction-to-generators?collection=@observablehq/javascript-in-observable) A good understanding of all the above will ensure you can use Observable and D3 to their fullest extent. :) FWIW, `document` is _contained_ in the [window](https://developer.mozilla.org/en-US/docs/Web/API/Window), and it equal to `window.document`. The only other point I will add is that JavaScript can affect elements of the DOM using [`document`](https://developer.mozilla.org/en-US/docs/Web/API/Document). For example, this sentence was given the `id` "my-sentence", and its color can be adjusted below.33:[] 2f:{"id":"b8fe1846cffb2f7a","slug":null,"title":"coding","thumbnail":"61bc44427e04990e8adf05f3b7547948e8118cd18c91fe6cc315d6a2e7cb93c1","access_level":"public","create_time":"$D2026-03-03T16:39:11.905Z","update_time":"$D2026-03-12T18:56:33.851Z","view_time":null,"first_public_time":"$D2026-10-05T19:32:50.725Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1dace3b2603d462b","login":"123d","name":"123d","avatar_url":"https://avatars-next.observableusercontent.com/e05afee27b01d15bfe69a6e3cebfc74ffee561bd243b93a47555d3cfbf07705f","tier":"education_2026"},"version":526,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"445a5d84ebf45008","login":"leontoddjohnson","name":"leon todd johnson","avatar_url":"https://avatars-next.observableusercontent.com/a26805e7da5279be6ef5326cebe21cae263359b8261a4bd6d0d2524e3a18efda","tier":null}],"members":[{"type":"individual","id":"445a5d84ebf45008","login":"leontoddjohnson","name":"leon todd johnson","avatar_url":"https://avatars-next.observableusercontent.com/a26805e7da5279be6ef5326cebe21cae263359b8261a4bd6d0d2524e3a18efda","tier":null,"role":"editor"},{"type":"team","id":"1dace3b2603d462b","login":"123d","name":"123d","avatar_url":"https://avatars-next.observableusercontent.com/e05afee27b01d15bfe69a6e3cebfc74ffee561bd243b93a47555d3cfbf07705f","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"b78efea30f2f1dc8","slug":"d3-for-math","title":"math notes","owner":{"id":"1dace3b2603d462b","login":"123d","name":"123d"}},"type":"notebook","body":{"titling":"auto","title":"coding","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"# svg\n\n[Scalable Vector Graphics (SVG)](https://developer.mozilla.org/en-US/docs/Web/SVG) and [vector graphics](https://en.wikipedia.org/wiki/Vector_graphics) are the main ingredient. We use them heavily (almost ubiquitously) in all our visualizations. So, it makes sense to have a very basic idea for what they are.\n\n[These](https://observablehq.com/@nyuvis/d3-introduction?collection=@nyuvis/guides-and-examples) [two](https://observablehq.com/@d3/learn-d3-shapes?collection=@d3/learn-d3) tutorials provide a great introduction to SVG, but since there are so many examples of their use on Observable, we'll just cover the basics here.\n\n## elements\n\nThere are [several](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element) SVG elements that can be purposed in our visualizations, but some of the most common include circles, rectangles, lines, paths, and text, each with their own attributes. For example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"A few things to note here:\n\n- An `svg` canvas needs to be given a width and a height.\n- Elements (like ``s) are defined by their attributes (e.g., center or radius).\n- Defining [attributes for paths](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Paths#line_commands) are a bit wild, but D3 does all the work.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"## transform-translate\n\nAttributes _define_ elements. E.g., above, we created a blue circle of radius 10, and placed it on the canvas. We can _manipulate_ these elements relatively using `transform`. A common transformation is `translate`, which moves the element in an ${tex`x`} direction and a ${tex`y`} direction.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":132,"value":"viewof x = Inputs.radio([50, 200], {label: \"translate x by ...\", value: 50})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":141,"value":"Of course, `translate` is just one of many [transform functions](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform#transform_functions). We could rotate, scale, or even apply a matrix transformation (ooooh).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":148,"value":"## groups\n\nAbove, we transformed a single circle. But, we can apply the same transformation (i.e., the same radio buttons) to multiple elements using groups. These are defined using the `` tag in HTML. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":150,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":448,"value":"Notice that we can assign style to the SVG as a whole, or the text itself.\n\n## viewbox\n\nWe can manipulate our \"viewing window\" of an SVG canvas using the four-number [viewbox](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/viewBox): `min-x min-y width height`. The `min-*` numbers will \"pan\" our view, and used together with the `width`/`height` arguments, we could zoom in or out. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":469,"value":"viewof svgForm = Inputs.form({\n minX: Inputs.range([-100, 100], {label: \"min-x\", step: 1, value: 0}),\n minY: Inputs.range([-100, 100], {label: \"min-y\", step: 1, value: 0}),\n width: Inputs.range([0, 200], {label: \"width\", step: 1, value: 100}),\n height: Inputs.range([0, 200], {label: \"height\", step: 1, value: 100})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":498,"value":"Note: `min-x` and `min-y` set the origin *of the viewbox*. So:\n\n- `min-x = 5` moves our \"window\" to the right by 5 units, so an `x = 10` element would look \"moved\" to the **left** by 5 units.\n- `min-y = -10` moves our \"window\" down by 10 units. So, and `x = 1` element would look \"moved\" **up** by 10 units.\n\nThe viewbox is a nice way to remove the need for an `x` or `y` coordinate, effectively setting a \"baseline\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":160,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":287,"value":"viewof sentencecolor = Inputs.radio([\"darkblue\", \"gray\", \"darkorange\", \"darkred\"], \n {label: \"sentence color\", value: \"darkblue\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"{\n const element = document.getElementById('my-sentence');\n // we need to wait for the DOM to load and the element to resolve\n if (element) {\n element.style.color = sentencecolor;\n }\n}","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"## scratchpad\n\nUse the rest of the notebook to play with JavaScript if you like. We'll start off with a few fun JavaScript shortcuts.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":416,"value":"{\n const x = \"52\";\n return +x; // it's a number now\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"{\n const a = ['a', 'b', 'c'];\n const b = [1, 2, 3]\n \n return [...a, ...b]; // unpack lists\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"{\n const x = 8;\n\n // if-then shorthand\n return x == '5' ? 'equality!' : 'inequality ...'\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"stylesheet","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"import {stylesheet} from '@123d/css'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"