3e:null 3f:["$","title",null,{"children":"3. Create a petal for each movie | Ryan Riley | Observable"}] 45:[{"id":"2be49cdf268392d5997c8bff5f4a46dbebd6b18ef1d6e9e1bac9654f601325be0f874968053de626ac474f95c044f396ebb2dfa6ce8cff625dc870ac16ac873d","href":"https://static.observableusercontent.com/files/2be49cdf268392d5997c8bff5f4a46dbebd6b18ef1d6e9e1bac9654f601325be0f874968053de626ac474f95c044f396ebb2dfa6ce8cff625dc870ac16ac873d","name":"enter_empty@1.jpg","type":"image/jpeg","lastModified":1685137856073.178,"size":90605},{"id":"5b79cdee075a553d0b198632e7c0261f0cbe958f71f4cc6f3b5c5055e776847418a86379b5fb6c76c2878b355aca86cccda071b2ef27ae8aa7a31a4d89276a5e","href":"https://static.observableusercontent.com/files/5b79cdee075a553d0b198632e7c0261f0cbe958f71f4cc6f3b5c5055e776847418a86379b5fb6c76c2878b355aca86cccda071b2ef27ae8aa7a31a4d89276a5e","name":"enter_data@2.jpg","type":"image/jpeg","lastModified":1685137856073.178,"size":96744},{"id":"e923dc97e681751f610ab45d00ffdc2dd7b7081e8027c65523ba9298173bddc826af9e4fa8ef0ec9aca31fc430413e803a26254d94df8124d4f192244cd0d16f","href":"https://static.observableusercontent.com/files/e923dc97e681751f610ab45d00ffdc2dd7b7081e8027c65523ba9298173bddc826af9e4fa8ef0ec9aca31fc430413e803a26254d94df8124d4f192244cd0d16f","name":"enter_enter@1.jpg","type":"image/jpeg","lastModified":1685137856073.178,"size":99958},{"id":"be995c08bdaae2741c1ebd5304c801ec455e5e89c182e7a82bc5d7be52015d7afcb6763f30750fae6eb47e8418b3214d52a802411492270b771175facccf0b9a","href":"https://static.observableusercontent.com/files/be995c08bdaae2741c1ebd5304c801ec455e5e89c182e7a82bc5d7be52015d7afcb6763f30750fae6eb47e8418b3214d52a802411492270b771175facccf0b9a","name":"enter_append.jpg","type":"image/jpeg","lastModified":1685137856073.178,"size":113209}] 43:{"id":"34f89ad10f3d7911","slug":null,"title":"3. Create a petal for each movie","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-05-26T21:50:56.073Z","update_time":"$D2023-05-27T16:52:30.022Z","view_time":null,"first_public_time":"$D2023-05-26T21:50:56.073Z","has_unpublished_edits":null,"fork":{"id":"f31b2033f4fe4e9f","slug":"3-create-a-petal-for-each-movie","title":"3. Create a petal for each movie","owner":{"id":"dd2028e442ef0aed","login":"sxywu","name":"Shirley Wu"}},"stars":0,"starred":false,"owner":{"type":"team","id":"48fb2d2c9f142c2b","login":"panesofglass","name":"Ryan Riley","avatar_url":"https://avatars-next.observableusercontent.com/57d48699807b3a868c50c13b4966a5da0dcb29fcfff8faf7e007731df2f3e042","tier":"starter_2024","bio":"","following":false},"version":601,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2dfd23376dc4d3c4","login":"panesofglass","name":"Ryan Riley","avatar_url":"https://avatars-next.observableusercontent.com/57d48699807b3a868c50c13b4966a5da0dcb29fcfff8faf7e007731df2f3e042","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"2dfd23376dc4d3c4","login":"panesofglass","name":"Ryan Riley","avatar_url":"https://avatars-next.observableusercontent.com/57d48699807b3a868c50c13b4966a5da0dcb29fcfff8faf7e007731df2f3e042","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"3. Create a petal for each movie","cells":[{"id":0,"value":"md`\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# 3. Create a petal for each movie\n\nThus far we've been able to bind our data to existing DOM elements and set attributes on them. But we can't possibly go around manually creating SVG elements for every data point we have—our movies dataset has 135 movies, none of us are gonna sit and copy paste 135 paths!\n\nSo here's how we'll go about it instead:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"barData","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"{\n const rectWidth = 50\n \n const svg = html`\n \n `\n \n d3.select(svg).selectAll('rect')\n .data(barData).enter().append('rect')\n // calculate x-position based on its index\n .attr('x', (d, i) => i * rectWidth)\n // set height based on the bound datum\n .attr('height', d => d)\n // rest of attributes are constant values\n .attr('width', rectWidth)\n .attr('stroke-width', 3)\n .attr('stroke', 'plum')\n .attr('fill', 'pink')\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":26,"value":"slide`\n**↑** It rendered the same exact bars as before, but this time, the *SVG is empty*!\n\n**↓** These are the **magic✨ lines**:\n\n\\`\\`\\`js\nd3.select(svg).selectAll('rect')\n .data(data).enter().append('rect')\n\\`\\`\\`\n\n
\n\n**Let's break them down together.**\n\n\n${Object.assign(await FileAttachment(\"enter_empty@1.jpg\").image(), {\n alt: '',\n style: 'width: 100%; max-width: 640px;',\n})}\n\n
\n\n**So how are the bars appearing?**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"slide`\n\n## ✨.data(data)\n${Object.assign(await FileAttachment(\"enter_data@2.jpg\").image(), {\n alt: '',\n style: 'width: 100%; max-width: 640px;',\n})}\n\n
\n**↓** Take a look at how D3 does this with .data(data).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"{\n const svg = html``\n // in Observable we can also create svg with DOM.svg()\n \n return d3.select(svg).selectAll('rect').data(barData)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"slide`\n\n## ✨.enter()\n\n${Object.assign(await FileAttachment(\"enter_enter@1.jpg\").image(), {\n alt: '',\n style: 'width: 100%; max-width: 640px;',\n})}\n\n
\n**↓** And this is what .enter() returns:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"{\n const svg = html``\n // in Observable we can also create svg with DOM.svg()\n \n return d3.select(svg).selectAll('rect').data(barData).enter()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"slide`\n\n## ✨.append('rect')\n\n${Object.assign(await FileAttachment(\"enter_append.jpg\").image(), {\n alt: '',\n style: 'width: 100%; max-width: 640px;',\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":113,"value":"{\n const svg = html``\n // in Observable we can also create svg with DOM.svg()\n \n return d3.select(svg).selectAll('rect')\n .data(barData).enter().append('rect')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"slide`\n# ⚡️\n### D3.js stands for *data-driven documents* because\n### we're letting our *data* drive what is created in the *DOM*.\n\n
\n
\n🚨 Things to look out for when entering and appending:\n- The data passed in *must* be an array\n- The *selector* in selectAll(*selector*) *must* match what is appended. \n For example, if the *selector* is a class name instead of element tag:\n \\`\\`\\`js\nselection.selectAll('.bar')\n .data(data).enter().append('rect')\n .classed('bar', true)\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":189,"value":"md`\n## 🔥 exercise time 🔥\n\n- **Parental Guidance rating → type of flower petal**\n- Number of IMDB votes → number of petals\n- IMDB rating out of 10 → size of petals\n- **Movie genre → color of petals**\n\nCreate a petal for each movie in the movies dataset:\n- set transform and translate(x, y) based on its index (use \\`calculateGridPos(i)\\`, which will return \\`[x, y]\\`)\n- set fill based on the movie's genres (use first in array)\n- set d based on the movie's Parental Guidance rated value\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"movies","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"pathObj","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"colorObj","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"{\n const svg = html``\n \n // YOUR CODE HERE ✨\n d3.select(svg).selectAll(\"path\")\n .data(movies).enter().append(\"path\")\n .attr(\"transform\", (d, i) => `translate(${calculateGridPos(i)})`)\n .attr(\"d\", d => pathObj[d.rated] || pathObj.PG)\n .attr(\"fill\", d => colorObj[d.genres[0]] || colorObj.Other)\n .attr(\"fill-opacity\", 0.5)\n .attr(\"stroke\", d => colorObj[d.genres[0]] || colorObj.Other)\n .attr(\"stroke-width\", 2)\n \n return scrollSVG(svg)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"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 d3.select(svg).selectAll('path')\n .data(movies).enter().append('path')\n .attr('transform', (d, i) => `translate(${calculateGridPos(i)})`)\n .attr('d', d => pathObj[d.rated])\n .attr('fill', d => colorObj[d.genres[0]] || colorObj.Other)\n .attr('stroke', d => colorObj[d.genres[0]] || colorObj.Other)\n .attr('fill-opacity', 0.5)\n .attr('stroke-width', 2)\n \n return scrollSVG(svg)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"md `\n## ✨ svg transform: translate()\nWhen we set translate() on an SVG element, we're moving around its coordinate system. Play around with the sliders to get an intuitive feel for how it works:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"viewof translate = 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":202,"value":"viewof positions = 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":488,"value":"transformCode(positions, `translate(${translate.x}, ${translate.y})`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"transformSVG(positions, `translate(${translate.x}, ${translate.y})`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"md `\n---\n\n

\n [4. Size each petal based on its movie's rating →](https://observablehq.com/d/2683357905679f61)\n

\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":5,"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":203,"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":504,"value":"import {\n movies, slide, slide_style,\n barData, colorObj, pathObj,\n textWidth, transformCode, transformSVG, scrollSVG, svgHeight, calculateGridPos,\n} from 'd8565901a86e96b2'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"slide_style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"d3 = require('d3')","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"