[Music]
okay now I'm live mu yeah they were I
use hello everyone welcome to a very
special episode of the coding train with
a guest Shirley woo I would I would say
before the train whistle I think it's
not sanitary I get a bell you can ring
out what you just my only one well I
don't know you can do it there you go
okay there are sounds I'm sorry well
have a little time some technical
difficulties in getting started this is
a little awkward we're gonna kind of
figure this out as we go I have this
tendency to like look over here because
a little behind the scenes here this is
where I have the monitor and I can see
the chat and we can like sort of see
what the mic levels are but if we stand
like this the whole time we're looking
that way okay I try to talk to the
picture over there on the camera and you
can also just talk we could talk to each
other I like to people I will get to
introducing Shirley in a minute let me
just kind of like lay some that is sort
of like to give you the context of
what's about to happen here today I will
note it's around 4:15 p.m. Eastern Time
there is an event happening in the space
of NYU at 6:00 p.m. so we have to end
around 5 or 10 of and if for some reason
everything goes wrong we don't finish
we'll come back another time yeah that's
what's gonna happen to much higher vests
um so but this is a unique episode live
stream of the coding train in the sense
that I I'm going to learn something new
taught by Shirley and in fact a little
technical magic here is can i this is
okay right yeah I my stream deck is
failing so I can't seem to set up a
button but I'm gonna come over here and
I'm gonna click something on the
interface here like this boom and that's
my screen two different screens so I'm
gonna try leave it as yours right now
sure like to you so that when we get to
the point of view introducing yourself
you might have stuff there so okay
welcome maybe your
like what am I even watching this is the
coding train I am your host I try to
stream doctor conductor a conductor can
you by the way can everybody hear surely
okay okay
lots of noise from one of the two mics
hi maybe dance mic since it makes noise
when he moves somebody has a loose my
choir well we can we can test this
pretty easy number one is I can put this
on and I can hear so try go hello hello
hello is all sounds very good to me
actually my name is Shirley okay I'm
gonna mute my mic for a second okay
Shirley just talk my name is Shirley uh
yeah okay
my name is Dan and my mic is back on
Mike is definitely dance oh it's
happening as I move around maybe it's
just loose connection here okay let me
try this
probably just oh that's
yeah I can make it happen okay I think
we're okay right now it's me and I I
think I had like a weird connection all
right I'm gonna assume for the moment
now one thing you should be aware of
what you're looking at the chat
everybody's about behind us okay so
anything we say it takes about 36 the
chat to actually see it
got it so sometimes the messages are
very hard to Oh
it's interacting with my hair yeah I
think it might have been but I think
it's I think it's okay I think it really
was my mic because as I was a thing I
shifted some wires I heard lots of crazy
same thing so I think we're good people
are saying that my sound is low it's
really bad all mine
it's got worse I wonder is it better if
I stand further away is there some kind
of receiver issue all right hold on I'm
gonna put that what's weird is I don't
hear that glitching in like me trying to
well now I hear something
but that's cuz you're doing that okay so
now I shouldn't get anywhere near my
hair
okay this sounds perfect to me
all right everyone I'm holding up three
fingers so tell me if three fingers
right now say three sounds good sounds
bad cuz it in my in the mater it sounds
perfect I heard it
Oh what is it is it this movement so
take out let's hold on sick we're gonna
we're gonna do a little debugging of
this I'm just going to move us remove us
from the picture okay um why don't you
take the whole thing off and let's just
put the receiver on the table it's like
it's gonna make some noise everybody
yeah I heard it there as I have a
feeling it's like oh not good okay and
then straight just hold it as I swing
put it attach it okay same way you had
it before but I'm gonna have to move
around yeah I know but let's just see if
we get it working okay I think maybe so
we you can't see us right now but we
moved some things around and does it
sound okay we have to wait around 20
seconds say something okay now they can
see us again
okay I think it's okay now because I'm
not here I think this something was
happening here okay it sounds good okay
okay so I think were sounds alright now
I think we're okay with the sound we're
gonna just work like this and then as
soon as you have to move oh well put
this back into your pocket or something
you know that - yeah it's fine yeah it
should be fine I think maybe you think
you could probably put it in like you
could clip it to your back pocket it
might have just been this
was getting like underneath something or
whatever anyway I'm just gonna leave it
on the table right back back to your
regularly scheduled program maybe we
will make an edited version of the first
20 but your eyes if this happens every
time this is not an anomaly I always am
having like weird technical things okay
setup is so intense I know I know when I
used to stream II used to just literally
be my computer and I don't think I ever
had technical difficulties so I'm gonna
skip with some of the pleasantries
because I want us to I want to say keep
track of time here this is a special
occasion
with Shirley here I'm going to so what's
happening first of all thank you to the
node our sponsor do you have websites
you host on the internet yeah so if you
like Shirley has websites you know the
Internet the node is a cloud server that
you could use it in about halfway
through the live stream I'll come back
and tell you a little about the node and
you and I can get a coupon through the
coding train really just by going to the
node calm slash coding tree
but what we're gonna do today is I most
of my tutorials most of the videos that
I do involve a JavaScript library called
p5 you know p5 surely is a amazing
superstar data artist if you're not
familiar with her work you should
definitely check out her website which I
think you have here right now I win this
video descriptions link and some of the
moderators could maybe post it in the
YouTube chat a link to Shirley's website
ok yeah don't worry so much we'll we'll
figure this out oh and actually what I'm
gonna do here I forgot one little
technical piece that I'm gonna add I'm
actually gonna record all of the
separate outputs I'm not recording your
laptop screen I just realize that's fine
[Music]
a little bit so and Shirley uses a
variety of different tools I'm imagining
for your work but one of the tools you
use very frequently is Vegas one is d3
83 so d3 is a JavaScript library it's
also has a little dumb bird yeah but
it's pretty different so and I I want to
say that I've never used d3 but that's
not entirely true I think I've tried to
use it once or twice but I couldn't
remember what I did the last time and so
what this is gonna be this is somewhat
similar to when npj was here PJ showed
me a little bit about react Shirley is
going to teach me how to use d3 and
we're gonna make it's got a little
workshop planned I'm the student Shirley
is the teacher and I'm gonna attempt to
code over here on my laptop which one
will kind of switch back and forth so
maybe what we could do to get started
with is if Shirley if you want to take a
minute to introduce yourself I kind of
did a little bit but if there's anything
I missed that you want to say about your
work or things your do or other things
you want to plug you could do that it
I'm gonna just add one more technical
feature which is I want to be recording
to disk your laptop screen ok because if
we decide to make like an edited version
of this that gets published as like a
standalone d3 tutorial without a lot of
the extra nonsense of figuring out Mike
stuff I work with a video editor and he
puts all the stuff together but if we're
not recording this we won't yeah oh you
know we could do though a much simpler
solution so I'm I'm just gonna do a
screen capture yeah I mean I could set
it up but this is gonna be much quicker
so I'm just gonna do a new screen
recording and I think you could just do
the whole screen yeah but I wanted to
just see if it has sound but doesn't
matter it's like extra I'm just gonna do
this and now it is it's recording
alright that's a much simpler solution
and I won't worry about I have this
other setup that records all the video
signals I don't think I focused the
camera stay there stand there you know
when we got this last minute add a
second laptop yeah that was my fault
I was all set up and ready to go and
then I was like damn maybe it's good to
have a second laptop so I'm just gonna
of you could just stand still for a
second okay so I'm gonna focus the
camera and there we go that's better
great okay so I think we're good
technology wise we have your laptop if I
want to switch to my laptop I need to
use this mouse so I'm just gonna get it
ready and I just click this button back
to my laptop so that's how I'm gonna do
it and I'm gonna leave it at yours
mm-hmm and say take it away tell me what
you hi your name is Shirley yes how
about I just read this okay my name is
Shirley I'm an independent you can talk
that's right okay Kay so I hi my name is
Shirley I'm my title that I've given
myself is independent creator of data
visualizations I'm and that doesn't
really mean anything I'm just a
freelancer and I work with clients
um around the world mostly on I'm like
tech company's media companies
journalism companies and I work with
them and their data to tell visual
stories um and so some of the things
I've done before is um this one so this
one is this is really funny because the
first time we met um we were like doing
it was we met because we did a thing
with mpj m-money cool yes and then we
were like 40 minutes into like a
livestream or like a recording um and
then I started showing this project and
Dan was like wait I know this project I
spent a lot of time poking through this
project
did you really oh yes definitely I'm a
musical theater geek nerd I've seen
Hamilton a bunch of times how many times
twice I have to get to see Evita this
weekend I'm very exciting I've seen it
three times okay okay
yeah yeah so that's one of the projects
that did really well I've also worked
with the Guardian on something a lot
more serious about homelessness so I
just I'm yeah my job is I try to take
datasets that you know maybe when it's
just numbers I'm it might seem cold or
hard to understand and try to convey
them in a way that's compelling and
maybe even emotional um and for today
what we want to do is I had this project
and I just realized this is the first
project I ever published after I went
freelance so that was three and a half
years ago um and it's this visualization
of the top summer blockbusters since
I've been alive um and each of these
flowers represent a movie and each of
the petals are parental guidance ratings
and colors are genres I'm and then the
number of petals and the size of the
petals correspond with like IMDB data so
for example like this is um IMDB data
out of ten in size I'm and so you know
there's like some one of them they're
like you know Dark Knight Rises really
big beautiful and I love Harry Potter
instruction and the one that I love
showing is 1997 Batman there Robin and
how cute it's so tiny today we're gonna
recreate this okay these by the way or
very have a visual quality very similar
to some of the coding challenges I've
done with polar roses so if you use
polar coordinates to kind of loop around
the path of a circle but adjust the
angle and the radius as you're moving
and you loop around you could get these
rows like patterns yeah so I have this
most recently I think I did a video
around the more arose which is the
particular way of doing this anyway just
have to link that together yeah and so
that's what we're doing today and we
talked about this and I was like I'm
gonna go into this and having prepped
absolutely nothing about that is how I'm
Siri no prep and so it's just gonna be
pure like we're just gonna be thinking
through this together
great yes so do you want to get started
or do you want to do anything Allison oh
this is good let's get started
we're on a time crunch yes okay so let's
switch back to your I'm gonna
unfortunately I couldn't get my stream
deck button to work so do this manually
but now I'm here and I need to go to a
web browser now I usually use the p5 web
editor which you know most people have
watched the channel I've seen which
looks like this
I can type JavaScript code here if I run
this run the sketch I see the canvas
output here but amazing amazing
invisible Cup but we're going to use a
different web editor today yeah it's
called observable I'm observable hq.com
I think I'm just going to google it and
I don't know it's gonna be a good yeah
so this is kind of the newest iteration
of I'm the creator of d3 right is also
behind this and it's kind of like I
think of it as I'm a Jupiter notebook
but on the web and kind of tailored for
data visualization so you know a lot of
people in the audience are probably
familiar with Jupiter notebooks because
it's a thing that's out there that a lot
of a tool that you use but it's not
something that I use regularly on this
channel so Jupiter notebook is a page
essentially that you can run in a web
browser type in Python code and execute
it and what's special about it is you
can execute like I think are called
cells like little blocks one at a time
for these and so that's what we're
seeing here but the difference is we can
do that these like little cells we're
gonna do that with JavaScript yeah okay
so how do I get started do I need to
create an account you can't just like
yes I can let's see if I do sign it with
github let's try that all right I'm
gonna authorize it
there we go everybody okay so now this
this is this is definitely the first
time I've used observable myself I've
looked at a lot of observable notebooks
I have a kind of memory that it's got
it's a little bit of its own way of
doing things that's different from maybe
a traditional JavaScript workflow is
that true or yeah so I only really
reckon
this for prototyping um obviously like
if you want to them make a website or
something you would go and like doing
the index.html or something I'm vibing
for this it would be fun too so you want
to be editing in these cells so where is
this and what I can call this oh oh I
see yeah so then you can okay and then
when I hit run shift shift return is
there shortcut all right okay people
tell me this is this is a little bit
smaller than the font size I usually use
but I can also zoom into it
and I can yeah I'll do this that's good
okay and I'm giving us this much it's
always confusing this much space so that
we don't stand in front of it I think
we're good okay all right so I mean the
very first thing that we can do is just
create one of the petal shapes I mean so
this is where I kind of wanted to talk
through SVG paths together with you okay
I'm and I'm maybe the way we can do this
is first we draw on the board okay then
we put it in okay okay i man so so I'm
gonna switch the camera to the
whiteboard yes and you're just gonna
have to take that oh that's right thank
you for the room right there and you
have a marker I'm just gonna stand over
here
I like how everything is set up for Dan
so it's like everything oh oh and I'm
gonna plug this is um this is a new
sweater
um it's designed by Georgia loopy who is
an amazing data artisan designer um and
this sweater is a data visualization of
Ada Lovelace and her algorithm for the
Babbage engine yeah so please don't ask
me how to read it because I haven't
decoded it yet
um but I was just really excited to like
wear this on your live code um yeah okay
so let's do s we G paths together so Dan
I know you work a lot mp5 so I'm
guessing over here I'm guessing that
you're extremely familiar with like
canvas like okay I'm gonna put it in
here and I hope I'm gonna put it in
another pocket and I let me know with
the
if audio ever goes crazy we've got the
mic in Shirley's pocket
yes a different pocket different pocket
look good to me okay so I'm gonna we're
gonna see sue I know you use a lot of
canvas and you make a lot of shapes in
campus um but for SPG today I wanted to
talk about like SVG paths there's like
so much room up there that can't reach
um and so what that looks like is
actually should I start from SVG and
what SVG is yes sure so I'm you probably
cover a lot of canvas oh my writing is
so it's okay it's it's much bigger
people write a little bit bigger I would
say I'm on it it's this is a tiny little
monitor that's not that people are
seeing im sue with canvas right bigger
um thank you so with canvas I'm it is
one Dom element um and the way you draw
to it is that you literally it's
literally drawing pixels on the canvas
and you will say like draw a circle or
like fill right or like you have dark or
something like that and it's just
drawing and filling pixels um and with
SVG SVG elements are actually Dom
elements so for each individual SVG
element like if we want to draw a circle
it's a circle element if we want to draw
a rectangle it's a rectangle element I'm
and so on and so forth
so I'm the way I like to think about it
is canvas it's kind of like Photoshop
I'm an SVG is like illustrator so um
today I just want to cover SVG paths
because I think SVG paths are extremely
powerful and if you just master it you
can like create any shapes that you want
so for those flowers we're going to use
SVG path to create individual petals and
so one one point of reference for this
is when I've done things in processing
it's also bitmapped images but
processing has a PDF renderer where I
can save out those stuff I'm drawing as
oh oh that's one thing that I've done
from time to time and then you can blow
something up much higher resolution and
SVG stands for scalable vector graphics
yeah right an illustrator if you draw in
Illustrator and you're super familiar
with illustrator that exports the SVG to
and vice versa you can import SVG into
illustrator and so the for path SVG path
looks at the base it looks like this
oh we know no sorry I it looks like huh
and you want to the one thing you need
is this attribute called D and this is
where you put in your path string and
what I mean by a path string is that
there's a series of commands that you
can use and today I just want to talk
about em now and see and they stand for
move to line - well your handwriting is
so much better than mine really yes - oh
you know one of the things I was like
kinda excited but kind of like
apprehensive about it's like your level
of energy on your videos it's like so
intense and I'm like I don't know if I'm
gonna like be able to match it but at
the same time that might be too much
yeah I like Topher like both of us to be
at that level it's okay I'm so yeah so
the San Fran - line - Kurt - I'm in some
move - is I'm probably the most straight
forward which is I'm like translate in
p5 I would assume translate is moving
from one point to another the difference
in X and a difference in Y or you're
moving to a direct location yeah so move
to a little bit different the way that I
think about it is move - it's like if
you take a pen or pencil and you drop
that pen or pencil onto the XY point
right that's how I think of move to line
- is then draw a line from there to the
next to where you're where you move to -
then to the next x1 yes exactly so and
the way I think about El line - is that
it just says if when when you
when you're I'm if your pen is on the
paper draw a straight line to that point
um and that means that L always needs to
be chained with something before it
because I'm like you can't draw a line
if your pen isn't on the paper yet so
you always need to start your path
string with an M and then you can try
and chain like MLL and whatever you want
yeah okay and then curve to is I think
the funnest one it has a little bit of a
tricky like and syntax but once I
explain it it will make a lot of sense
and I just realized I need multiple
different colors oh wait and that's is
that something we have I'm sorry I
forgot about this and I'm gonna try my
best with just these are like a dotted
line I knew Mike three four different
colors so it's not we'll see okay see
I'm okay soo alright this is Maya okay
so I'm gonna call it px 1 px 2 these are
the control points yeah so you know
again people might not be familiar with
with this but if they're a p5 user this
sounds like it's just like the bezier
curve function where you have two
endpoints and two control points exactly
so this is exactly the same maps to that
idea yeah so this is basically um yeah
so if you in canvas is exactly the same
thing and so let me explain the syntax
really and there's a really nice
reference I we're writing this out
there's a really nice reference in rune
Manson's programming design systems book
which has a whole page about what a
Bezier curve is and has some interactive
ways of playing with it I'll show to you
later Fitz I'm so then I'm this is just
like you say control point one control
point two and end
and so let's say for example we have you
know a string a path string that says m
0 0 and then let's say we say C and
can't let's start drawing it so this is
yeah yeah 0 0 so this is the M so this
is why I like to use different colors so
it's like really visually clear what
each one of them is and I like to think
of it as like let's say I'm gonna end up
at a hundred comma and zero and so we
have zero zero and I think of it as I'm
drawing I'm gonna draw a straight line
to a hundred zero and then I'm I have
these kind of like implicit anchor
points and that then I can take and kind
of like put it like drag it where I
wherever I want and let's say I want to
drag the anchor point to here and that's
roughly I would say maybe 20 20
maybe that's the anchor point is 20 20
and then this anchor point maybe is 80
20 and so I'll write that in 2020 80 20
and this path string would give me this
curve right
so basically exactly how it's it's
called it's this curve to is a Bezier
Bezier curve too and I'm so if if anyone
works with illustrator that's basically
an illustrator how you draw a curve is
you start from a starting point you like
make a line to your ending point and
then you get two anchor points that you
can drag around yeah so here's a really
nice reference I'll just switch over to
it for a second this is a reference here
that's showing how Bezier curves are
calculated and I think if I go down
somewhere here I
remember this nice way of interacting
with this yes this one yeah this this is
a little bit different but so I think
this one is a cube a brick okay oh yeah
sorry this is a quadratic this one yes
so that one is a quadratic Bezier curve
and this was a cubic the cubic and we're
doing cubic so yeah and the reason why I
like teaching the cubic Bezier curve is
because I think it gives much more
options than the quadratic one right
um and so yeah so this is how to do an
SVG path and so what I like to do here
now is then ask you to draw a petal
shape or design a petal shape and then
kind of like figure out approximately
where the points are and write this path
string so design it here on the
whiteboard not just tinker around yeah
designing here first okay because I
think it gives you like oh okay so maybe
I'll use up here yeah yeah yeah okay so
in other words a single petal so if I
think about a flower like a single petal
might look like this yes and UK I just
went a little bit too high but so I'll
cut it off a little and you can get
creative well what's wrong with that
what's of it so I could use two
different curves yes so I would start
here uh-huh and curve like up to here
yes and then I would still be here and
curve back down to here yes so I would
do a first a move so I first need to get
to this point can I just get it at that
point zero-zero sure so I would do em
mm-hmm zero zero yes and then I need two
control points
oh no no the M is just moved now I need
curve - yeah curve - I need three pairs
of XY z-- yes the first two being the
control points right so and how is in p5
hmm if I'm in a p5 canvas the Cartesian
plane is such that zero zeros in the top
left and it goes this way and Y goes is
am I going positive and it's exactly the
same
so I would be if I want my first control
point to be like over here yeah it would
be negative pixels yes negative pixels
yeah if I say like negative 10 negative
10
yes and then I might want to go up here
good this is not as creative as maybe I
could be a Yankee then I could say
negative 10 because I'm still the same X
want me to go further up so I'm just
saying like negative 40 do you want do
you want uh do you race them yes I guess
so
it was afraid to a race so I'm gonna say
negative 10 negative 40 and then the
last would be the anchor point we know
that's the last point the left yeah so
those though these two of those are
anchoring could I think of them as
control points those control points good
job point I think of this as an anchor
but I don't think that's not the right
terminology you know what I think we're
just making a determine logic ma'am
somebody in the chat is already telling
us exactly what the terminology is
supposed to accept for 30 seconds and so
then this last point I want it to be
back to zero
yeah and negative 50 well I just
considered this to be like a height of
50 pixels yes and then I can curve right
back to down to here yes so this will be
easier because I'm just gonna now go
over ten and then down to negative forty
then over ten and down to negative ten
and then back to zero zero yes perfect
so this is my code that I need to type
into here yeah inside the observable
notebook yes um do you want to just draw
the two control points on the other side
I mean this is not drawn to scale that's
okay too
now that we have this and let's go back
to yeah so I'm gonna go back to I'm
gonna put you this marker here one and
then I'm gonna go back to here and then
do I make a new cell mate and you cell
and I'm am I not using d3 right now I'm
just writing SVG stuff do it quickly
I'm new so this one right now is just a
cell so
what we can do here is let's declare a
variable and we're just it's gonna be
global to this notebook and so let's
just call this like pedals let you sweat
No
so it's global so those I just don't
even know just just the variable name
pedal yeah okay or petal shape or
whatever you want to call petal path
whatever you want to call it and usually
you can either do it as a string or yeah
I think stream might make sense just the
path string that you yeah like this
no no just just okay and that's going
I'm usually like very good with my
buttons the thing that's going right in
here yes yes perfect okay so so I could
say M zero comma zero control negative
40 zero just no no comma no space no
delimiter just go right to the next
thing you can put in I think I'm so like
this would be I can do that I'm so you
can also between each of I like to so oh
wait no comma after the C oh yeah and
then I like to put a place between here
and then no comma here
no come on yeah because is easier to
read from I got it and so I'm like even
like this could I do
or that's bad no you like the SU SVG you
will like read that fine it's very
easygoing about this yeah so it's just
easier for me to read it mmm and then
close the string and then if you run the
let's just look right I think that looks
right and also see it there if that's
easier
oh that's right yeah okay I'm gonna run
it yes perfect it just showed it to me
again
yes so this is that's showing me like
what's in the memory right now yes okay
so let's make another new cell and then
let's just draw this so I think we
should just be able to say HTML and then
back ticks so kind of like how we do the
MD
like this is actually like I'm gonna put
some HTML on the page
yeah I think that's how we can do it
I've never tried to do this and then and
then you can close that close the back
tick I mean but now I need to go in yes
I think you can just do SVG in there I
might be really wrong uh and then you
can write HTML in there yeah and do like
SVG and then I do path yeah and then you
say equals petal path like this yeah I
think I could be completely wrong but
this is you know try like that yeah I
think so let's see so I'm using this
particular syntax because this is that
new fancy way and like including a
variable expression and so it's the same
here okay yeah let's see if it oh yes um
okay so um let's go inspect element and
see if it drew the path or not inspect
this yeah it's just a Dom element yeah
so then if we open up maybe we can make
it bigger for people ooh perfect
so looks but only enough but I don't see
any die not don't even specify a color
or something like that
so oh you know why is this M looks like
the quotes are in there because I think
you need to go back and put quotes
around the back but there's another
reason why it's not showing up and we'll
talk about that after you do those like
this yeah and then run again and there's
gonna be the next reason why it's not
showing up is because and I'll do wait
Len okay let me try this okay so this is
the zero zero of SVG and you are drawing
a petal oh you are drawing a petal up
here see you're not gonna see it so I
need to start I'm like from over here so
what we can do with SVG is SVG also has
something called transform transform
that's what translate yeah so we can
after the D let's put in like a
transform here oh no no like in like a
different that's a different attribute
oh you mean like this yeah is equal to
quo to translate I have a keyboard issue
I'm going to that they fixed this
butterfly keyboard is a disaster
giving okay sorry unrelated topic but I
like seriously this keyboard is making
me so crazy okay transfer I never
upgrade them like you then you made a
good decision I made a bad decision you
still want to translate down because
because you're translating basically
you're translating over no I well you
you what the why you still want to
translate it down yet so do you want a
few minutes no no that's good right I'm
and I'm just gonna say I'm asking ya I
mean no no this is good and the there's
there's other attributes like fill and
stroke that would set the all that so
similar to how you draw on canvas its
let their SVG attributes yeah sooo it's
essentially a lot of the same
functionality as canvas it will
translate over really easily
they just the interfaces on it okay I'm
and suit another thing I'm just gonna
say right now this this is okay right
now but I like to set the width and
height of the SVG as attributes or the
width and height attributes because one
of the co most common mistakes that
people will you have when they first
start with SVG is you can think of SVG
as kind of like a window into the SVG
world right so there's like things being
rendered here and you're just getting a
little viewport yeah and if your
viewport is too small and like you know
you've rendered your data like down here
you won't ever see it and I've seen so
many frustrated people and so if you do
that it would be cut off right because
now you're but oh no 25 math math it's
hard yeah what we can do is we can like
set another variable and just say that
the size is 50 that like the side
of the pedal is 50 and now you can go
around like four later we can use that
as a very mean set a variable up here so
you can't you well you can't do multiple
variables in the cell you have to have
you have to do yourself new cell for the
variable and then I would do like petal
size
yeah is 50 yeah and then you can move
then you can use that later - like
programmatically oh but I would want
that to be in here right
no no Oh cuz I would do that use a
transform but like scale it Oh true like
or if you yeah for the translate leader
but these are heart the the path values
are hard-coded that's right so if I
wanted to suddenly make it bigger you
would use a transform scale transform
scale okay you got it
so we'll get there okay got it okay so
the next thing we want to do now that we
have a petal is this is saving
automatically yeah man automagically
okay so if you want to go to or I can
show it here okay so here you might
notice I'm we have the petals oh and
then I can I can really quickly run
through these like so this one you know
I drew the G I drew like a like a curve
down to the bottom and then I think I
have maybe another oh yeah I drew a
curve down to the bottom by like that
anchor point I like did at the same line
as like the bottom one and then I drew
another curve the PG I drew three curves
the pg-13 was fun cuz that was one curve
one line one line one curve yeah I'm so
like once you know these plots you can
decode how these yeah like sheeps are
made my thing is usually I just do the
simplest basic version without a lot of
flair and the audience you will be
amazed what they can make
so take Shirley's work as inspiration
for how you might design your petal if
you have to be following a lot I'm very
happy with ya
so the next thing we want to do so this
is where we're actually going to get
into d3 and and one of the things that
we saw on your laptop's are on there I
want to explain some things so
d3 is this sort of big library that has
a lot of functionality and but what's
what it's really good for is translating
raw data into what you need for the
browser to render so today and I'm just
gonna well so there's a lot of like
things that it makes easy for us like
calculating positions of I'm like no
downlink graphs and I'm you know giving
us different like XY positions for oh
not this one
oh I'm sorry for like drawing trees so
like it will calculate XY positions and
like SVG paths for all of that um but
today what we want to do is use
something called scales c3 scales and
and this is something I use in basically
like every one of my projects I'm and so
what scales does is I'm essentially
translate one thing one thing into
another I think maybe and p5 you have
like dot map I think it map is a
function that will take a value with a
given range and Reap and map it to a new
range yeah yeah exactly that's what
scales do for d3 so like just different
vocabulary yes and so for example we
have like linear scales that do like you
know linear leaf and and the map
function just does it as like a linear
scale ok so there's not a way there's
obviously other ways you can think of a
range and map the value but so it sounds
like d3 has a lot of yeah capabilities
in terms of how you different kinds of
scales like logarithmic scale and that
type of thing yeah so we have like power
long time like again like map as input
like if you have like a date like a
JavaScript date object because a lot of
times in data you have like dates and
years and you want to like map that to
like the exposition you
use scale time and one of my personal
favorites is quantized like which is
basically you give it a continuous input
and then you give it a discrete output
and when you um and then when you pass
in your numbers it would map to so like
I know this is very much like the
machine learning examples I've been
doing what to mean you'd put in map to a
classification but in this case you know
need machine learning is it's just
really the literal range yeah divide it
up yeah yes so the reason why I'm
talking about this is because now I want
us to do some mapping from the data I'm
to each of these kind of attributes so I
think what we want to do is let's do a
mapping for the number of petals and so
you can imagine it's from the number of
int B votes to the number of petals and
so that's the scale quantized from
earlier because it's a continuous
continuous input but then you you you
can't have like you know five point five
petals right like you want five petals
or six petals or seven so I have like
five to I think nine or ten okay and
then we'll use a scale linear to do from
the IMDb rateing
to the side to the scale it's like just
work with number of petals and size of
the flower yeah those two things and so
let's actually just get into the
observable and I just realized that
maybe I also want to give you the data
okay so should I switch to my laptop or
so on yours thank you wait let me let me
let me pull up the date up first so the
data should be on my film flowers baby
so on their film flowers I have movies
dot JSON okay
so I can should I pull that up here yeah
actually that might be the easier thing
to do and then switch to here now we're
back to this laptop and I'm going to
github.com slash what's your sxyw you
okay and then i'm and then you can do
slash you're not following me github is
that i don't know i don't notice that
there's like a follow you're probably
the only person now that i follow up get
flowers yeah so also it seems like we're
about to get the data which is kind of
like a new stage so we can take like i
often like to take a break in the middle
just for a couple minutes okay so maybe
now is a good time to do that as as i
get the data okay okay so do I need to
how how is this gonna come into
observable because I also could take a
break and let people do that okay so
there's two ways
um so let me let me just looks good yeah
raw so that we can get to the actual URL
okay there's two ways um if you want to
copy that I'm and then I'm gonna show
you the first way because I think it's
the closest to how we actually will
develop okay we're gonna we're gonna get
the data into observable and then
everyone who's watching if you're
following along hopefully you have your
own pedal design or an exact replica of
my pedal design and then the data into
observable and we'll take a short break
to make sure everybody has that answer
any questions and come back and finish
that problem okay okay so I'm what we
want to do is two steps I'm first let's
go down here make a new cell and say D 3
is equal to require D 3 so you can use
require and do I put that in quotes yeah
so this is interesting because if with a
p5 web editor that it works with just
referencing other JavaScript libraries
through a script tag in the HTML page
whereas if you're working in node or if
you're even using the JavaScript modules
which is the thing that I don't really
know about
that's what they'll learn you can say
there's like the import syntax to but
that require I use commonly and have
used in video tutorials when I'm working
with nodejs so if I want to use a
JavaScript package and node I'll require
it and so I guess somehow d3 underneath
the hood so this is and this makes sense
in this sort of like notebook style
because in Python you just say like
import numpy oh yeah so this is the
equivalent of that yeah okay so I would
then I would run this yes and then you
get that oh and look I can like debug
right here like I have a little mini
JavaScript cop I have the entire d3
library specification right here in an
object well yes
okay and do I need a new cell yes please
and then you can say data is equal to
getting a new computer just for the
keyboard if you can believe that we are
you gonna get a new computer that's the
old Mac no they're just really this is
the not a sponsor although Apple if you
want to send me a laptop I'll take it
but the new 16 inch pro they've
redesigned the keyboard and the reviews
I've read online seem to say like it's a
much nicer keyboard and it actually has
an escape button I mean there is a thing
called an external keyboard I have I do
use that often when I'm sitting at my
desk I'll just use an external keyboard
but it's too much stuff in here back to
our scheduled programming data equals
yes t3 dot JSON so that's like loading
JSON file I could put a URL in there yes
just do this perfect and then can I kind
of look at what's in there yeah you can
you can open it oh it's there yeah isn't
it awesome that is so cool
so what I love about this it just sort
of like a little bit of an issue but
nobody can see that doesn't show up now
I'm here silly you have that very
embarrassing so what I love about this
is having this sort of like a console
debugging built right in which I imagine
when you're working with data and the
step by step process is
super useful okay so we're gonna take
just like we're not gonna sometimes like
a 500 a very short break but because I
also am very excited to tell you about
some new things I learned about the
sponsor of the coding train Linode
recently so let me just pull this up
over here so okay so we're making a
project in d3 it observable but you said
you just use observable for a
prototyping I only talked at some point
you would finish the project and you
need to put it somewhere there's a
variety of different ways you can host a
website and people watching this know
how to do that but one way is using a
virtual server so lonoa provides virtual
servers that make it easy and affordable
to host your own app site project or
anything else you might you may want to
want to live on the Internet so a lot of
things in my tutorials I make note
applications I'm this little machine
learning stuff the Twitter bot is kind
of like the obvious one where you have
to deploy that to a server somewhere and
all these kind of projects you can use
with the node server they also have to
like one-click thing which is very
convenient you know because if you
wouldn't like install WordPress for
example if ever tried to install
WordPress with like a console it's crazy
you just go you log on you click it you
have WordPress installed you have game
servers they have 24/7 customer support
but what I'm excited to tell you about
which I'm yet to experiment with what
I'm planning to is they also have GPU
instances so I have some tutorials
around training a machine learning model
in particular using tensorflow
to train this thing called a car RNN
model which is like a text generator so
if you have like your favorite poet you
have a favorite poet so but if you if
you had some text that you're excited to
like feed into a machine learning system
I have a tutorial which which shows you
how to do that on a server and so what
you bet you do but you need is a GPU and
sola node has GPU instances they have a
Quadro r-tx 6000 which is like a very
exciting sounding name for a GPU so you
can do machine learning rate tracing
another AI so if you're interested in
trying the node all you need to do is
look at the link in the description of
this
video will take you right Tula no calm
slash coding train but also you can just
use the coupon code entrain 20 that's
one word coding train to zero because
you'll get twenty dollars in free credit
which you can use to deploy your site so
all I'm gonna I'm going to look back
through all my video tutorials and see
what kind of like websites I've made and
certifications and think about which of
those I can try on node ok so sometimes
what I'll do is just also give ourselves
a minute here just in case and I often
do to break guys sort of like we could
just keep going but I'm gonna so but let
me come back to the screen here and so
there's two things you can do now while
we're taking a break
one is sign up for the node that helps
support the work that I do here on the
coding tray lets them know that you
found out about it for me as well as
make sure you've got your code set up
here so I'm gonna just mute us for a
second yes I want to just say I'm I
threw that there's a high from Alice Amy
Catherine cam emoji that's my studio
office in this up
hi okay so I'm just gonna like make sure
we we're all set for the next stage I'm
enough where I'm gonna like take a
minute also to look at the chat so if
you're struggling to follow along ask a
question in the chat then we could kind
of answer and we'll just going to take a
very short I'm gonna say two-minute
break
[Music]
all right the mic is back I'm like we're
back so what it's the Big Finish Burrell
is now discovering is that the
ventilation of this room is terrible
yeah so that's actually one of the main
reasons for taking a break open the door
and all the cool air so I'm sorry
they'll hate to tell you about that
before you were like I'm gonna wear this
wonderful sweater all this like
expensive fancy equipment
[Music]
okay so I think we're air we've got
about 45 minutes left of this session so
we're gonna keep pushing through and try
to see if we can take some next steps to
pull stuff from the data and then put it
into this s yes yeah okay I'm so I think
our goal for today is drawing one flower
with data and if and there's stress
school is drawing all of them with data
okay okay I'm okay I usually like to
give it exercise to the viewers to do
after and then they could share stuff on
Twitter or if I make a page on the kodi
train website there's a way for people
to share their projects so what we'll do
well we can also give up prompt whatever
we don't get to we can ask ok yours to
complete and you'll be amazed at what
they'll do yeah well actually I'm
actually now thinking it might be even
easier to potentially what we'll see
what see ok I'm ok so the next thing
we're gonna do is yeah a new cell and by
the way you can like reorder reorder and
give these cells and they'll be fine um
and so now we're gonna start with a
curly brace like ah yeah and then we can
close their curly brace and then
everything in these curly braces and
observable will be executed as
JavaScript oh oh because I'm I'm not
doing this is this is not JavaScript
like the pedal path up you mean it is
but it's sorry
yes I should read that everything in
there will be that you can do multi-line
JavaScript so this is not a d3 thing
we're doing right now yeah and I could
put like character turns in there and
then I can just type my JavaScript in
yeah I'm and so let's say there's this
is a like one thing that's gonna be
different from if you do like an
index.html and because in index.html you
were just like create and a just like
SVG elements yes and but here what we're
gonna do is I think we're gonna call it
cost
I'm SVG really no one should be like me
it's good to use Const people should use
just like no it's I have a hang-up let's
use Const that's good bar no no VAR bar
is worse okay I'm cons just the correct
thing to use okay DOM and all caps dot
SVG uh-huh and open paren you should
always just be telling me what I am and
you want to pass in that width I'm and
so how about we use the pedal size we
had early so like use the variable yeah
and so it will go in there okay comma
and then let's say petal size again the
width and height um well actually so
petal size is just fifty and you can
imagine if we rotate them all around oh
then we will probably want double that
for both yeah so this we're gonna try
just drawing one petal for now okay I'm
sorry one flower field we're now on two
flowers good I'm and then let's do our
scales so the first thing we wanted was
a scale linear um to do translate I'm
the IMDb rateing - sighs great so if you
open up this data uh-huh and let's open
up one of the objects some of these
names are great days of thunder mm I
just realized yeah
I don't know that's embarrassing or just
I am but we need to do some really easy
data cleaning like we and like they're
all in strings we want these numbers as
numbers but that's gonna be fine I'm I'm
so yeah so I think what we need is IMDb
rateing and i'm DB votes for for this
book so let's go down below and i'm
let's and it's in a variable called data
yes so what we want to do is let's go
let's make up a scaling a linear it's
call it cost us let's call it a size
scale okay is equal to d 3 dot scale
linear like that and then like open
paren close paren i'm and then for this
we need a domain and the range and so
for us to get the domain we need to get
that from the data but we could also
like kind of make it up if we wanted to
I mean I'm not I'm just saying like like
we know the ratings are between 0 and 10
aren't they no bad idea okay okay I just
mean we're prototyping we're
experimenting we're playing around here
like good okay I want it I want to give
people good habits okay good habits
everybody don't I have lots of bad
habits we're gonna do is we're gonna use
something called a d3 scale no no sorry
d3 - array I'm and in d3 - array we have
something called extent and what that
does is we pass in I'm in array and then
oh and it gives you the minimum maximum
back yeah okay that's good we should do
that so I'm gonna say
so what I could I do something like
min/max equals because it's never this
bad I said instead and then the array on
passing is just data yeah but do I need
to give it like what field I'm looking
for so in and then comma and then you're
gonna pass it a function that's the
iterate I'm sorry it's a accessor so
pass in a function I would you say can I
do some crazy magic like this yeah you
can't okay and but you want to give it
the su and what so but you want to pass
as input the d like like the individual
element element okay like i record what
do you use so we use we say D oh D oh
okay yeah and then we say and then you
say yeah yeah perfect
so I want the extent the minimum and
maximum in the array and I'm using a
function to say which element of the
array so this is like what would you
normally name this I said min max but
like we call this like extent just
seemed like raiding min Max or something
basically yeah and then I would do the
same thing for what was the other
variable we want actually just do one
variable right now knowing you're both
so what was the other ones yeah so votes
min Max and I would just say I am deeps
IMDB votes yeah okay okay and then so
then inside skill we will pass in that
rating min max but we need them in oh it
just it it's a no it's an array with the
next zero is the min do you want to just
a console on oh you can console log and
console log like I just type console
long and then but then you just have to
open up your oh it doesn't show up some
magic way no it just console logs in
okay yeah oh yeah undefined
oh oh oh wait do you want to go back to
yeah open up Jurassic Park we can do
Jurassic Park
let's say oh because of it it's a string
because it's a string I need to convert
it to a number that's probably yes I
like you a plus like parse or do you do
plus what's plus so plus is a shorthand
for parse int oh really like in in all
the world
no no I didn't I have to run it I didn't
oh and you didn't run it so what are we
doing no but I didn't run it again we
did what are we doing wrong let's see so
how about tonight the chat is very good
at telling me what we do wrong while you
look okay it's an object not an array it
is Oh stupid me okay so we have to turn
that into an array Thank You chat so
then what we want to do here is say we
can say thought then and then we can say
let's just get the values oh I use low -
sorry I'm so used to using low - I'm
gonna go grab low - okay then I'll
explain it I would like take it over
your computer I'm sorry I'm sorry
yeah so this is low - I'm and it's just
really easy yeah it's like a library
that lets you do stuff with the
underscore isn't that called underscore
used to the first iteration what's
called underscore - is underscore alone
- is an extension under squash day okay
mmm you're sure is great but wait wait
you can require it below you're gonna
use it yeah you can require things
anywhere so that's why you can so now
this made it an array yeah cuz you lo
dashed it yes and then now if I run this
then this should work
and there we go okay got it
okay so but the plus is like parsing it
so what goes in scale linearly I have to
do them individually because well scale
linear if you want to look at UM the
scale than your and then sir we also
undo we want number of petals yes
so like petal scale or no pedal number
scale
yeah I call it numb pedal scare no pedal
scale yeah and then I want the votes min
max yes and you want scale quantize
because you want to go from linear
I'm sorry continuous to discrete and so
right now what you're doing so let me
just pick something which is sorry I'm
just for like something like just so we
know and what they are I like to just
put them into domain so we know that
this is the domain oh so okay sorry you
explained it I'll type it and domain so
d3 has like its own set of vocabulary
range so domain is you can think of it
as input I also would like to think of
it as the raw data and the output they
call range so dot range it's like kind
of like that makes okay and so after
domain let's do a dot range and let's
say the scale this is what I'm mapping
it to yes so I know my size was like
this is a size that's the size of 50 yes
so I would say that's like the biggest
it would be I could do like 25 to 75 or
something that that's the that's a great
intuition um but because we're going to
use the size scale we're going to use
range and form scale yeah so we probably
want a range of 0 to 100 where it's
probably 0.25 or something okay I'm and
the syntax is we have to pass it in as
an array oh so like this and then this
range is discrete yes the options so I
could have like 5 petals 7 petals or 10
petals or something yeah yeah yeah is
that like a weird person I just put it
in there I mean you can do whatever you
want
okay all right seven petals are my
personal favorite well you said 10 sound
effects is the buzzer for like if you're
I don't know okay
usually I'm just here by myself we can't
fest some more
are we getting distracted well I like
this one
I'm but the way that you can think of it
is I'm now I don't know what I'm saying
[Music]
what was I saying yeah we we were good
we have scale linear we have scale
quantize yes okay so now that we have
the scales
let's go calculate I'm what we're gonna
draw right and so let's call it cost
let's see constant flowers let's just go
and make all the flowers all the flowers
cuz we could make one and then we could
just change the index from the array and
then we see different ones you let's
make them all all right yes I should say
that this if anybody's watching who this
is their first time coding this is
pretty difficult I think in terms to
follow roses there's a lot of Titanic
terminology so that's one of the reasons
why I enjoy p5 because it's it tries at
least as best as can to give you this
very like friendly starting point what's
wonderful about this is like in one line
of code we've kind of like parse you
know it's like a Barrett Mount one line
of code but very little bit of code we'd
like parse this data file we're like
getting min max we're scaling the range
we have quantize Bob all that all these
like really common set of things you
would want to do when working with data
and yeah I'm very succinct way but I
could imagine for somebody who's new to
this this could be hard to follow yeah
it's a different way of thinking
exactly but let's make the flower I'm
you want to make one flower let's make
it I don't know what does the chat have
an opinion and the chat is gonna say
make all the flowers let's make all the
flowers let's let me call the flowers
does that make you nervous it does well
let's do it wait you know we have a half
an hour okay let's just make one flower
let's make one flower and see what
happens okay let's just yeah flower is
equal to okay and then let's create in
the object like like a blank object the
object literal okay yeah I and I'm so to
create the flower
we need um let's see
let's just let's just decide that we're
gonna there's the data has 135 things in
it should we just go with Days of
Thunder
dick 0 I mean we could be here for a
very long time trying to pick what
movies do that sure where's gum let's do
four it's got more stuff there's also
Pocahontas Gump is right here no yeah I
want to look through all okay all right
oh wait here this is I feel like
whichever one I pick there's gonna
there's gonna be at something I really
do like this movie wall-e to be on sir
you should do wall-e okay but I feel
like that's I liked I like to be
family-friendly when all possible I
think there's no risk here with Wally
it's rated G yes index 92 okay okay do
you want to just like do like a Const
index or something just so you don't
have yes okay I got wall-e equals 92 I
just said I just realized something
which is I was like do you want to
create a variable so you don't have to
write 292 over and over and now you have
to write Wally over yeah but we get to
type Wally I wish I had like a Wally
like sounder baby something laid out
okay so let's think about what we need
to draw this flower um do you want to
take a look at my flowers again um okay
so to draw this flower and we need
actually we might well am I gonna can I
use oh I gotta like minimize this here
can I use this pedal path yeah so let's
do this
I'm like I don't I just do like a little
loop and like just keep rotating it
around to draw the flower yes
so I'm but you need data okay okay so
I'm gonna draw it but we're not gonna
draw it we're gonna draw it even with
the data right now yes we're gonna draw
with the data right now um and so let's
do this let's um figure out the number
of petals we need so let's go below
Wally and say um yeah num vettel's
and num petal scale is a function that
we can
none petal scale oh yeah there it is I
was looking for that and then we can
pass in the data data index Molly yeah
and it's called a votes I am DB no I
need those votes yeah and then we want
to plus it we want to do a plus
beforehand so that it becomes it's not a
thing you can do in JavaScript like
anywhere I think this is a thing if you
work with a lot of data like cleaning
data I like to type of car siient would
you like to know no I want the plus here
okay and then I just passed that in yeah
okay great and then and then I'm gonna
do the size right Jeff sighs I mean I
could call this pedal size sure and
that's going to be the size scale and
then the rating yes yes um you already
have something called pedal certain skin
size above pea-sized at all pet size
sure it's your bar variable naming is
not my strong suit
I don't know if anybody is that good on
it um okay so now we have do you want to
console.log and both of those or do you
you're like I don't
well it's keep we're good okay I feel
confident okay soon normally I would
it's good practice console.log the
reason why I'm sort of avoiding it is
kind of have this like very small you
know I don't I guess like I guess I
could console I just feel like I'm not
sure yeah it's great when something goes
wrong
well console.log okay super for the pet
for the flower let's I just put in the
size let's just you know one of the
things we want like Oh should I do that
object structuring thing you mean where
I just do this yeah sure I'm wait we not
yet for the numpad else oh okay so the
way that we want to think about the
numpad else is and that that's purely a
number right that is about me five seven
or eleven use the loop and yes yes and
so what we want to do is we want to
create an object within this
object okay and we want to create so
let's kind of yeah go and then say let's
call it pedals okay I think I see where
you're going
yeah and then there is a function and
underscore called x or low - so if you
do underscore x and then you pass in num
paddles this is crazy and we need to
know and then you have a and then you
pass in a function after the known
pedals and the input you get is I so the
index so what's happening here is
loading this low - Tata what it does is
it iterates the number of times so let's
see num pad else is fine it's just like
a for loop with I yeah okay okay thank
you yes thank you hmm and so what I want
to do there is a return another object I
don't have to say return now because no
well if you want to create an object you
you need to do their curly braces and
then return curly braces and then but
you need to wrap that in curly Oh for
the one if it's just one line of code
I don't like okay let's let me be
long-winded about it and then we'll sort
of see what arrow syntax we exactly need
but yes I can do this I'm and then in
here what we want is the rotation your
petal got it so I'm going to its that is
in radians or degrees basically an SVG
is degrees there so like in other words
I'm gonna say uh I divided by how many
total petals do I have num petals 360
times I like this you mean yeah
[Music]
that's but this is just returning of
value wait no no no wait is that right
is that well because yes yes yes yes yes
yes you're right yes I'm well I wanted
to return an object because oh you mean
I just but so I put like angle agrees or
whatever you want because I also want to
return the petal path got it and I'll
explain why I'm and you mean this thing
your your petal path yeah and the reason
for it is once we go and do all of the
flowers I was thinking that we can I was
thinking that we'll go and do like three
other petal paths so that your flowers
can look different
got it I'm pretty sure that I can skip
the return because this is just an
object literal it's one line of code
it'll get returned before it doesn't
work for you know but maybe won't work
for you we'll find out yeah okay so now
do you want to run that oh yeah let's
splits console.log flower I definitely
have to come to like this and then what
I'm gonna do just want to console
logging actually well so so I think if I
do this clear the console and this is
what I'm running mm-hmm so there's
nothing in that array so that's a
mistake right there should be stuff in
there there should be so what did I do
wrong so let's let's also console.log
known petals to make sure that we do
right I have to copy paste everything so
that I don't have to type if we did
oh it's undefined ah okay so something
went wrong with numb petals non petal
scale is this way of quantizing the
range actually correct yeah it's at sea
I think they're talking about something
else I think they're talking about the
yeah okay um scale quantized let's find
scale quantize Shirley's looking up
something in the documentation which in
theory I could show you know we're right
we're right look range 1 to 4 so that's
right okay so hold on let's right now
our issue is not this our issue is just
number when we run this we get undefined
at numpad yes so let's go and let's log
plus data Wally yeah and plus data Wally
I'm de bruit loads okay yes so let me
say to console logs we're gonna look at
plus data Wally and we're gonna look at
if you do a comma in the same console
log it will sorry no you're absolutely
right man not a number hold on oh it's
running it automatically for me okay we
got this and then I am it's got a comma
okay so we have to the plus won't work
with the comma yes one thing that I've
used is this I think this works
oh yeah let's try a parse int no parse
int will just go until the comma
oh no but I didn't console.log oh oh
it'll just go until the comma let's do
it
705 ya ain't go so let's try I mean we
could obviously number mmm what did I do
it again I can't tell ya so so that's
not so we do have to do we could just
use parse in and it's okay Dana's kind
of a little bit so how do I remove
I do a string replace oh yeah just a
replace and so I can just do replace any
commas with nothing yeah so if this I
run this I see that and now I can use
plus again yeah so this and I probably
should put that in a separate variable
or something but I'm gonna just all
right here let's see let's see what
order don't do that you have to console
like oh I have to come no I have console
logging on pencils
oh you are Oh cuz it went to the scale
yeah yeah it it made a 10 because we
quantized it ah it's not undefined it oh
we know it's because in I'm DB votes we
have to do the replace there so we
should do it here
yeah dot rib please right right right
right right right right right so there's
a definitely a more efficient way to do
this at the source somehow probably but
this will do yeah yeah we should we
should have done it at the source we
should have done the data cleaning out
the source yeah but it's 10 makes sense
it's a lot of votes you don't think it
should be 10 no can we it still you're
gonna have a hundred pedals okay I'm
more satisfied with this answer okay
great you're gonna have a hundred no I
was I was giving it we're gonna give it
some little divet are you only gonna
have one pedal I'm just like okay 1215
this is just a demonstration I'm sorry
the beautiful creative minds of the
viewers will design something okay okay
so now I think we can go back to this
yeah and we can take a look at our
flower and we should see 15 define
things yes now to see 15 under but at
least we have fit so let's try return
and
you have to do the curly braces around
those oh right okay let's try that
interesting that that didn't work yeah I
wish it weren't like that and then we've
got yeah look at that
well that's cool this is like the
craziest kind of coding thing I've ever
done I'm gonna know cuz I just like it's
bothering me that it's wrapping the code
but I'm gonna I'll live with that we can
we can I can move more closer to you
know the other way is the way you need
to move oh it's fine it's not we're good
we're good
we've got our flour we have our data
okay now comes the hard part and I
should really call this movie index
because we're gonna change it it's not
gonna be wallet no you know what we
should be doing we should be calling
this D is equal to data because later on
oh yeah and also this would make our
code so much less insane because then we
could just have D yes then we can just
have D we don't need this console.log
anymore and then this this is still the
same this will be okay so much more
readable okay cool okay so this is a
heart and there just to point this out I
think we could have when we loaded the
data here we could have cleaned up the
commas there yes
so that would have a good practice clean
up the commas up there okay share with
me your observable notebook that does
that okay
so we have seven minutes to do the heart
of hardest part okay okay all right so
I'm gonna go explain okay deets re-enter
update is it okay brilliant your your oh
it went just went it overheated it's
okay it's gonna it's easy to turn this
one is not overheating because I have a
fan all right so I'm gonna try and
explain this really quick okay so d3 has
something called enter update exit and
for those that use things like me act or
view and etc this is basically how the
concept is how I'm reacting view and
those all this like virtual Dom does the
update underneath the hood and and
conceptually what's happening is I'm
with d3 the way that you need to think
about things isn't by the Dom elements
but rather you need to kind of like flip
your mindset and think about it data
first
so d3 is called data-driven documents
and this is why I'm so let's say we have
a data set of five numbers let's just
make it really easy we'll just say like
0 5 10 20 a hundred let's say and what
we want to do is use our data to dictate
the Dom elements we created so um it's
called enter update exit because in d3
the most common set of functions you'll
see is something that's like a dot so
let's I'm gonna start just writing this
code let's say we select the SVG with d3
select that's like an HTML select my
brains your select your that's like
going that's finding the Dom element SVG
pulling it out and putting it in a
variable into yeah and we're giving the
SVG element to d3 got i'm i've already
I'm assuming let me let me put it into
quotes actually sue and we can pass in
any sort of a CSS selector in here and
d3 will go and find it
I'm and then the next line you'll
commonly see is select all and I'm gonna
say path because that's the SVG element
we want by right now let me okay so I'm
gonna do this I'm gonna draw let's
pretend this is our SVG canvas I'm and
right now there's no there's no Dom
elements so what are we selecting
and the answer is were selecting nothing
okay this is going to return you an
empty selection so we can put stuff in
there
by entering updating and then exiting
yes so we see we call this function
called data and we pass in I'm gonna say
I want to call this data which is gonna
get confusing for us in a bit um but
we're gonna pass in do you want to give
it another name so that's what what is
that in our example right now ah that's
the is that the wali oh that's a good
point
okay so let's call this I'm you know
what let's call this the I'm trying to
I'm trying to I like the flower data
it's like the individual data from that
one flower I'm gonna let's separate this
away from our flowers and say this is
just conceptual got it and because if we
try to use the actual numbers okay low
too confusing so let's just say it's
conceptual and it's I'm you know our
numbers let's say values or something
that's a better one yeah values and this
is will pass in values and and we want
to also actually let's just do this I'm
and what this function does is it
returns and something I'm it returns
okay actually I'm gonna I'm only today
gonna explain enter because we have no
time for update next day I'm so this is
enter dot append okay that's it and in
this series of four functions is what
you see the most often in d3 let me
explain what's happening so a dog data
d3 will go and look at this set of
values so if you like okay this is a SVG
and this is our data and we have 0 5 10
20 100 we have 5 elements
and hey look there's no we see
absolutely no elements okay that means
we have to enter all of them and that
means in this enter that enter what's
happening is so data will say okay what
we need to do to make our Dom be the
same as our data is that we need to go
and create five elements and bind each
of these data to those five elements got
it so a dot enter I'm you that's how
you're accessing this enter selection
and in the dot append you're actually
creating the path elements in the DOM
and so what it would do is like let's
say these are our path elements so you
have multiple path elements within one
SVG yes
so this whole function will create these
five path elements in this SVG and it
will in the SVG I'm sorry in the path
element itself it will remember this
zero this fine this 10 this 20 and this
100 got it and then what we might want
to do is paint adder let's say these are
circles yes and and then I'm gonna say
this is a circle and we can say I want
the radius to be my data and so I'm like
doing a little thing but like this is a
function you're getting 0 5 10 20 that's
where you return the individual element
from the data array which is called
values in our case yes so yeah so this
is gonna be like drawing a circle with
zero radius five radius ten radius 20
radius 100 radius and and so that's
that's that's what's happening so and
when we say like update and exit then
what DT does is when we call this dot
data function it will let's say we now
have these three these two elements in
our SVG
because we created it before now we're
like okay this is the new data set that
we want to update you then i'm d3 we'll
know I'm okay we need to we we already
have two elements and we need to create
three more so that we can match it got
it and I'm gonna go this this might be a
little too much information what do you
think then go crazy move
why if we pass in a key a key function
let's say that I'm just gonna say that
the key for each of these elements is
the data itself and let's say that this
data so let's say that this is I'm five
and this is 50 then d3 one know that we
want to keep this one we want to enter
[Music]
these four and then that we want to exit
this 50 okay that but we don't need that
right now because we're gonna have a
back set of data we just want data enter
a pen and and do we have time for that
yeah let's do it okay are you sure yeah
great let's creep this far okay
so I'm gonna say d3 select direct I make
a new cell I'm still doing it here okay
we can do it here I'm the one thing is
that we need to return the SVG element
at the every end yeah so I would say
like return SVG just there yeah but here
I'm gonna say d3 select yes I'm
selecting the SVG and then now I'm gonna
chain all these functions so now I'm
gonna select oh I see
ah that's why it's doing that select all
yes the path is what I'm doing here yes
and then I'm going to the data in this
case is the flower hour
sighs petals okay
the data is the flap I'm looking over
here the weight force that's helping me
I don't need this extra function right
could just enter this right now
yeah don't you the key function and I
don't need any arguments to enter that's
just yeah that's here I go I'm entering
the data yes
and with each record but this is not an
array so it's each property oh I'm sorry
you you have to put that into an array
oh okay because it's just one otherwise
we could have done our magic stuff up
here we could have made all the flowers
yes out of that full right we could have
made flowers and made all these objects
each one got it yeah okay so we have
this one we're just entering the one but
still and then we append oh and I think
I'm gonna just is it crazy for me to do
this oh you need the dot though yeah
that's her hmm and then a pen yes and
then this I'm appending to the Dom yes
I'm appending just the path yes so what
you don't need to specify what's going
on in here with what path so trying bad
try executing that and then let's
inspect if we go back up uh-huh let's
inspect this Oh
so I execute it and then I'm gonna do
inspect and extra Zoe I can you inspect
right here perfect I see the view box
SVG mm-hmm but there's no okay let's go
back and see what we did wrong don't oh
oh oh sorry I'm too right now and the
little bit of difference is that we
don't need a quotation marks here
because that's the SVG variable yeah so
this is the actual SVG right man it's
this one right here yes it's that the
thing that's starting everything yes oh
and that you do running it I don't have
to click that I just know who was a
command enter like this a shift enter
shift enter yeah and then inspect oh man
why does it do that okay but I mean
they're just in the wrong place
oh yeah we do right here it yeah perfect
path we have one path why do we only
have what we only have one open we
approach that multiple pedals
oh we no no okay can we hold on hon um
it is because and we only have one
flower so actually I'm I'm gonna just uh
actually select all the groups SVG has a
thing called that group l oh you mean
actually just say groups IgG like this
yeah within quotes yes okay we're gonna
make a bunch of paths we're gonna make a
bunch of groups groups and so um do you
trust me can i yeah we don't have much
better sorry uh so what we're gonna do
is and we're just gonna call this
flowers and and what this does is makes
a group element for each flower we have
which right now is just one and so like
you said we should be seeing one group
element in here okay I see that and then
what we want to do because we've
structured our data this way we've
structure we have like a date like an
object like a nested object right and so
now we want to do is for each flower we
want to select all the paths but that
each flag on it for each flowers like to
all the poo and then we're gonna go get
the petal yes we're gonna get past for
each flower group we're going to get
past the data that's been bound on it
and the data that's been found is this
data so then we can access the dida
paddles and which means that it's going
to return our array of petals that's
that's right yeah right here I'm bad at
this right here and and we can say enter
append path and now we should be able to
go up here in spa
the SVG and hopefully in each group we
will see the correct number of passes
awesome but the paths don't have paths
in them no so now I think you should do
the honors for this one so go here for
each of the paths let's give it the D
attribute so dot adder oh this is now
giving an attribute and then yeah so so
in quotations oh yeah like the first
thing we learned yes
yeah that's it all the way up wherever
that was Thanks
right there yeah equals yeah okay it's
all coming together
yeah get where you're going to pass in
the function where the input is the
variable D and then we're gonna say oh I
don't think okay okay um is gonna be
just a d dot petal path because that's
what we have we have the petal path
right here and that's what we're
accessing and so now if you close it run
it but where are we getting the angles
not yet not yet not yet okay and so now
if you run it I it's because you need to
turn right things oh yes I'm in soo no
let's do dot utter on the path and do
transform D and then that's where you
can a string literal right okay yes I
forgot what the transform looks like
somewhere up here right yes transform
but and rotate I just rotate for this
one I'll tell you why in a bit
um you do yes perfect but you want to
close that in parentheses a rotate
parental and paren close paren and now
we should be able to see something is
correct
I'm terminus floor so that just but I
can just translate that a tiny bit and
then the reason why we have the group
element is so that you can translate no
don't don't do that one you want to be
transforming the entire power of this
adder well you wanna you don't want that
transform transform and then I can just
make something up here like translate
like I can just move it over a little
bit right now yes I'm really excited
Oh whoo man Justin move it over enough I
think you should move it over I the
pedal signs that you declare laptop or
you can do that too
where where did I do that why not use it
we're not using size scale right now
which we could but we're not yeah well
then do run this there we go okay so now
I could change the movie right I could
say like go back to Days of Thunder and
we only have three pedals and do you
want to put the size in there oh yeah we
got we got this okay we totally got this
okay so I'm in the transform part
instead we can do we can return a
function again and I'm gonna make this
into a string literal oh I see what
you're gonna do and here I'm gonna say
mm 0.5 pedals signs pedal sighs don't
you wanted to divide it by two or no no
because we did for B I did do other
people got it though yeah do you wanna
do this last part is like so rushed idea
that I never I always go like an hour
longer than I think that I'm gonna go I
never have something yeah but look look
at this though pet size and now if you
do one to go to wall-e again cuz it has
92 that's awesome and if I wanted to
just just say like right now it's just
using default stroke and fill those
would go as attributes and they would
end up like right down here you can
either do them on the path or the group
group they'll inherit the attributes
right yes I'm gonna do a really quick
thing and in the next few minutes I'm
gonna do it all the rivers in the next
three minutes okay all the flowers I'm
going to show you that we did all of
hard work already okay and the rest is
actually just gonna magically happen
okay okay so I'm gonna say I'm gonna oh
yeah yeah I'm gonna explain it I'm so
we're gonna say this is flowers data and
we're going to go through all of our
data and we're gonna loop through them
and we're going to for each of them
return the same okay return the same
information and I'm going to just put
these calculations into my function for
looping through instead I'm and then if
we've done this part correctly then we
should have flowers data and seriously
if we did this part correctly and I hope
we did then we should draw all the
flowers on top but so you see that a
little translate to put them next to
each other you're putting that in there
I'll go talk to the camera okay game
thank you everybody for watching I'm
sorry this is gonna end very abruptly so
I'm just warning you Shirley's adding a
little bit more codes getting very
abruptly a very appropriate song for
right now would be this thank you 8i 2.0
brockman new members so like I said this
is gonna end very abruptly
we're not sleep yet you have about 30
seconds to get to this tonight I'll be
back next week sometime if you know and
maybe sure I surely will and I will
discuss this and if there's anything I
can do to like revisit this to kind of
clean up or explain one last thing but
as soon as this is over well soon as I
get to it I'm gonna take the link to
this observable notebook I noticed it
says private so I'm gonna make it no
longer private and then I will add a
link to the observable notebook in this
video's description so you'll be able to
find that observable notebook and if you
make stuff with it I think tweet it at
me at Schiffman or surely on Twitter is
at sxyw you I want to have like I need a
button then it just like pops up here
one of these days all these overlay
stuff sxyw you yeah yes got it
so tweet it at us so like a little
snapshot of the flowers you make like
snapshots nother thing people say
screenshots whatever and then also maybe
a link to your observable how and and
because we'd love to sort of check that
out I'm curious to see what people do
with this alright how are we with our
flowers I tried to do something fans
don't awesome I love it and but I'm
gonna do one thing one extraneous thing
because then it will make it a lot
prettier you can't resist
I can't I'm sorry I'm sorry we got this
doh oh okay Kay Kay Kay Kay okay this is
actually proving to be more than I
expected but we're committed now okay so
I'm committed to this and I don't I'm
not even gonna explain it you're your
keyboard is hard disaster
[Music]
okay maybe it's not interpolate okay
let's do interpolate warm we're gonna
make it work we're gonna make it work
the attribute d3 dot interpolate warm
and then it takes a number between 0 and
oh no it's 360 oh no no no no no no that
is that that is the right thing down on
petals numb petals I you know what
Dena and we'll divide by 360 it needs to
be a number between 0 and 1 like a
rainbow colored thing no you're not
allowed to do anything we're code have
to stop you have to stop first of all
it's now officially eighty degrees in
this room oh my god because I had that
decay and they fixed the air it was like
working really well now it's like super
hot in here again I'm very sorry this is
good and super abruptly thank you so
much for doing this thank you for people
will ask their questions that comes up I
will if you have questions and I can't
answer them I will bug surely and answer
them thank you everybody for tuning in
and watching please make something with
this I'm gonna I guess this is the URL
even I just can I quickly make this
public kind of just a published publish
and people oh and it's actually just
like this yeah so there this should be
easy for people to find on somebody if
somebody could post it in the chat that
will be great I'll add it to the video
description like an hour from now
probably and thank you so much see you
next week
[Applause]
[Music]