25:["$","title",null,{"children":"D3 Vis Intro | Jenah's Workspace | Observable"}] 49:[] 29:{"id":"1cc0c93abe67a6f8","slug":null,"title":"D3 Vis Intro","thumbnail":"142cac26e297937c52b13f958343e80f7ad40b16903acace7d0cb36c7134fb86","access_level":"public","create_time":"$D2024-02-05T20:24:25.218Z","update_time":"$D2024-02-05T20:53:20.625Z","view_time":null,"first_public_time":"$D2024-02-05T20:24:25.218Z","has_unpublished_edits":null,"fork":{"id":"7a28879f180f20b5","slug":"d3-vis-intro","title":"D3 Vis Intro","owner":{"id":"449a34042f144222","login":"oducs-vis","name":"ODUCS Vis"}},"stars":0,"starred":false,"owner":{"type":"team","id":"881e7ae16bb0b5e6","login":"jenah-ws","name":"Jenah's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/06a52d8c3283ce9fa38cfce0d9996df0a96bb51b71a8cf3ae69963295bc0d87d","tier":"starter_2024","bio":"","following":false},"version":368,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8ffaae3dd889105e","login":"jenah","name":"Jenah","avatar_url":"https://avatars-next.observableusercontent.com/4e2b0fe39e47ab5d7068446fb7f7efed9bfd0907436a264dbbd8001bab454e55","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"8ffaae3dd889105e","login":"jenah","name":"Jenah","avatar_url":"https://avatars-next.observableusercontent.com/4e2b0fe39e47ab5d7068446fb7f7efed9bfd0907436a264dbbd8001bab454e55","tier":null,"role":"editor"},{"type":"team","id":"881e7ae16bb0b5e6","login":"jenah-ws","name":"Jenah's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/06a52d8c3283ce9fa38cfce0d9996df0a96bb51b71a8cf3ae69963295bc0d87d","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"solution(``, 'html')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"{\n const svg = d3.create('svg')\n .attr(\"width\", 300).attr(\"heihgt\", 100);\n\n svg.append('rect')\n .attr(\"x\", 10).attr(\"y\", 50)\n .attr(\"width\", 30).attr(\"height\", 50)\n .attr(\"fill\", \"purple\");\n\n svg.append('rect')\n .attr(\"x\", 45).attr(\"y\", 20)\n .attr(\"width\", 30).attr(\"height\", 80)\n .attr(\"fill\", \"brown\");\n\n svg.append('rect')\n .attr(\"x\", 80).attr(\"y\", 70)\n .attr(\"width\", 30).attr(\"height\", 30)\n .attr(\"fill\", \"orange\");\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"{\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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"scaleDiagram","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"width = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"height = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null