25:["$","title",null,{"children":"CS725-S23, D3 Vis Intro | Gabriela Gamez | Observable"}] 49:[] 29:{"id":"95b4ca86ba28765f","slug":null,"title":"CS725-S23, D3 Vis Intro","thumbnail":"276b2f78a9fbae2b2934c3400cccb2829b977c1dbea46f9f210aea897f2d7522","access_level":"public","create_time":"$D2023-02-06T22:48:00.143Z","update_time":"$D2023-02-06T23:14:58.389Z","view_time":null,"first_public_time":"$D2023-02-06T22:48:00.143Z","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":"8a4b0b01f276585e","login":"csggame001","name":"Gabriela Gamez","avatar_url":"https://avatars-next.observableusercontent.com/5e7ee8e08bffcdd5a7536f27651dbf684eb03e47ed2daca4018ff56055197b99","tier":"starter_2024","bio":"","following":false},"version":308,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"435839829bcad1f9","login":"csggame001","name":"Gabriela Gamez","avatar_url":"https://avatars-next.observableusercontent.com/5e7ee8e08bffcdd5a7536f27651dbf684eb03e47ed2daca4018ff56055197b99","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"435839829bcad1f9","login":"csggame001","name":"Gabriela Gamez","avatar_url":"https://avatars-next.observableusercontent.com/5e7ee8e08bffcdd5a7536f27651dbf684eb03e47ed2daca4018ff56055197b99","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"CS725-S23, D3 Vis Intro","cells":[{"id":0,"value":"# CS725-S23, 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":"// write answer here\nsvg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":"// write your answer here\n{\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":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":"// write your answer here\n{\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":214,"value":"### Scales Reminder\n\nReminder about scales from \nhttps://observablehq.com/@uw-info474/animated-scale-diagram (visit that notebook for animation)","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\nCS 725 [slide with bar height example](https://docs.google.com/presentation/d/1R3lwAE_mNW9PcTCYRT9Z8xlUMiXuhbrpJsIj-mfzRBc/preview)\n\n**Q4.** Use the data `bars` below and combine selections and joins with scales 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":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 //.domain([0, 0]) // EDIT THIS LINE - need an array with the list of names\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":182,"value":"solution(`.domain(bars.map(d => d.name))`)","pinned":false,"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, 0]) // EDIT THIS LINE\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":186,"value":"solution(`.domain([0, d3.max(bars, d => d.value)])`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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 => x(d.name)) // EDIT THIS LINE\n .attr('y', d => height - y(d.value)) // EDIT THIS LINE (remember that 0 starts at the top)\n .attr('width', x.bandwidth) // EDIT THIS LINE\n .attr('height', d => y(d.value)); // 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":194,"value":"## Bar Chart Walk-through\nhttps://observablehq.com/@nyuvis/bar-chart-walk-through?collection=@nyuvis/guides-and-examples\n\n* set up the **size** of the chart\n* set up the **scales** for the axes\n* set up the **axes**\n * `selection.call(func)`\n * formatting tick marks\n* putting it all together","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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