3e:null 3f:["$","title",null,{"children":"2. Select existing petal(s) and bind movie data | Coding explorations | Observable"}] 45:[{"id":"7984a04c8eb6ecd33ed593ecb744fbc834635651c513e4a3db89c512d806fec5adb0a2acb52b369bb5d7c9c6b684dd5d9fb4a4fd632da4a47a29bbc068a59cbc","href":"https://static.observableusercontent.com/files/7984a04c8eb6ecd33ed593ecb744fbc834635651c513e4a3db89c512d806fec5adb0a2acb52b369bb5d7c9c6b684dd5d9fb4a4fd632da4a47a29bbc068a59cbc","name":"d3_coverage.jpg","type":"image/jpeg","lastModified":1677831832066.485,"size":64775},{"id":"c6e7b073081b742480fc5aa27cfff3053cb69144c2b8e515dd535dc8b63b28b6dc77e5e3b5defeec9ba1806c45ad522e75e37bbe6d9740ab801d561017d53d00","href":"https://static.observableusercontent.com/files/c6e7b073081b742480fc5aa27cfff3053cb69144c2b8e515dd535dc8b63b28b6dc77e5e3b5defeec9ba1806c45ad522e75e37bbe6d9740ab801d561017d53d00","name":"d3_api.jpg","type":"image/jpeg","lastModified":1677831832066.485,"size":122619},{"id":"50cb1e5268ab5b113e8ccc3d4548a3c1667e4fe26fa06faaa526d73e11ea87f519c05f97c97666a8709ca90c8e0cfcba9d7a20cff3ee08083c99f24f520e53a2","href":"https://static.observableusercontent.com/files/50cb1e5268ab5b113e8ccc3d4548a3c1667e4fe26fa06faaa526d73e11ea87f519c05f97c97666a8709ca90c8e0cfcba9d7a20cff3ee08083c99f24f520e53a2","name":"data_attr.jpg","type":"image/jpeg","lastModified":1677831832066.485,"size":148503},{"id":"dda95d11a0a25113a9d74eb4b63062ef236ebebcfe96752e09acb5f95ea10c31665edc7003b205bfa66676ff7a066c062f6becc1a3c40ad39e35a685e5cc49b5","href":"https://static.observableusercontent.com/files/dda95d11a0a25113a9d74eb4b63062ef236ebebcfe96752e09acb5f95ea10c31665edc7003b205bfa66676ff7a066c062f6becc1a3c40ad39e35a685e5cc49b5","name":"selectall_data@2.jpg","type":"image/jpeg","lastModified":1677831832066.485,"size":89874},{"id":"ba3b3ba9c7f4233eb4bf828082669cc790d26bfe0d95c2c33faec196a759a247705bbd4000bccd9c383c8cb2dfb882a0d3c393b0c2924d030784357eceaaa4fb","href":"https://static.observableusercontent.com/files/ba3b3ba9c7f4233eb4bf828082669cc790d26bfe0d95c2c33faec196a759a247705bbd4000bccd9c383c8cb2dfb882a0d3c393b0c2924d030784357eceaaa4fb","name":"select_datum.jpg","type":"image/jpeg","lastModified":1677831832066.485,"size":72496},{"id":"b0a4a238d08832367ea1f76fc63400986411aa46bcaa5a39edfb79d8e984098ae24b02373347f29508ee360804103de2ecbd37ef71491444cfa0914d07fe43cb","href":"https://static.observableusercontent.com/files/b0a4a238d08832367ea1f76fc63400986411aa46bcaa5a39edfb79d8e984098ae24b02373347f29508ee360804103de2ecbd37ef71491444cfa0914d07fe43cb","name":"selectall_datum.jpg","type":"image/jpeg","lastModified":1677831832066.485,"size":89131}] 43:{"id":"08787806416124aa","slug":null,"title":"2. Select existing petal(s) and bind movie data","thumbnail":"847f0fd11a66efb9b3ebf114d08c817910bf153555dad2256c0ba16c1dfb5687","access_level":"public","create_time":"$D2023-03-03T08:23:52.066Z","update_time":"$D2023-03-03T08:34:31.956Z","view_time":null,"first_public_time":"$D2023-03-03T08:23:52.066Z","has_unpublished_edits":null,"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":0,"starred":false,"owner":{"type":"team","id":"359f9b68a3127ad6","login":"coding-explorations","name":"Coding explorations","avatar_url":"https://avatars-next.observableusercontent.com/02ab8581a0b10555d19c3c007f3fa487f46f98d33612456fc7a79d8b6cbe0202","tier":"starter_2024","bio":"","following":false},"version":692,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c7e1eb8a500ae63","login":"emsa","name":"Emil Sandberg","avatar_url":"https://avatars-next.observableusercontent.com/0977f4ff5d93b8064e51acbed11a92cedfa33402c311e70108a36cb0b7fcad66","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"359f9b68a3127ad6","login":"coding-explorations","name":"Coding explorations","avatar_url":"https://avatars-next.observableusercontent.com/02ab8581a0b10555d19c3c007f3fa487f46f98d33612456fc7a79d8b6cbe0202","tier":"starter_2024","role":"editor"},{"type":"individual","id":"5c7e1eb8a500ae63","login":"emsa","name":"Emil Sandberg","avatar_url":"https://avatars-next.observableusercontent.com/0977f4ff5d93b8064e51acbed11a92cedfa33402c311e70108a36cb0b7fcad66","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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 selectAll\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"barData","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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 \n return svg.selectAll('rect').data(barData)\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"barData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"viewof colors = form(html`\n\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"colors","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"movies","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"{\n const svg = html`\n \n `\n \n // YOUR CODE HERE ✨\n\n d3.select(svg).selectAll('path')\n .data(movies)\n .attr('fill', d => colors[d.genres[0]] || colors.Other)\n .attr('fill-opacity', 0.5)\n .attr('stroke-width', 3)\n .attr('stroke', d => colors[d.genres[0]] || colors.Other)\n \n return svg\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`\n### ~appendix~ \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"petalPath = window.localStorage.petalPath","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"slide_style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 44:"$43:body"