40:null 41:["$","title",null,{"children":"5. Turn petals into flowers for each movie | Gianni's Workspace | Observable"}] 47:[{"id":"2e23c02a8fa99e6de27d79096489ec66f1c24eca7fcf9702312275b740b5b6858e6af8beb7feb714b22e9da509439cc42593048e7701b19cc3b3bc38bf8669a1","href":"https://static.observableusercontent.com/files/2e23c02a8fa99e6de27d79096489ec66f1c24eca7fcf9702312275b740b5b6858e6af8beb7feb714b22e9da509439cc42593048e7701b19cc3b3bc38bf8669a1","name":"nest_flower.jpg","type":"image/jpeg","lastModified":1704549003927.691,"size":74853},{"id":"7741165b73091e2b1f5a80e8ed1d85eafb3f6860148511f002d7b81be6fa613cead4b95cbc516fca4660c2fc28b1368fd4619956b1fa2fa0ef51fe922dde2329","href":"https://static.observableusercontent.com/files/7741165b73091e2b1f5a80e8ed1d85eafb3f6860148511f002d7b81be6fa613cead4b95cbc516fca4660c2fc28b1368fd4619956b1fa2fa0ef51fe922dde2329","name":"nest_g@4.jpg","type":"image/jpeg","lastModified":1704549003927.691,"size":133225},{"id":"0b59e5a16967e6c8466b7519ffb33b8a0dc678f5ce7ff6dad8e65eb10251e01d20cf597dd6fdc83e9db51e69b2ee516fff4bb724fe1baf97c043275b5aaf04e4","href":"https://static.observableusercontent.com/files/0b59e5a16967e6c8466b7519ffb33b8a0dc678f5ce7ff6dad8e65eb10251e01d20cf597dd6fdc83e9db51e69b2ee516fff4bb724fe1baf97c043275b5aaf04e4","name":"nest_text.jpg","type":"image/jpeg","lastModified":1704549003927.691,"size":189887},{"id":"692d59009223b713837f209b21229299da1a7a22dd6199d08a2e8065c6896786715169036194183bf5c11b3f1ecff92899afb6f6ecaa38f4bd399d487077dc4d","href":"https://static.observableusercontent.com/files/692d59009223b713837f209b21229299da1a7a22dd6199d08a2e8065c6896786715169036194183bf5c11b3f1ecff92899afb6f6ecaa38f4bd399d487077dc4d","name":"nest_path_data@1.jpg","type":"image/jpeg","lastModified":1704549003927.691,"size":103458},{"id":"7d39cb79827c4dcb1d12c3ce8eabbc438e0fc88a987726deb50975cf079d50b4af331e2f9d6b8db0779d06daf86e668e0051894217dcc0a3aa11241ba4304b83","href":"https://static.observableusercontent.com/files/7d39cb79827c4dcb1d12c3ce8eabbc438e0fc88a987726deb50975cf079d50b4af331e2f9d6b8db0779d06daf86e668e0051894217dcc0a3aa11241ba4304b83","name":"nest_path_create@1.jpg","type":"image/jpeg","lastModified":1704549003927.691,"size":343521}] 45:{"id":"20bd44ffb8c516f6","slug":null,"title":"5. Turn petals into flowers for each movie","thumbnail":"a067a797546ec3424276006b058537a27345d7efe679b14d9e83a1cca2d6bf6c","access_level":"public","create_time":"$D2024-01-06T13:50:03.927Z","update_time":"$D2024-01-06T14:11:22.654Z","view_time":null,"first_public_time":"$D2024-01-06T13:50:03.927Z","has_unpublished_edits":null,"fork":{"id":"66eaba834e1dc5b1","slug":"5-turn-petals-into-flowers-for-each-movie","title":"5. Turn petals into flowers for each movie","owner":{"id":"dd2028e442ef0aed","login":"sxywu","name":"Shirley Wu"}},"stars":0,"starred":false,"owner":{"type":"team","id":"48963d0ae9613a9f","login":"gianni2-ws","name":"Gianni's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/03cb0c0f270b028c94c7c5b8faf832ba6eb9ddf3af1f7c03f6ba7b093df2ec22","tier":"starter_2024","bio":"","following":false},"version":413,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a2a258e547e26138","login":"gianni2","name":"Gianni","avatar_url":"https://avatars-next.observableusercontent.com/3d088cd417a55e264e4bb410db74deec52e26751171961dae73250550c2bdde1","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"a2a258e547e26138","login":"gianni2","name":"Gianni","avatar_url":"https://avatars-next.observableusercontent.com/3d088cd417a55e264e4bb410db74deec52e26751171961dae73250550c2bdde1","tier":null,"role":"editor"},{"type":"team","id":"48963d0ae9613a9f","login":"gianni2-ws","name":"Gianni's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/03cb0c0f270b028c94c7c5b8faf832ba6eb9ddf3af1f7c03f6ba7b093df2ec22","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"5. Turn petals into flowers 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# 5. Turn petals into flowers for each movie\n\nIt's time to turn our individual petals into flowers! To do that, we have to draw a certain number of petals for each movie, dependent on the data. Then we want to position those flowers (made up of multiple petals) in a grid, and for readability, let's add the movie's title to each flower.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"slide`\nHere's what the SVG should look like for each movie flower:\n${Object.assign(await FileAttachment(\"nest_flower.jpg\").image(), {\n alt: '',\n style: 'width: 100%; max-width: 640px;',\n})}\n\n

\n\\`\\` elements don't render anything, and instead we use them to **group** other elements to manipulate together. In this case, we use it to \\`translate\\` our \\`\\`s and \\`\\`.

\n\n
\n**Ok, let's use D3.js to build this together.**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"slide`\n${Object.assign(await FileAttachment(\"nest_g@4.jpg\").image(), {\n alt: '',\n style: 'width: 100%; max-width: 640px',\n})}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"g = svg.selectAll('g')\n .data(flowers).enter().append('g')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"slide`\n${Object.assign(await FileAttachment(\"nest_text.jpg\").image(), {\n alt: '',\n style: 'width: 100%; max-width: 640px',\n})}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"text = g.append('text')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"slide`\n

\n Now comes the interesting part: each film flower has a different number of petal \\`\\`s depending on the data. To dynamically create the correct number of \\`\\`s, we use the same *selectAll-data-enter-append* pattern as before. \n\n
\n${Object.assign(await FileAttachment(\"nest_path_data@1.jpg\").image(), {\n alt: '',\n style: 'width: 100%; max-width: 640px',\n})}\n\n
\n\nTurns out, \\`.data()\\` also accepts *functions*, so the key is to **write a function that returns an array of objects**:\n\n
\n
\n${Object.assign(await FileAttachment(\"nest_path_create@1.jpg\").image(), {\n alt: '',\n style: 'width: 100%; max-width: 640px',\n})}\n\n\n
\n
\n\n**↓** Make sure to toggle to see the resulting D3.js *selection*:\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"path = g.selectAll('path')\n .data(d => {\n return _.times(d.numPetals, i => {\n // create a copy of the parent data, and add in calculated rotation\n return Object.assign({}, d, {rotate: i * (360 / d.numPetals)})\n })\n }).enter().append('path')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"md`\n## ✨ finally, flowers 🌸!\n\nNow that we have the \\`\\`s, \\`\\`s, and \\`\\`s created, let's set attributes and styles on them so that they'll render the way we want:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"container = {\n const svg = html``\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":222,"value":"{\n g.attr('transform', (d, i) => `translate(${d.translate})`)\n \n text.attr('text-anchor', 'middle')\n .attr('dy', '.35em')\n .style('font-size', '.7em')\n .style('font-style', 'italic')\n .text(d => _.truncate(d.title, {length: 20}))\n \n path.attr('transform', d => `rotate(${d.rotate})scale(${d.scale})`)\n .attr('d', d => d.path)\n .attr('fill', d => d.color)\n .attr('fill-opacity', 0.5)\n .attr('stroke', d => d.color)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"md`\nLet's code together to bring all that together in one place:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"{\n const svg = html``\n \n // ✨ OUR CODE HERE\n //parents group elements\n const g = d3.select(svg).selectAll('g')\n .data(flowers).enter().append('g') //group elemet dont rendern on screen, but are created on the DOM\n .attr('transform', d => `translate(${d.translate})`)\n //create petals paths\n g.selectAll('path')\n .data(d => {\n return _.times(d.numPetals, i =>\n Object.assign({}, d, {rotate: i * (360 / d.numPetals)}))\n }).enter().append('path')\n .attr('transform', d => `rotate(${d.rotate})scale(${d.scale})`)\n .attr('d', d => d.path)\n .attr('fill', d => d.color)\n .attr('stroke', d=> d.color)\n .attr('fill-opacity', 0.5)\n .attr('stroke-width', 2)\n\n //text\n g.append('text')\n .text(d => _.truncate(d.title, 10))\n .style('font-size', '.5em')\n .style('text-anchor', 'middle')\n .attr('dy', '.35em')\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":294,"value":"md`\n## ✨ svg transform: \\`rotate()\\`\nJust like the previous transforms, \\`rotate()\\` affects the whole coordinate system, and is set in **degrees** (unlike Javascript Math functions, which are set with radians...):\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"viewof transform1 = 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":308,"value":"transformCode(transform1, `rotate(${transform1.rotate})`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"transformSVG(transform1, `rotate(${transform1.rotate})`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"viewof transform2 = 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":336,"value":"md`\n🚨 And just like before, the order in which you chain \\`rotate()\\` with \\`translate()\\` will dramatically differ in the resulting coordinate system, so be careful!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"transformCode(transform2,\n `translate(${_.round(transform2.translateX, 2)},${_.round(transform2.translateY, 2)})rotate(${_.round(transform2.rotate, 2)})`,\n `rotate(${_.round(transform2.rotate, 2)})translate(${_.round(transform2.translateX, 2)},${_.round(transform2.translateY, 2)})`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"transformSVG(transform2,\n `translate(${_.round(transform2.translateX, 2)},${_.round(transform2.translateY, 2)})rotate(${_.round(transform2.rotate, 2)})`,\n `rotate(${_.round(transform2.rotate, 2)})translate(${_.round(transform2.translateX, 2)},${_.round(transform2.translateY, 2)})`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"md `\n---\n\n

\n [6. Add filter by options →](https://observablehq.com/d/681e1e3eb92d6f08)\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":8,"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":6,"value":"import {\n movies, slide, slide_style,\n svgHeight, scrollSVG, textWidth,\n transformCode, transformSVG,\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":19,"value":"import {calculateData} from '2683357905679f61'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"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":347,"value":"flowers = calculateData(movies)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"slide_style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"svg = d3.select(container).select('svg')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"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":40,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 46:"$45:body"