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

Ian Johnson

+++++ it's amazing to see it broken down this way, also the "here's what we need to get started, don't worry about the rest right now" is so helpful

Anjana Vakil

I want students to be able to comment and uncomment this cell and see what happens, but after they uncomment any of the .attr() lines and run it then comment it again the petals won't go back to how it was originally.

i really want the students to be able to see the HTML code above and edit the JS code in this cell...is there a way to rerun the HTML cell whenever this cell runs?

Hi Shirley, I see you resolved this so hoping you got it to work as you wanted, but if not let me know! I'm not sure which HTML cell you mean, but if you name this cell you'll get a reactive reference to it, which you can reference in any other cell to have the other cell update when this one does. Not sure if that makes sense, just let me know if there's anything unresolved here I can help clear up :)

ah so for this particular cell i figured out what i was trying to do, hence why i resolved it.  but for this one what i wanted to do was rerunning this cell also triggers its parent cell (that this cell has a dependency/reactive reference to) to rerun.  not sure if that's possible since it seems like it's bordering the circular reference?

(also accidentally resolved your comment and not sure how to un-resolve .__.)

Hm, yes if I'm understanding what you mean then that sounds like you'd need to do something a little tricky to avoid the circular dependency. Without knowing the details I'm not sure what the solution would be, but where there's a will there's a way - feel free to send an example and/or let me know if you want to jump on a call sometime to pair on it :)

oh actually i think it's ok now that i have it in the same cell block i don't see the use case being necessary anymore (:

you could do this with available d3 functions, slightly less convenient:

d3.range(5).map( i => Math.round( d3.randomUniform(20,100)() ) )

ah this one isn't important whether we use D3 or not....and i'm even actually considering hard coding the numbers i have in my drawn images.

ah yeah, i would recommend hard-coding so as not to distract people who potentially haven't used lodash. one less thing to worry about!