2b:null 2c:["$","title",null,{"children":"Chapters 1-5 | 123d | Observable"}] 31:[] 2f:{"id":"75fd368f693b9348","slug":null,"title":"Chapters 1-5","thumbnail":"5f59348f551c51c6429bc556c46a3cb0df8ae328ef16ec97f775fb7e91046b76","access_level":"public","create_time":"$D2023-07-28T20:44:55.143Z","update_time":"$D2023-08-01T20:10:32.551Z","view_time":null,"first_public_time":"$D2026-10-05T19:40:47.886Z","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":201,"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":"dfdb93b0a1abc583","slug":"d3-book-observed","title":"d3-book-observed","owner":{"id":"1dace3b2603d462b","login":"123d","name":"123d"}},"type":"notebook","body":{"titling":"auto","title":"Chapters 1-5","cells":[{"id":0,"value":"# Chapters 1-5\n\nThe first five chapters in Murray's book are primarily dedicated to introducing D3 from a high level, and getting it set up on your computer. However, the setup assumes that you'll be working with raw JavaScript and raw HTML, which we are not quite doing here in Observable. So, most of this setup is not necessary. That said, the first time we encounter D3 code in the book is in [Chapter 5](https://github.com/scotthmurray/d3-book/tree/master/chapter_05) with \"Chaining Methods\", so this is where we'll begin.\n\n>_ Note: throughout the book, Murray alludes to the \"JavaScript console\" in the inspector of your browser. But in Observable, this can simply be any JavaScript cell! Because of Observable's [dataflow](https://observablehq.com/@observablehq/how-observable-runs), everything is sort of available at once from any JavaScript cell._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"## Chaining Methods\n\nIn chapter 4, Murray starts with a small HTML template. The main purpose here is to give D3 something to point to when it renders an SVG canvas. Here on Observable, we don't _need_ to use HTML for our visualizations, but sometimes it is helpful to use D3 to affect an HTML cell, so we'll use it here.\n\n> _A few notes:_\n> - _The HTML code below is referencing CSS styling from the [Appendix](#cell-115), below._\n> - _It is a bit annoying, but you'll need to **rerun** the below cell to clear it out. (This is temporary until we learn about how to remove elements using D3._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"\n

\n This is a (dark blue) \"div\" box within an HTML \"body\".\n

\n This is some text that is not inside of the \"div\" box.\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"// We use \nd3.select(\"#example1\")\n .append(\"p\")\n .text(\"D3 rendered paragraph in the div box (notice the color).\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"The above cell is appending text to the `

` element in the cell above it. There is a lot of HTML in this page, and the `` tag (from the book) is too vague, so we reference the `id` of our `div` using the `#` character (this method is discussed a bit later in the book).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"## In a Bind\n\nIn the chapter where Murray talks about binding data to visual elements, he gives us instructions for accessing our own CSV. Observable offers many ways to [load data into a notebook](https://observablehq.com/@observablehq/introduction-to-data). Here, we'll use the [ames](https://jse.amstat.org/v19n3/decock/DataDocumentation.txt) dataset via URL.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"// each cell should be named or present something useful\names = d3.csv(\"https://raw.githubusercontent.com/leontoddjohnson/datasets/main/data/ames.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"We can also use a [data table cell](https://observablehq.com/@observablehq/data-table-cell#cell-1190) to get a view of our data on Observable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"ames","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"## Please Make Your Selection\n\nIn this section, Murray starts to talk a bit about `selectAll` and `enter`. So, as above, we'll make another example HTML block. And, again, we'll use the `id` attribute of a `div` tag to replace the `body` referenced in the book. (I.e., any time you see Murray referencing the `body` in the book, think `#example2`, here.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"\n \n

\n This is another \"div\" box within an HTML \"body\".\n

\n This is some text that is not inside of the above \"div\" box.\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"{\n // this is a truncated version of the \"dataset\" referenced in the book\n var dataset = [5, 10, 15];\n\n // again, instead of `body` we referenced the id\n d3.select(\"#example2\").selectAll(\"p\")\n .data(dataset)\n .enter()\n .append(\"p\")\n .text(\"New paragraph rendered by D3!\"); // changed the text here a bit\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"When the above cell is run, a paragraph for each element of the `dataset` _enters_ the HTML `div`. Below, we can inspect each of those `

` elements using a new JavaScript cell to simulate the console mentioned in the book ...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":149,"value":"// this is our \"JavaScript console\" from the book\nd3.select(\"#example2\")\n .selectAll(\"p\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"## Using Your Data\nIn this section, Murray introduces the functional framework of D3, where we can start to use the `__data__` seen in inspected elements of the DOM.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":159,"value":"{\n // this is the same truncated version of the \"dataset\" referenced in the book\n var dataset = [5, 10, 15];\n\n // we are referencing the same `example2`, above\n d3.select(\"#example2\").selectAll(\"p\")\n .data(dataset)\n .enter()\n .append(\"p\")\n // recall that `d` here is the datum *bound* to the

tag\n .text(function(d) { return \"I can count up to \" + d; });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"Also illustrated in the book are a few other ways we can adjust the function inside the `text()` method, and an additional example of adjusting the `style`. Here, we'll also show a few examples of anonymous function shortcuts, namely the [arrow function](https://javascript.info/arrow-functions-basics) and [the ? character for conditional branching](https://javascript.info/ifelse#conditional-operator).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"\n \n

\n This is our third and final \"div\" box within an HTML \"body\".\n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":190,"value":"{\n // this is the same truncated version of the \"dataset\" referenced in the book\n var dataset = [5, 10, 15];\n\n // we are referencing the same `example2`, above\n d3.select(\"#example3\").selectAll(\"p\")\n .data(dataset)\n .enter()\n .append(\"p\")\n .text(d => \"I can count up to \" + d)\n // the style here is specifically referencing the \"current\"

element\n .style(\"color\", d => d > 10 ? \"red\" : \"black\")\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"# Appendix\n\nYou'll notice at the end of most Observable notebooks is an \"appendix\", typically used for [imports](https://observablehq.com/@observablehq/import) and other \"utility\" type cells used in the rest of the notebook. For our cases here, we'll use it to place our CSS styling. You may recall from the book that Murray recommends keeping your CSS in a separate file, and referencing it in your HTML. We do something similar here, except instead of using a file, we use a cell which gets treated essentially the same way.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":117,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 30:"$2f:body"