Shirley Wu

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/

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!