2b:null 2c:["$","title",null,{"children":"Learning from D3 in Action - in Observable | Tom MacWright | Observable"}] 31:T847,md`# Learning from D3 in Action - in Observable So you’ve picked up Elijah Meeks’s [D3 in Action, 2nd Edition](https://www.manning.com/books/d3js-in-action-second-edition) and want to learn D3. Observable’s a great place to learn, but is a bit different than a usual webpage: instead of a single script, you write a [notebook](https://beta.observablehq.com/@mbostock/introduction-to-notebooks), which has [reactive cells](https://beta.observablehq.com/@mbostock/introduction-to-code). This means you can usually implement D3 in Action’s examples with a bit less code - and also that if you copy and paste them directly, they won’t work. I’ve written about some of the differences in an [anti-patterns](https://beta.observablehq.com/@tmcw/observable-anti-patterns-and-code-smells) notebook, which is good as a supplement to this one. This notebook will explain some typical changes that are required to translate a D3 in Action example to Observable. There might be more than this, depending on the notebook, but this is a good starting point. **First I’ll start with Chapter 1, example 1:** \`\`\`html

\`\`\` Okay, so we have a webpage with some HTML elements, and then D3 code that selects those elements by ID and modifies some of their attributes. Here’s what that should be in Observable. First, we include D3. This will be the only time in this notebook that I include D3, so assume that, for the rest of the changes required, you’ll also need to include D3 for those, in the same way. Also note that D3 in Action includes d3 v4, and we’re going to include D3 v5.`32:T69a,md`Okay, so that establishes some of the main patterns. Let’s skip forward to chapter 3, example 2: \`\`\`html

\`\`\` `33:T435,{ let svg = html`` let element = html`

${svg}

`; d3.select(svg) .append("g") .attr("id", "teamsG") .attr("transform", "translate(50,300)") .selectAll("g") .data(worldcup) .enter() .append("g") .attr("class", "overallG") .attr("transform", (d, i) =>`translate(${(i * 50)}, 0)`); let teamG = d3.select(svg).selectAll("g.overallG"); teamG .append("circle") .attr("r", 20); teamG .append("text") .style("text-anchor", "middle") .attr("y", 30) .text(d => d.team); return element; }34:[{"id":"784ca5aa5dacfebf55e18334dbc6383acec97568f400b692158cf0c6b36e6565cbb276f5ada91dcb70307b307547dbf0e420bcd29e3b8917886393ace4529e6f","href":"https://static.observableusercontent.com/files/784ca5aa5dacfebf55e18334dbc6383acec97568f400b692158cf0c6b36e6565cbb276f5ada91dcb70307b307547dbf0e420bcd29e3b8917886393ace4529e6f","name":"worldcup.csv","type":"application/octet-stream","lastModified":1572544398257.558,"size":355}] 2f:{"id":"e60cf68d2276d9f6","slug":"learning-from-d3-in-action-in-observable","title":"Learning from D3 in Action - in Observable","thumbnail":"79a4ec7d8787814c52ee61be3bfebf0e8225f80a03e6907388e492d3d7fa180e","access_level":"public","create_time":"$D2018-05-23T18:02:01.977Z","update_time":"$D2019-10-31T17:53:19.794Z","view_time":null,"first_public_time":"$D2018-05-23T18:37:06.763Z","fork":false,"stars":23,"starred":false,"owner":{"type":"team","id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":"starter_2024"},"version":70,"publish_version":70,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null}],"members":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null,"role":"editor"}],"comments":[{"id":"90c244ceb07e3f9b","reply_to_id":null,"content":"I really like your step by step explanation. Sad that you are not at Observable anymore.","create_time":"$D2021-10-28T08:18:22.575Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"3d1beb3a90fbfe98","login":"sandraviz","name":"Sandraviz","avatar_url":"https://avatars-next.observableusercontent.com/9b19f1a074469dcaafa9bd24c7b08f4bc969889b551fe70c209497f1d03c6514","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":11,"collection":null,"type":"notebook","body":{"title":"Learning from D3 in Action - in Observable","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"md`Now, in the original example, we select that box by its ID. This isn’t a good pattern in Observable - read [re-selecting elements](https://beta.observablehq.com/@tmcw/observable-anti-patterns-and-code-smells#reselectingElements) for the full story. Cells are _reactive_, so they don’t run in order, so we want to rely on variables instead of selectors.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"chapter1_11 = {\n \n // Create the HTML from this example.\n let div = html`

\n \n

`\n \n // Run the JavaScript from this example.\n d3.select(div).style(\"border\", \"5px darkgray dashed\");\n d3.select(div).attr(\"id\", \"newID\");\n d3.select(div).select(\"#someCheckbox\").property(\"checked\", true);\n \n // Return the HTML\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"md`This one introduces a bunch of new features:\n\n- Loads a dataset from \\`worldcup.csv\\`\n- CSS styles\n- Includes colorbrewer\n\nOkay, so - I’ll do the same as the first example and try to keep this one pretty faithful to the example in the book, while making the necessary changes to make it work with Observable. So, first that means putting the data somewhere web-accessible - see [introduction to data](https://beta.observablehq.com/@mbostock/introduction-to-data) for full documentation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"worldcup = d3.csv(await FileAttachment(\"worldcup.csv\").url())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"md`The example from D3 in Action has two main differences:\n\n- It’s using d3 v4, in which the d3.csv method is provided by d3-request. d3 v5 uses [d3-fetch](https://github.com/d3/d3/releases/tag/v5.0.0) instead, which means that \\`d3.csv\\` returns a promise, rather than calls a callback.\n- Observable automatically handles Promises, so now we can use the value \\`worldcup\\` from other cells without having to worry about it being asynchronously determined.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"md`Note the differences here:\n\nLike before, we generate the HTML in this notebook, and reference it directly. In cases where the original example was using \\`d3.select\\` or \\`d3.selectAll\\` with a string as an argument, we first constrain it to the element. So\n\n\\`\\`\\`js\nvar teamG = d3.selectAll(\"g.overallG\");\n\\`\\`\\`\n\nBecomes\n\n\\`\\`\\`js\nlet teamG = d3.select(svg).selectAll(\"g.overallG\");\n\\`\\`\\`\n\nThis ensures that element is properly selected and that if you happen to add _another_ chart in this notebook, that cells don’t end up accidentally modifying each other.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"