24:null 25:["$","title",null,{"children":"2. Select existing petal(s) and bind movie data | Shirley Wu | Observable"}] 2a:[{"id":"7984a04c8eb6ecd33ed593ecb744fbc834635651c513e4a3db89c512d806fec5adb0a2acb52b369bb5d7c9c6b684dd5d9fb4a4fd632da4a47a29bbc068a59cbc","href":"https://static.observableusercontent.com/files/7984a04c8eb6ecd33ed593ecb744fbc834635651c513e4a3db89c512d806fec5adb0a2acb52b369bb5d7c9c6b684dd5d9fb4a4fd632da4a47a29bbc068a59cbc","name":"d3_coverage.jpg","type":"image/jpeg","lastModified":1596502532327.79,"size":64775},{"id":"c6e7b073081b742480fc5aa27cfff3053cb69144c2b8e515dd535dc8b63b28b6dc77e5e3b5defeec9ba1806c45ad522e75e37bbe6d9740ab801d561017d53d00","href":"https://static.observableusercontent.com/files/c6e7b073081b742480fc5aa27cfff3053cb69144c2b8e515dd535dc8b63b28b6dc77e5e3b5defeec9ba1806c45ad522e75e37bbe6d9740ab801d561017d53d00","name":"d3_api.jpg","type":"image/jpeg","lastModified":1596501700023.238,"size":122619},{"id":"50cb1e5268ab5b113e8ccc3d4548a3c1667e4fe26fa06faaa526d73e11ea87f519c05f97c97666a8709ca90c8e0cfcba9d7a20cff3ee08083c99f24f520e53a2","href":"https://static.observableusercontent.com/files/50cb1e5268ab5b113e8ccc3d4548a3c1667e4fe26fa06faaa526d73e11ea87f519c05f97c97666a8709ca90c8e0cfcba9d7a20cff3ee08083c99f24f520e53a2","name":"data_attr.jpg","type":"image/jpeg","lastModified":1596608231464.584,"size":148503},{"id":"dda95d11a0a25113a9d74eb4b63062ef236ebebcfe96752e09acb5f95ea10c31665edc7003b205bfa66676ff7a066c062f6becc1a3c40ad39e35a685e5cc49b5","href":"https://static.observableusercontent.com/files/dda95d11a0a25113a9d74eb4b63062ef236ebebcfe96752e09acb5f95ea10c31665edc7003b205bfa66676ff7a066c062f6becc1a3c40ad39e35a685e5cc49b5","name":"selectall_data@2.jpg","type":"image/jpeg","lastModified":1596604113839.571,"size":89874},{"id":"ba3b3ba9c7f4233eb4bf828082669cc790d26bfe0d95c2c33faec196a759a247705bbd4000bccd9c383c8cb2dfb882a0d3c393b0c2924d030784357eceaaa4fb","href":"https://static.observableusercontent.com/files/ba3b3ba9c7f4233eb4bf828082669cc790d26bfe0d95c2c33faec196a759a247705bbd4000bccd9c383c8cb2dfb882a0d3c393b0c2924d030784357eceaaa4fb","name":"select_datum.jpg","type":"image/jpeg","lastModified":1596603911952.567,"size":72496},{"id":"b0a4a238d08832367ea1f76fc63400986411aa46bcaa5a39edfb79d8e984098ae24b02373347f29508ee360804103de2ecbd37ef71491444cfa0914d07fe43cb","href":"https://static.observableusercontent.com/files/b0a4a238d08832367ea1f76fc63400986411aa46bcaa5a39edfb79d8e984098ae24b02373347f29508ee360804103de2ecbd37ef71491444cfa0914d07fe43cb","name":"selectall_datum.jpg","type":"image/jpeg","lastModified":1596603911954.501,"size":89131}] 28:{"id":"dd416c1d85760363","slug":"2-select-existing-petal-s-and-bind-movie-data","title":"2. Select existing petal(s) and bind movie data","thumbnail":"847f0fd11a66efb9b3ebf114d08c817910bf153555dad2256c0ba16c1dfb5687","access_level":"public","create_time":"$D2020-08-03T08:08:17.592Z","update_time":"$D2022-06-22T21:28:00.092Z","view_time":null,"first_public_time":"$D2020-08-10T23:55:46.331Z","fork":false,"stars":35,"starred":false,"owner":{"type":"team","id":"dd2028e442ef0aed","login":"sxywu","name":"Shirley Wu","avatar_url":"https://avatars-next.observableusercontent.com/f9949405cbe75a900a143ef7b67a9dff399dd0b11782e3ccae81e67e976e4f58","tier":"starter_2024"},"version":693,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"295ff02db5133ff8","login":"sxywu","name":"Shirley Wu","avatar_url":"https://avatars-next.observableusercontent.com/f9949405cbe75a900a143ef7b67a9dff399dd0b11782e3ccae81e67e976e4f58","tier":null}],"members":[{"type":"individual","id":"295ff02db5133ff8","login":"sxywu","name":"Shirley Wu","avatar_url":"https://avatars-next.observableusercontent.com/f9949405cbe75a900a143ef7b67a9dff399dd0b11782e3ccae81e67e976e4f58","tier":null,"role":"editor"}],"comments":[{"id":"09607922bc70d70e","reply_to_id":null,"content":"I want students to be able to comment and uncomment this cell and see what happens, but after they uncomment any of the .attr() lines and run it then comment it again the petals won't go back to how it was originally.\n\ni really want the students to be able to see the HTML code above and edit the JS code in this cell...is there a way to rerun the HTML cell whenever this cell runs?","create_time":"$D2020-08-04T23:29:45.338Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"295ff02db5133ff8","login":"sxywu","name":"Shirley Wu","avatar_url":"https://avatars-next.observableusercontent.com/f9949405cbe75a900a143ef7b67a9dff399dd0b11782e3ccae81e67e976e4f58","tier":null}},{"id":"02fdc39d4615b3a1","reply_to_id":null,"content":"you could do this with available d3 functions, slightly less convenient:\n\nd3.range(5).map( i => Math.round( d3.randomUniform(20,100)() ) )","create_time":"$D2020-08-05T17:16:02.484Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"595405df3c534894","login":"enjalot","name":"Ian Johnson","avatar_url":"https://avatars-next.observableusercontent.com/549bdb0c368027004b51c4e95459e9c224331e0fec9c4cc97d181f83e55ab7f9","tier":null}},{"id":"a12aaee4aeb26071","reply_to_id":null,"content":"i loooooove this visual!","create_time":"$D2020-08-05T17:28:08.749Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"595405df3c534894","login":"enjalot","name":"Ian Johnson","avatar_url":"https://avatars-next.observableusercontent.com/549bdb0c368027004b51c4e95459e9c224331e0fec9c4cc97d181f83e55ab7f9","tier":null}},{"id":"2a0e6b694ce3b966","reply_to_id":"09607922bc70d70e","content":"Hi Shirley, I see you resolved this so hoping you got it to work as you wanted, but if not let me know! I'm not sure which HTML cell you mean, but if you name this cell you'll get a reactive reference to it, which you can reference in any other cell to have the other cell update when this one does. Not sure if that makes sense, just let me know if there's anything unresolved here I can help clear up :)","create_time":"$D2020-08-05T18:44:57.684Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d7d614fa2258860d","login":"anjana","name":"Anjana Vakil","avatar_url":"https://avatars-next.observableusercontent.com/75f0346d6c6908da9b546556f8d223eceb871857b81263c0d62ed549cc492936","tier":null}},{"id":"497ae3a375438235","reply_to_id":"a12aaee4aeb26071","content":"yayyyy thank you!","create_time":"$D2020-08-05T23:53:10.626Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"295ff02db5133ff8","login":"sxywu","name":"Shirley Wu","avatar_url":"https://avatars-next.observableusercontent.com/f9949405cbe75a900a143ef7b67a9dff399dd0b11782e3ccae81e67e976e4f58","tier":null}},{"id":"5d0b2e103bb3eeb7","reply_to_id":"02fdc39d4615b3a1","content":"ah this one isn't important whether we use D3 or not....and i'm even actually considering hard coding the numbers i have in my drawn images.","create_time":"$D2020-08-05T23:54:06.752Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"295ff02db5133ff8","login":"sxywu","name":"Shirley Wu","avatar_url":"https://avatars-next.observableusercontent.com/f9949405cbe75a900a143ef7b67a9dff399dd0b11782e3ccae81e67e976e4f58","tier":null}},{"id":"cc6e4360ad7f4ec2","reply_to_id":"09607922bc70d70e","content":"ah so for this particular cell i figured out what i was trying to do, hence why i resolved it. but for this one what i wanted to do was rerunning this cell also triggers its parent cell (that this cell has a dependency/reactive reference to) to rerun. not sure if that's possible since it seems like it's bordering the circular reference?\n\n(also accidentally resolved your comment and not sure how to un-resolve .__.)","create_time":"$D2020-08-05T23:58:18.427Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"295ff02db5133ff8","login":"sxywu","name":"Shirley Wu","avatar_url":"https://avatars-next.observableusercontent.com/f9949405cbe75a900a143ef7b67a9dff399dd0b11782e3ccae81e67e976e4f58","tier":null}},{"id":"3645fdabacfd72f1","reply_to_id":"09607922bc70d70e","content":"Hm, yes if I'm understanding what you mean then that sounds like you'd need to do something a little tricky to avoid the circular dependency. Without knowing the details I'm not sure what the solution would be, but where there's a will there's a way - feel free to send an example and/or let me know if you want to jump on a call sometime to pair on it :)","create_time":"$D2020-08-06T17:37:01.700Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d7d614fa2258860d","login":"anjana","name":"Anjana Vakil","avatar_url":"https://avatars-next.observableusercontent.com/75f0346d6c6908da9b546556f8d223eceb871857b81263c0d62ed549cc492936","tier":null}},{"id":"412ac7ac8910f326","reply_to_id":"a12aaee4aeb26071","content":"+++++ it's amazing to see it broken down this way, also the \"here's what we need to get started, don't worry about the rest right now\" is so helpful","create_time":"$D2020-08-06T17:41:21.415Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d7d614fa2258860d","login":"anjana","name":"Anjana Vakil","avatar_url":"https://avatars-next.observableusercontent.com/75f0346d6c6908da9b546556f8d223eceb871857b81263c0d62ed549cc492936","tier":null}},{"id":"072db64760580073","reply_to_id":"02fdc39d4615b3a1","content":"ah yeah, i would recommend hard-coding so as not to distract people who potentially haven't used lodash. one less thing to worry about!","create_time":"$D2020-08-09T20:37:35.331Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"595405df3c534894","login":"enjalot","name":"Ian Johnson","avatar_url":"https://avatars-next.observableusercontent.com/549bdb0c368027004b51c4e95459e9c224331e0fec9c4cc97d181f83e55ab7f9","tier":null}},{"id":"c069fdd3590c74bb","reply_to_id":"a12aaee4aeb26071","content":"💖💖💖 thank you!","create_time":"$D2020-08-10T23:43:17.749Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"295ff02db5133ff8","login":"sxywu","name":"Shirley Wu","avatar_url":"https://avatars-next.observableusercontent.com/f9949405cbe75a900a143ef7b67a9dff399dd0b11782e3ccae81e67e976e4f58","tier":null}},{"id":"669ea2680397626b","reply_to_id":"02fdc39d4615b3a1","content":"done! thanks ian (:","create_time":"$D2020-08-10T23:43:35.844Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"295ff02db5133ff8","login":"sxywu","name":"Shirley Wu","avatar_url":"https://avatars-next.observableusercontent.com/f9949405cbe75a900a143ef7b67a9dff399dd0b11782e3ccae81e67e976e4f58","tier":null}},{"id":"f5852b2f85e98890","reply_to_id":"09607922bc70d70e","content":"oh actually i think it's ok now that i have it in the same cell block i don't see the use case being necessary anymore (:","create_time":"$D2020-08-10T23:44:33.093Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"295ff02db5133ff8","login":"sxywu","name":"Shirley Wu","avatar_url":"https://avatars-next.observableusercontent.com/f9949405cbe75a900a143ef7b67a9dff399dd0b11782e3ccae81e67e976e4f58","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":330,"collection":{"id":"ee05f463cef9b990","slug":"introduction-to-d3-js","title":"Workshop: Introduction to D3.js","owner":{"id":"dd2028e442ef0aed","login":"sxywu","name":"Shirley Wu"}},"type":"notebook","body":{"title":"2. Select existing petal(s) and bind movie data","cells":[{"id":0,"value":"md`\n\n

\nThis notebook was created as workshop material for the *Introduction to SVG and D3.js* course on Frontend Masters. Watch the [full video course here](https://frontendmasters.com/courses/d3/)!\n

\n\n# 2. Select existing petal(s) and bind movie data\n\nThe [D3.js API](https://github.com/d3/d3/blob/master/API.md) is extremely comprehensive and supports many (if not all?) of the ways that we might go about building visualizations. That's great, but it can also feel overwhelming when we're starting out.\n\nThis is my attempt at organizing all the modules and their submodules by **when in the data visualization creation process I might use them**:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"slide`\n\n${Object.assign(await FileAttachment(\"d3_api.jpg\").image(), {\n alt: 'D3 API arranged by where in the data visualization creation process they might be used',\n style: 'width: 100%;',\n})}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"md`\nAnd here are the parts that we'll cover today:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"slide`\n${Object.assign(await FileAttachment(\"d3_coverage.jpg\").image(), {\n alt: 'D3 API arranged by where in the data visualization creation process they might be used',\n style: 'width: 100%;',\n})}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":"md`\nThis might seem like an incredibly tiny subset of the library to cover, but this subset is the core foundation of D3.js. With a solid understanding of the **Selections** module (and a little bit of patience), you should have no trouble reading through the documentation and examples for most of the other modules in the library.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"md`\n## ✨ d3.select() and d3.selectAll()\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":457,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"md `\n**↑** Above, we have an SVG with five rectangle elements. Because the rectangles don't have width and height set, they aren't showing up—but that's ok for now.\n\n**↓** Below, we have a cell that returns our SVG element as a D3 *selection*—try **expanding it** and take note of what you see. Try returning the select instead, then the selectAll.\n\nNext, try **console-logging** each of them and look at what is printed in the Inspector.\n\n

* When you work with D3.js outside of Observable, console-logging will become a really important debugging tool.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"{\n // wrap SVG element with d3\n const svg = d3.select('#container')\n \n // select the first path in the svg selection\n // (note: selections can be chained)\n const select = svg.select('rect')\n \n // select all the paths in the svg selection\n const selectAll = svg.selectAll('rect')\n \n // console.log('svg', svg)\n // console.log('select', select)\n // console.log('selectAll', selectAll)\n \n // return svg\n \n // return select\n \n return selectAll\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":359,"value":"slide`\n\n* [d3.select(*selector*)](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#select)\n* [d3.selectAll(*selector*)](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selectAll)\n* [*selection*.select(*selector*)](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_select)\n* [*selection*.selectAll(*selector*)](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_selectAll)\n\nTakes in a *selector* string or DOM element and returns a D3.js *selection*.\n\nd3.select() and d3.selectAll() query the entire DOM. selection.select() and selection.selectAll() are restricted to the descendents of the *selection*.\n\n*Selections* allow for method chaining.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":128,"value":"md`\n## ✨ selection.datum() and selection.data()\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":318,"value":"barData","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":524,"value":"md`\n**↑** Above, we have an array of 5 randomly generated numbers that we'll temporarily use to simulate data.\n\n**↓** Below, we've bound the data to different *selection*s. Try **uncommenting** different lines, take note of where and how the data are bound.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":312,"value":"{\n const el = html`\n \n `\n const svg = d3.select(el)\n \n // return svg.select('rect').datum(barData)\n \n // return svg.selectAll('rect').datum(barData)\n \n return svg.selectAll('rect').data(barData)\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":340,"value":"slide`\n\n- [selection.datum(*value*)](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_datum)\n- [selection.data(*data*)](https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_data)\n\nBinds data to the **selection**.\n\n

\n${Object.assign(await FileAttachment(\"select_datum.jpg\").image(), {\n alt: 'Select first rectangle and bind whole data array',\n style: 'width: 100%;',\n})}\n\n${Object.assign(await FileAttachment(\"selectall_datum.jpg\").image(), {\n alt: 'Select all rectangles and bind whole data array to each',\n style: 'width: 100%;',\n})}\n\n${Object.assign(await FileAttachment(\"selectall_data@2.jpg\").image(), {\n alt: 'Select all rectangles and bind each element in data array to each rectangle',\n style: 'width: 100%;',\n})}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"md`\n\n## ✨ selection.attr() and selection.style()\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":231,"value":"md `\nIn the next cell, we're selecting one or all of the SVG paths and setting attributes on them. Try uncommenting the code, then try setting different attributes on the paths.\n\nHere is a reference for [presentation attributes in SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":549,"value":"barData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":176,"value":"{\n const rectWidth = 50\n \n const svg = html`\n paths, bind movies data and set fill attribute for each petal based on its movie's genres (for this exercise we can take the first in the array):\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":383,"value":"viewof colors = form(html`\n\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":415,"value":"colors","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":434,"value":"movies","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":432,"value":"{\n const svg = html`\n \n `\n \n // YOUR CODE HERE ✨\n \n return svg\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":589,"value":"md`\nHere's what the end result should look like:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":382,"value":"{\n const svg = html`\n\n`\n \n // select all paths\n d3.select(svg).selectAll('path')\n .data(movies)\n .attr('fill', d => colors[d.genres[0]] || colors.Other)\n \n \n return svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":597,"value":"md `\n---\n\n

\n [3. Create a petal for each movie →](https://observablehq.com/d/f31b2033f4fe4e9f)\n

\n\n
\n
\n
\n
\n
\n
\n
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"md`\n### ~appendix~ \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":626,"value":"import {\n movies, barData, colorObj, pathObj, slide, slide_style,\n} from '@sxywu/workshop-utility-functions'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":150,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":653,"value":"petalPath = window.localStorage.petalPath","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":347,"value":"slide_style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":512,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2a","stdlib":"1","titling":"auto"}} 29:"$28:body"