Introduction to D3.js with Shirley Wu

Shirley Wu is an award-winning creative focused on data-driven art and visualizations. She has worked with clients such as Google, The Guardian, SFMOMA, and NBC Universal to develop custom, highly interactive data visualizations. She combines her love of art, math, and code into colorful, compelling narratives that push the boundaries of the web.

0:00 Start!
5:38 Introduction
13:34 Introducing Shirley Wu
19:10 Film Flowers
25:30 SVG Paths
34:49 Drawing a Petal With SVG Commands
52:36 Importing Data To Observable
56:06 Linode (*Sponsor)
58:38 Break
1:03:08 Start Coding
1:31:53 D3 enter-update-exit
1:40:08 Visualizing The Data as Flowers
1:54:57 Conclusions and Goodbyes

[TheCodingTrain]

Also starts at 13:35 (thank you @Gordon Chin)

[vivekmenon]

I watched this at 2x the speed and the energy level is off the charts!

[jiehanaldicho]

We need more Shiffman-Shirley collab!
The dynamic between you both is just so perfect 💛

[rohitkrishnan]

Your videos are filled with awkwardness(it's not the word I'm looking for, but yeah) that never fails to bring a smile on my face! And the videos are really informative too. Keep up the good work!

[TelemetryOverlay]

At 1:29:56, to implicitly return an object literal from an arrow function, wrap it in parentheses. Otherwise the arrow function does not understand what you want is a return and not a code block or scope.

i => ({angle, petalPath})

[mamandroid]

At 01:30:14 to avoid the arrow function return statement, just put the object literals inside parenthesis and it'll do the job.
Just like this --> i => ({ ... your properties ... })

[scodemy]

Thanks a lot... Your channel has made me a better developer and has really improved my coding skills. Got motivated last month and I started my own web development YouTube channel. Am grateful

[jfcaliful]

"I'm committed to this and I'm not even going to explain it" - D3 in a Nutshell

[yamimzumara]

Awesome video, we want more..actually you two should make a whole series on data visualizations

[jenlee]

Shirley is a legend !!! And so patient with Dans keep cutting in the middle of her sentences or sometimes even the beginning of sentences 😂

[MyIreallydontcare]

I'm new to javascript and data and found this fascinating, to watch.

[allthatyouare]

This was so enjoyable to watch. Thank you!

[thehatchery]

Hello - a bit late to the station for this one, but what a fantastic video, great intro to D3 and the Shiffman-Shirley dynamic is hillarious, please more videos together 🙂

[simeydotme]

Shirley: "... And we need to get that from the data"
Dan: "... mm hmmm .... but we could also make it up ..."
...
Both: *contemplates life*
...
Dan: "I have lots of bad habits"

I love this interaction! and I've been on both sides many times, haha!

[illustriouschin]

13:55 to skip the part where they learn how to do a livestream again.

[atrumluminarium]

I can't believe somebody actually asked "are we getting distracted?" On a Coding Train live stream 🤣

[idej]

I wonder how can someone dislike a coding train video, there is no fricking way people are so mean ;-;

[marcotrevisan]

Oh well, i't been 3 hours+ now and still I cannot get the d3.extent() to work! Console keeps yelling at me that there is a type error and values() is not iterable... what the hell??

[GizemNOktay]

The quotation mark to create a string -'- (shift+2 on Mac keyboard) seems to be not working for me, it says unexpected token on Observable. Does anybody have an idea why this might be happening?

[akay]

You remind me of the professor from the Netflix series Money The character is inspired from ❤️❤️❤️