2c:null 2d:["$","title",null,{"children":"Introduction to D3 | SM6351 | Observable"}] 32:T4e1,chart = { // Specify the chart's dimensions. const width = 500; const height = 300; const marginTop = 25; const marginRight = 20; const marginBottom = 35; const marginLeft = 40; // Prepare the scales for positional encoding. const x = d3. scaleLinear() .domain(d3.extent(cars, d => d.mpg) ).nice() .range([0, width]); const y = d3. scaleLinear() .domain(d3. extent (cars, d => d.hp)) .nice() .range ([height, 0]); // Create the SVG container. const svg = d3.create("svg") .attr("width", width + marginLeft + marginRight) .attr("height", height + marginTop + marginBottom); const g = svg.append ("g") .attr("transform", `translate(${marginLeft}, ${marginTop})`); // Create the x-axis. g.append ("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x).ticks(width / 80)) // Create the y-axis. g.append ("g") .call(d3.axisLeft(y)) // Add a layer of dots. g.append ("g") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("fill", "white") .selectAll("circle") .data (cars) .join("circle") .attr("cx", d => x(d.mpg)) .attr("cy", d => y(d.hp)) .attr("r", 3); return svg.node(); }33: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)34:[{"id":"12b37dbf9b20a651bc969420e37eafbe7cdac8156895995de7d8e77f2644c2d9cf39639fbdf20194f7b1ee04d4c3bb4eb5373f12526a4e3d5700f071ea8d8f8a","href":"https://static.observableusercontent.com/files/12b37dbf9b20a651bc969420e37eafbe7cdac8156895995de7d8e77f2644c2d9cf39639fbdf20194f7b1ee04d4c3bb4eb5373f12526a4e3d5700f071ea8d8f8a","name":"mtcars.csv","type":"text/csv","lastModified":1758649257850.26,"size":1699},{"id":"12b37dbf9b20a651bc969420e37eafbe7cdac8156895995de7d8e77f2644c2d9cf39639fbdf20194f7b1ee04d4c3bb4eb5373f12526a4e3d5700f071ea8d8f8a","href":"https://static.observableusercontent.com/files/12b37dbf9b20a651bc969420e37eafbe7cdac8156895995de7d8e77f2644c2d9cf39639fbdf20194f7b1ee04d4c3bb4eb5373f12526a4e3d5700f071ea8d8f8a","name":"mtcars@1.csv","type":"text/csv","lastModified":1758650180309.645,"size":1699},{"id":"12b37dbf9b20a651bc969420e37eafbe7cdac8156895995de7d8e77f2644c2d9cf39639fbdf20194f7b1ee04d4c3bb4eb5373f12526a4e3d5700f071ea8d8f8a","href":"https://static.observableusercontent.com/files/12b37dbf9b20a651bc969420e37eafbe7cdac8156895995de7d8e77f2644c2d9cf39639fbdf20194f7b1ee04d4c3bb4eb5373f12526a4e3d5700f071ea8d8f8a","name":"mtcars@2.csv","type":"text/csv","lastModified":1758684780991.845,"size":1699}] 30:{"id":"4c1d88420f35f3e3","slug":"introduction-to-d3","title":"Introduction to D3","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2025-09-23T12:07:48.162Z","update_time":"$D2025-09-24T03:55:40.606Z","view_time":null,"first_public_time":"$D2025-09-23T15:27:06.083Z","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":1,"starred":false,"owner":{"type":"team","id":"d0e7d5042fb40aef","login":"cityu","name":"SM6351","avatar_url":"https://avatars-next.observableusercontent.com/45a8ae95cf51f4958ab21f08bb2724848c0843a8ef64da08b119958415c84c83","tier":"starter_2024","bio":""},"version":553,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a0d0cc579409d15b","login":"betsy-zhang","name":"Betsy Zhang","avatar_url":"https://avatars-next.observableusercontent.com/6d48b451a24a9806f4262141e2127e85630ed5e40b9e04c29de900a5f812352d","tier":null,"bio":""}],"members":[{"type":"individual","id":"a0d0cc579409d15b","login":"betsy-zhang","name":"Betsy Zhang","avatar_url":"https://avatars-next.observableusercontent.com/6d48b451a24a9806f4262141e2127e85630ed5e40b9e04c29de900a5f812352d","tier":null,"role":"editor"},{"type":"team","id":"d0e7d5042fb40aef","login":"cityu","name":"SM6351","avatar_url":"https://avatars-next.observableusercontent.com/45a8ae95cf51f4958ab21f08bb2724848c0843a8ef64da08b119958415c84c83","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":21,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Introduction to D3","cells":[{"id":0,"value":"# Introduction to D3 \n## D3 & Web-Based Data Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"---\n## Activity 1\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"

Hello, Typhoon!

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":473,"value":"a = {\n const a = 10;\n const b = a*a+10-9;\n return a;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"b = a*a;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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 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","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

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"htl.html`

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","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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":175,"value":"myCellArray = {\n let mArray = [1, 2, 3, 4];\n mArray = mArray.map((d,i) => d*2).filter((d, i) => i>2);\n return mArray;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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: \"weight (lb)\", color: \"#65a7ff\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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, 999])\n .filter((d,i) => i >= 2)\n .style(\"color\", \"red\")\n .text((d) => d);\n\n return html;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"---\n## Activity 6\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":421,"value":"### Data Loading\n- Define the dimensions for the chart\n- Specify the domain and range for the x and y scale\n- Create our SVG container, which is what we’ll return in the end\n- Create subcontainers and axes components\n- Create the circles for the scatterplot, using the container and scales defined before.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":542,"value":"cars = await FileAttachment(\"mtcars@2.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"cars","database":"$undefined"},{"id":435,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"

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

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

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

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","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","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","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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"carsData = cars","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"carsData","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"