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

PublicWorkshop: Introduction to D3.js

Public
Workshop: Introduction to D3.js