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

Get inspired by the work of these amazing authors, nominated by members of the Observable team. 

Observable

Featured creators

Checkout what the Observable Ambassadors have been working on! Learn more about the program at observablehq.com/ambassadors

Ambassadors Showcase

A list of the top 10 notebooks that were most liked by the Observable community.

Top 10 Liked notebooks created by the community in 2020

A collection of the top 10 notebooks created in 2020 by the community based on most viewed.

Top 10 Most Viewed Notebooks in 2020

i'd change the blockbuilder link to: https://blockbuilder.org/search?thumb=true

Ian Johnson

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?)

I will debug Sunday morning and let you know. it seems API isn't returning list of possible functions either