25:["$","title",null,{"children":"Introduction to D3 Course: Lesson 1 | 🪦 dv develop 2025 spring | Observable"}] 49:T434,testYourKnowledge([ { title: 'D3', backText: [`D3 stands for data-driven documents. Essentially, it's the process of binding data to HTML tags so we can base attributes on data properties.`, `Though it sounds similar, D3 is not about 3D visualziations.`], question: "D3 stands for data-driven development", answer: false }, { title: 'SVG', backText: ['SVG (scalable vector graphics) are a common way to build images for the Web.', 'SVG works quite well with D3 given how D3 generates data-driven documents.'], question: 'SVG is a text-based open Web standard for generating images.', answer: true }, { title: 'Complexity', backText: [`D3 adds a lot of complexity to developing data visualizations, and is often a more difficult to use for basic chart forms.`, `Where D3 shines is when you get into features that can't be done with other frameworks, like bespoke data visualization forms, animation and interactivity.`], question: `D3 is often the simplest way to make a bar chart or scatterplot.`, answer: false }, ], 300, 300)4a:[] 29:{"id":"08c92722d09aa3bb","slug":null,"title":"Introduction to D3 Course: Lesson 1","thumbnail":"c59a4981ef1ba3bbccb582612b25435846ef733ede64787d7a7d602d90d7c162","access_level":"public","create_time":"$D2025-04-09T19:07:50.415Z","update_time":"$D2025-04-09T19:12:48.459Z","view_time":null,"first_public_time":"$D2025-04-09T19:07:50.415Z","has_unpublished_edits":null,"fork":{"id":"9bf4f77a2809d935","slug":"introduction-to-d3-course-lesson-1","title":"Introduction to D3 Course: Lesson 1","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"caa1f4ddba1048c5","login":"dv-develop-2025s","name":"🪦 dv develop 2025 spring","avatar_url":"https://avatars-next.observableusercontent.com/4e75b7ea2e28b63057c20457d28474e4c0622d1b506ebef5d878e38c0c606a40","tier":"pro_2024","bio":"","followed_by_you":false,"follows_you":false},"version":341,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f5a3d816efb5dbf2","login":"aedan-burke","name":"Aedan Burke","avatar_url":"https://avatars-next.observableusercontent.com/36e4a422216885eb6d612b1976629fdca7bedd90c2b2944fc3c3afb3c7b77adf","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"f5a3d816efb5dbf2","login":"aedan-burke","name":"Aedan Burke","avatar_url":"https://avatars-next.observableusercontent.com/36e4a422216885eb6d612b1976629fdca7bedd90c2b2944fc3c3afb3c7b77adf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Introduction to D3 Course: Lesson 1","cells":[{"id":0,"value":"# Introduction to D3 Course: Lesson 1\n## D3 & Web-Based Data Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"[Session 1 slide deck](https://docs.google.com/presentation/d/19fr5Wb0I4xitkFffP0FSX0s1Z4GUbrtUojZHcA9B_WE/edit?usp=sharing)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"---\n## Activity 1\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"### Observable Setup\n1. Sign-in / Sign-up\n2. Fork this notebook\n4. Edit and run the cell below\n5. Hide the code using the pin icon\n6. Create a new JavaScript cell\n7. Write `a = 10`\n8. Duplicate the cell, change the code to `b = a * 2`\n9. Open the Minimap pane\n\n_For more, check out [A Taste of Observable](https://observablehq.com/@observablehq/a-taste-of-observable?collection=%40observablehq%2Fgetting-started)_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"

Hello, World!

Hello, World!!!

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":326,"value":"a = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"b = a * 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"note(md`__Note:__ You can run a cell by clicking on the play button to the right of the code, or using Shift + Enter`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"---\n## Activity 2\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":126,"value":"### Writing HTML and CSS\n- Add a `

` tag to this code below with a nested `

` tag, which contains the text \"Whoa, I'm writing HTML!\"\n- Update the CSS at the top to change the font color to red.\n- Update the CSS to make the just the H3 in the code below blue.\n\n\n_For more, check out [Code Academy HTML & CSS](https://www.codecademy.com/catalog/language/html-css)_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":117,"value":"\n\n

HTML is neat!

It's what all your websites are built in at the end of the day.

Whoa! I'm writing HTML!!!!!!!!

HTML is

Fun
Cool
Old

You can write also write HTML in a JavaScript cell using htl.html! We'll do this often for D3 examples, since we're working with JavaScript when writing D3.

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"---\n## Activity 3\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"### Writing JavaScript\n- Create an array of 1, 2, 3, 4\n- Use the map method on that array to double each number, employing\n- Filter the array based on the index being greater than 2\n\n_For a more in-depth walkthrough of JavaScript Fundamentals check out [Learn Just Enough JavaScript](https://observablehq.com/@observablehq/learn-javascript-introduction?collection=%40observablehq%2Ftutorial)_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":175,"value":"myCellArray = {\n const myArray = [1, 2, 3, 4];\n return myArray.map((d, i) => d * 2).filter((d) => d == 2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"array = [1, 2, 3, 4];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"doubledArray = array.map(num => num * 2);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"filteredArray = doubledArray.filter((value, index) => index > 2);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"---\n## Activity 4\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"### Understanding the SVG & DOM\n- Change values in the Chart cell dropdown and see how it changes the structure of the DOM.\n- Look at the hiearchy of values and try to predict which is what.\n- Use the `inspect` option to open your JavaScript console and view that way as well.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"myChart = Plot.plot({\n marks: [\n Plot.auto(carsData, {x: \"0-60 mph (s)\", y: \"power (hp)\", fx: \"year\", fy: \"cylinders\", color: \"#adff7f\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"myChart","database":"$undefined"},{"id":193,"value":"{\n const label = d => d.data.node\n const root = stratifyTree(getDOMTree(myChart))\n return graph(root, {label: label})\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"---\n## Activity 5\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"### D3 first steps\n- Use D3 select to select the `

` tags\n- Bind the array `[1, 2, 3]` to the `

` tags and use that to change the text\n- Inspect a `

` tag to see the data bound using in the JavaScript console `$0.__data__`\n- Use `.style()` to set a custom style\n- Filter based on index","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":230,"value":"{\n const html = htl.html`

First Paragraph

Second Paragraph

Third Paragraph

`;\n\n d3.select(html)\n .selectAll(\"p\")\n .data([1, 2, 3])\n .filter((d, i) => i == 1)\n .style(\"color\", \"red\")\n .text((d) => d);\n\n return html;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"note(md`__Note:__ D3 is part of our standard library, so we don't need to install it here. We're using D3 version ${d3.version}`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"---\n## Wrap Up\nTest your knowledge from session one with these short questions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":277,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":280,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"import {note} from \"@observablehq/callout-boxes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import { showMe } from \"@observablehq/show-me\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"import {testYourKnowledge} from \"@observablehq/test-your-knowledge-cards\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"import {stratifyTree, getDOMTree, graph} from \"@pstuffa/svg-to-dom-tree\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"color = d3.schemeBlues[7]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"carsData = cars","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"carsData","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null