25:["$","title",null,{"children":"Introduction to SVG and D3.js | segundev | Observable"}] 49: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 (๑•̀ㅂ•́)و✨ `4a: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 `4b:[{"id":"b9d400c15085c8bfae522ac574942a4c2a4beab8a5c9bbf383e3d06cc0cbeb763dcf30b44fd1670d13c16229a73e2f8eabae7aa5f03b8c097fac8733402b5efb","href":"https://static.observableusercontent.com/files/b9d400c15085c8bfae522ac574942a4c2a4beab8a5c9bbf383e3d06cc0cbeb763dcf30b44fd1670d13c16229a73e2f8eabae7aa5f03b8c097fac8733402b5efb","name":"all_months.png","type":"image/png","lastModified":1671253368543.171,"size":1455681}] 29:{"id":"1233b75893cf0e95","slug":null,"title":"Introduction to SVG and D3.js","thumbnail":"c9332e0abcee37d043eac693af67d1273a86e924efad26903128278bb3de138a","access_level":"public","create_time":"$D2022-12-17T05:02:48.543Z","update_time":"$D2022-12-17T05:02:48.543Z","view_time":null,"first_public_time":"$D2022-12-17T05:02:48.543Z","has_unpublished_edits":null,"fork":{"id":"0dea2a39181538b0","slug":"introduction-to-svg-and-d3-js","title":"Introduction to SVG and D3.js","owner":{"id":"dd2028e442ef0aed","login":"sxywu","name":"Shirley Wu"}},"stars":0,"starred":false,"owner":{"type":"team","id":"cea13b99e8ea4d5f","login":"segundev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/4001f6d4e7ba7f30c8a046bf8d06be3f6cc9e79670e87789f7c3f31e9e1f66bc","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":303,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f2e7417528f50399","login":"segundev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/4001f6d4e7ba7f30c8a046bf8d06be3f6cc9e79670e87789f7c3f31e9e1f66bc","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"f2e7417528f50399","login":"segundev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/4001f6d4e7ba7f30c8a046bf8d06be3f6cc9e79670e87789f7c3f31e9e1f66bc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Introduction to SVG and D3.js","cells":[{"id":0,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"movies","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"almostFinal","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"md`\npositioned by their genres:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"final","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"$4a","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## ✨ 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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"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":220,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"import {movies, petalColors} 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":255,"value":"import {final} from 'a25aafa93f553da6'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"import {almostFinal} from '@sxywu/6-add-filter-by-options'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null