2a:null 2b:["$","title",null,{"children":"D3 Vis Intro | ODUCS Vis | Observable"}] 30:[] 2e:{"id":"7a28879f180f20b5","slug":"d3-vis-intro","title":"D3 Vis Intro","thumbnail":"482e28f0030157408d252abf9f1813df44bef923a2da6eb8af7aaa96ce5f9452","access_level":"public","create_time":"$D2024-01-26T20:24:44.169Z","update_time":"$D2025-02-10T21:53:34.055Z","view_time":null,"first_public_time":"$D2024-02-05T17:06:13.041Z","has_unpublished_edits":null,"fork":{"id":"cae29cb56c6a7718","slug":"cs725-s23-d3-vis-intro","title":"CS725-S23, D3 Vis Intro","owner":{"id":"8f581304ab2f1225","login":"weiglemc","name":"Michele Weigle"}},"stars":0,"starred":false,"owner":{"type":"team","id":"449a34042f144222","login":"oducs-vis","name":"ODUCS Vis","avatar_url":"https://avatars-next.observableusercontent.com/9c1b8560739f2a71dc6dad0fa77abdadb4c341b2325e63f1b389383c05c912a7","tier":"education_2026"},"version":403,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"54e01b60b9979266","login":"weiglemc","name":"Michele Weigle","avatar_url":"https://avatars-next.observableusercontent.com/89f983e882cae9faa8e22c82afbe47f6f6352237d8ec47c06985ecfb1a108122","tier":null}],"members":[{"type":"individual","id":"54e01b60b9979266","login":"weiglemc","name":"Michele Weigle","avatar_url":"https://avatars-next.observableusercontent.com/89f983e882cae9faa8e22c82afbe47f6f6352237d8ec47c06985ecfb1a108122","tier":null,"role":"editor"},{"type":"team","id":"449a34042f144222","login":"oducs-vis","name":"ODUCS Vis","avatar_url":"https://avatars-next.observableusercontent.com/9c1b8560739f2a71dc6dad0fa77abdadb4c341b2325e63f1b389383c05c912a7","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":{"id":"5000cb37ab1633f3","slug":"cs-725","title":"CS 725","owner":{"id":"449a34042f144222","login":"oducs-vis","name":"ODUCS Vis"}},"type":"notebook","body":{"titling":"auto","title":"D3 Vis Intro","cells":[{"id":0,"value":"# D3 Vis Intro","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"## D3 - First Things\n\n[Learn D3: By Example](https://observablehq.com/@d3/learn-d3-by-example?collection=@d3/learn-d3) - Use the [D3 Gallery](https://observablehq.com/@d3/gallery) and other examples to tinker and learn how the code is put together.\n\n[Learn D3 Collection](https://observablehq.com/collection/@d3/learn-d3) - notebooks created by Mike Bostock (creator of D3) to provide an intro to D3\n\n[D3 Documentation Collection](https://observablehq.com/collection/@d3/documentation) - notebooks created by Mike Bostock showing documentation and examples\n\n[D3 API Reference](https://github.com/d3/d3/blob/main/API.md)\n\nNYU Visualization [Guides and Examples Collection](https://observablehq.com/collection/@nyuvis/guides-and-examples) -- we'll be using these to walk through D3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"## SVG and D3 Basics\nhttps://observablehq.com/@nyuvis/d3-introduction?collection=@nyuvis/guides-and-examples\n\n### SVG\n* Circles ``\n * **Important:** \"In the SVG coordinate system, x increases as you go right and y increases as you go *down*.\"\n* Groups ``\n * \"We will often use groups to organize the different parts of our visualization.\" \n * CS 725 [slides with SVG Translate example](https://docs.google.com/presentation/d/16saOBayWIoXVL2XycWYjeCZ2hOBlO9rM9df3FCxzxmY/preview)\n* Rectangles ``\n * \"The x and y attributes of the rectangle set the position of its top-left corner.\"\n* Lines ``\n* Path ``\n* Text ``","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"**Q1.** Use SVG to draw 3 vertical rectangles of varying heights and colors and the same width side-by-side (like the bars in a bar chart). Remember that (0,0) is the top left corner of the outer SVG element.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"// write answer here","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"solution(``, 'html')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"### D3\n\nWe can use D3 to create the SVG elements on the webpage.\n* `svg = d3.create()` - create an outer SVG element, with specified width and height\n* `svg.append('circle')` - add a circle element inside the outer SVG element\n* `.attr()` - used to set the attributes of the circle, first argument is the name of the SVG attribute, second argument is either a constant or a function\n* `return svg.node()` - used so Observable can render the element\n* *Use Inspect in browser to show generated SVG*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"**Q2.** Recreate the rectangles in Q1 using D3.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"// write your answer here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"solution(`{\n const svg = d3.create('svg')\n .attr(\"width\", 300).attr(\"height\", 100);\n\n svg.append('rect')\n .attr(\"x\", 10).attr(\"y\", 50)\n .attr(\"width\", 30).attr(\"height\", 50)\n .attr(\"fill\", \"blue\");\n\n svg.append('rect')\n .attr(\"x\", 45).attr(\"y\", 20)\n .attr(\"width\", 30).attr(\"height\", 80)\n .attr(\"fill\", \"red\");\n\n svg.append('rect')\n .attr(\"x\", 80).attr(\"y\", 70)\n .attr(\"width\", 30).attr(\"height\", 30)\n .attr(\"fill\", \"yellow\"); \n\n return svg.node();\n}`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"### Selections and Joins\nHere's where we can reduce the lines of code and let our data drive the rendering of the shapes.\n\nKey points:\n* `selectAll()` - sets up a (initially empty) selection of SVG elements, of the type specified in the parameter\n* `data()` - selection of elements is bound to the given dataset\n* `join()` - appends a new SVG element for each item in the dataset\n\nMore ways to visualize selections and joins: https://observablehq.com/@nyuvis/review","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":102,"value":"**Q3.** Given `bardata` below, recreate the rectangles in Q1, Q2 using selections and joins.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"bardata = [\n {xPos: 10, yPos: 50, width: 30, height: 50, color: 'blue'},\n {xPos: 45, yPos: 20, width: 30, height: 80, color: 'red'},\n {xPos: 80, yPos: 70, width: 30, height: 30, color: 'yellow'}\n ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"// write your answer here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"solution (`{\n const svg = d3.create('svg').attr(\"width\", 300).attr(\"height\", 100);\n\n svg.selectAll('rect')\n .data(bardata)\n .join('rect')\n .attr('fill', d => d.color)\n .attr('x', d => d.xPos)\n .attr('y', d => d.yPos)\n .attr('width', d => d.width)\n .attr('height', d => d.height);\n\n return svg.node();\n}`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"### Nested Joins\n\nFurther explanation of this section is in slides 2-5 of [D3 Vis Intro - supplemental](https://docs.google.com/presentation/d/1r_hh5f0sdSrxXYb-UJGSu-OlG1U65H32pAgraMVDVg0/edit).\n* slide 2 - `circleGrid` array, displayed circles, and pseudocode\n* slide 3 - walks through first section of D3 code - creating SVG element, creating group for each row of circles, setting y position and color for each row\n* slide 4 - walks through second section of D3 code - adding text label to each row\n* slide 5 - walks through final section of D3 code - add circles for each row","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":214,"value":"### Scales Reminder\n\nReminder about scales from \nhttps://observablehq.com/@uw-info474/animated-scale-diagram (visit that notebook for animation)\n\nWe've already walked through the **Scales** section of the NYU notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"scaleDiagram","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"## Back to our rectangles\n\nSlide 6 of [D3 Vis Intro - supplemental](https://docs.google.com/presentation/d/1r_hh5f0sdSrxXYb-UJGSu-OlG1U65H32pAgraMVDVg0/edit) walks through setting up the scales for our rectangles (that look like a bar chart)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"bars = [\n {name: 'a', value: 5, color: 'blue'},\n {name: 'b', value: 8, color: 'red'},\n {name: 'c', value: 3, color: 'yellow'}\n ]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"width = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"height = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"x = d3.scaleBand()\n .domain(bars.map(d => d.name)) \n .range([0, width])\n .padding(0.2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(bars, d => d.value)]) \n .range([0, height])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"**Q4.** Combine selections and joins with x and y scales above to generate the same rectangles as in Q3. Fill in the code where indicated in the comments.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":172,"value":"{\n const svg = d3.create('svg').attr(\"width\", width).attr(\"height\", height);\n\n svg.selectAll('rect')\n .data(bars)\n .join('rect')\n .attr('fill', d => d.color)\n .attr('x', d => ) // EDIT THIS LINE\n .attr('y', d => ) // EDIT THIS LINE\n .attr('width', ) // EDIT THIS LINE\n .attr('height', ); // EDIT THIS LINE\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"solution(`.attr('x', d => x(d.name))\n.attr('y', d => height - y(d.value))\n.attr('width', x.bandwidth())\n.attr('height', d => y(d.value));`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"import {aq, op} from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"import {solution} from \"@nyuvis/d3-introduction\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"import {chart as scaleDiagram} from \"@uw-info474/animated-scale-diagram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1"}} 2f:"$2e:body"