31:[{"id":"7d39cb79827c4dcb1d12c3ce8eabbc438e0fc88a987726deb50975cf079d50b4af331e2f9d6b8db0779d06daf86e668e0051894217dcc0a3aa11241ba4304b83","href":"https://static.observableusercontent.com/files/7d39cb79827c4dcb1d12c3ce8eabbc438e0fc88a987726deb50975cf079d50b4af331e2f9d6b8db0779d06daf86e668e0051894217dcc0a3aa11241ba4304b83","name":"nest_path_create@1.jpg","type":"image/jpeg","lastModified":1597126987452.019,"size":343521},{"id":"2e23c02a8fa99e6de27d79096489ec66f1c24eca7fcf9702312275b740b5b6858e6af8beb7feb714b22e9da509439cc42593048e7701b19cc3b3bc38bf8669a1","href":"https://static.observableusercontent.com/files/2e23c02a8fa99e6de27d79096489ec66f1c24eca7fcf9702312275b740b5b6858e6af8beb7feb714b22e9da509439cc42593048e7701b19cc3b3bc38bf8669a1","name":"nest_flower.jpg","type":"image/jpeg","lastModified":1597113086458.283,"size":74853},{"id":"7741165b73091e2b1f5a80e8ed1d85eafb3f6860148511f002d7b81be6fa613cead4b95cbc516fca4660c2fc28b1368fd4619956b1fa2fa0ef51fe922dde2329","href":"https://static.observableusercontent.com/files/7741165b73091e2b1f5a80e8ed1d85eafb3f6860148511f002d7b81be6fa613cead4b95cbc516fca4660c2fc28b1368fd4619956b1fa2fa0ef51fe922dde2329","name":"nest_g@4.jpg","type":"image/jpeg","lastModified":1597113888245.14,"size":133225},{"id":"692d59009223b713837f209b21229299da1a7a22dd6199d08a2e8065c6896786715169036194183bf5c11b3f1ecff92899afb6f6ecaa38f4bd399d487077dc4d","href":"https://static.observableusercontent.com/files/692d59009223b713837f209b21229299da1a7a22dd6199d08a2e8065c6896786715169036194183bf5c11b3f1ecff92899afb6f6ecaa38f4bd399d487077dc4d","name":"nest_path_data@1.jpg","type":"image/jpeg","lastModified":1597122344626.386,"size":103458},{"id":"0b59e5a16967e6c8466b7519ffb33b8a0dc678f5ce7ff6dad8e65eb10251e01d20cf597dd6fdc83e9db51e69b2ee516fff4bb724fe1baf97c043275b5aaf04e4","href":"https://static.observableusercontent.com/files/0b59e5a16967e6c8466b7519ffb33b8a0dc678f5ce7ff6dad8e65eb10251e01d20cf597dd6fdc83e9db51e69b2ee516fff4bb724fe1baf97c043275b5aaf04e4","name":"nest_text.jpg","type":"image/jpeg","lastModified":1597119849174.285,"size":189887}] 2f:{"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"},{"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"},{"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"},{"id":177,"value":"g = svg.selectAll('g')\n .data(flowers).enter().append('g')","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":203,"value":"text = g.append('text')","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":26,"value":"container = {\n const svg = html``\n return scrollSVG(svg)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":353,"value":"md`\nLet's code together to bring all that together in one place:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"{\n const svg = html``\n \n // ✨ OUR CODE HERE\n \n return scrollSVG(svg)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":300,"value":"viewof transform1 = form(html`\n\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"transformCode(transform1, `rotate(${transform1.rotate})`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"transformSVG(transform1, `rotate(${transform1.rotate})`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"viewof transform2 = form(html`\n\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":8,"value":"md`\n### ~appendix~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":19,"value":"import {calculateData} from '2683357905679f61'","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"import {form} from '@mbostock/form-input'","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"flowers = calculateData(movies)","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"slide_style","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"svg = d3.select(container).select('svg')","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}