Learn how to work with SVG and foundational D3 concepts by creating a fun data visualization!  To access the full workshop, including video lessons, join Frontend Masters: https://frontendmasters.com/courses/d3/

Shirley Wu

Introduction to SVG and D3.js

1. Draw a flower petal on the screen

2. Select existing petal(s) and bind movie data

3. Create a petal for each movie

4. Size each petal based on its movie's rating

5. Turn petals into flowers for each movie

6. Add filter by options

7. Position film flowers by the genres they share

Workshop Utility Functions

Workshop: Introduction to D3.js

Love these illustrations! Re taking advantage of Observable, I wonder if you could also help folks grok the coordinate system by showing e.g. a simple canvas with an X,Y point on it, and two sliders to change X and Y - then you can demonstrate sliding them to show how the point moves (and they can play with it too). Very simple example of what I mean here: https://observablehq.com/d/22822bf854aba22d. And similar for the curve examples below, being able to manipulate the points with sliders or such may be useful for learners. Though you may be planning to do something like this as an exercise or such, and of course you know best how to teach your material! Just a thought, also looks great as-is (I think the illustration is quite clear). :)

Anjana Vakil

For the canvas coordinate system, I'm not planning to spend that long on it and that's why they're just simple drawings.  For the curves examples below I did consider sliders (bc that'd indeed be a great demonstration) but I decided I'd do it if I had time at the end ^^;;  For now I'm planning to work through the smiley face exercise with my ipad+pencil with the attendees, which is actually closest to my workflow when I'm coding SVG paths.

Thank you for the suggestions!

i would recommend keeping this pinned open. i know you'll be talking through this but i couldn't tell at first glance if i should be typing just the path string or the whole svg into the "smileyPath" variable"