31:[] 2f:{"title":"CS725-S22, D3 Vis Intro","cells":[{"id":0,"value":"# CS725-S22, D3 Vis Intro","pinned":false,"hidden":false,"mode":"md"},{"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 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"},{"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 * [SVG Translate example](https://docs.google.com/presentation/d/1TKFcgmPKvybFX22-XDJ8f3Hn_0IVbmo5rt045GX34jE/preview?rm=minimal)\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"},{"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"},{"id":32,"value":"// write answer here","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"solution(``, 'html')","pinned":false,"hidden":false,"mode":"ojs"},{"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\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"},{"id":75,"value":"**Q2.** Recreate the rectangles in Q1 using D3.","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"// write your answer here","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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","pinned":false,"hidden":false,"mode":"md"},{"id":102,"value":"**Q3.** Given `bardata` below, recreate the rectangles in Q1, Q2 using selections and joins.","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":106,"value":"// write your answer here","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":214,"value":"### Brief Detour\n\nMore ways to visualize selections and joins: https://observablehq.com/@nyuvis/review\n\nAnimated reminder about scales from \nhttps://observablehq.com/@uw-info474/animated-scale-diagram","pinned":false,"hidden":false,"mode":"md"},{"id":209,"value":"scaleDiagram","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":145,"value":"width = 300","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"height = 100","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"x = d3.scaleBand()\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"},{"id":182,"value":"solution(`.domain(bars.map(d => d.name))`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"y = d3.scaleLinear()\n .domain([0, 0]) // EDIT THIS LINE\n .range([0, height])","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"solution(`.domain([0, d3.max(bars, d => d.value)])`)","pinned":false,"hidden":false,"mode":"ojs"},{"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 => 0) // EDIT THIS LINE\n .attr('y', d => 0) // EDIT THIS LINE (remember that 0 starts at the top)\n .attr('width', 0) // EDIT THIS LINE\n .attr('height', d => 0); // EDIT THIS LINE\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":15,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"import {aq, op} from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"import {solution} from \"@nyuvis/d3-introduction\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":207,"value":"import {chart as scaleDiagram} from \"@uw-info474/animated-scale-diagram\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}