[Music]
hello we're here we're live yes we're
back surprised this is one of those rare
occasions where a Kotick train episode
is planned within like 15 minutes that's
not entirely true because surely
welcomed it again - surely whoo guests
from last Friday's regularly-scheduled
nothing nothing has ever regularly
scheduled but somewhat consistently on
Fridays I have been live streaming and
we mostly surely but I'll say we since I
was also here did a tutorial around
working with d3.js for data
visualization and it was completely my
fault that I arrived so there was very
little time I'm just checking the chat
to make sure nobody is saying focus
alert I will focus the camera I forgot
to focus the camera so we're sought a
soft focus I look nicer in some focus so
we rushed through a lot of stuff and I
felt like it wasn't fair - surely and so
here we are back surely generously had
an extra little bit extra time today
Shirley's here actually at ITP doing a
fellowship working on a bunch of really
exciting social media and see you're
making all these like physical things
yes we talked about that for a minute
why focus the camera yes okay so I don't
know how to talk about this without any
visual aid oh actually I could have a
visual aid right I could just open up a
browser yeah which you have hidden away
so it's on the dock is on the left side
it's just do this look at all these
things that showed up okay yeah like
typing but oh just black ops not
actually on-screen oh no it's fine it
will be now in a second okay there it is
so I'm I might be because usually I do
data visualization in the web so it's
very I'm very digital but I've been
wanting to kind of broaden my horizons
and get more into the physical world so
I've been auditing two of the classes
here and one has to do
douwe news and sensors and the other one
and the other one has to do with
fabrication so I'm gene two projects one
final project with the students I'm and
it's going to be a physical data
visualization of women in computing
uh-huh it's really exciting this is the
one with the laser cut yeah like no no
this is the one that we're still
prototyping so it's gonna be like an
actual installation you walk through and
there's gonna be hanging lights and it's
it's going to be hanging like orbs and
then the idea is that as you walk
through the orbs each of them are
represent a woman that had a great
contribution in computing but and the
thing is that most of them we don't know
about most of them so at the beginning
of the installation they're all going to
start out really dim because they're
they're not very well known um and as
people go through they're invited to
kind of like I'm seeing or kind of
interact with their read more about the
women and there's gonna be details in
the orb and every time someone reads
more about them they couldn't glow
brighter and a little bit brighter and a
little bit brighter and the hope is that
by the end of the exhibit like all of
them will be lit up a lot more beautiful
yeah and then so as you walk through um
yeah so there's a lot of like kind of
data encoding into it so it's gonna be
my first like kind of big data
installation that like people can
actually walk through so that's the one
I'm in working on that's what this tote
switch is for and that I was playing
with because then when someone interacts
with I'm so I don't know if you can see
but yeah I'm like as that switch is
being tilted um the LED lights up and so
that's gonna be how we control like when
someone interacts with the orbit that's
how we use Suns that they're like
interacting with it and so the one that
you saw with the laser cut out so this
is kind of the prototyping for that like
reforms for the orbs yeah yeah he's like
mysterious look she's so cool she is
prolific inventor and cool
and CTO of One Laptop Per child um but
yeah and then the other one you saw is
and this one this one right okay and
this is just for fabrication homework
where I wanted to and these are some of
the women Nobel laureates and this is
this is a prototype base book and the
idea is to light the LEDs from the
bottom are sorry like the crystals from
the bottom and so this is kind of the
latest iteration I was working on
yesterday so like then I'm they're color
coded by the category of their award and
as and so I'm gonna put the crystals on
top of the lights and then it's gonna
glow the different colors this is great
so it's so fun to see because you know I
somewhat of I would say like an anomaly
here but so many people at this program
at ITP and ima work with physical
computing and fabrication and building
physical devices and making
three-dimensional objects that live in
their work real world and I kind of fall
back to my safe happy place of software
which has its own problems and
complexities but it's great to see I
know that you have done so much work
with data visualization on screen and
the browser d3 that's what we're talking
about that's we talked about of Friday
we're talking about today so it's really
I find it always exciting to see people
move into I'd like to like break through
that what could be scary like to and
like start to make physical stuff but
it's been such like a friendly
supportive environment like I realized
like how deeply I am in software so much
still got like even the most obvious
physical things I don't see like yes
like earlier today I was talking to one
of the residents and I was like oh I
need to build in the switch and he's
like no just unplug it and I'm like oh
like I was sorry I was I was clicking
like like a battery into an Arduino and
I'm like oh now I should build a switch
to like control on and off and he's like
no you can just cool I am going to by
the way I think I mentioned this but I'm
wait I'm going to be waiting in two
laser-cutting myself
sai is a student here and I are going to
work on I have a it's going to arrive
sometime this week a box of 250
train whistles and I'm gonna try to like
laser-etched the coding train
send them out is like patreon but I'm
not I think I'm not gonna use Patriot
but it's a longer story that I will get
to at another maybe I'll talk about more
in this Friday's live a little
membership gifts for people okay so
let's move let's move on because we we
will hopefully won't be super rushed
today but we're will be here until about
five o'clock so that's about 45 that's a
half an hour okay so I'm gonna kind of
let Shirley take the lead here let me at
least open up what I what we'd made
before and I will try to in my own words
kind of recap what we did and then you
can tell me if I kind of understood it
correctly oh and then we will also take
your questions and Peter in can you
explain how to iterate over the film's
again so that would and that has to do
with kind of like the interrupter exit
stuff what so nothing we need to answer
that right now I'm just trying to
pinpoint where so I feel like there's
two parts you could be talking about one
when we loop through the data itself to
calculate and use the scales and but
he's probably talking about the enter
update exit part where we're iterating
through and the kind of SVG oh yeah so
we'll make the jump like what we what we
coded somewhat step by step last time
was how to make one flower based on one
movie but then we really quickly I don't
think we again it was surely very
quickly just added some code and so yes
let's try to take some time to unpack
that and I also would love to show a
couple of the projects that people made
based on yeah yeah so I know there were
so let's so let me first recap and I'm
gonna try to spend less than two minutes
doing this so the first thing that I
learned from Shirley is that syntax for
creating a path in SVG yeah and for move
C for curve two there was also L for
line two yes and then and then that's
really what so that's what's happening
here
this petal path is like
start here start at the top curve to the
bottom and then curve again back to the
top and so this is a very simplistic
design and maybe surely we'll touch on
how you might make that more beautiful
or you could look at her actual film
what's it called again film bent flowers
project to see so that's we learned then
we could actually put that on an HTML
page by creating an SVG element and all
this is happening in a observable
notebook which is like the p5 web minute
or in the sense that I'm coding in the
browser but very different in that it's
got cells that can be executed
separately users require a bunch of
different syntax things ok then we
loaded the d3 library that's the primary
library we're using in these code
examples then we loaded a JSON file that
has all this information about movies in
particular there the year they were
released their box office yeah the
number of the ratings things like that a
lot of metadata metadata by the way then
what we did was use a nominal just like
source make this discussion much shorter
we use the d3 library so if I go up here
and look at the data we can see here's
the movie die-hard - and all of the data
associated with that movie then we use
the d3 library to parse out two pieces
of data their rating and what was the
number of votes again soon number of
IMDB votes so basically the number of
people that like rated them ok so and
those pieces of data were used to design
the flower yes and so though all this
functionality that you're seeing like
extend scale linear quantize all these
are d3 built-in T 3 functions
that perform common operations on data
like remap it from this range to this
range or you know inverted or multiply
it by this or that kind of stuff and so
we did that and once that was done there
is now this sort of crucial piece of
code which i think is kind of what you
want to react splain them yes in this
crucial piece of code after the data is
parsed and oh and remap to all the
appropriate range
it takes the data and makes the flowers
out of it through this process called
enter update exit but we're only using
enter for this particular exam yes yeah
and we were talking about I think going
through the enter update I'd say and
then kind of talking about steps of
maybe what people that are watching
might be able to do to kind of like
complete the price right um and so do
you want to do the which one I think you
should start with replating more slowly
any of the bits you thought you Russia's
had to rush through and you can do that
on the whiteboard let me turn the
whiteboard camera on and I will keep an
eye on the chat yes that'd be great I
think I would love any questions to do
with the enter update actually and I
think that is Peters first question yeah
and Simon is giving us some information
about details of SVG tags yeah and so
why don't let me just make sure this
works if I switch to here whoops no
that's the wrong button
okay the audio should be back that was
my fault
so why I'm gonna alright I think I might
know what's going on here this sound
should be back and hopefully the white
birds gonna be back in a second
people can still hear me okay video
capture device existing weird something
happened
create new
okay everybody I realized that's the
green screen
that's no signal that's the computer
this should be the whiteboard there we
go we're back in business
say I don't know what happened there
so can say on something for a second
Shirley hello okay your mic is good so
now we're we're back in business so you
can explain go back to whatever
discussion if you wanted to have with
the viewers and I will keep an eye on
the chat okay sue we did this last
Friday where I like super intensely
rushed through inter update exit and
that was the kind of the one that I
wanted to go over and then if we have
more questions about other parts of what
we went over on Friday I would love to
answer that too and but I'm gonna start
with this and then hopefully like
questions will come in as we're doing
this and so what I wanted to do is kind
of give a more concrete example of like
um something that you might actually do
when you're working with data are
working with d3 and data um
and so let's make this like hypothetical
data set of I'm just gonna start with
three so let's just say I want to draw
like three circles and my and I want to
like map my data to that so this is my
data and let's see I'm just making
things up right now let's see so my data
is an array of three objects and each
object has an ID and a radius number and
so let's say that this is our SVG what
our especially currently looks like and
so we talked about last week about how
and what d3 goes and does when we say d3
next and we always have to go like the
SVG
and then when we say Dotson liked all
and let's saying that this time we're
trying to draw circles and some we're
gonna select all circles that are in the
SVG and right now what we said last week
is there's nothing that exists in the
SVG and so that would return an empty
selection and then the three kind of
most common things that you see in d3 or
that you saw in d3 I think in version 4
and before was this kind of pattern
called data enter append and actually I
think in version 5 or a newer version I
think we now have a different it's a
it's a different method and I'll cover
this first and then I'll talk about the
new method and because it's conceptually
still the same the new method just makes
the code part easier and and so we'll
pass in let me just I always name is
data and then I regret it and so we have
values let me just call it vine use and
we're gonna pass in values and this is
the part that I kind of wanted to
explain in more detail which is I'm in
d3 dot data this method actually and can
take in a potential second argument and
we call that the key function and so I'm
what the key function I'm if anybody's
ever used react or view and that's
probably really familiar to you because
every time you try to render an array of
something like they'll scream at you and
be like for best practices enter a key
function and and so that's the same
concept but let me do this first and
we'll say whatever M is so let me do
this and then
clean it and just watch out that
actually the camera only gets to about
here okay thank you
um so I'm gonna stop this right here and
I'm gonna kind of and go back to here
and say and I'm gonna try and color code
it so let me say that I'm my values here
so like my actual data that I'm trying
to bind are and this kind of like one
five this ID is 1 and radius is 5 and
then I'm trying to find you know ideas -
and radius is 10 350 and so when d3 sees
that is thought data what it's doing
underneath the hood is it's going to
take the bat this array of values in it
and when you pass in data and it has to
be an array or else you're going to get
an error and and d3 is saying okay let's
loop through each of these identify what
the key is
so this is where it's like I'm looping
through each of the elements in the data
and identifying what the key is so it's
saying okay this key is one the key is
to keys three and then they will look in
the Dom and they will say okay is there
any elements that are existing in the
Dom that our circle elements um that
have the key ID one key ID two key ID
three and I'll be like oh no there isn't
any of those and so it will be like okay
so the UM
there will be an enter a selection you
keep going and there will be an enter
selection that d3 calculates and this
this function calculates and it's saying
oh I need to I'm trying to figure out
then let me let me have like an actual
like color coding of like okay so all
concepts are going to be in blue all
data are gonna be green and all SVG
elements are red from now on so it's
gonna be called an enter selection and
this says that because there's none of
those things that match like all that
criteria existing in the Dom that means
I need to go and create three circle
elements I'm and we're gonna get into it
yes yes so if if those did exist would
it did would just like grab those
elements and okay so enter you enter the
enter but most typically is sort of the
first thing that happens based on the
data and if this and the stuff isn't
there so it creates them creates the Dom
elements what do you do
so d3 does not do anything for you you
have to create it so you have the option
so let me actually okay keep going keep
going
I mean so let me rephrase what I set up
a little bit so it data the method data
will say you need to like we we need to
create three Dom and three circle
element being able to match the data so
it like has this data structure if you
like actually look at the Dom element
and like it has all this like it had it
just says and I have three placeholders
if you ever want to go and create three
Dom element so that the reason why I'm
making this like really like that
distinction is then the reason why you
do dot enter is because you're telling
deep three okay I understand that there
is something in the enter selection and
so please give me return me these three
placeholders and then when we do dot
append we're saying for each of these
placeholders
actually make me so when I do thought of
hand
this makes the Dom element yes and we
had G in our example because we this is
an example so that's simplified that's
just making some circles but ours made a
group that we then put a hole at your
petals and things yes perfect so
actually let me do this over here so
this is this over here is the enter like
it's same return many enter selection
and is it making these Dom elements the
circles with the ID that's here in the
data yes ooh I'm actually you know won't
be fun let's actually go into our what
we created and let's inspect the
elements and actually can you
console.log every group I'm in the so
let me just finish drawing this really
quick so here what enter does is give
you back three placeholders and what
append does is actually create these
three Dom elements in the three circle
elements in the Dom with the data bound
to it and and when you when you
console.log will be able to see what
that so when you say console.log right
now the result of this whole process is
stored in a variable called flowers yes
console.log that object okay like this
yeah I'm like there we go sorry
everybody I'm like all my buttons are in
different places console.log flowers so
if I run this
then if I look at the console these are
them that's that's our data this is and
so this is actually what d3 will return
you and when saying is that it has 135
group elements and right and then the
most I'm gonna do my code Vanna White
okay so what the most important part of
this so this is what like a Dom element
looks great and what do three does is it
kind of makes this oh yes the data in
there that's the data so when people are
like d3 binds the data like that's this
is what they mean it actually like makes
this little attribute or like call like
underscore underscore data and then you
can see this is this is the data we
created here the pests sighs mumbles and
the array of petals right okay and
that's what we're gonna bout to use down
here and so I think there was Peters
question was like how did you loop
through the film's and so what actually
happens so actually do you want to come
no yeah you're - what actually happens
is and when we do any of these don't
adder or that style right what's
happening under the hood is that d3 is
applying this function that we passed in
to every single one of those Dom element
G over here yeah so yes every single one
of these Dom element and in every one of
these functions we can actually see that
right there and that sorry I'm
interrupting you in the transform and
the way we actually see that in there
was like a there's a property there that
would have that's dis translate in it a
trance oh yeah I think it was there
under T so that part is not actually no
that's that's that's a part of just like
HTML and SVG and so like basically d3 is
just abstracting some like Dom
manipulations stuff for you and
but in this function transform it's
probably under the transform one that
you found this is yes because heart is
really big yeah
yes I don't know if you want to get into
this no no jump definitely do not I was
my fault
go on but I'm so it's and and this
function what we're doing is we're
getting the data this data per group
element and then and then we're
evaluating it and d3 is looping through
it under the hood and applying whatever
is being returned to each of those group
elements and and so that's how deeply
I'm that's how we use d3 to kind of
apply data to each element so usually
after you've seen this there's a doubter
doubter doubter doubter oh sorry yeah
usually after you see this set of code
you'll see da-da-da-da-da under don't
either
so actually what an adder is short for
attribute oh yes which is a HTML
elements can yes it has attributes one
of which is this like style and three
okay so this is what happens when we do
enter and then I when the try and talk
about update and exit question so we
only needed enter in our example because
we were just like creating a
visualization yeah so if it's going to
change over time or something different
it's gonna happen later it's gonna
animate or maybe that's why we would
need to add update yeah so if if it's a
static visualization you only need enter
yes it animates you need update that's
not enemy be like just changes value it
changes value yeah so let's let me just
show that really quickly really quickly
by you let me say that now that we've
drawn okay so in here I wish I'd like on
my computer right now and I can just
like cut this out and like
like this over here and putting here but
one of these days I'm because this is
recorded I'm just gonna erase this so we
have we have yeah room yeah I saw
somewhere in the chat I was like no
don't you erase or something okay it's
all being saved for until as long as the
it's not the internet apocalypse you'll
be able to find this material okay so
then let's see now that we've like you
know created all of this
I'm let's say now for whatever reason we
want to show the second state of data or
a second set of data and let's say that
in the second thing I'm you know we have
we still have let's say I'm ID two are
ten but let's say like we have actually
you know what and let's say in the
second state the rainiest actually goes
up to 20 and then let's say we have a
new thing um and I'm gonna call it ID 4
and this one is gonna have radius of 30
I am making all of this up so just just
to understand that for a second the idea
here is that if these are all tied to
circles this is now in a way a new value
for a existing circle and this is now a
new circle because the idea is the key
for each piece of data yes
so let's yeah exactly so let's go
through that together and so I'm gonna
say you know this was okay let me
now I'm trying to decide how I want to
go about this let's still go use these
no I'll draw anyone so we have we now
have three circles and this is I'm just
only gonna draw the ID this is ID one
two and three and the radius is 5 10 15
this is the result after here after that
yes thank you
and then our new data okay our new data
is ID 2 and radius 20 and ID for radius
30 so just like you said Dan do you want
it do you want to do it well we would
say we would say where do we have to say
dot data again conceptually for us and
so let's say that we want the very first
add the order I usually do it is
actually I exit first so you can exit
after an enter actually you know I think
you're right let's do it with the code
ensue I'm gonna change I know but we
needed that enter oh you don't have you
just have update no enter I was so
understanding with the enter that code
we have is there only if we only need to
enter we want to do all the call circles
and then what I'm gonna do is first I'm
gonna exit so this is concept I am now
like getting completely I never used
more than one color it's very amazing
I should have actually
I don't know things I get myself into
the first step I want to do when I'm
doing enter update exit the whole
shebang is this part where I just tell
d3 to do the calculate buying the data
do the calculation then and what I do is
I take circles that exit dot remove we
would be this would happy happening like
here so this okay I'm gonna make some
more room for this circle thing so this
will be on a new line right there yes
yeah and I just wanted to it was okay I
understood that this equals circles okay
so okay so imagine that this is like in
the guy okay um and so what's happening
here is this is basically the like
return value of data I'm and it's saying
I'm and here another thing that that
data would have done is say okay there's
ID to ID for so this remains but these
two need to go so these two are the exit
selection and so I'm this we call the
exit selection
and it is the two circles with ID 1 & 3
because they're not here because they're
not in the new data that we're trying to
render but we're here values is is here
but I don't see anywhere you refer to
Val - ok so very good point and you've
caught me so technically speaking ok let
me do this look that makes sense to me
but how did it know to compare so oh you
just said that oh you're just
overwriting Davout the values changed
yes it's kind of like isn't that the
thing that react does or something it's
just like something changed update stuff
sorry you're catching me so I'm what I
usually do is I put this whole enter
like I put all of this code into a
function and every time that you want to
animate a new status set of data or you
want to like somebody clicked on
something you want to update the data
you will then call them call that
function and pass in the new values got
it yeah ok
sorry I was like trying to I get it
again it totally makes sense so this is
not an automatic process where this is
always like looking at what the current
values are it's a process by which you
can sort of pull what's in the Dom and
compare it to your data and update
everything yeah so is that you need to
do everything you need to do absolutely
everything like reactant views and stuff
like they're doing that's magically
under p5 is like that as well you you
have to draw nothing's gonna happen in
p5 unless you're explicitly drawing yeah
to me this feels like more automatic
than peopIe but arguably it's the same
idea actually and I think the difference
is the mechanism by which things are
drawn in p5 is this setup and draw
function and here it's really about sort
of starts more with the data and enter
update exit
the fundamental difference between d3
and p5 is that p5 defaults to canvas you
set up and drop you somehow sense
because then like you set up the canvas
and then you draw and then if you want
to innovate you clear canvas redraw
everything this is actually actually
updating SVG elements yes because SVG
elements will stay in the Dom and you
need a way to be able to remove it or
update it but I don't want to go too off
the track here but my you in d3 you can
also say use canvas instead of SVG and
but your and your code doesn't have to
change or it changes a little bit so
actually the great thing is if you want
to use canvas I don't think you need any
of this code okay because with canvas
like we said it's just about like clear
draw clear draw and so with canvas what
you might do like with canvas all you
would do is in the same function that
you're drawing instead of going through
this whole hassle of a process and we
would just pass in the new data clear
the canvas just redraw the new data um
and so you might be like why are we
going through all this trouble because
if you want to learn to you three every
single example other than the one
examples for canvas will have this whole
pattern and it's really helpful to know
what's going on yes Scotty okay could
continue there's also a tangent about
like SVG versus canvas and when you want
to use which but that's a that's a whole
tangent and but yeah so was I talking
about
oh okay so this exit this dot exit is
basically telling d3 that I want to like
please give me this exit selection which
will include these two Dom elements and
then this dot remove we will actually be
that's the function that actually
removes it from the dawn and so once we
call this what's gonna happen to our SUV
G is this gets delete it and this gets
deleted so that's what the state looks
like after this exit selection all right
sorry after this code is
executed so ID number four is not added
because the exit is only forgiving you
what's missing and removing and am I
gonna guess correctly that update will
add number four very close very close
and dirt we need another enter yes
Oh cuz we just put exit before enter yes
oh that's you didn't actually we're not
actually getting rid of enter and
replacing with update yeah we're just we
needed to add exit first yes who could
you do them in any order cuz you're kind
of setting up or it's important to do
exit because here it says enter update
exit so that's kind of what I was
imagining over the years I'm like
developed this order because and I
reasoned it out once I'm or a few times
and now I'll have to talk it through
yeah okay but enter is gonna get us the
missing one okay yeah there's a reason
for it and I don't remember off the top
of my head and but yeah so what we want
to do and then this is where you can say
length dot attribute like you can set
your attributes and so what this does is
like you guessed it will say okay in
this SVG what's missing is the for and
so we're gonna go and create oh - yeah -
is still ten update we'll change that to
20 so exits for removing enter is for
adding and update is for existing things
with change data I love I love doing
this actually because I always feel like
I'm not like explain you know I don't
know any of this stuff I I like
I've tinkered with d3 but I'm just in
that
that that place you know you've been
there everybody watching been there
where you like don't know the thing but
you found some example yes you just like
move some stuff around and then you kind
of got something and you move on
like p5 I feel like I know that inner
mechanics of how things work so I can go
a little deeper but this is completely
new to me I also a hundred percent agree
with everybody that's like canvas mp5
are easier to grok right cause I'm like
you don't have to worry about like
persisting Dom element removing them
updating them and like all you have to
worry about is cleared wrong cleared
wrong
mm and so like I think I honestly feel
like p5 and canvas is the more fun one
but like with um but like with d3 well
so with indeed we can deal with HTML
elements SVG elements canvas but you
know I I think that's always important
that people get into this trap of like
oh should I be using this one or this
one which one's better this one's better
this one is no good I like my thing
instead all of these libraries it's not
a zero-sum game they all are tools that
have their own value and like you might
say like oh hi I've never programmed
before oh why don't you take a look at
p5 or hi I program in JavaScript I have
this giant data set I want to visualize
SVG I feel like oh why did you take a
look at t3 yeah so it's not I think we
can fall into that trap of like I have
to like prove that the one that I like
is the one that usually yeah like I
don't these are all like you said like
they're all tools yes use them where
they make sense
yes okay okay so the one last part and
this is gonna be oh and then what I have
to do is I have to remember this enter
selection and here in this in this
variable and this is the part that's
going to be get a little bit weird if it
hasn't already Dan and I'm realizing
that I'm running out of space wish me
luck I'm gonna
gonna be over here I'm gonna just do
this third part over here and so this is
kind of going to be the update step and
what I'm doing here is saying enter dot
merge circles dot adder and whatever
attributes but I've never said adder
before in my whole life and you think I
at Furtick you like what is this header
no but that's probably a thing that's a
way to say that it's a dr so this is
probably that there's a lot of weird
things and this is probably the weirdest
one so what this is saying is I have my
enter selection which was this for and
I'm dog data this actually also returns
you the update selection which is this
too and so I'm saying go and give me
this enter selection of for merge the
selection with this update selection of
two and then set the attributes whatever
attributes I need in this case what I
want is to set the attribute radius and
do and then you know I want to use the
DAR and this would be that would be here
also right so the reason why I have this
is because you don't so here it doesn't
apply to us because I'm okay
the best way to describe it is if you
have attributes you want to set that
will never change do right here so maybe
I actually my fills red got it so that
means that every time I create it can
never update it will it will never I
this attribute will never be updated and
so I'll just do it on creation just
because just because that's much more
efficient you can you can put this down
here and the same thing will happen but
like I mean you just don't need to and
I'll put any attributes that will that
are data dependent off of this thing
like chained off of this thing
and so now that we have this one line
this radius will become 20 and this is
this is the code for enter update exit
so I have an interesting question here
so enter that's exactly to this function
called enter exit maps exactly this
function called exit but update its
there's this onesie called merge so
there is no actual function called
update the process of updating is
merging the existing circles with the
new data so it's called merge is that
kind of yeah so basically the update
selection you can think of it as like
and I think of the update selection as
like whatever it is existing and then
needs to be kept but yeah honestly it's
it's a it's a little bit it's a little
bit that one's a little bit weird of a
one and so now that we've gone through
all of this pain I'm let me show you the
easier way to do it because I think I
have this here so I just found over here
this notebook for always is from 2012 so
it must not be oh this is like it's got
some examples of like enter we can see
this in track merge they sure like that
but what I was looking for was that
somebody was telling me there's a new
thing called joint go back to that go
back to that and then go up and so this
is basically I'm well actually that's
not that's not even really this is only
this is from like seven years ago like
my Google search was a little off wait
so the thing I wanted to show you is
what someone leads yes that's what I was
looking for it's called joy yeah data
join so it's
[Music]
selection I'll join you try the d3
selection that's what else and then do
not find dot join selection not join
yeah so yeah I'll let you stand over
here you can point it over there people
will be able to follow it more easily
yeah so this stop join I think came out
in a newer version of d3 and where it
just abstracts away all of the pain that
we went through and we went through this
so that you can understand how it works
by just do this so join is kind of like
there's gonna be new stuff there's gonna
be stuff that's gone there's gonna be
stuff that was there but the you values
changed joins gonna like account for on
and update the Dom elements if you want
like specific things to happen like if
you still know you can you have these
callback functions yeah do you like all
the pain we just went through
yeah no this do you like this is good
because I you know it's it's Internet I
kind of to me I have like encountered
similar things like this like you can
jump to use a weight and a sink in new
fancy JavaScript it's not that new but
like without looking back at what all
this sort of like gobbledygook of
promises are confusing what's going on
so this to me is a little bit similar
like yes we could have started with just
this join but at least for me and in
having seen d3 code before having this
having this more sort of like full
explanation of it
now again it's like the reward you get
your dessert yeah joy so I actually
personally have never used before how
new is this I'm I think soo a disclaimer
I stopped using enter update exit period
last March um when I started using view
because
reactive view again do all of this
underneath the hood and so the way I
actually like to Deb and it makes me
faster developer is I use d3 to do all
of that data translation so last week
when we did all of those scales I use d3
for that I use d3 to like calculate
positions for me and like like XY
positions SVG paths and and then when I
actually need to go render to the Dom I
use view so when I stopped using enter
update exit so it must happen between
last March and now so I personally never
used it but I think if you don't want to
use like if you only want to use d3 to
draw um and do everything then I highly
recommend checking out the data join
somebody harp eat in the chat suggested
looking at this let's see if this this
particular example which explains enter
update exit is this the one you're
looking at I don't miss block yeah cool
so thank you okay I can add a link to
this in the video's description as well
I wanted to show two things I don't know
if you saw these but two people created
let's start with this one actually so
based on Friday stream two people made
their own versions of this this one is
by Stefan - Berg let me open it in a new
window and we can see here film flowers
based on the original so one thing I
love about observable is how you can
annotate with markdown so it's really
nice to be able to do that I mean and
and you can see the code is so much
nicer yeah so these are beautiful you
know it's something about also the with
these kinds of projects the repetition
and the arrangement of all the different
flowers is really what kind of brings
out the visual for me I feel like I had
as soon was working on a project and it
was like a sort of beautiful pattern but
as soon as you could see like a hundred
variations of them all in a grid you got
other sense of what that pattern is like
so that's really nice so this looks like
pretty similar to what we did but just
with a bit more thoughtfulness in terms
of color and and the ranges but the
other one that somebody made which will
go here I'm Anthony McAteer or spectral
flame I recognize that name from YouTube
chat created something very similar but
with a totally different data so let's
look at this so this is popularity and
contribution flowers of coding geometers
so I have a playlist know what number
I'm on 150 something there's like videos
of like a coding challenge so they'll be
I'm actually we could look at the data
here whether they'll be like a star
field a snake game all these different
things so I guess what's interesting is
to think about what first of all what is
it what does it mean for something to be
popular
I suppose that's tied to maybe the
number of views is that the right metric
for popularity interesting question
height of the background size of our
items such as views the number of petals
is how many contributions and
contributions is a thing that if you go
on to the coding train website and go to
like coding challenges I'm pretty sure I
think that 10 print 1 this has the most
contributions so if I go to here you can
see these are all like versions that
people made after watching this video
and seeing it's just this is the example
of the pattern so this is like I like we
were talking about I wanna make sure
linear does this is like how would
you're making an example like how far do
you go with it like I you know do you
want you add all the features do you
make it beautiful or you take sort of
leave stuff for the person who's going
to receive the example to build on top
of so it's hard to find that line but
let's so let's take a look at this so if
we look at this we can see here's all
the data I'm and then here's the text is
there and this I guess this is just the
number of the number of what challenge
it is that's the name of the challenge
and then this what this down here and
like what the curve because because
there's a there's a difference in how
sorry how long the arc is right Oh
spectra is that spectral piano is in the
chat
actually clock has the most oh there
he's there a little bit behind okay so
you can ask your questions we'll get
them yes I'm wondering sue there was
wait there was popularity and that was
the size and then the description up
here says wait you could you could if
you go down if you could just do this to
hide it Oh God
so it says views is size and height of
the background number of petals is the
number of contributions okay so maybe
this is also tied to views maybe that's
what so about the background yeah it
makes sense because you can see this one
over there has three petals in a much
smaller arc whereas that snake game has
a lot of petals at a much larger arc
the background curve is just the views
yeah got it
okay cool I like I love also that you
did this which is you can do this
I'm very similar to in Illustrator you
can do I'm sorry sorry we were you this
one okay okay okay so this this text
that um curves around the way you can do
that is an SVG pad and then you can draw
like a semicircle with like an SVG arc
or some or a path arc um and then um you
can say I want to have the text along it
so that's really cool and and I think
the same thing probably happened at the
bottom because you can see like the 31
and 32 point one there like following an
arch so that's super cool and I also
really love the different like you went
above and beyond this is so awesome like
look at the different like petal shapes
there's one here there's this one that I
think is a little bit so there's you
know 1234 is different cuz cuz 35.2 is
what we started with and then 31 is
different and then the the traveling
salesperson one is different yeah so
there's 30 is different 31 is a
different pedal the one down here's a
different pedal the one traveling
salesperson is a different cuddle yeah
this is really awesome so I'm curious
also spectral piano like so from the
this is all in a playlist so certainly
with the YouTube API which I have
actually never investigated really in a
video I should definitely do that you
could get a JSON file that has all the
videos in a playlist their name I
presumably the number of views but the
contributions is something that's on the
coding train website which is separate
from YouTube I wonder if that was done
by scraping like the coding train github
or just manually entered that's kind of
an interesting so that's what's also I
think what may not be so obvious to the
viewer here is there's like a multiple
levels this is not all information
that's part of so that's great to see
have other peb you done this film
flowers example in different other
workshops and things that people
projects with their own data in a
similar way I have no actually it's cool
because I've gotten people that cuz I
released it three and a half years ago
and so people have done it with
different like like different data sets
and different visuals like there was
someone that did I think every episode
of Gilmore Girls
I feel like instead of flowers it was
toasters I think it was and like it was
toast and different like jams or
something
and they were like you know it was
inspired by her filament flowers there
was like some other people that did like
butterflies or something like that and
then in the workshops I have held I'm
like people have they didn't use a
different data set but I'm the petals
that they've done are like really
beautiful yeah like we were staying at
the I think the shangri-la I'm for one
of the workshops and one of the students
actually used the sangre lot like he
like redid the shangri-la logo
shangri-la logo and use that as the
pedal oh and that was like I also
thought you were on another his hey week
was reminding me that we're well it's
5:05
okay I built in a little extra buffer of
my cell phone we're gonna finish up in
the next five minutes so if there are
other questions we can try to answer one
or two but I wanted to mention because
you were on nothing is it a twitch
stream that's Jason learn with Jason
yeah did you use you went through so
like a kind of similar project on that
event was something totally different
he also wanted to do something with
films likes film flowers um and but for
him what we did was we got his YouTube
data and we are making holy buckets okay
oh wait oh is it still ongoing
yeah so we are like part two now I don't
know I don't there we go
pardon - yeah yeah so we're still making
the bus ooh that one is that we went and
yeah so we design a whole buggy and
we've like assigned different part and
like data to different parts of the
buggy and because he has an inside joke
with his stream
chant where instead of swearing he says
holy buckets got it this looks like a
bucket with wings and halo and like yeah
it's very cute yeah so I so I'm I just
pulled up I think what's the archive on
YouTube but I believe that the the
streams happen on Twitch actually I was
I was I should look more at this I've
been noticing that because I do most of
this live streaming by myself I haven't
really thought about how it would too
much about how to do something with more
than one person and I've noticed like
people have nice setups that involve
like you know a picture and picture and
multiple screens and so anyway this has
been great having you here is like a
guest thank you for having I've had
guests but thank you for going with the
awkwardness of like this whiteboard
where's table on everything I'm looking
to see if there's any last questions
Thank You Kate we c'mon for posting
links in Twitch and then you used to
stream like on your own Chad should I
not be mentioning this you ever thinking
of doing that again no I wanna do it
next summer
after life settles down yes okay good so
you'll have to let bit I mean we'll stay
in touch of course but you'll definitely
have to let me know so I can alert the
coding trained audience to chew and so
we didn't make any changes to this code
but hopefully now that we had Shirley
back to more slowly talk through all of
this wonderful stuff that this helps you
understand some of it you still can if
you would like make a project based on
this example yeah yes gif it it's really
had a few different exercise ideas
because I think to kind of fully finish
it um first thing would be um put the
titles in so you can do that by creating
a text within each group like a text
element within each group and put in the
titles of every movie on the flower and
then we can also do another mapping and
the mapping would be I'm the John rrah -
the colors and then the third thing
would be a map
I'm what was it Oh different petal
shapes for different parental guidance
readings if you want to go through the
rest of the exercise and all of that is
in all of those features are in the
version of the project that's on your
website here yeah so there you go back
up the look I'm a little bit so this is
yeah the parental guidance reading yeah
guidance reading and the the colors so
those two are the last little bit if you
want to go through it and like kind of
finish the like try some other scales
and clean up the yeah so I mean so you
know you saw my kind of crude version
that I hacked together and surely helped
me with so that's kind of like the raw
guts of everything you can see a much
more polished version with more
thoughtfulness and ideas about different
designs so I think on one hand what you
can do is exercise and is try to match
some of this by adding color and shapes
and more pieces of data but you could
also create or get creative and make
your own or I you know you could also
like take the same visual motif but
connected to a different data source
yeah so many possibilities so maybe what
we'll do we'll see how this goes but for
now you if you make something you can
the two places you could share it would
be the comments of this video or the
previous video you can also share it
probably will see it more quickly or
easily if you share it on Twitter so we
have at Schiffman as me but more
importantly at sxyw you yes so let's
just
we sxyw you Twitter and pull up
Shirley's Twitter page here and so oh
look there we are
so at Shirley sxyw on Twitter and then
I've been trying to what we'll also do
is that create a page so now I'm looking
for somewhere here there's a cuz it's
not in this menu yet but there is a page
for guests tutorials how the website
works but there'll be a big I'll make a
page on the website where people can
also
and it'll show up as a list like you
know if I go to this one you can see the
gears like people's versions they made
them so we'll make a page like this that
might take a few days violet is the they
are the github community manager to help
make that page so I'll be in touch with
violet about that I'll put that together
yeah well people we did we've been
answering questions all okay okay so oh
well okay we can ask we can ask one
question and can't really see it I'm
curious what she referring to Shirley
thinks of the coal lots visualization
I don't think so that was one of my more
so I started this new series embarrassed
called coding and coding in the Cabana
as I'm making these videos at home I
have a little garden and so this is a
particular visualization of a
mathematical number sequence called the
coal Lots conjecture okay and it
produces a pattern that looks like if
the code still works what did I do to
this code that it's like now it's
decided to crash the browser oh there we
go this takes a while to render it makes
this pattern what's crazy about this is
this is the math for this number
sequence you take any number and if it's
even the next number is itself divided
by two or if it's odd you multiply it by
3 add 1 and divide that by 2 and it's a
famous conjecture in mathematics because
it's not prove it's not proved but any
the conjectures that any number you
start with you'll eventually that
sequence will end up at 1 so and then
this is a visualization of a variety of
the paths of all these numbers based on
even and odd making left or right turns
and you get this like plant like
structure this is no invention by any
means of mine and most of the stuff that
I did is based entirely on this
numberphile video which about the
koloff's conjecture and you can see it
here and there's actually somebody I had
I bought this book I don't have it here
but there's somebody made a like a
coloring book of all these like math
algorithms it's wonderful anyway so so
that was the one question
you think of us it's really beautiful I
should say damn that like um it's if I
really think really deeply about it this
is kind of really amazingly miraculous
because I'm me getting into generative
visualizations and generative data art
is a lot thanks to your nature of cool
okay
and there was like a whole project I did
where are you like washed your Perlin
noise and that's hot and I like I like
refer to your like fractal tree
algorithm that does music San Francisco
yeah that was like basically all like a
majority of the visuals in there is
based on like what you've taught so if I
take a moment and like think about it
really I need to I do want to say though
actually
is there a like a recent conference talk
that has a video online of you showing
some of these projects oh but people
could just go to your website but here's
not that outdated yeah no I know but I
was just thinking like oh cuz you gave a
presentation here about some of these
projects that people got to see so
someone seeing these projects you talk
them through is really nice so yeah so
anybody should check out the project I
think that Shirley was referring to or
that I was referring to just now is this
one called send me love from SFMOMA so
if you haven't already thank you so much
visit Charlie's website thank you too
should never know we might just come
back tomorrow for like another half an
hour you're like oh wait a second one
more thing but we'll definitely will
definitely continue I look forward to
hearing from people in the audience and
things that you make thank you for LOM
l0m yeah so definitely I'm but you
should stay tuned you don't need me to
bring Shirley on the Internet to you if
you wait till maybe this summer as life
settles down you might be able to find
Shirley live streaming on Twitch awesome
okay so now I'm really overstayed my
I used up all my buffer so I'm gonna
switch this to put this music on and
switch to the wallpaper goodbye everyone
thank you so much for tuning in
[Music]