2b:null 2c:["$","title",null,{"children":"D3 Workout | Matthew Berger | Observable"}] 31:T600,plot_part1 = html` `32:[{"id":"8c6e75cb0ecdd5eb105910a86bd3b5f678fab365d0198339cecd9ee79d51a628abd0c271050cf399f4e8ff37e8ae91d8fd894b9fc5a7187c7327c4e89834ebd5","href":"https://static.observableusercontent.com/files/8c6e75cb0ecdd5eb105910a86bd3b5f678fab365d0198339cecd9ee79d51a628abd0c271050cf399f4e8ff37e8ae91d8fd894b9fc5a7187c7327c4e89834ebd5","name":"decline.png","type":"image/png","lastModified":1597841686041.322,"size":38687}] 2f:{"id":"0be21fbc2c2bce94","slug":null,"title":"D3 Workout","thumbnail":"93124be46393c8f1f684f35e6162e7fae7c759df2fb60fa4e667a50129337152","access_level":"unlisted","create_time":"$D2020-08-19T12:26:30.419Z","update_time":"$D2020-09-02T18:00:34.099Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"ff8d3dc5309f0e8f","login":"mattberger","name":"Matthew Berger","avatar_url":"https://avatars-next.observableusercontent.com/db43c568a6d4eb06d6475f8809d39dc6cc8e44a37000cb82904f063c85599c88","tier":"starter_2024"},"version":218,"publish_version":218,"role":null,"authored":false,"authors":[{"type":"individual","id":"3e3683c87ab9f224","login":"mattberger","name":"Matthew Berger","avatar_url":"https://avatars-next.observableusercontent.com/db43c568a6d4eb06d6475f8809d39dc6cc8e44a37000cb82904f063c85599c88","tier":null}],"members":[{"type":"individual","id":"3e3683c87ab9f224","login":"mattberger","name":"Matthew Berger","avatar_url":"https://avatars-next.observableusercontent.com/db43c568a6d4eb06d6475f8809d39dc6cc8e44a37000cb82904f063c85599c88","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":26,"collection":null,"type":"notebook","body":{"title":"D3 Workout","cells":[{"id":0,"value":"md`# D3 Workout\n\nIn this assignment you will be introduced to the basics of D3: selections, setting element attributes, and creating elements through the data join. You will create the same visualization, in two different ways:\n\n* Using **selections**, given elements that have already been created.\n* Creating elements through the **data join**, and setting their attributes appropriately.\n\nYour visualization should be identical to the following image:\n\n

${Object.assign(await FileAttachment('decline.png').image(), { alt: 'Refinement of the Decline', style: 'width: 100%; max-width: 606px;' })}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"md`# Part 1\n\nFor this part of the assignment, the elements that correspond to the graphical marks in the above image have already been created for you. In particular, their **geometric properties**, e.g. position, size, have been set. Further, the elements have been assigned descriptive **classes**.\n\nThe below cell contains the visualization.\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"md`\n\nNote: the image is black because no colors have been assigned to the elements! It is your responsibility to **select elements**, and **set their colors**.\n\nTo understand the DOM hierarchy for this visualization, please see the raw HTML above, or alternatively, the node-link diagram of the visualization below (recall: you may click on nodes to inspect their attributes).\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"viewof plot_part1_vis = drawdom(plot_part1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"plot_part1_vis","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"md`\n\nThe below cell is where you will perform selections, and set element attributes, in accordance with the suggested comments, where the colors to be used are defined further below.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"{\n let svg_selection = d3.select(plot_part1) // this is our svg element, wrapped in a Selection\n \n // TODO: assign `rect` with id \"backgroundrect\" a fill of `bg_color`\n\n // TODO: assign all `rect`s with class \"bar\" a fill of `bar_color_1` if the i'th bar is even, and `bar_color_2` if the i'th bar is odd\n\n // TODO: assign `rect` with id \"mainbox\" a fill of `black_color`\n\n // TODO: assign `circle` with class \"outer\", and whose parent is the group element with class \"maingroup\", a fill of `black_color`\n // TODO: assign `circle` with class \"inner\", and whose parent is the group element with class \"maingroup\", a fill of `bg_color`\n\n // TODO: assign `circle` with class \"outer\", and whose parent is the group element with class \"leftgroup\" or \"rightgroup\", a fill of `bg_color`\n // TODO: assign `circle` with class \"inner\", and whose parent is the group element with class \"leftgroup\" or \"rightgroup\", a fill of `black_color`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"md`# Part 2\n\nFor this part of the assignment, you will create this visualization from scratch. You will use the Arrays \\`box\\`, \\`bars\\`, \\`main_circles\\`, and \\`infinity_circles\\`, as defined below. Elements will be created from these Arrays via data joins.\n\nOnce elements have been created, you should then assign them their geometric attributes (positions, and width/height for rectangles, and radii for circles), as well as color attributes. Further, for some elements, it will be necessary to create **group elements** _from the data_.\n\nThe comments below provide more detailed instructions of what operations to perform.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"{\n let svg_selection = d3.create('svg').attr('width', 600).attr('height', 600)\n\n // TODO: create a `rect` with fill `bg_color`, and whose shape matches that of the svg element\n \n // TODO: create a `rect` from the `box` data, with fill `black_color`\n\n // TODO: create `rect`s from `bars` data, with fill `bar_color_1` when the i'th bar is even and `bar_color_2` if the i'th bar is odd\n \n // TODO: create `circle`s from `main_circles`, using colors in the data for fill\n \n // TODO: first issue a data join on `infinity_circles` to create group elements, using the position property to define the transform (translate)\n // then, issue a nested data join using the children property to propagate data\n \n return svg_selection.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"md`# Visual Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"md`## Colors\n\nThese colors will be used for both parts of the assignment.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"bg_color = '#ed8369'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"black_color = '#000000'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"bar_color_1 = '#ffecbf'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"bar_color_2 = '#e2ca9e'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`## Main Box\n\nThis is the black box that sits atop the two bars on the left. Its geometry is defined with respect to the SVG's coordinate system.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"box = [{x:12,y:222,width:71.5-12,height:290.5-222}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"md`## Bars\n\nThe bars are defined with an x-coordinate, a width, a height, but no y-coordinate. The base of the bars should all be on the bottom of the graphic. It is your responsibility to position the bars correctly from this information. Hint: recall the SVG coordinate system...\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"bars = [\n {x:14.5,width:30-14.5,height:600-306.5},\n {x:51,width:69.5-51,height:600-306.5},\n {x:98.5,width:121-98.5,height:600-309.5},\n {x:146,width:174-146,height:600-325},\n {x:199,width:222.5-199,height:600-351},\n {x:251.5,width:268.5-251.5,height:600-361},\n {x:285,width:312-285,height:600-396.5},\n {x:339.5,width:363-339.5,height:600-404.5},\n {x:405.5,width:420-405.5,height:600-407},\n {x:452.5,width:466.5-452.5,height:600-411},\n {x:508,width:537-508,height:600-393.5},\n {x:561.5,width:590.5-561.5,height:600-356}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"md`## Main Circles\n\nThese two circles sit on top of the bar on the right.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"main_circles = [\n {cx:351.3,cy:384.5,r:10.2,fill:black_color},\n {cx:351.3,cy:384.5,r:4.2,fill:bg_color},\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"md`## Infinity Circles\n\nThese circles form the infinity-like shape on the left.\n* Group elements will first be created using the \\`position\\` property to specify a transformation, namely a translation.\n* Under each transformation, namely as children of the group elements, two circles will be created. We do not need to specify their centers - the transformation will take care of this for us. We just need to specify their radii and fill colors.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"infinity_circles = [\n {position:{tx:35,ty:253.5}, children:[{r:11.5,fill:bg_color},{r:5.5,fill:black_color}]},\n {position:{tx:52.25,ty:253.5}, children:[{r:10.5,fill:bg_color},{r:4.2,fill:black_color}]}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"md`# Assessment\n\n## Part 1: 50 points\n\n(quotes refer to class names)\n\n* correct background fill color (5 points)\n* \"bar\" rectangles assigned correct fill colors (25 points)\n* correct \"maingroup\" circle fill colors (10 points)\n* correct \"leftgroup\" and \"rightgroup\" circle fill colors (10 points)\n\n## Part 2: 50 points\n\n* create rectangle for background, assign appropriate fill color (5 points)\n* creation of rect element from \\`box\\` data, and appropriate attribute assignment (5 points)\n* creation of individual bars from \\`bars\\` data, and appropriate attribute assignment (25 points)\n* creation of circles from \\`main_circles\\` data, appropriate attribute assignment (7 points)\n* creation of groups, and subsequently circles, through nested data join on \\`infinity_circles\\` data, plus appropriate attributes assigned (8 points)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md`# Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"import {drawdom,drawjoin} from '91007ee9d5fd152b'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"