2b:null 2c:["$","title",null,{"children":"Introduction to SVG and D3.js | Shirley Wu | Observable"}] 31:T628,md`

This 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/)!

# Introduction to SVG and D3.js Hi there, thank you so much for joining my SVG and D3.js workshop! I have two goals with this workshop. The first is that you'll walk away with a solid understanding of how SVG (Scalable Vector Graphics) works, so that you'll be able to **draw your own custom shapes in the browser** and feel comfortable reading and understanding SVG syntax. The second is D3.js. D3.js is probably the de facto Javascript library for creating data visualizations in the web. It has _a lot_ of modules and functions dedicated to translating raw data onto the screen, calculating specific graph layouts, rendering different chart types...it's amazingly comprehensive, but it's also _a lot_. Overwhelming, dare I say, and I've been working with this library for almost a decade. So instead of trying (and failing) to teach you _allllllll_ the modules and what they do, I want to teach you the most fundamental parts of the library: selection, data-binding, and enter-update-exit. **With these core concepts under your belt and some practice, you'll feel comfortable exploring the rest of the API** and understanding example code all on your own! This is the workshop I wish I had when I was starting with D3.js, and I hope you'll be able to take some useful things away (๑•̀ㅂ•́)و✨ `32:T4db,md ` ## ✨ lessons & key takeaways 1. [Draw a flower petal on the screen](https://observablehq.com/d/c6629eb98b76cea3) - SVG coordinate system - SVG paths and the d attribute 2. [Select existing petal(s) and bind movie data](https://observablehq.com/d/dd416c1d85760363) - d3.select() and d3.selectAll() - selection.datum() and selection.data() - selection.attr() and selection.style() 3. [Create a petal for each movie](https://observablehq.com/d/f31b2033f4fe4e9f) - D3's enter-append pattern - SVG transforms (translate) 4. [Size each petal based on its movie's rating](https://observablehq.com/d/2683357905679f61) - d3.min(), d3.max(), d3.extent() - D3 scales - SVG transforms (scale) 5. [Turn petals into flowers for each movie](https://observablehq.com/d/2683357905679f61) - Nesting - SVG transforms (rotate) 6. [Add filter by options](https://observablehq.com/d/681e1e3eb92d6f08) - D3's update and exit patterns - D3 transitions 7. [Position film flowers by the genres they share](https://observablehq.com/d/a25aafa93f553da6) - D3 shapes and hierarchies - D3 force layout `33:[{"id":"b9d400c15085c8bfae522ac574942a4c2a4beab8a5c9bbf383e3d06cc0cbeb763dcf30b44fd1670d13c16229a73e2f8eabae7aa5f03b8c097fac8733402b5efb","href":"https://static.observableusercontent.com/files/b9d400c15085c8bfae522ac574942a4c2a4beab8a5c9bbf383e3d06cc0cbeb763dcf30b44fd1670d13c16229a73e2f8eabae7aa5f03b8c097fac8733402b5efb","name":"all_months.png","type":"image/png","lastModified":1596149447151.88,"size":1455681}] 2f:{"id":"0dea2a39181538b0","slug":"introduction-to-svg-and-d3-js","title":"Introduction to SVG and D3.js","thumbnail":"7d3208f23d96c8da262bce6ab7e9c25bf9db8d2e65158039a4f03e8377cae81b","access_level":"public","create_time":"$D2020-06-26T04:06:27.759Z","update_time":"$D2021-03-25T05:45:07.043Z","view_time":null,"first_public_time":"$D2020-08-11T00:09:22.062Z","fork":false,"stars":364,"starred":false,"owner":{"type":"team","id":"dd2028e442ef0aed","login":"sxywu","name":"Shirley Wu","avatar_url":"https://avatars-next.observableusercontent.com/f9949405cbe75a900a143ef7b67a9dff399dd0b11782e3ccae81e67e976e4f58","tier":"starter_2024"},"version":303,"publish_version":303,"role":null,"authored":false,"authors":[{"type":"individual","id":"295ff02db5133ff8","login":"sxywu","name":"Shirley Wu","avatar_url":"https://avatars-next.observableusercontent.com/f9949405cbe75a900a143ef7b67a9dff399dd0b11782e3ccae81e67e976e4f58","tier":null}],"members":[{"type":"individual","id":"295ff02db5133ff8","login":"sxywu","name":"Shirley Wu","avatar_url":"https://avatars-next.observableusercontent.com/f9949405cbe75a900a143ef7b67a9dff399dd0b11782e3ccae81e67e976e4f58","tier":null,"role":"editor"}],"comments":[{"id":"2ce6ca68500887bb","reply_to_id":null,"content":"i'd change the blockbuilder link to: https://blockbuilder.org/search?thumb=true","create_time":"$D2020-08-05T16:56:33.505Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"595405df3c534894","login":"enjalot","name":"Ian Johnson","avatar_url":"https://avatars-next.observableusercontent.com/549bdb0c368027004b51c4e95459e9c224331e0fec9c4cc97d181f83e55ab7f9","tier":null}},{"id":"e75747bd3ed0e551","reply_to_id":"2ce6ca68500887bb","content":"changed, thanks ian! tho i'm still experiencing the search not giving me back results i expect (for example typing in \"d3.arc\" into the function search returns bl.ocks that don't seem to use it?)","create_time":"$D2020-08-05T22:43:49.203Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"295ff02db5133ff8","login":"sxywu","name":"Shirley Wu","avatar_url":"https://avatars-next.observableusercontent.com/f9949405cbe75a900a143ef7b67a9dff399dd0b11782e3ccae81e67e976e4f58","tier":null}},{"id":"018a36cd5d995d66","reply_to_id":"2ce6ca68500887bb","content":"I will debug Sunday morning and let you know. it seems API isn't returning list of possible functions either","create_time":"$D2020-08-05T23:25:04.941Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"595405df3c534894","login":"enjalot","name":"Ian Johnson","avatar_url":"https://avatars-next.observableusercontent.com/549bdb0c368027004b51c4e95459e9c224331e0fec9c4cc97d181f83e55ab7f9","tier":null}},{"id":"9fb8fd7a3940e3ba","reply_to_id":"2ce6ca68500887bb","content":"thank you ian (:","create_time":"$D2020-08-09T22:32:39.722Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"295ff02db5133ff8","login":"sxywu","name":"Shirley Wu","avatar_url":"https://avatars-next.observableusercontent.com/f9949405cbe75a900a143ef7b67a9dff399dd0b11782e3ccae81e67e976e4f58","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":386,"collection":{"id":"ee05f463cef9b990","slug":"introduction-to-d3-js","title":"Workshop: Introduction to D3.js","owner":{"id":"dd2028e442ef0aed","login":"sxywu","name":"Shirley Wu"}},"type":"notebook","body":{"title":"Introduction to SVG and D3.js","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"md `\n## ✨ hi my name is Shirley👋\n\n[${Object.assign(\n await FileAttachment(\"all_months.png\").image(),\n { alt: 'A compilation of selected works', style: 'width: 100%; max-width: 640px' }\n)}](https://sxywu.com)\n^{*[portfolio of selected works](https://sxywu.com)*}\n\nI'm an independent creator of data visualizations, and I'm your instructor for this workshop! I'm a **software engineer** by training, and have published dozens of projects with D3.js since 2012 and have had just about as many years integrating it with Javascript frameworks. Four years ago, I decided to quit my full-time job and go off on my own, and have since expanded my skillset to include **data analysis** and **information design** as well.\n\nI've been teaching D3.js and data visualization courses since 2014, and have a few different workshops that I'll elaborate on as next steps at the end of this one!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":111,"value":"md `\n## ✨ our project today: film flowers 🌸\nI always think it's really fun when a workshop has an overarching project, so today we're going to go step by step to turn this **summer blockbuster movies** dataset:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":241,"value":"movies","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"md `\n^{(try expanding the dataset by clicking on that carat!)}\n\ninto this visualization of flowers:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":265,"value":"almostFinal","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":270,"value":"md`\npositioned by their genres:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":257,"value":"final","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"md`\nwhere **each movie is a flower**, and the mapping is:\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\n^{(this workshop project is based on my *film flowers* project, and you can see the full version [here](https://sxywu.com/filmflowers/).)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":189,"value":"md `\n## ✨ data visualization ecosystem & resources\n\n- [D3.js API Reference](https://github.com/d3/d3/blob/master/API.md)\n- [Bl.ocks](https://bl.ocks.org/) → [Observable](http://observablehq.com/)\n- [D3.js Slack](https://d3-slackin.herokuapp.com/)\n- [Data Visualization Society](https://www.datavisualizationsociety.com/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":243,"value":"md`\n## 🙏 many thank you's\n- Ian Johnson\n- Anjana Vakil\n- Visnu Pitiyanuvath\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"md `\n---\n\n

\n [1. Draw a flower petal on the screen →](https://observablehq.com/d/c6629eb98b76cea3)\n

\n\n
\n
\n
\n
\n
\n
\n
\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":213,"value":"md`\n### ~appendix~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":220,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":237,"value":"import {movies, petalColors} from '@sxywu/workshop-utility-functions'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":255,"value":"import {final} from 'a25aafa93f553da6'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":260,"value":"import {almostFinal} from '@sxywu/6-add-filter-by-options'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"