2b:null 2c:["$","title",null,{"children":"D3's select/selectAll with data/Datum | parshwa mehta | Observable"}] 31:[{"id":"50cb1e5268ab5b113e8ccc3d4548a3c1667e4fe26fa06faaa526d73e11ea87f519c05f97c97666a8709ca90c8e0cfcba9d7a20cff3ee08083c99f24f520e53a2","href":"https://static.observableusercontent.com/files/50cb1e5268ab5b113e8ccc3d4548a3c1667e4fe26fa06faaa526d73e11ea87f519c05f97c97666a8709ca90c8e0cfcba9d7a20cff3ee08083c99f24f520e53a2","name":"data_attr.jpg","type":"image/jpeg","lastModified":1604826495879.53,"size":148503},{"id":"dda95d11a0a25113a9d74eb4b63062ef236ebebcfe96752e09acb5f95ea10c31665edc7003b205bfa66676ff7a066c062f6becc1a3c40ad39e35a685e5cc49b5","href":"https://static.observableusercontent.com/files/dda95d11a0a25113a9d74eb4b63062ef236ebebcfe96752e09acb5f95ea10c31665edc7003b205bfa66676ff7a066c062f6becc1a3c40ad39e35a685e5cc49b5","name":"selectall_data@2.jpg","type":"image/jpeg","lastModified":1604826495879.53,"size":89874},{"id":"b0a4a238d08832367ea1f76fc63400986411aa46bcaa5a39edfb79d8e984098ae24b02373347f29508ee360804103de2ecbd37ef71491444cfa0914d07fe43cb","href":"https://static.observableusercontent.com/files/b0a4a238d08832367ea1f76fc63400986411aa46bcaa5a39edfb79d8e984098ae24b02373347f29508ee360804103de2ecbd37ef71491444cfa0914d07fe43cb","name":"selectall_datum.jpg","type":"image/jpeg","lastModified":1604826495879.53,"size":89131},{"id":"ba3b3ba9c7f4233eb4bf828082669cc790d26bfe0d95c2c33faec196a759a247705bbd4000bccd9c383c8cb2dfb882a0d3c393b0c2924d030784357eceaaa4fb","href":"https://static.observableusercontent.com/files/ba3b3ba9c7f4233eb4bf828082669cc790d26bfe0d95c2c33faec196a759a247705bbd4000bccd9c383c8cb2dfb882a0d3c393b0c2924d030784357eceaaa4fb","name":"select_datum.jpg","type":"image/jpeg","lastModified":1604826495879.53,"size":72496}] 2f:{"id":"ec66cbb7fcb31739","slug":"d3s-select-selectall-with-data-datum","title":"D3's select/selectAll with data/Datum","thumbnail":"1f5b6c80a4832509cfe6fe418f1b208bf387876f5875e6eeb89a6a39632e7f21","access_level":"public","create_time":"$D2020-11-08T09:08:15.879Z","update_time":"$D2021-09-24T06:31:58.139Z","view_time":null,"first_public_time":"$D2020-11-08T09:24:47.036Z","fork":{"id":"dd416c1d85760363","slug":"2-select-existing-petal-s-and-bind-movie-data","title":"2. Select existing petal(s) and bind movie data","owner":{"id":"dd2028e442ef0aed","login":"sxywu","name":"Shirley Wu"}},"stars":2,"starred":false,"owner":{"type":"team","id":"83eccca209618a73","login":"parshwamehta13","name":"parshwa mehta","avatar_url":"https://avatars-next.observableusercontent.com/d99af472eb1fbed2fb91f4b964431150c55f9dfea780591339a9a0c23354e217","tier":"starter_2024"},"version":762,"publish_version":762,"role":null,"authored":false,"authors":[{"type":"individual","id":"05e7852b4131104b","login":"parshwamehta13","name":"parshwa mehta","avatar_url":"https://avatars-next.observableusercontent.com/d99af472eb1fbed2fb91f4b964431150c55f9dfea780591339a9a0c23354e217","tier":null}],"members":[{"type":"individual","id":"05e7852b4131104b","login":"parshwamehta13","name":"parshwa mehta","avatar_url":"https://avatars-next.observableusercontent.com/d99af472eb1fbed2fb91f4b964431150c55f9dfea780591339a9a0c23354e217","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"D3's select/selectAll with data/Datum","cells":[{"id":0,"value":"md`\n# D3's select/selectAll with data/Datum\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md`\n## ✨ d3.select() and d3.selectAll()\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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 select;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":128,"value":"md`\n## ✨ selection.datum() and selection.data()\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"barData","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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 const boundElement = svg.selectAll('rect').data(barData);\n const boundElement2 = svg.selectAll('rect').datum(barData);\n const boundElement3 = svg.select('rect').datum(barData);\n console.log(`boundElement ===> `, boundElement);\n console.log(`boundElement2 ===> `, boundElement2);\n console.log(`boundElement3 ===> `, boundElement3);\n return boundElement;\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":110,"value":"md`\n\n## ✨ selection.attr() and selection.style()\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":549,"value":"barData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"{\n const rectWidth = 50\n \n const svg = html`\n

\n [Dynamic Data Binding →](https://observablehq.com/@parshwamehta13/dynamic-data-binding)\n

\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`\n### ~appendix~ \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":150,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"petalPath = window.localStorage.petalPath","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"slide_style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"