►
From YouTube: BHTMS - Syncing ReactJS Diagrams
Description
Broadcasted live on Twitch -- Watch live at https://www.twitch.tv/rhyolight_
B
B
C
B
B
B
C
B
If
you're
not,
I
don't
know
why
you
would,
if
you're
in
twitch
chat
and
anyone
who
wants
to
help
out
is
welcome
to
join
on
discord
on
our
live
stream
voice
chat
and,
let's,
let's
show,
let's
show
you
guys
what
this
react.
Application
looks
like,
because
this
is
certainly
a
react
application
ignoring
some
of
this
stuff,
so
we've
got
first
of
all.
It's
next
and
next
is
sort
of
like
the
loader,
the
loader
and
like
manager
of
all
of
the
components
and
whatever
so
there's
a
bunch
of
plugins.
B
B
B
B
B
B
So
this
is
like
the
size,
I'm
sort
of
programming
for
honestly,
because
I
want
it
to
display
on
smaller
screens.
So
we've
got
these
scalar
encoders
that
that
was
the
first
one.
This
is
the
first
one
we
run
into
and
then
it's
hard-coded
to
zero
and
a
hundred
and
but
then
these
click
buttons.
These
click
things.
Oh.
D
B
B
B
B
B
So
this
was
just
working
so
first
issue
of
the
day:
why
does
a
click
thing
break
so
here's
what
it
is.
It
should
be
class
name
interactive
on
click,
animate
value
from
the
state
value
to
state
minimum,
and
this
was
totally
working
a
moment
ago.
B
B
B
C
B
B
David,
I
don't
know
what
you
want
me
to
call
you
on
the
chat.
D-Duck,
I'm
working
with
d-duck03
on
this
offline
a
little
bit
so
he's
helped
me
out
quite
a
bit
understanding
the
react
part
of
this
here's
an
interesting
thing.
I've
got
one
almost
all
these
are
synced,
it's
kind
of
hard
to
see,
but
all
of
them
these,
oh,
oh,
we're
missing
one!
B
B
B
B
That's
weird
that
has
to
do
with
it
has
to
do
with.
B
You're
going
to
take
a
look
deduct
is
going
to
take
a
look
david.
It's
definitely
something
to
do
with
how
I'm
in
creating
these
child
react
components.
So
here.
C
B
Of
them
this
is
the
first
one.
This
is
one
that's
synced
up,
so
we've
got
two
ways
to
that:
I'm
trying
to
deal
with
state
here,
we've
got
page
level
state
and
this
value
min
max
n
and
w
their
encoder
properties
right.
So
all
of
the
whole
page
is
going
to
display
encoders
encoder
diagrams,
and
these
are
going
to
be
the
global
state.
B
So
these
will
apply
to
some
of
the
diagrams
that
are
forced
to
be
updated
when
ever
the
user
or
any
of
the
other
diagrams
change
the
state,
a
set
of
diagrams,
are
going
to
get
updated,
they're
going
to
be
controlled
essentially
by
this
global
state,
but
not
all
of
them.
I
don't
want
every
diagram
to
be
tied
to
this
global
state,
so
here's
this
is
how
you
create
one
where
you
tie
it
to
the
global
state.
You
send
all
the
global
state
in
and
react
will
essentially
re-render
this
component
anytime.
B
B
So
on
update,
I'm
it's
going
to
send
me
and
I've
got
the
simple
scalar
encoder
encoded
to
get
this.
As
as
the
d3
hover
thing
happens,
it
will
call
this
on
update
and
send
the
new
value
out
and
I'm
calling
set
state
on
the
global
page
on
the
page
object.
So
react,
then,
is
supposed
to
re-render
all
of
the
other
diagrams
that
have
that
state
that
that
state
is
being
passed
in.
So
these
two
and
then
here's
the
one
that's
not
attached
to
global
state.
B
As
you
can
see,
we
send
in
specific
values
and
we're
not
tracking
them
at
all.
It
tracks
all
of
its
own
state.
We're
not.
It
doesn't
bubble
out
values,
because
it's
not
using
this
on
update
function
to
send
value
out,
but
the
rest
of
them
that
I
have
so
far
are
using
this
page
state
and
setting
the
value
at
first
glance.
Let
value
equals
this
get
value,
maybe
the
culprit
that
could
be.
That
was
the
weirdest
thing
about
it.
B
Right
so
I
have
this
get
value
function
that
so
in
order
to.
Let
me
talk
through
this,
because
and
in
order
to
enable
what
I
just
said
there,
which
was.
I
want
this
type
of
encoder.
This
is
a
class
and
an
instance
of
this
might
have
global
state
or
might
have
local
might
not.
So
in
order
to
differentiate
that
I
am
assuming.
B
Value
is
the
only
thing
that
might
be
a
global
state
and
I've
provided
a
custom
getvalue
function
that
will
either
return
a
local
value
value
or
get
the
value
from
whatever
props
it
was
sent
in.
So
it's
supposed
to
in
this
case
handle
both
conditions.
Where
I
have
my
own
state
or
the
parents
handling
my
state,
that's
what
it
should
do
and
it
does
that
at
access
time.
So
when
ever
the
value
is
needed,
it
will
make
the
decision
about
whether
to
use
my
local
state
or
a
global
state
at
access
time.
B
B
David,
you
could
help
me
walk
through
it,
so
basically
this
would
be
the
constructor,
and
that
is
essentially
the
same
code
right.
I
just.
I
took
the
magic
thing
that
reacted
and
I
put
it
into
an
explicitly
defined
constructor.
B
B
C
B
Whenever
you
get
there
just
make
sure
I
was
on
okay,
so
then
we
want
to
just
say,
get
get
that
value
and
anywhere.
Actually,
no,
no!
Let's
not
do
that.
Quite
yet,
let's,
let's
just
let's
keep
this
and
just
return
this
dot
value,
because
that's
the
only
place
I'm
using
it,
because
I
want
to
decide
what
value
I'm
using.
Let's
see
what
I
just
want
to
see
what
this
does
can't
set
property
in
coding
of
undefined.
B
B
All
right
so
here's
where
I'm
actually
updating
this.value.
So
here's
where
I'm
setting
a
member
variable
online
hover,
I'm
setting
a
member
variable
which
is
overriding
whatever
the
number
sends
in
or
whatever
the
props
sends
in
so
on,
render.
B
B
Okay,
check
discord;
okay,
thank
you!
Oh
just
remove
the
constructor
and
do
that
all
right.
Well,
you
don't
think
there's
anything
else.
I'm
gonna
need
in
there.
B
B
B
B
Link
here
I
find
visual
studio
code,
actually
pretty
good.
I've
never
used
it
before
I
started
live
streaming.
Okay,
so
that
was
a
component
did
mount
right
or
was
it
update?
Let
me
check
it
was
update.
B
B
C
D
B
I
keep
refreshing
anyway,
just
because
I
feel
like
I
need
to
refresh
all
right,
let's
get
to
where
I
can
see
two
of
them.
Okay,
that's
good!
Let's
move
to
another!
Okay,
that's
good!
If
the
top
one
is
responding
as
well,
hey
we
did
it,
we
did
it.
Okay,
let
me
know,
let
me
go
make
sure
I
understand
how
it
works,
so
this
one's
independent.
B
Now
these
are
all
attached.
These
are
all
using
global
state.
Thanks
david,
you
once
again
helped
me
out
this
one
is
oh
yeah
and
we've
also.
I
didn't
even
mention
this
yet,
but
we've
got
these.
We
can
change
all
these
parameters
pretty
easily,
but
they're,
not
the
number
scrubbable
things
that
I
wanted,
but
we
can
worry
about
that
later.
You
can
change
all
the
parameters,
you
can
change
the
mid
and
the
max
and
it
affects
all
of
them,
except
for
that
one
that
I
didn't
want
it
to
affect.
B
B
Did
I
do
what
you
were
just
suggesting
there
david?
I
I
don't
remember
what
you
were
commenting
about
at
the
time,
but
right
now
everything
is
working
the
way
I
want
it
to
work
at
the
moment
and
what
did
I?
What
have
I
changed?
Okay,
so
I
changed
that
we
fixed
the
value
thing.
Am
I
missing
anything
so
so?
There's
just
minimal
changes
to
get
that
working.
B
And
now
there's
this
style
thing.
That's
really
bothering
me,
I'm
gonna
commit
this
and
I
have
a
stand-up
meeting
in
20
minutes,
so
I
will
have
to
I'll
stay
online,
but
you'll
see
me
I'll,
be
muted,
okay,
I'm
gonna
say
what
did
I
do
aside
from
something
I
didn't
lay
out?
B
Oh
yeah,
that
just
fixed
that's
somebody
gonna
mention
that
so
so,
instead
of
basically
an
access
time
decision
about
the
value
we
have
made,
it
update
when
the
component
updates.
B
So
oh
I
can
even
just
do
this
commit
message.
State
update.
B
In
the
session,
that's
cool,
I
love
this.
I
really
love
it
like
it's
very
cool
that
you
can
do
this
sort
of
collaborative
thing.
I
think
yeah
even
have
a
chat
there.
We
are
in
the
session,
so
you
should
be
able
to
open
this
repo
in
like
highlight
code
and
there
it
is
isn't
that
cool.
This
is
the
coolest
thing.
I
love
it.
B
Okay,
do
you
have
anything
else
that
you
think
this
is
crazy?
Isn't
it?
I
never
thought
that
I
would.
When
I
started
programming,
I
never
thought
I
would
be
doing
something
like
this
like
live
coding
to
like
15
people,
while
collaborating
in
real
time
on
the
same
code
with
someone.
This
is
the
the
programming
of
the
future.
Honestly,
I
know
my
kids.
B
Does
anybody
have
kids,
I've
got
a
14
year
old
and
an
11
year
old
and
if
they're
my
14
year
old,
is
pretty
good
at
tech,
stuff
and
programming,
and
I
can
see
him
totally
collaborating
with
people
like
a
group
to
create
software.
It's
going
to
be
cool.
It's
it
already
is
cool.
It's
cool
today,
okay,
here's,
here's
the
thing:
here's
the
thing
you've
got:
1916
14
and
8.
wow.
B
B
Okay,
so
here's
a
here's,
a
problem,
let
me
show
you.
Let
me
go
on
to
my
next
problem
that
I
wouldn't
mind
figuring
out,
so
I
want
to
style
this
somewhat
decent.
I
mean
this
is
not
styled
at
all
at
the
moment.
I
think.
B
B
I
probably
don't
need
this,
because
there
is
already
css
there's
css
problems.
B
B
B
B
Oh
those
aren't
pixels
those
are
about,
but
I
mean
like
what
is
that
100
pixels
off
and
it's
the
it's
the
width
of
the
window,
you
know
so
so
I
have
to
change
like
if
I
squish
this
down
like
this,
it's
closer
so
it
so
it
has
to
do
with
like
the
location.
B
B
So
I
think
what
I
want
to
be
doing
is:
I
want
to
get
the
mouse
coordinates
properly
and
that's
for
all
of
these
hovers.
So
all
I
really
like
the
hover
here
and
the
over
here.
So
this
is
within
this.
The
diagram
d3
hover
interaction,
that
this
is
wrong.
That's
wrong
on
all
of
them
for
all
hovers.
All
this
stuff
works.
Fine!
This
stuff
works.
Fine,
it's
just
the
hovering.
B
B
B
Two
hover
handles
handlers
handle
number
line
hover,
so
whatever
we're
doing
in
both
of
these,
it's
not
working
and
it
looks
like
we're
handling
them
in
separate
ways,
but
both
of
them
are
the
same
amount
off.
B
So,
however,
we're
getting
like
this
event
or,
however,
we're
getting
the
the
page-
let's,
let's
let's
debug,
into
this
bit
and
go
right
into
the
number
line
hover
and
just
stop
right
there
and
just
see
when
we
hover
it
like
what
should
be
value:
20,
ish,
okay,
so
we're
getting
our
min
and
our
max
and
then
we're
getting
e
dot,
page
x,
minus
a
side,
gutter,
okay!
So,
first
of
all
e,
this
is,
I
think,
a
d3
event.
B
B
If
e
target
class
name
animation
value
equals
bit,
then
handle
cell
output
hover
otherwise
handles
us
number
line,
hover,
okay,
but
I'm
just
sending
the
event
in
so
this.
B
Event
right,
if,
if
I'm
using
the
on
mouse
move
bit
here
in
react,
I'm
intercepting
on
mouse
move
over
svg
with
react
yeah,
I
know
there's
something
wrong
with
that.
That
side
wait.
C
B
This
is
so
weird.
This
is
so
weird,
okay,
I
have
stand
up
and
you
know
what
this
is
great,
that
that
needs
to
match
something.
I
think,
but
it's
not,
but
this
is
more
than
10
pixels
that's.
This
is
not
the
root
of
the
problem.
This
may
be
a
symptom
of
the
problem,
but
it's
not
the
root.
I
think
the
root
has
something
to
do
with
how
I'm
getting
the
coordinate
of
the
event
that.
C
B
B
B
B
I
just
won't
be
immediately
available.
B
And
I'm
not
sure
if
there's
a
research
meeting
today,
I
have
no
idea
I've
just
stopped.
Honestly,
I
told
I
asked
jeff
I
was
like.
Can
we
just
like
have
two
research
meetings
a
week
and
then
we
know
then
I'll
know
you
know
we
can
just
put
off
whatever
you
might
do
it
one
day
to
one
of
the
other
days
that
he
just
won't
do
it.
He
will
he's
it's
gonna
be
monday,
wednesday
or
friday.
B
B
And
a
possible
research
meeting,
although
I
don't,
I
have
no
idea
anybody
has
anything
to
say
this
is
a
typical
friday
for
me.
I
will
continue
my
work
session
as
soon
as
this
is
over
so
stick
around.
If
you
want
or
come
back
in
a
little
bit
whatever
you
like.
B
C
B
B
B
All
right,
I
I
gifted
david
duck
a
subscription
because
all
the
work
that
he's
helped
with
on
this,
so
I
it's.
A
B
B
All
right
so
just
waiting
around
open
to
chat
at
the
moment.
If
anybody
wants
to
discuss
anything.
B
Oh
yeah,
so
david
you
might
have
to
set
your
tab
settings
the
same
as
mine,
I'm
using
tabs,
not
spaces,
so
that
that
may
be
like
that.
That
may
be
the
issue.
B
I've
got
I'm
using
attack
tabs
and
a
tab
size
of
two,
and
I
don't
think
the
tab
size
makes
a
difference
just
that
you're
using
tabs.
B
B
And
on
your
screen,
it
looks
lined
up
on
mine.
It
doesn't
that's.
That
is
odd.
That's
okay,
I'll
fix
it
on
mine.
A
B
B
Join
the
discord
server.
Don't
forget
you
guys
to
to
follow
the
channel
if
you're,
if
you're
enjoying
this,
if
you're
enjoying
watching
this,
I
will
I
am
about
to
attend
a
stand-up
meeting
for
work
in
a
few
minutes,
so
I
will
be
standing
up.
C
B
B
B
B
I
don't
like
to
over
ride.
Marcus
is
coming
in
now,
there's
one
other
one.
Here
you
have
to
tab
or
you
have
to
check.
I
can't
remember
which
one
it
was.
I
think
it's
under
spaces
insert
spaces,
so
uncheck
insert
spaces
and
check
and
use
tab
size,
uncheck,
detect,
indentation,
uncheck,
insert
spaces,
tab,
size,
2
and
you
want
to
use
tabs,
not
spaces.
B
B
B
B
A
stand-up
meeting
is
typical
in
like
software
industry
or
other
engineering
industries.
I
think
it
was
part
of
a
lean
part
of
the
lean
suite
of
tools
that
started
in
japan
and
I
think
the
motor
industry
in
the
late
80s
or
early
90s-
I
don't
remember,
but
the
stand-up
meeting,
is
something
that
you
do
some
some
do
every
day
some
we
do
it
three
times
a
week
monday,
wednesday
friday,
where
all
of
the
engineers-
and
this
isn't
a
huge
meeting.
This
is
like
that.
B
Have
similar
responsibilities
get
together
and
very
quickly
go
around
the
room
and
you've
got
like
less
than
a
minute
to
describe
what
you're
working
on
today,
what
you've
accomplished
or
what
you've
finished
and
if
anything
is
keeping
you
from
making
progress.
That's
about
it
and
you
just
go
around
the
room
and
it's
just
a
way
for
a
group
of
engineers
to
communicate
very
quickly
once
a
day.
So
I
know
oh
something's
helped
keeping
them
from
making
progress
and
then
usually
there's
like
an
interchange
of
oh
I'll
help.
B
B
How
do
I
close
this
side?
I
don't
really
want
that
there.
So
with
props
ref
style.
Let's
go
look
at
the
svg,
I
got
props.
I
don't
have
a
ref,
so
you
added
the
ref
this
svg
ref,
I'm
just
gonna,
try
and
see
what
you
did
here
right
create
wrap.
So
I
saw
I
looked
that
up
and
react:
that's
how
you
get
a
reference
to
the
dom
okay,
so
you're.
So
this
creates
an
spg
ref.
B
B
And
then
a
style
which
I
already
have
so
added
the
svg
ref
and
let's
see
what
else,
let's
see
what
else
is
different
here.
This
is
stuff.
I
changed,
okay,
so
this
that
might
need
to
match
the
page
margin,
I'm
going
to
come
back
to
that,
so
we
created
that
we
just
cleaned
up
the
value
here
right
so
this
bit.
B
So
this
is
what
we
were
talking
about.
This
is
the
way
we
were
getting
the
pay
this
this
line
x
is
wrong,
so
we're
getting
page
x
and
then
minus
the
bounding,
client,
rectangle.
Okay,
that
makes
sense
to
me.
B
This
is
in
a
I'm,
not
exactly
sure
what
this
e
is.
If
this,
what
the
interface
to
this
e
is-
and
I
see
what
you're
doing
here-
getting
the
bounding
rectangle,
the
svg-
that's
perfect,
I
think
that's
exactly
it,
that's
exactly
what
we
want
and
then
we
can
then
we'll
worry
about
the
side.
Gutter
thing-
and
this
is
just
doing
the
same
thing
and
that
is
putting
in
the
svg
okay.
B
B
B
If
I
make
this
zero
yeah,
so
it
slams
to
the
side.
So
that's
so
that's
still,
I
think
that's
valuable
I
do
want
to.
I
could
call
it
padding
and
then
the
top
is
you
know
this.
So
if
I
make
this
zero
they'll
all
be
squished
up
to
the
top,
the
number
line
will
be
switched
up
to
the
top,
so
that's
sort
of
for
the
number
line
top
gutter.
B
B
I
think
it's
the
right
way
to
put
it
yeah
the
side
cutter.
Well,
I
know
I
do
want
the
side
gutter
because
I
mean
I
might
want
to
change
the
style
of
this
because
it
affects
how
I
draw
the
the
diagram,
the
width
of
the
it's
just
a
little
padding.
B
The
style
of
the
svg,
no
okay,
so
here's
the
deal
look
at
this
right
here.
This
is
within
the
svg.
I,
the
gutter
is
for
the
number
line
itself
and
and
the
encoding
box
here,
so
I
have
drawings
moving
outside
of
that
range.
So
this
is
more
the
style
of
the
drawing
the
gutter
for
the
drawing
I'm
doing
in
the
svg.
B
It's
those
boundaries,
because
I
do
draw
a
little
outside
those
boundaries.
So
I
think
this
gutter
is
necessary
because
I
want
that
100
to
be
visible.
If,
if
I
don't
have
it.
B
B
So
I'm
going
to
leave
it
at
10..
This
is
great,
though
this
is
exactly
what
I
wanted.
So
I'm
going
to
commit
this
and
it
looks
a
lot
nicer
too.
If
you
take
this
off
and
you
view
it
like
a
real
website,
it
looks
a
whole
lot
nicer
now,
eventually,
we'll
probably
probably
change
the
diagram
so
that
they're
centered.
B
We
might
even
change
the
style
of
the
text
around
it
so
that
it's
more
this
shape,
because,
honestly,
this
is,
it
would
be
nice
if
you
know
when
this
is
for
later
and
and
and
the
red
blob
games
site,
he
puts
some
things
off
to
the
side,
so
this
is
a
nice
example
of
vertical
a
vertical
layout
all
the
way
down,
but
in
his
hexagons
post
he
puts
them
off
to
the
side,
which
is
nice
because
it's
all
responsive
so
as
you
squish
it
down
like
this,
isn't
that
great,
but
I
mean
the
those
graphics
that
used
to
be
off
to
the
side
are
now
in
line.
B
So
that's
ideally
what
I
would
like,
but
I'm
not
going
to
worry
about
that
right
now.
I
think
that's
something
that
we
can
go
apply
at
a
later
date,
so
right
now,
I'm
just
going
to
make
sure
the
diagrams
look
good
these
borders
around
them.
I
think
that's
a!
I
think,
that's
something
I
can
clean
up
at
this
point.
I
think
that's.
B
C
B
Or
I
mean
if
we
just
took
it
out,
it
would
just
look
like
that
and
maybe
that's
what
we
end
up
doing
and
then
you
don't
even
notice
the
padding.
Actually
that's
better.
I
like
that
better,
but
I'm
going
to
keep
the
I'm
going
to
keep
the
debug
style
red
for
now
and
just
know.
This
is
not
what
it
will
end
up.
Looking
like,
okay,
I'm
going
to
commit
this
again.
B
What
do
we
got
going
now,
so
this
fixes
our
problem
with
the
container
adding
the
bootstrap
container?
B
That's
right!
I
removed
a
bunch
of
stuff
that
isn't
going
to
bother
me
anymore.
This
was
all
a
hack
that
we
don't
have
to
bother
worry
about
anymore.
That
was
fixed
by
the
mouse
thing
that
david
just
did.
Okay,
so
in
simple
scalar
encoder.
This
is
a
simplification
and
the
rest
is
using
the
right
x
value
for
the
event
and
putting
the
svg
in
place
so
that
we
can
do
that
beautiful
all
right.
Excellent,
yes,.
B
Fix
svg
event,
sources
added
container
styling.
B
Straight
to
master,
and
then
let's
see
why
this,
why
heroku
is
not
see
why
heroku's
not
messing
up?
Oh
you
got
me
a
oh.
That
was
me.
I
added
a
bot
that
that
jumps
that
posts
into
the
discord
channel.
Whenever
I
push
whenever
anything
in
github
happens.
Essentially,
okay,
so
david
left,
he
said
he
only
had
15
minutes.
So
anyone
else
interested
in
joining
the
interactive
live
session.
There's
a
link
right
there,
and
so
I'm
going
to
continue
what
we're
going
to
do
now.
B
Is
go
on
to
the
next
encoder,
which
is
encoding
by
bit
resolution,
so
we
did
the
min
max
scalar
encoder.
That
was
this
one
min
max,
and
that's
basically
just
show
that
you
can
change
the
minimum
and
maximum
of
an
encoder
and
it
changes
the
the
properties
of
the
encoder.
It
changes
how
the
encoder
works.
B
B
All
right,
so
in
our
last
one
we
used
these
gui
diagrams,
which
I
like,
but
right
now
we're
just
using
number
inputs.
We
can
switch
the
inputs
out
later
with
another
react
input
component
based
on
dat,
gui
or
whatever,
but
for
right
now
I'm
going
to
move
along
so
we're
going
to
have
a
different
input
and
it's
going
to
affect
resolution
instead.
So
I
think
we
can
use
this
same
simple,
scalar
encoder.
B
We
just
have
to
pass
a
different
value
to
it,
we're
not
going
to
give
it
min
and
max
anymore
we're
going
to
give
it
a
resolution,
but
we'll
do
value
in
the
same
way.
So
this
one,
I
think,
is
probably
going
to
be
independent
of
the
others
yeah.
So
this
one
when
we
change
it
around,
it's
not
going
to
change
all
the
others
on
the
page.
So
it's
going
to
be
another
sort
of
independent
handling,
its
own
state
component.
B
So
we're
going
to.
I
want
to
try
and
use
the
same
simple
scalar
encoder
for
this,
but
we're
going
to
have
to
change
it
up
a
bit
to
make
it
work.
So,
let's,
let's
split
this,
we
are
going
to
go
into
encoding
numbers,
goodbye,
goodbye,
goodbye
hope.
You
guys
can
see
this
encoding
numbers
here
by
min
max.
So
our
next
one
I'm
going
to
copy
this
one
here,
because
it's
the
one
that
does
not
update
global
state
and
I'm
going
to
put
it
right
here
by
the
disk
diagram
stub.
B
B
No,
no!
No!
This
is
the
subtitle
or
whatever
figure
caption.
Oh,
that's
what
I
need
to
do.
I
need
to
make
these
figures
and
figure
captions.
Let
me
do
that
real
quick
figure,
yeah
and
then
a
fig
caption.
That's
what
I
needed.
I
always
forget
this.
This
is
html5
just
trying
to
keep
up
figure,
okay
and
then
fig
caption
and
then
so
this
all
is
going
to
be
in
the
figure.
B
C
B
Fig
fig
caption,
why
didn't
it
close
it
weird
this.
A
B
C
B
B
B
B
It
doesn't
know,
well
it
didn't
break
at
that
time.
It
doesn't
know.
C
B
It
doesn't
have
a
min
and
a
max.
So
now
we've
got
to
go
to
the
simple
scalar
encoder
since
we're
sending
at
a
resolution.
It
should
be
in
the
props.
So
whenever
we
use
min
and
max
instead
of
using
the
min
and
max,
we
can
use
the
resolution
for
the
encoder
and
here's
here.
It
is
in
the
encoder
setup.
B
Okay,
so
we're
gonna
get
min
max
resolution.
Okay,
so
we're
gonna
use
this
as
we
create
the
encoder
and
in
this
scalar
encoder.
If
we
can
get
into
it
either
one
of
these
okay,
one
of
the
options
is
resolution,
so
it
expects
either
a
resolution
or
a
min
and
a
mac.
So
if
we
give
it
a
resolution,
it's
going
to
ignore
the
min
and
the
max.
So
that's
what
we're
going
to
do,
we're
just
going
to
simply
create
the
encoder.
C
B
Nw
bounded,
so
I'm
totally
confused
here,
because
maybe
this
is
a
a
javascript
harmony
thing
or
something,
but
we
are
creating.
Oh,
I
assume
this
is
creating
these.
So
if
all
I
have
to
do
is
send
a
resolution
and
and
it'll
figure
it
out,
I
think
that's
all
I
have
to
do
so.
If
that's
the
case,
it
doesn't
just
quite
work
out
of
the
box,
it
doesn't
quite
work,
so
I'm
getting
an
error.
B
B
This
should
run
on
load,
but
it
doesn't.
I
think
this
is.
Let
me
try
and
add
a
debugger.
I've
had
to
do
this
a
lot,
and
I
don't
know
if
it's
a
react
thing
or
not
you
sent
to
strawberry
jesus.
You
sent
a
request
for
read-only
access.
B
Is
that
what
this
is
yeah?
You
joined
the
live
share
session
there.
You
are
so
if
you
ch,
if
you
highlight
any
of
this
code
in
this
repository,
it
should
show
up,
but
it
doesn't
looks
like
you're
not
actually
connected.
So
I
don't.
B
Okay,
I'm
looking
for
the
place
right
here
before
we
create
an
encoder
and
I
want
to
set
it.
I
want
to
stop
here
all
right,
so
resolution
is
undefined
for
this
one,
because
props
is
simple:
scalar
encoder
now
mounted
scalar
encoder.
We
want
the
one.
That's
resolution
output
range
by
min
max
resolution
right
by
resolution,
scalar
encoder
and
it
does
have
a
resolution
step,
create
the
encoder
we're
either
going.
Is
it
bounded?
Yes,
so
we're
going
to
go
into
bounded
scale,
encoder.
B
What's
the
back
end
for
the
hdm
implementation,
if
you
go
to
the
readme,
there
is
a
link
to
it
right
here.
It's
called
this
is
the
htm
implementation,
simple
htm.
The
only
thing
it
has
right
now
are
encoders
the
encoders
that
we're
showing
on
this
page.
This
is
the
bounded
scalar
encoder
that
was
just
inspecting.
B
So
this
is
all
in
simple
htm.
This
is
the
thing
that
I'm
thinking
about
changing
a
coffee
script
just
for
because
it's
very
english-like,
oh
good,
I
could
see
you
now.
Oh,
it
went
away
what
happened.
So
I
guess
there's
like
some
connectivity
issues
or
something
that's
weird.
I
see
that
you
have
joined
the
live
session
twice.
I
don't
see
anywhere
to
like
approve,
oh
wait.
B
B
I
think
he
might
have
write
access,
because
I
have
no
idea
why
he
had
riot
access,
but
okay
anyway,
we
are
trying
to
get
this
encoder
working.
So
that's
what
that's!
What
I'm
trying
to
work
on
and
we're
about
to
run
the
encoder
and
get
the
encoding
which
looks
like
a
decent
encoder
value,
and
this
is
the
by
resolution.
Scalar
encoder,
but
there's
something
in
the
way
the
number
line
is
rendered.
B
There's
something
wrong:
oh,
I
know
I
think
I
know
what
it
is.
It's
in
the
orient
d3
here
we're
using
the
min
and
max
we're
not
calculating
the
minute.
We
need
to
calculate
the
min
and
the
max
yeah.
It's
a
really
nice,
really
nice
collaborative
tool.
Can
you
see
highlights
on
your
screen
from
me
or
is
it
just
the
other
way
around.
B
B
Let
me
just
take
that
debugger
off
the
minimax.
Is
there
min
and
max
minimax
now
this
one
shouldn't
have
min
and
max
undefined
undefined.
So
we
need
to
get
the
resolution
here
and
how
did
I
do
this
in
the
last
one?
So,
let's
go
to
that
orient
d3
in
simple
scalar
encoder,
and
we
need
to
get
resolution
here
because
we
might
not
have
a
minimum
max
and
if
we
don't
have
a
min
and
a
max,
we
need
to
set
it.
B
B
B
B
B
B
All
right,
that's
not
actually
how
I'm
doing
it.
This
is
just
for
the
bucket
how
many
times
you've
implemented
htm
from
scratch.
I've
never
done
it
from
scratch.
This
will
be
my
first
time.
B
I've
done
I've
done
a
lot
of
encoders
and
I've
written
all
the
visualizations
from
scratch
to
attach
to
the
system.
So
that's
sort
of
how
I
learned
how
they
worked.
B
B
B
B
B
B
B
Uncode
encoder,
oh,
I
think,
set
up
value,
access,
min
and
mac,
so
we're
setting
sending
in
min
and
max
here
and
we
can
get
it
from
the
encoder.
That's
that's
how
we
can
do
it
so,
okay.
I
think
I
know
how
to
do
this.
The
encoder,
if
you
give
the
encoder
a
resolution,
it
will
set
its
own
min
and
max
so
right
here
not
here
when
we
create
the
encoder.
B
Not
here,
this
is
fine
it,
but
it's
this
it's
this
min
and
max.
We
can't
we
don't
want
to
get
this
from.
We
don't
want
to
get
this
from
our
props
anymore.
We
want
to
take
this
out.
We
don't
want
this
from
our
props.
Let's
get
this
from
whatever
is
calling
orient
d3,
and
then
we
don't
even
need
this
resolution
either.
All
we
need
is
that
so,
when
we
call
orient
d3.
B
C
B
Breaks
breaks
breaks
this
dot,
so
there's
no,
so
encoder
is
undefined
on
update
here.
B
All
right
because
we
create
the
encoder:
where
do
we
create
the
encoder
reset
encoder?
So
we
can
reset
the
coder
first
right
yeah
we
can
reset
the
encoder
first,
let's
reset
the
encoder
first
and
then.
B
Let's
just
do
this:
let's
make
this
very
explicit
for
the
time
being
and
then
we're
using
the
encoders
min
and
max,
which
should
be
the
min
and
max
the
right
min
and
max
all
right
back
to
the
top
of
the
screen.
This
is
the
first
one.
It's
working,
okay,
let's
see.
Second
one
it's
working
and
it's
bounded.
B
B
So
let's
do
that
so
so
the
tricky
bit
here
is:
do
we
want
to
make
resolution
of
global
property?
If
so,
how
does
it
affect
the
global
min
and
max
values?
B
B
B
B
B
B
B
B
C
B
This
step,
what
if
I
this
used
to
be,
let's
make
it
0.1
just
like
that,
because
that's,
I
think,
that's
what
it
was,
or
I
mean
it
was
one,
but
even
that
doesn't
work.
Okay,
so
input
type
number
step.
Let's
just
react.
Search
for
this
react.
Input
type
number
step
for
controlled
input
step
does
not
work
as
expected
unless
initialize
with
null.
C
B
B
B
B
B
B
B
If
this
this
seems
to
be
working,
if
for
any
of
the
encoders,
because
we're
just
going
to
go
to
the
encoder
for
min
and
max,
but
then
if
I
change
this,
that's
the
problem.
Oh
look
at
that.
It's
it's
the
step
changed!
Oh
it's
because
I
hard
coded
it.
Oh
yeah
I
made
it.
The
default
was
0.1,
so
it
works.
B
B
B
B
What
we're
working
on
here
is
we're
we're
working
on
a
building,
html
systems
document
interactive
document
on
how
to
build
htm
systems,
I'm
working
on
the
encoders
right
now,
I'm
trying
to
get
through
encoders
and
creating
interactive
diagrams
for
each
of
the
different
types
of
encoder
that
we
use
in
current
htm
systems
and
then
we're
going
to
move
on
to
spatial
pooling.
B
So
I'm
trying
to
get
through
encoders
right
now.
This
one
is
what
I'm
working
on
by
resolution,
because
if
you
can
either
define
a
spatial
encoder
by
using
a
min
and
max
value
or
you
can
define
it
by
using
a
resolution
and
it
will
identify
its
own
min
and
max
value,
and
that's
where
I'm
at
right
now.
B
B
B
C
B
C
A
B
B
So,
let's
see,
if
it
does,
when
we
change
the
resolution,
we
should
get
an
update.
B
B
B
B
And
that's
because
it's
a
global
state
change
and
I'm
giving
this
a
local
state,
it's
managing
its
own
local
state.
So
all
I
need
to
do
to
fix
this
is
to
manage
its
state
globally.
B
A
B
B
B
Okay,
let's
get
let's
figure
out
why
this
hover
bit
is
not
working,
so
we
should
handle
output
cell
hover
is
working,
but
handle
number
line.
Hover
is
broken,
but
it's
but
it's
here,
so
we
must
have
a
bug
here
that
won't
allow
the
number
line
to
be
rendered.
If
there's
a
resolution
in
no
min
and
max-
that's
probably
all
it
is
because
look
here
it
is
this:
is
it
we're
getting
it
from
props?
We
should
be
getting
it
from
encoders.
So
that's
easy
to
fix.
B
A
B
B
Oh
it
totally
works
too.
That's
super
cool
okay!
So
now
now
it
works
now
it
works
and
there's
there's
no
connection
between
the
two
all
right.
So
here
now
we're
handling
the
range
of
the
input
entirely.
With
a
resolution
here
and
and
with
min
and
max
here,
woohoo,
okay,
one
more
one
more
under
the
belt,
you
guys
all
right
we're
making
progress
back
to
our
cello
board.
That's
what
I
was
working
on
was
by
resolution
scalar
encoder,
let's,
let's
do
a
quick
code
review
of
that
and
see
what
we've
changed.
B
Oh,
I
can
clean
this
up.
So
I
don't
really
need
to
this
is
all
internal
in
in
orient.
I
don't
need
to
send
min
and
max.
A
B
B
B
B
This
is
just
cleaning
up
number
type,
so
I
can
read
it
and
see
exactly
what
we're
setting
in
there
and
using
the
step
as
in
property,
adding
resolution
as
page
state,
adding
a
new
number
value
parameter
for
resolution,
adding
figures
and
captions
and
adding
the
new
resolution
scalar
encoder,
that's
it!
Oh!
This
is
great
all
right.
B
Okay
added
the
code
by
resolution.
B
B
B
B
I've
already
done
this
stuff,
so
I'll,
take
a
10
minute
break
or
so
and
then
come
back
and
we'll
work
on
the
next
one.
The
next
one
might
be
a
little
harder.
The
next
one
is
a
cyclic
encoder,
and
this
is
different.
If
you
look
at
this
this
one,
this
is
a
little
bit
different,
so
this
could
be
interesting.
B
We
can
also
change
w.
I
don't
have
it
configured,
so
you
can
change
n,
but
you
can
you
know
mouse
over
this
value
and
transform
this
from
a
line
to
a
circle,
and
I
this
is
reminiscent
of
the
hexagons
trans
transformation
here
if
we
go
from
pointy
to
flat
top
it's
so
similar.
To
that,
that's
that's
what
I'm
going
for
where'd
it
go!
B
A
B
So
I
do
want
to
show
this
is
this
is
interesting.
This
is
about
categories,
and
this
this
value
should
be.
There
really
should
be
some
type
of
number
line
associated
with
this.
Probably-
and
this
is
also
about
overlaps-
you
know,
values
and
how
they,
how
how
changing
nw
will
make
some
values
seem
similar
to
other
values.
B
B
It
seems
a
little
bit
nicer
if
I
could
just
like
if
this
was
centered
here
and
I
just
grab
it
and
move
it
like
over
there,
but
we'll
see,
but
the
next
one
is
going
to
be
this
cyclic,
scaler
encoder,
oh
boy,
so
we're
gonna,
look
at
this
code
for
the
cyclic
scalar
encoder,
let's,
let's
close
all
and
look
at
this
old
ugly
code,
I
say
I
say
old,
like
it's
years
old,
it's
like
months
old
there's
I
worked
on
this.
Maybe
last
year
here's
the
cyclic
encoder
all
right.
B
Is
gonna
be
another
diagram
like
a
new
diagram?
Not
it's
either
going
to
extend
the
same
base.
So
maybe
maybe
this
is
where
we
end
up
having
to
introduce
a
base
class
that
does
some
of
the
d3
stuff,
because
I
know
there's
certain.
There's
certain,
like
these
linear
scales,
that
I
set
up.
It's
something
that
I'm
commonly
gonna
do,
and
I
realize
also
that.
B
So
I'm
wondering
the
best
way
to
do
this.
I
certainly
want
a
component
here
that
is
a
cyclic
scalar
encoder,
and
I
want
to
reuse
as
much
code
as
I
can.
But
I
don't
think
this.
This
diagram
has
anything
aside
from
the
number
line,
that's
very
similar,
and
I
and
I'm
okay
having
a
bit
of
repeated
code
between
the
diagrams
for
something
as
simple
as
like
a
number
line.
I
don't
necessarily
think
I
have
to
abstract
away
a
number
line.
B
B
B
Cyclix
scalar
cyclic
scalar,
we'll
call
it
that
and
and
then
we'll
create
a
new
file
here
and
call
it
cyclic,
scalar,
encoder
jsx
and
just
I'm
just
going
to
copy
and
paste
in
it
initially.
I
know
I'm
going
to
need
this.
I
know
I'm
gonna
need
that.
I
know
I'm
gonna
need.
B
B
B
B
We'll
see
this
may
be
displayed
at
input
bit
range.
I
I'm
not
sure
if
this
is
correct,
I'm
going
to
take
this
out
for
now,
but
I
know,
or
this
or
this
that's
probably
not
going
to
apply
but
the
value.
This
is
a
scale
that
gives
us
the
number
line
hover.
I
think,
we'll
see
reset
encoder.
There
will
be
no
resolution.
B
B
Okay,
so
I'm
going
to
just
comment
that
out
for
now,
I'm
just
going
to
make
space
for
it
get
range
from
bit
index.
I
don't
need
that
yet
either
handle
output
cell
hover.
I
don't
need
to
do
that
yet
either
and
handle
number
line
hover
render
okay.
So
all
this
stuff
is
going
to
be
different,
so
all
the
markup
anyway,
so
the
cyclic
encoder
markup
looks
like
this
and
I'm
not
gonna
use
the
dat
gui,
probably.
B
B
B
All
right,
david,
here's
the
I
created
a
new
diagram,
and
now
I
was
working
on
so
I
got
this
by
resolution
diagram
working,
which
I'm
pretty
happy
with
it's.
It
keeps
its
own
state
value
state,
but
it
gets
its
resolution
from
global
resolution
and
it's
the
only
diagram
that
does
that.
So
it's
got
sort
of
this
global
interaction
with
global
state.
B
B
B
So
that's,
and
so
the
idea
is
to
explain
how
basically
a
cyclic
or
periodic
encoder
is
just
simply
a
scalar
encoder
that
you've
turned
and
end
from
the
beginning,
and
so
I
like
this
idea
of
like
scrolling
back
and
forth
in
between
them.
So
it
makes
it
extremely
obvious
why
cyclic
encoding
is
the
same
as
scalar
encoding
and
also
we'll
do
the
same
thing
with
category
encodings
in
the
next
section,
but.
B
Out
this
bit
and
how
to,
and
so
this
we're
going
to
create
a
new
we're,
creating
a
new
encoder
called
the
cyclic
scalar
encoder
and
as
we
go
along,
I'm
going
to
decide
if
and
if
or
when
we
need
to
pull
out
an
abstract
class
that
handles
some
of
the
d3
maintenance.
Perhaps
we'll
see.
B
I'm
not
sure
if
that's
going
to
be
necessary
or
not
we're
going
to
find
out
okay,
so
nothing
is
happening
at
the
moment
and
I
have
created
a
right,
I'm
on
a
branch
for
this.
I've
created
the
cyclic
encoder
class,
but
I
haven't
actually
started
using
it
anywhere.
B
B
Should
have
a
min,
let's
do
just
min
max
like
we
have
been
doing?
Actually,
I'm
hesit.
I
wonder
if,
let's
let's
do
it
like
we've
been
doing
the
others,
let's
give
it
this
global
state
and
see,
and
and
hopefully
it
can
fit
in
that
paradigm,
because
that
would
be
cool
to
show
that
it's
just
like
all
the
other
encoders.
B
I'm,
not
sure
how
that's
going
to
affect
the
display,
because
this
yeah
this
might
not
work
very
well,
like
I
might
hard
code
in
to
be
something
small
and
and
w
to
start
off
it
we
may,
we
may
have
it
keep
its
own.
I
really
like
the
way
we
set
this
up,
so
I
can
have
some
some
of
these
diagrams
hold
their
own
state
and
and
but
value
always
gets
emitted
out
and
any
one
of
these
I
could,
I
could
have
it
update
any
global
state
in
this
on
update
functions.
It's
nice!
I
like
this.
B
B
That's
fine
yeah,
so
everything
else
will
change
with
it.
Okay,
so
so,
let's
configure
this
much
like
we've
done,
the
others
figure
fig
caption.
B
Okay,
now
I
don't
expect
this
to
display
properly.
It's
broke,
something
obviously
simple:
scalar
encoder
is
not
defined.
B
B
B
C
C
C
B
We're
getting
closer
reset
encoder.
B
Isn't
it
yeah,
because
I
gotta
do
like
this
right-
is
that.
A
D
B
B
B
B
B
B
B
B
C
B
None
of
those
class
methods
are
bound
to
this.
That's
why
you
did
the.
How
does
it
work,
then?
If
none
of
those
class
methods
are
bound
to
this?
How
does
because?
Because
I
saw
you
using
the
arrow
functions
and
I
took
them
out-
and
it
still
worked
like
this
component-
did
mount
orient
3d
I'm
using
this,
and
this
seems
to
be
the
right
thing.
A
C
B
Is
that
what
I
heard
you
say,
yeah,
that's
right,
but
do
I
have
to
do
that
to
all
of
these
class
properties,
because
I
don't
understand
this
does
seem
to
work.
B
The
react
overrides.
Oh
these,
not
the
overrides,
but
any
any
of
the
functions
that
I
have
like
render
value
marker
like
I'm,
I'm
calling
it
with
this
dot
as
if
it
were
a
member
function
and
I'm
using
this
within
it.
Just
like
it
were
a.
I
was
within
the
member
function,
scope
and
it
works
fine.
So
do
I
really
need
to
do
anything.
The
event
handlers
will
have
an
issue.
B
I
haven't
even
put
in
the
event
handlers
in
here
yet,
but
in
the
other
one
they
didn't
have
an
issue,
and
my
let's
see
I
want
to
understand
this.
Handle
line
number
hover.
B
This
is
being
called
right,
and
this
is
how
it's
being
added
and
I'm
not
binding.
I
see
what
you're
saying
so
this
this
should
be
bound,
but
it's
not,
but
but
this
is
working
all
these
this
is
are
working
only
when
coming
from
another.
This
method,
so
is
it
best
practice
just
to
do
this
all
the
time
just
to
to
to
basically
make
all
your
functions
like?
That?
Is
that
why
you
did
it
something
wonky's
going
on.
B
B
B
B
B
B
B
Oh,
I
thought
that
was
a
siren
outside
it
was
the
music,
so
the
so
there's
one
problem.
I
know
already
you
like
it
looks
cool.
Okay,
that's
that's
great!
We'll
keep.
B
Right,
it's
so
the
the
markup's
wrong
markup's,
unexpected
there
used
to
be
two
svgs
in
here
and
now
there's
only
one
and
we're
gonna
have
a
mouse
move
over
the
whole
thing,
so
we've
got
here's
the
value
for
the
number
line,
and
this
is
for
the
output
bits
and
the
these.
This
text
is
part
of
the
label
that
that
only
is
around
when
it's
expanded
into
a
circle.
B
So
now,
let's
see
how
we're
binding
to
this,
this
is
so
in
component
did
mount
for
getting
the
root
like
we
do
in
all
the
other
ones.
We
apply
that
and
we
call
updates
except
coder,
let's
see
where
else
we're
doing
root.
So
then
we
render
number
lines
select
number
line.
So
there's
our
first
thing
select
number
line.
Let's,
let's
look
at
our
other
encoder,
it's
markup
had
something
called
a
number
line.
So
let's
use
the
same
thing
we
might
as
well.
You
do
it
the
same
way.
B
So
cyclic
one:
let's
look
at
your
markup
and
see
how
close
we
can
get
this.
So
it's
just
says:
class
name
value
and
I
don't
even
see
one
that
says
number
line.
So
let's
add
a
number
line
here
and
then
we
have
value
marker.
So
we
might.
A
B
C
B
Of
your
folks
come
on
in
we
we're
working
on
some
visualizations
of
htm
encoders
and
the
encoder
I'm
working
on
right
now.
Is
this
one
and
the
tricky
bit
here?
Is
you
can
change
it
into
a
circle
and
it
animates?
So
you
can
see
how
a
scalar
encoder
and
a
periodic
or
cyclic
encoder
are
essentially
the
same
thing.
It's
just
that
the
the
value
rolls
over
the
end
and
comes
on
the
other
side.
B
So
I'm
going
to
be
able
to
visualize
this
in
two
ways,
one
using
the
line
and
and
swap
back
and
forth
using
the
circle.
So
I
imagine
this
being
a
toggle
like
this
is
a
toggle
pointy,
topped
flat
top.
So
I'm
going
to
I'm
going
to
put
these
little
like
button,
looking
things
in
in
the
markup,
so
you
can
swap
between
them
each
one
of
these
has
got
this
too,
and
I
like
that.
I
don't
so
each
if
there
are
other
diagrams
that
have
this
state.
B
They
could
each
set
it
as
well,
just
like
we're
doing
in
other
places
like
we're
setting
the
value
in
other
places.
So
this
is
the
one
we're
going
past.
We've
already
done
one
two
yeah,
we
finished
two
encoders
today.
I
think-
and
this
is
the
third
one-
this
is
the
complicated
one
because
we
had
to
create
a
new
class,
so
I've
got
and
and
by
the
way
for
those
of
you
who
are
new
here-
is
the
repository.
A
B
All
right,
and
so
we're
looking
right
now
at
a
simple
scalar
encoder,
which
is
the
the
class
that
is
running
this
and
this
these
this
and
this.
These
are
all
simple:
scalar,
encoder,
diagrams
and
they're
all
react
components,
running
d3
and
interacting
I'm
interacting
with
them
with
d3,
and
these
are
react,
components
that
are
setting
global
state
and
all
of
these
all
of
these
diagrams
are
then
up
updating
in
real
time.
D
B
B
So
I
expected
this
to
happen.
This
is
all
this
stuff
is
half
broke
anyway,
so
anything
I
do
is
probably
going
to
trigger
this
or
not
or
not.
I
don't
know,
resolution
render
number
line
so
the.
C
B
B
Okay,
so
that
that
makes
sense,
then
it's
being
re-rendered,
because
I
updated
a
value
over
here,
and
so
it
does
have
this
scale.
It
does
have
that,
but
top
gutter
is
40s,
but
it
doesn't
what's
breaking
okay,
let's
step
over
that,
that
was
fine.
A
B
It's
sort
of
just
a
property
of
the
encoder,
so
that
should
pop
out
now
yeah,
that's
good.
I
can
turn
on
the
break
on
exception
button.
C
B
B
B
We're
just
not
drawing
any
of
the
other
things,
so
there's
no
exceptions
happening
at
all.
At
this
point,
let's
see
if
we
change
the
resolution,
everything
should
work:
everything's,
fine,
beautiful,
okay,
so.
C
B
B
A
He's
okay.
B
You're
still
working
lurking,
while
you
work,
I
do
that
too.
Sometimes,
looking
lurking
while
you
work
okay.
So,
let's
get
back
to
you
know
what
I'm
gonna
take
a
quick
break
because
I
need
a
break.
I
need
a
break.
I'm
gonna
put
on.
I'm
gonna
leave
the
music
on
for
you
guys.
B
A
B
We
coding
numbers,
oh,
I
need
to
get
rid
of
you.
I
got
my
screen
split,
adding
the
cyclic
encoder
here
and
then
adding
the
cyclic
code.
That
looks
good
and
then
we've
got
the
whole
cyclic
encoder,
we've
added,
but
a
lot
of
stuff
we're
not
using
quite
yet,
but
a
lot
of
this
and
and
we'll
and
like
I
said,
we'll
decide
if
and
when
have
a
drink.
I
need
a
dr.
All
I
have
is
coffee.
B
B
Oh,
you
mean
down,
you
mean
actually
in
the
this
bit
this
right,
that's
why
this
is
bound.
C
B
B
But
it's
fi,
it
makes
sense
to
have
it
as
a
property.
On
disk
I
mean
I'm
calling
I'm
using
this
like
everywhere
in
here.
Oh,
I
see
what
you're
saying
you
mean.
Oh.
C
That's
why
yeah
yeah.
B
D
B
And
we
will
do
the
same
thing
pretty
much
in
the
cyclic
encoder
class
too
yeah,
because
there
will
be
a
number
line
hover
and
an
output
cell
hover
and
we'll
decide
all
right.
Okay.
So
I'm
happy
with
these
changes.
So
far
we
don't
have
the
full
output
encoding
of
the
cyclic
encoder,
but
I'm
gonna,
I'm
gonna
commit
them
anyway.
B
B
B
C
C
B
Plain
javascript
all
right,
I'll
I'll
I'll
read
through
that
in
a
bit
for
right
now,
everything's
up
to
date,
we
close
some
of
this
stuff
and
back
to
we'll
we'll
come
back
to
the
cyclic
scalar
encoder
here
and
actually
rendering
these
output
cells,
which
won't
be
cells,
they'll,
be
circles
all
right,
yeah.
B
All
right,
so,
let's
go
back
to
I'm
just
like
I
said,
I'm
going
to
take
a
break.
I
want
to
take
a
break.
You
guys
talk
amongst
yourselves
and
when
we're
back
we'll
do
we'll
do
some
circles
and
it'll
be
great.
B
D
D
D
D
B
B
E
E
E
E
E
E
E
B
E
B
I
did
that
at
home.
Okay,
back
to
the
sirens
of
watsonville
hold
on
sorry
about
that.
I
gotta
hear
it.
You
gotta
hear
it
too.
I
put
my
headphones
on,
though,.
B
C
B
This
is
my
view
out
of
my
office
window
here
and
there's
a
bunch
of
school
children
and
the
fire
truck
is
out
there.
You
guys
see
that
so
the
fire
truck,
just
usually
the
fire
trucks,
just
come
out
and
just
sirens
wailing
and
do
whatever,
but
apparently
they're
here
with
a
group
of
school
kids.
So
maybe
they're
gonna
do
some
demonstration.
B
B
B
B
C
B
B
Back
to
work
work,
this
is
what
we're
doing
right
work,
not
dangling
the
camera
out.
The
window
michael
says
no
reason
to
leave
the
house
today.
Yeah
you
could
go.
You
know
I
was
watching
somebody
yesterday
on
just
chatting
on
twitch
and
they're
just
in
bangkok,
and
it's
like
pouring
down
rain
and
it's
the
middle
of
the
night
and
they're
just
talking
about
all
the
places
you
shouldn't
go
in
bangkok.
B
It
was
amazing.
It
was
really
interesting
because
it's
just
like
you
get.
This
live
perspective
of
somebody
on
the
other
side
of
the
planet,
who's
just
going
through
their
day,
and
you
get
to
see
like
in
real
life,
exactly
what's
happening
to
them
right
now.
I
think
that's
so
cool,
no
edits,
no
sensors,
nothing!
Just
here's!
What's
going
on
right!
Now
to
this
one
guy
in
bangkok,
it
was
very
cool.
B
I
like
twitch,
like
that
my
office
is
not
nearly
as
exciting
as
that
guy's
trip
to
bangkok,
okay,
so
the
problem,
the
problem
that
we
were
having
before
I
was
my
attention
was
dragged
somewhere
else-
is
that
this
cyclic
skater
encoder's
markup
has
is
changed
because
I
changed
it.
There
used
to
be
two
spg's
in
here,
and
I
don't
know
why,
so
I
need
to
go.
B
B
B
My
kids
are
cyberpunks
okay,
so
there
used
to
be
two
svgs
here,
but
what
we
want
is
one
svg
and
we're
going
to
do
our
whole
d3
diagram
in
this
svg.
We're
going
to
have
one
group
for
a
number
line,
one
group
for
a
value
marker,
it's
better
to
have
more
groups
when
you're
doing
d3,
because
you
can
control
each
group
independently.
It's
like
an
animation
group,
so
you
can
translate
them
and
transpose
them
independently.
B
B
B
And
we're
going
to
do
this
completely
different,
so
this
is
the
way
we
did
it
in
the
last
one
when
we
were
doing
rectangles
we're
going
to
do
this
completely
different,
we're
not
going
to
use
rectangles
anymore,
we're
going
to
use
circles,
I'm
thinking
about
rethinking
this
one.
One
way
to
do
this
is
I
could
go
look
at
my
old
code,
which
has
which
has
the
cyclic
scalar
thing,
and
it
has
this
logic
that
takes
things
into
things
in
a
line
and
and
translates
them
into
things
in
a
circle.
B
So
we'll
probably
steal
that,
because
that's
really
the
only
tricky
bit
there,
but
for
right
now,
let's
just
draw
them
as
circles
and
once
we
draw
them
as
circles
and
we
give
they'll
each
like
have
a
state
and
they'll
each
know
their
x
and
y
and
they'll
be
tied
to
some
data
right.
Well,
that's
how
that's
how
d3
works!
You
create
the
data
and
then
you
like
for
each
data
point
you
can
render
something.
B
So
that's
that's
what
we're
going
to
do
so
in
this
case.
B
Here's
here's
what
we're
doing
we're,
selecting
all
rectangles,
which
they
don't
even
exist
yet
and
we're
we're
saying
in
the
d3
world
that
we're
it
actually,
we've
created
this
g
we've
gone
to
d3
and
we've
gotten
access
to
this.
This
group
called
output
cells,
and
this
is
going
to
work.
Fine.
We
could
totally.
B
B
B
So
here's
the
g?
This
is
good.
This
is
what
we
want.
We
want
to
get
the
the
div.
How
long
do
you
think
it
would
take
to
get
the
point
where
you
start
implementing
spatial
cooler?
I
would
really
like
to
see.
I
don't
know
I
mean
I
could
skip
ahead
and
we
could
start
doing
it
in
a
couple
weeks,
but
I
don't
want
to
skip
ahead.
C
B
B
I
want
to
get
through
well
I'll,
tell
you
what
I
want
to
get
through
it's
this
bit
time
encoding.
I
want
to
finish
this.
B
C
B
B
Okay,
so
they're
they're,
all
going
to
be
cyclic.
Encoder
displays
like
similar
to
what
we're
going
to
work
on
today.
I
do
want
to
have
a
bunch
of
circles.
You
know
the
basically
a
scalar
coder
in
a
circle
and
then
we're
good.
This
is
going
to
be
the
combined
encoding
right
here.
So
it's
going
to
display.
B
B
B
B
B
So
there's
a
little
bit
of
stuff
that
I
wanted
to
finish
up
here.
There's
one
more
encode,
one
more
thing:
continuous
encoding
of
the
seasonal
cycle
and
then
the
combined
encodings
and
then
we're
going
to
go
to
spatial
pooling.
B
Visualizations
for
the
input
space
already
created,
so
we're
going
to
translate
these
and
then
basically
we'll
be
talking
about
spatial
pulling
at
this
point.
There's
also
one
more
visualization
here
that
I
really
like,
but
I
think
it
needs
to
be
tweaked
a
little
bit
and
I
think
we
can
make
it
super
nice
if,
once
we
translate
it
into
a
react
component,
but
this
shows
this
is
very
very
about
this-
is
all
about
the
spatial
puller.
B
It's
about
its
initial
connectivity
to
an
input
space
and
how
you
can
set
up
its
connectivity
in
different
ways
so
that
it's
primed
to
learn
right
away
or
not
so
that'll
be
the
first
spatial
pool
or
really
illustration,
revision,
diagram
and
then,
and
the
next
ones
are
going
to
be
a
lot
more
detailed
than
that
they're
going
to
be
like
okay,
we'll
do
one
about
potential
pools.
B
That's
all
about
spatial
pooling,
so
there'll
be
interactive.
Spatial
puller
things
and
all
this
stuff
is
going
to
have
running
data
in
the
background.
So
that's
when
we
get
to
the
spatial
pooler
section,
we're
actually
going
to
have
this
this
thing
streaming
constantly
and
it
will
be
like
a
data
source
for
the
page
and
then
all
the
spatial
pooler,
all
of
the
continuing
diagrams
are
going
to
be
triggered
from
that
state.
Changing
and
they're
going
to
all
update.
B
And
so
then,
this
is
the
one
I
was
talking
about,
the
initial
permanences
that
we've
already
got
partially
done,
but
I'm
going
to
re-design
it
a
little
bit
and
then
we're
going
to
talk
about
mini
column
competition.
So
this
is
the
big
visualization,
and
this
is
where
we
really
have
to
have
spatial
cooling
running.
So
now
you
have
to
have
a
spatial
puller
so
we'll
to
get
this
to
do.
B
B
And
then
there's
more,
I
planned
on
more
and
we'll
talk
about
the
different
thresholds
and
we'll
allow
people
to
change
all
these
things
sort
of
live
and
see
how
it
potentially
affects
a
learning
system.
That's
running,
maybe
in
their
client,
something
like
that
and
this
this
data,
I
think
I'm
just
going
to
make
pseudo-random
I'm
going
to
automatically
generate
it
so
that
it
has
a
discernible
pattern.
Much
like
I'm.
B
Basically,
auto
generate
hot
gym
data
and
just
step
it
through
time
and,
like
the
weekends,
have
a
slightly
different
pattern
on
the
weekdays
but
add
a
bit
of
randomness
to
it.
So
wait.
So,
did
you
decide
if
you're
going
to
do
the
actual
sdr
algorithms
on
the
client
or
server?
I
haven't?
I,
I
don't
see
this.
B
The
only
reason
I
would
want
to
do
it
on
the
server
is,
if
I
wanted
to
have
one
state
for
everyone
like
if,
if
the
clients
were
allowed
to
like
rejigger
the
settings
on
their
run
on
their
htm,
so
it
just
didn't,
make
any
sense
and
the
examples
didn't
explain
what
they're
supposed
to
explain.
B
You
know
what
I
mean.
So
there
may
be
some
examples
where
they
have
to
have
a
solid
trained
htm
to
really
show
what
we're
trying
to
explain,
and
so
I'm
thinking
it
might
be
both
we
might
have
an
htm
running
on
the
server
that
is
sort
of
just
a
data
source
for
clients
and
as
clients
load
pages.
They
just
get
data
to
that's
what
some
of
the
visualizations
are
displaying,
there's
kind
of
polling
for
the
last
batch
of
data,
or
something
like
that.
B
I
don't
know
so,
I'm
not
certain,
I'm
not
certain
what
I'm
going
to
do,
but
this
is
what
it's
going
to
be
like
constantly.
The
page
is
just
constantly
updating
and.
B
That's
the
plan
so,
but
right
now
we're
gonna
draw
some
circles,
as
promised.
We're
gonna
draw
some
circles:
okay,.
B
Drawing
circles
is
just
as
easy
as
drawing
rectangles
as
d3,
so
we're
going
to
get
the
group
and
we
can
use
the
same.
Let's
use
the
same
width
height.
Actually,
all
we
need
is
one
or
the
other,
I'm
not
sure
which
one
we'll
use
we'll
try
both
I'll
try
a
static
one
and
and
then
the
bits
to
output
display.
What
exactly
is
that
bits
to
output
display?
This
is
a
scale.
It's
a
linear
scale.
B
And
that
is
yeah,
and
so
it's
going
to
arrange
them
all.
This
is
what
arranges
all
of
the
bits
in
the
horizontal
dimension
from
zero
to
the
number
of
bits,
including
the
gutters.
B
So
so
we
do
need
that.
So
we're
going
to
use
that
bits
to
output
display,
that's
a
that's
a
linear
scale,
and
then
we
have
this
function
that
we
create,
and
it's
going
to
be,
what
updates
the
circles
right
now,
I'm
calling
it
treat
cell
rectangles,
I'm
just
going
to
call
it
treat
cell
cells,
I
might
as
well
call
it
treat
cells
and
and
instead
of
r,
let's
just
let's
call
it
cell.
B
So
we're
going
to
call
it
a
bit.
That's
fine!
But
it's
not
going
to
be
we're
not
giving
it
rectangles.
So
this
x,
it's
not
x
anymore.
I
think
it's
called
cx
that's
going
to
decide
where
it's
at
and
see
why
and
then
I
think,
there's
a
radius
that
we
need
to
add.
There
might
be
a
default
radius,
not
a
not
a
width
and
a
height,
but
I
think
it's
a
radius.
B
B
D3,
I'm
not
going
to
show
you
so
bits
to
out.
So
what
we're
doing
here
actually.
B
B
Okay,
so
we
should
be
able
to
call
treat
cells
and
send
it
a
group
of
svg
elements
like
this.
This
is
exactly
what
we're
gonna
do
and
but
we're
not
creating
rectangles
we're
creating
circles
and
we're
gonna,
we're
gonna,
say,
select
all
circles
circle
which
there
are
no,
and
this
is
the
update
function.
So
as
soon
as
we
send
data,
we
get
a
representation
of
something
that
hasn't
been
created.
Yet,
but
it's
tied
to
this
data
and
we're
telling
it.
B
Right
here
we're
going
to
essentially
treat
the
circle
construct
the
circles
for
each
one
of
these
circles.
This
is
what
you
do
when
it's
created,
and
these
are
all
just
created,
and
this
is
how
we're
going
to
treat
them
treat
them.
I
don't
know
a
better
word
style,
something,
but
it's
not
just
styling.
It's
a
you
can
do
all
kinds
of
things.
B
This
circle's
object
is,
is
not
just
it's
more
than
just
that.
You
can
call
enter
on
it,
which
will
give
you
a
function
where
you
can
take
actions.
So
when
there's
new
data
enters
the
pool
of
data
that
this,
this
sort
of
v3
object
is
monitoring
here's
what
here's,
how
you
can
interact
with
them.
So
basically,
if
there's
any
new
circles
that
pop
in
because
new
data
arrives,
we're
going
to
treat
them
the
same
way.
B
And
then
exit
which
is
simple,
we
just
if
any
data
exits
they
will
be
removed,
and
this
is
just
like
removing
them
from
the
dom.
So
these
are
like
the
dom
operations
that
we're
going
to
operate
on
each
one
of
these
data
points
circles
representing
a
data
point,
let's
see
if
it
worked,
I
broke
something:
what
broke
that's
kind
of
weird
air
hold
on.
B
B
A
B
B
C
D
B
Certainly
like
this,
I
certainly
like
this,
and
this
is
just
a
javascript
thing
I
didn't
even
know
about.
It's
got
props,
that's
awesome!
I
love
that
that's
great,
but
they
call
it
object.
Decomposition,
that's
super
handy
output,
cells.
Top
margin
is
not
defined,
probably
not
yeah.
I
don't
know
that's
one
of
them.
I
commented
out.
I
think.
B
B
B
I
didn't
realize
that
I
was.
I
commented
this
out
and
I
said:
oh,
I
love
doing
this
yeah.
I
wrote
the
exact
same
thing
under
it.
While
commenting
how
awesome
object
deconstruction
was
so
I
don't
trust
this
cell
width,
so
I'm
going
to
use
cell
height
because
I
want
to
see
if
that
changes.
B
B
B
B
B
A
B
B
B
B
B
B
I
thought
that
you're
not
useless.
You
boost
my
morale.
We're
gonna,
give
this
some
type
of
state
global
state,
maybe
global
state
page.
D
B
B
Let's,
let's
pretend
for
now
that
this
svg's
big
is
bigger
than
the
500,
because
I
yeah
I'm
not
going
to
use
this
at
all.
B
That
later,
let's
I'll
save
it,
where
are
we
doing
the
diagram
diagram
with
there?
It
is
we're
doing
we're
adding
width
here,
so
so
we
could,
with
this
is
a
cyclic
encoder.
We
could
hard
code
height
to
be
the
same
as
the
width
just
for
now.
B
B
Okay,
strawberry
left
to
share
by
the
way,
I'm
still
I'm
still
happy
to
share
my
code.
If
anybody
wants
to
join
in,
I
can
have
a
look.
Oh
I
have
oh,
I
don't
know
what
that
means.
I
know
what
it
means.
I
don't
know
why.
I
didn't
see
it
earlier.
This
notifications
thing
doesn't
make
a
sound
just
it
just
silently
says.
D
B
Okay
right
so
now
I'm
gonna
go
look
in
the
cyclic
encoder
code
and
I
know
I'm
sure,
there's
a
function
in
here.
B
B
C
A
B
A
B
C
B
B
C
B
Let's
find
out
where
the
magic
is
in
this
thing,
because
this
thing
so
okay,
so
I
know
the
radius
is
a
part
of
it.
The
radius
is
the
it's
the
radius
of
the
big
circle.
I
think.
B
C
A
B
B
B
B
And
so
again,
I'm
doing
this
sort
of
count
out
of
how
many
cuts
do
we
want
to
make
to
do
this
animation
and
changing.
So
if
we're,
if
we're
out
of
the
loop,
essentially
we've
reached
the
state
we're
going
to
we
clear
the
animation
handle
and
we
delete
any
transition
state
we
might
be
in
apparently
otherwise
we
just
update
the
display,
so
there
must
be
stuff
happening
in
in
the
background,
so
that
update
display
knows
what's
what
state
it's
in.
Obviously,
here
we
go.
B
We
got
another
one
of
these
switch
statements,
it's
not
a
switch,
but
it's
a
switch.
An
update
display
the
same
way
as
we
had
and
get
a
small
circle
radius
to
decide
how
what
we're
going
to
do.
B
All
right,
so
now
it's
just
now,
it's
just
time
to
think
about.
Is
this
the
way
that
I
want
to
keep
doing
it
or
is
there
a
way
to
simplify
it,
and
it
would
be
nice
if
we
didn't
have
this
this
essentially,
what
is
a
switch
statement
in
two
places,
one
to
get
the
small
circle
radius?
B
B
Yeah,
because
we
need
it
to
treat
the
circles
and
oh
right,
okay,
so
this
our
scale,
our
linear
scale,
is
dependent.
C
B
B
B
B
B
Okay,
so
I'm
not
gonna
do
that
at
the
at
this
time,
I'm
not
going
to
worry
about
the
height.
This
is
something
maybe
we'll
try
and
do
later
adjusting
the
whole
svg
we'll
just
use
the
one
svg.
I
don't,
there's
no
reason
to
have
two.
I
don't
know
why
I
had
two.
B
B
B
B
It's
nothing
you're
gonna
find.
Nobody
else
is
gonna
know
what
it
is.
It's
a
it's
an
observable
data
store.
I
wrote
about
10
years
ago.
B
I'm
not
using
it
anymore,
that's
one
of
the
reasons
we're
doing
this
is
to
get
rid
of
it.
It's
a
really.
I
don't
want
to
get
into
it.
I
I
used
it
for
everything
for
a
long
time
and
it
doesn't
it's
very
flexible
and
powerful,
but
I
didn't
document
it
that
well
I'll
I'll
show
you,
I
think,
javascript
data
store,
I'm
sure
it's
on
my
github
yeah.
B
It's
super
old,
I
don't
know
what
immutable
js
is,
but
the
thing
that
this,
let
you
do
that
I
really
wanted
to
do
at
the
time-
was
I
wanted
to
use
it
as
sort
of
an
ajax
buffer.
I
wanted
to
have
a
data
store,
an
observable
data
store
in
between
the
client
and
the
server
running
on
the
client,
and
I
wanted
to
hook
up
in
the
http
communication
system.
B
I
wanted
to
use
this
as
a
buffer
and
keep
all
the
state
there,
and
every
time
you
went
to
the
server
to
get
anything
to
update
this
with
the
state
and
what
it
would
and
it's
like
a
tree
structure
and
you
can
observe
any
node
in
the
tree.
So
also
anything
that
was
listening
to
this
data
store
would
know
that
the
server
was
updating
it
continuously
and
all
it
had
to
do
was
listen
to
certain
paths
like
xpath.
B
You
know
if
you
know
what
xpath
is
like
this:
you
can
set,
so
the
clients
could
set
data
in
it
using
sort
of
an
x
pathway
or
get
data,
or
they
could
also
say
after
set
give
run
this
function
so
that
I
can
update
my
stuff.
So
it
was
an
observable
data
store
essentially-
and
I
worked
on
this
just
in
my
free
time-
at
yahoo
for
a
while-
because
I
was
bored
and
yahoo
was
didn't-
that's
a
beautiful
jazz,
yeah.
C
B
Whatever
I
don't
know
when
it
was
done,
but
this
was
probably
almost
10
years
ago
that
I
did
this
so
I
was
using
it
even
here
just
just-
and
I
was
using
it
so
I
could
have
so
every
data
every
diagram
was
could
be
observable.
Essentially
it
would
use
jsds
for
state
in
every
diagram.
I
had
a
convention.
B
If
I
went
into
that
diagram
object,
I
could
say
dot
jsds
and
then
listen
to
anything
so
anywhere
on
this
anywhere
on
the
page.
I
could
listen
to
any
other
diagram.
I
could
have
some
diagrams
that
listened
to
the
state
of
other
diagrams
and
updated
their
state,
so
it
was
super
flexible,
but
it
did.
It
does
get
a
little.
I.
B
B
B
Yeah
it
worked
great.
You
there's
a
bunch
of
tests.
I
tested
the
hell
out
of
that
thing
and
all
the
tests
were
running
and
passing
anyhow,
I'm
still
trying
to
figure.
C
B
Let's,
let's
now
that
I've
sort
of
perused
the
fancy
cyclic
encoder
display-
and
I
sort
of
know
what's
going
on
in
here
for
the
most
part
it's
complicated,
but
we're
going
to
try
and
decomplicate
it
now
that
I've
done
that,
let's
go
back
to
our
page
and
actually
like
put
a
component
in
here
that
I
can
like
press
a
button
like
on
and
off
like
what
I
want
to
set
it
from
circle
to
line
or
a
toggle
or
something
like
that,
so
yeah
yeah.
I
would
do
that
as
a
so
now.
B
So
now,
I'm
guessing,
I
could
say,
react
toggle
input
or
button
or
something
like
that
and
somebody's
probably
made
one
right
react:
toggle
button,
there's
already
a
package
for
it.
So
now
now
I'm
like
wondering
if
this
is
something
I
should
just
do,
because
it's
easy
on
off
on
off.
That's
what
I
want.
That's
what
I
want.
So
it's
is
it
this
easy?
That's
super
easy,
so
I
don't
want
to
have
to
install
anything.
If
it's
super
easy,
what
do
you
think
david
muy
mui
mui
react
components.
Mdui
react
material,
ui!
B
I'd
rather
do
that
than
try
and
then
install
something
if
it's
just
so.
I've
already
got.
B
B
And
then
we
don't
want
to
get
this
stuff,
but
this
should
be
okay
and
let's
just
clean
it
up
a
little
bit.
If
we
need
to.
B
B
B
B
Okay,
it's
not
a
prop
yeah.
I
screwed
it
up.
B
B
Got
something
you
want
to
do
in
there
I
want,
and
eventually
it
shouldn't
be
on
and
off.
I
should
be
able
to
tell
it
what
on
and
what
the
label
should
be,
but
it'll
toggle
between
two
things.
B
B
And
all
the
way
down
here
right
here-
cyclic
scalar
encoder-
let's
just
put
the
button
right
here.
C
B
B
I
haven't
created
a
new,
of
course.
I
know
what
I'm
doing
wrong.
I
know
what
I'm
doing
wrong
here.
I'm.
A
B
I'm
not
creating
a
it's.
Not.
I
need
to
do
this.
Like
const,
toggle,
cyclic,
encoder,
toggle
button.
B
B
So,
assuming
that
we
now
have
a
a
state
that
we
can
pass
a
cyclic
encoder,
we
let's,
let's
give
it,
let's
call
it
a
display
state
here
and
we'll
pass
it,
this
dot,
state,
dot,
cyclic,
encoder
state,
and
so
now
our
cyclic
encoder
will
have
a
display
state.
That's
going
to
be
either
line
or
circle.
B
B
D
B
Okay,
I'm
just
gonna,
I'm
just
gonna
pretend
like
I'm
working
then,
but
but
really
so
when
we
do
the
output
cells.
So
here
it's.
B
B
I
remember
doing
this
now
so
so,
like
I
said
with
d3,
it's
all
data
driven,
so
you
have
to
imagine
like
an
array
of
data.
That's
like
an
encoding
and
and
what
we're
going
to
do
is
we're
going
to
essentially
add
here's.
Here's
like
the
array
of
of
data,
the.
D
B
Each
one
of
these
points
we're
going
to
add
a
cx
and
cy2,
which
is
circle
x
and
y,
and
to
animate
this
we're
going
to
take
that
whole
array
and
loop
for
as
many
times
as
we
want
to
run
the
animation
and
update
the
cxcy
for
every
single
circle,
and
then
re-render
render
re-render
re-render
so
every
step
of
the
way
and
that's
what
this
is
doing.
It's
creating
the
data
object
at
each
at
one
step.
Given
that
whole.
B
This
is
like
this
happens
once
every
step
update,
circles,
yeah,
we
want
to
keep
the
size
and
that's
well.
No,
no.
Actually
it
didn't
work
for
me
that
way.
Last
time,
last
time
I
ended
up
changing
the
size
because,
as
you
can
see,
it's
it's
a
different
orientation.
B
B
So
we're
gonna
have
to
do
something
like
that.
Similar
don't
have
to
pick
the
kids
up
today,
which
is
good,
so
we
have
to
do
something
similar
to
that
for
sure
similar
to
this
update
circles
function.
So,
let's
see
where
we're
calling
that-
and
that
is
happening
right
here-
update
display
so
update
display
is
the
is
the
the
basic.
B
What
is
update
display
in
this
one?
It's
going
to
be
update
right.
B
So
here's
the
encoding,
so
this
is
where
we
would.
This
is
where
yeah.
This
is
where
we
would
put
that
logic,
because
right
here,
I
keep
going
the
wrong
place.
This
is
where
we
put
that
logic.
B
This
bit,
where
we're
creating,
so
I
think
I'm
going
to
take
this
this
blob
here,
because
this
is
the
logic
that
we
want,
and
we
can
do
this
simple
and
we
can
just
do
circle
and
remove
this
and
remove
this
because
that's
the
tricky
bit
this
is.
This
is
the
only
tricky
math
in
this
sit,
this
transition
from
circle
to
line
it's
right
here
and
right
here
and
that's
just
deciding
which
direction
to
go
when
you're
doing
the
interpolation.
B
B
B
All
right,
so
this
isn't
gonna
work
right
away,
but
but
we're
gonna.
Let's,
let's
take
this
out:
let's
not
do
the
transitions,
yet
I
want
to
see
it
work
without
the
transitions.
B
Okay,
so
we're
either
going
to
be
in
a
line
or
circle.
Okay,
this
is
a
this
is
the
easy
part,
so
the
display
state
is.
B
So
if
our
display
state
is
a
circle,
then
it's
simple
and
that's
basically
what
this
would
do.
This
bits
to
output
display
hello,
where
did
that
go
to
this
step,
hits
the
output
display.
B
B
And
there's
a
size
what
size?
How
do
we
get
size
options,
dot,
size?
Okay,
so
I
think
we
can
use
diagram
width
for
size
and
for
center.
That's
that's
easy
enough.
I
guess
it's
just
a
a
coordinate.
B
Totally
confused,
though,
where
did
center
come
from
six
of
them?
One,
two,
three,
four!
Five!
Six
did
I
remove
it?
Oh,
oh
I'm
sorry,
I'm
looking
at
the
wrong
file.
Look
at
the
throng
file.
B
Was
there
a
research
meeting,
there
was
no
research
meeting
bummer,
probably
I'm
not
even
gonna
promise
anything
for
about
next
week.
B
B
B
B
B
B
Okay,
I'll
I'll
figure
that
out
offline
I'll
figure
that
out
thanks
for
the
heads
up,
okay,
toggle
button
is
ready
all
right.
We
can
do
this.
B
A
B
D
B
I
can,
I
can
just
push
this
to
my
branch.
If
you
want.
B
B
B
C
B
Almost
almost
almost
okay
cyclic,
so
this
is
me
this
is
me
this
is
me
screwing
around.
Let
me
just
comment
that
out
because
I
had,
I
I'm
sure,
that's
not
gonna
work,
I'm
still
like
halfway
and
that's
just
messing
with
stuff
right
now,
so
take
that
all
the
way
up
same
thing,
122
treat
cells
that
should
work.
B
Getting
closer
121.,
maybe
I
can't
do
that
there.
No
oh
diagram
width
has
already
been
declared.
Oh.
D
B
Line
circle
line
circle.
Okay,
so
I
don't
have
this
like
hooked
up
yet,
but
I
think
this
is
let's
see
if
we
can.
Let
me
test
this,
so
I
should.
B
I
should
get
re-rendered
if
I
click
this
yeah,
it's
working,
oh
hello,
long.
Has
it
been
going
off
all
right,
so
that's
good!
Every
time
we
press
this
button,
it
should
it
should
re-render
right,
rendering
and
again
render
again
and
we
should
be
able
to
say
this
dot
props
dot
display
state
is
circle
right
and
again,
yes,
and
if
I
click
it
again,
it
should
be.
B
This.Props.Displaystate
is
a
line,
yes,
excellent.
Thank
you.
David
works,
great
that
looks
great
okay,
so
I've
been
going
for
a
long
time
and
I'm
getting
kind
of
tired
five
hours
five
hours,
that's
a
long
time
to
to
live
stream.
C
B
B
B
B
We
had
a
good
rain.
Yesterday.
We've
had
quite
a
bit
of
rain
this
past
year,
which
has
been
awesome
last
summer.
Last
winter
we
got
this
past
winter.
We
got
a
lot
of
rain.
B
And
we
needed
it,
the
reservoirs
are
filling
back
up.
Yeah
remember
the
lexington
reservoir
was
so
low.
It
was
ridiculously
low.
I've
been
in
california
for
damn
near
10
years,
almost
10
years.
D
B
All
right
I'll
find
someone
worthy
of
a
raid
and
send
the
rest
of
you
guys
off
into
twitch
land.
B
You
know,
netpixel
has
has
flung
me
some
some
faults
a
few
times.
So,
let's
return
the
favor
and
let's
return
the
favor
to
netpixel,
who
is
now
streaming
and
raid
netpixel.
B
Hey
you
guys,
thanks
for
tuning
in
it's
really
great
to
just
to
know
that
you
all
are
out
there
and
you're
in
interested
in
what
we're
doing,
and
I'm
I'm
super
happy
to
be
here,
working
in
front
of
people
who
are
interested
in
what
we're
doing
so.
I'm
very
grateful
and
happy
to
have
met
all
of
you
in
in
chat
keep
coming
back
I'll
be.