2a:null 2b:["$","title",null,{"children":"CS725-S23, D3 Vis Intro | Michele Weigle | Observable"}] 30:[] 2e:{"id":"cae29cb56c6a7718","slug":"cs725-s23-d3-vis-intro","title":"CS725-S23, D3 Vis Intro","thumbnail":"9f4c6d5b41389cbb8b4d51e3c00a59e139d38d9542896aa1fed2a4b6b5eae5ac","access_level":"public","create_time":"$D2023-01-30T14:06:32.563Z","update_time":"$D2023-02-09T16:23:59.868Z","view_time":null,"first_public_time":"$D2023-01-30T14:06:32.563Z","has_unpublished_edits":null,"fork":{"id":"b06b1e7af3cd157e","slug":"cs725-s22-d3-vis-intro","title":"CS725-S22, D3 Vis Intro","owner":{"id":"8f581304ab2f1225","login":"weiglemc","name":"Michele Weigle"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8f581304ab2f1225","login":"weiglemc","name":"Michele Weigle","avatar_url":"https://avatars-next.observableusercontent.com/89f983e882cae9faa8e22c82afbe47f6f6352237d8ec47c06985ecfb1a108122","tier":"starter_2024"},"version":334,"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"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"2fa98c1a816ceb47","slug":"cs-725-825-spring-2023","title":"CS 725/825, Spring 2023","owner":{"id":"8f581304ab2f1225","login":"weiglemc","name":"Michele Weigle"}},"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","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":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":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","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\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","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)) // 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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(bars, d => d.value)]) // EDIT THIS LINE\n .range([0, height])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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))\n .attr('y', d => height - y(d.value))\n .attr('width', x.bandwidth())\n .attr('height', d => y(d.value));\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":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","providerMetadata":"$undefined","attachments":"$undefined","output":"","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"