►
From YouTube: BHTMS - Getting Started
Description
Broadcasted live on Twitch -- Watch live at https://www.twitch.tv/rhyolight_
A
A
Over
there,
okay,
it
looks
like
I'm
back
so
my
my
new
internet,
just
totally
crapped
out
on
me,
I,
don't
know
what
happened
so
luckily,
I
didn't
disconnect
the
old
service
yet
okay.
So
where
did
everything
cut
out?
Hopefully
you
got
these
links
in
chat.
I
put
up
two
simple,
HTM
I
was
looking
at
this
scalar
encoder
and
trying
to
show
you
where
it
came
from
and
then
everything
died.
A
A
Be
copy/paste
I'd
love
it
to
be
this
exact
code,
because
I
tried
to
make
this
write
this
code
in
a
way
that
you
know
it
was
well
documented,
or
it
made
sense
in
the
in
the
prose
here
so
anyway.
My
point
being
that
most
all
I
would
like
it.
If
all
of
these
code
includes
came
from
simple
HTM,
somehow
at
least
that's
one
of
my
goals,
I
would
like
to
try
and
make
that
work.
A
A
Because
there's
going
to
be
some
math,
it
doesn't
have
to
be
a
lot
of
tech,
although
most
of
well
it
does
I
think
it
does
I
think
it
has
to
be
a
lot
tech,
converter,
weather,
I,
think
math
j/s
can
probably
do
it,
but
but
there
is
some
law
Tech
them
that
we're
gonna
put
in
so
I'm
still
gonna
just
work
on
the
the
framework
at
the
moment.
So
so
let
me
show
you
what
I
have
so
far
so
I've
just
put
everything
all
the
old
sources
in
hold
so
and
I'm
gonna.
A
A
So
it's
a
node.js
and
we
have
installed
next
and
it's
sort
of
like
a
little
package
manager.
Nowadays
you
have
to
have
a
package
manager
and
I
liked
it
because
it
was
simple
and
it
got
out
of
the
way
really
fast
and-
and
it
promised
to
be
good
at
deploying
things
later.
So
at
this
point,
I
just
want
I
just
want
a
server
that
runs
easily
I
want
people
like
you
to
be
able
to
pick
this
up
and
run
it
fast.
So,
honestly,
you
guys
should
be
able
to
do.
A
You
know
to
get
clone
building
HTM
systems
and
go
in
there
and
run
wait.
I
forgot
what
it
was
run.
Dev
I
think
I
got
a
relook
at
the
readme
now
yeah
run
dev
NP
and
run
dev,
and
you
should
be
able
to
start
this
up
on
localhost
and
see
this,
which
is
not
pretty,
but
it's
some
right.
I
don't
have
a
fab
you
can
and
as
I
run
into
things.
Oh
wow
I
work
on
and
I'll
sort
through
them
later.
Oh
I've.
C
A
D
A
I
was
asking
a
hypothetical
question
on
Twitter.
If
anyone
would
join
your
startup,
oh
yeah,
I
did
no
I,
don't
care
you
can
ask
whatever
it
was.
Just
I
was
just
wondering
if
anybody
else
was
thinking
about
robots
and
HTM,
because
at
some
point
I
think
it's
gonna
be
a
big
field.
I
think
it's
gonna
be
I,
think
it's
gonna,
be
big
bacon,
robotics
big
deal.
A
So
let's
look
at
this
encoder
page
and
I'll.
Show
you
what
it
looks
like
so
so
it's
soup.
This
is
super
simple
I
like
so
we're
using
react.
So
I've
got
a
layout
components
of
my
rack.
Components
are
right
here
and
so
I've
got
a
header
component
which
just
has
some
links.
So
all
those
links
you're
seeing
are
just
coming
out
of
here
and
then
a
layout
component
and
I
just
copy
I
mean
I've,
looked
at
a
tutorial
and
did
this.
So
this
is
the
first
rate.
A
These
are
the
first
react
components
I've
ever
created,
so
I've
got
something
wrong.
Tell
me
so
that
so
the
headers
got
a
little
bit
of
a
style,
and
this
seems
to
be
typical.
You
put
your
your
style
and
your
content
and
your
code
all
in
the
same
place,
which
is
which
drives
part
of
me
crazy,
because
that's
not
the
way
we
look.
My
generation
learn
to
dance,
but
I'm
gonna.
Do
it
anyway
we're
gonna,
but
it
makes
sense
at
least
because
the
components
I
want
to
make
our
totally
self-contained
I
do
want.
A
I
mean
I,
want
these
little
widgets
right
these
diagrams
and
they
should
I
should
be
able
to
create
them
and
and
set
up
their
data
source.
That's
not
really.
All
I
want
to
do
is
create
a
create,
a
diagram
and
say
here's
your
data
source.
Somehow
and
as
that
data
source
changes,
it
just
updates.
That's
that's
that's
my
plan
and
I'm,
hoping
I
can
do
that
with
react
and
redux.
That
makes
sense
right.
A
So
so
my
encoders
page
is
just
a
wall
of
text
right
now,
the
idea
being,
whenever
I
do
have
some
coders
I
can
just
pop
them
right
in
by
saying
you
know:
simple:
scalar
encoder,
you
know
as
a
react
component,
the
others
I
just
have
little
layouts
with
nothing
in
them.
Basically
so
this
is
as
far
as
I
got
I
got
to
the
point
and
what
I
want
to
try
and
do
today
is
not
you.
A
What
I
want
to
try
and
do
today
is
move
some
of
this
content,
so
encoding
numbers
I
can
get
the
content
easily
enough.
I'm
gonna
skip
the
syntax
stuff.
What
I
think
I'm
gonna
do
is
I'm
gonna
drive
straight
to
the
hard
the
hard
thing
which
is
this
guy?
This
is
the
first
real.
What
I
would
call
a
diagram
on
the
page?
This
is
just
text.
This
is
just
code.
This
is
the
first
interactive
sort
of
widgets
type
thing
and
it's
called
simple.
A
Scalar
I
think
it's
in
this
old
source
function,
buried
deep
in
here
and
I.
Think
it
is
just
simple,
scalar
encoder,
so
it
has
a
template.
It
looks
like
this
okay,
so
it's
SVG,
this
is,
are
all
d3
I'm
using
d3
for
for
all
this
stuff,
so
it
sets
up
a
little
SVG
with
some
text.
That's
what
yeah!
So
this
little
scalar
value
thing
the
encoding
just
kind
of
put
some
in
place
and
I'm
up
to
redesign
all
this
stuff.
A
A
A
lot
see
how
it
changes
at
the
at
the
beginning
and
then
how
it
gets
smaller,
that's
important,
because
if
you're
writing
encoders,
you
need
to
know
how
it's
gonna,
how
it's
going
to
behave
when
you
get
to
these
ends
right,
so
so
I
felt
like
doing
it.
This
way
gives
you
an
indication.
It
shows
you
the
value
of
the
range
that
that
bit
represents
specifically
or
could
might
represent.
A
A
A
I
found
this
I
didn't
find
it.
Somebody
I
think,
Gary
and
then
breath
pointed
breath
pointed
me
to
it
and
said
you
really
should.
Basically,
you
should
just
read
this
and
anyway
he's
just
showing
you
check
this
out,
he's
showing
you
how
he
makes
this
diagram
with
different
layers
and
how
he's
using
d3.js
to
do
it
and
I
love,
d3.js,
and
all
of
my
other
diagrams
are
using
that
so
and
I
love
how
all
this
guy's
stuff
so
I'm
going
to
try
and
do
it
the
way
he
does
it.
D
A
C
A
A
I
guess
I
don't
have
tabs
on
there's
an
NT.
A
making.
Oh
I
got
I
got
it
on
my
laptop.
No,
it's
in
dev
making
nope,
okay,
I,
don't
have
it
but
I
know
it's
here,
making
a
line
drawing
so
I'm
going
to
grab
it.
Just
so
I
can
see
it
running.
It's
always
good
to
see
something
running
if
you're
trying
to
because
the
way
he
does
diagrams
I
really
like
so
I'm
gonna
clone
this.
A
A
If
I
open
this
new
one
that
I'm,
what
isn't
it
or
does
it
just
know
what
I
want
if
I
open
this
new
one
I
just
made,
it's
gonna
replace
whatever
I'm
in
alright,
so
Jeremy
got
it
running.
That's
good.
His
brain
Mozilla
hasn't
released
for
alpha
the
new
literate
programming
framework.
It's
supposed
to
support,
markdown
and
interactive
JavaScript
elements.
Is
it
it's
literate
programming
framework
that
sounds
like
a
overkill,
a
programming
framework.
A
A
Look
at
this,
let
me
see
if
I
can
do
that
from
here.
I,
don't
I,
don't
have
the
installed
a
well
I'm,
not
gonna,
let
it
I'm
gonna
go
to
this.
This
is
what
I
want
to
see.
So
here's
so
first
he's
got
some
style
and
I'll
ignore
that
and
then
this
is
the
line
drive.
So
what
we're
seeing
here,
let's
just
open
it
because
it
just
opens
not
in
the
terminal.
A
A
Gonna
strike
them
chat,
I've
learned
it
all,
so
he's
got
these
functions
up
front,
which
are
good.
That
makes
me
feel
safe,
a
scale
constant
and
basically
a
diagram.
So
this
is
typically
what
he'll
do
this
on
every
page
he'll
create
a
diagram
specifically
for
a
particular
visualization,
so
I'm
thinking
about
creating
this,
maybe
even
a
a
class
to
can
to
contain
some
of
the
generic
stuff,
but
I'm
I'm,
gonna
standardize
this
so
that
every
component
I
create
I
know,
has
a
data
source,
but
I
think
that's
a
react
thing
anyway
right.
A
Firetruck,
so
the
add
grid
is
what
draws
the
grid.
Obviously
add
line
draws
the
line,
and
on
some
of
them
he
doesn't
call
that
because
he
doesn't
draw
a
line
so
and
then
the
alert
values,
that's
specifically
for
one
diagram.
So
the
thing
is
I
need
to
know
how
to
group
my
visuals
and
like
for
my
simple
scalar
encoder,
if
I
want
to
try
and
track
that
idea
here
in
the
same
way,
or
did
it
go
this
guy?
A
Some
of
you
over
here
I'm,
just
thinking
about
the
components
that
I'm
gonna
have
here,
I'm
gonna
have
a
I'm
gonna
have
a
grid
and
I'm
gonna.
Have
this
number
bar
thing,
and
so
I
can
sort
of
incrementally
sort
of
build
up
a
super,
simple
scalar,
encoder,
diagram
and
and
I
want
to
try
and
build
it
sort
of
like
he
does
it.
He
creates
these
each
function.
A
Does
a
group
so
like,
let's
go
into
a
grid,
ed
grid,
a
pins,
a
group
and
and
calls
it
a
grid
and
then
and
each
one
of
these
pins
its
own
group,
so
like
the
track
as
its
own
group?
So
it's
a
lot
like
the
way
he
segregated
these
functions
out
and
each
one
you
can
sort
of
rely
on
their
being
grid
or
a
group
SVG
now.
A
So
the
tricky
thing
is,
if
he
calls
so
I
assume
he's
not
adding
the
track
more
than
once,
because
this
is
an
append
ad
grid
is
not
green,
called
more
than
once
on
one
instance,
some
of
these
functions
so
so
on
change.
Let's
look
at
this
when,
when
these
change,
obviously
the
alert
value
is
going
to
change
and
the
locations
of
things
are
gonna
change.
So,
let's
check,
let's
check
how
he
does
the
changes,
so
there's
going
to
be
some
handlers
somewhere
and
I
think
it
is
when
he
starts
adding
these.
A
Wait:
I
don't
look
at
this.
Oh
nice
I
like
that
I
like
that
I'm,
not
that
not
this
headline,
at-track
Mik
draggable
circle.
Okay,
so
here
it
is
on
drag
that's
what
I'm
looking
for
so
on,
drag,
we'd,
call,
update
position
up
tip
position
simply
transforms
the
circle,
but
these
points
are
also
being
updated.
Where's
P,
okay,
oh
that's!
Coming
in!
So
oh
that's!
When
you
call
Mik
draggable
circle,
you
give
it
the
point
this
a
and
B
okay.
So
here's
basically
the
data
this
a
and
B.
A
So
this
diagram,
the
only
state,
is
a
and
B
that
makes
sense.
The
only
state
in
this
diagram
is
point
a
and
point
B
and
where
they're
at
and
as
that
state
changes
e
on
update,
well,
no
no
update
functions
or
update
function.
Okay,
so
here's
I
don't
understand
this
update
functions.
This
is
something
different.
So,
let's,
let's
skip
this
I'll
come
back
to
this
back
to
when
we
add
the
circles
and
yeah.
So
when
we
add
the
circles
or
when
we
create
a
circle,
we
get
access
to
the
point
here
on
drag.
A
We
still
have
access
to
the
point,
so
it
looks
like
the
state
is
changing.
So
it's
not
like
this
is
immutable,
we're
clamping
and
changing
the
state
here.
So
if
we're
gonna
do
this
with
react,
we
would
have
on
drag
change,
data
somewhere
right
and
the
component
would
so
this
that's
where
this
is
where
I
need
to
think.
Where
am
I
going
to
store
something
if
a
component
has
an
interface
to
update
its
own
data
source,
how
am
I
going
to
make
that
happen?.
A
A
A
As
a
user,
it
has
its
own
user
interface.
That's
gonna
change,
one
piece
of
data,
two
pieces
of
data,
I
guess
so
in
this
case
this
component
is
going
to
have
a
selected
bit
in
the
output
and
it
might
have
a
scalar
value,
selected,
scalar
value,
or
something
like
that,
and
it's
going
to
update
accordingly.
A
So
for
for
this,
doesn't
really
this
data
doesn't
really
have
to
go
outside
of
the
component
at
all,
but
it's
something
that
thinking
about
the
future.
It
might
be
nice
see
these
aren't
linked.
These
two
aren't
linked,
but
it
might
be
nice.
Some
of
them
I
do
have
linked
some
of
them.
When
you
change
it,
it
changes
all
of
them
and
that's
it's
required.
A
I
mean
I
need
to
do
that,
but
for
the
ones
that
have
no
link
should
I
give
them
a
state
and
if
they're,
if
they're,
totally
self-contained
with
their
state,
I
wonder
hello,
Falco,
I'm
pondering
about
how
to
how
to
handle
stateless
react
components.
I
know
the
state
I
would
really
because
I
really
should
be
consistent.
However,
I
do
this
for
this:
let's
try
and
create
a
standard
here
for
the
diagrams
that
we're
gonna
make
every
diagram.
I
assume
is
going
to
have
some
data
component
that
it
displays
and
that
data
component
should
be.
A
A
Wasn't
refreshed
okay,
so
I'm
working
on
this
right
now
and
I'm
gonna
I,
think
I'm
gonna
add
a
data
source
while
I'm
here
so
we're
gonna
go
look
at
Redux
a
little
bit,
cuz
I
know
this
is
a
way
to
store
data
in
the
react
way
like
it's
I
mean
it.
It
could
start
by
making
state
local
to
the
component
and
later
add
it
to
the
store.
A
If
we
want
the
variables
to
be
shared
between
diagrams,
you
don't
think
that's
a
bad
yeah
I
guess
we
could
do
that
you're
right,
let's
start
simple,
so
that
would
be
pretty
easy
to
do
and
and
I
could
just
I
could
still
make
it
a
react
component
I
would
just
I
can
still
make
it
just
a
react
component
right.
That's
easy
enough!
I
gotta
figure
out
how
that
I
know.
C
A
Okay,
this
is
what
I
was
looking
at
here,
there's
the
HTML,
so
this
is
for
the
whole
page
and
the
line
drawing
that
we
were
looking
at
here
so
so
he's
gonna.
Have
it
let's
select
I'm
gonna,
try
and
do
this
a
little
bit
at
a
time
and
basically
the
same
way
that
he
did
it.
Let's,
let's
look
back
at
this
tutorial
because
it's
so
good
I
feel
like
I
should
follow
it
follow
through
with
it.
Where
did
it
go?
Okay?
This
is
the
tutorial.
A
Here
we
go
so
he's
saying:
I
wanna
get
to
the
point
where
he
actually
creates
a
diagram.
So
first
he
just
starts
without
creating
a
diagram,
and
then
you
get
to
the
point.
Where
he's
got
enough,
you
know
logic
to
and
an
algorithm
involved
and
some
interaction
involved
and
so
far
he
finally
creates
a
diagram
and
I
want
to
get
to
that
simple
point.
The
hairs
here
I
think
this
might
be
it
where
we
get
to
the
redraw
and
on
drag
and
that
stuff.
A
So
at
this
point
it's
pretty
simple
he's
got
a
function
that
gives
the
points
on
a
line
given
two
points
and
a
constructor
that
hard
codes,
some
state
and
all
he
gets-
is
a
container
ID
over
which
to
render
and
then
he's
man
you
are
calling
in
the
constructor.
These
functions
to
create
things
so
I
feel
like
I
should
just
start
with
a
just,
create
some
diagram
and
add
a
constructor
and
I'm,
probably
over
complicating
things.
But
I
want
this
to
be
a
react
component.
A
Out
of
here,
okay,
so
you
can
create
a
react
component
by
simply
creating
a
function
that
takes
properties
right
or
I
can
actually
extend
react
component
I've
seen
it
done
both
ways,
I
liked.
The
next
tutorial
I
was
looking
at
that
and
it
was
showing
those
Doc's
were
pretty
good
if
this
works
whoops,
okay,
learn.
This
is
where
it
was.
A
A
A
It's
probably
some
so
I'll
just
do
this
we'll
go
to
the
first
tutorial
that
we
see
I
would
predict
that
all
of
your
components
should
use
the
class
notation
as
they're
going
to
have
state
in
events.
Okay,
thank
you.
That's
know.
This
is
basically
what
I
want
extends
react
component,
so
I
just
need
to
get
react
component.
A
Okay,
so
these
components,
this
header
or
whatever
so
I'm
gonna,
create
a
new
I'm
gonna,
create
a
I'm
gonna,
create
a
folder
and
I'm
gonna.
Call
these
diagrams
and
in
here
I'm
gonna
create
a
file
simple
scalar
and
coder
dot.
J
s
and
so
I
should
be
able
to
key
just
say:
class
ball
blog
stands
react
a
component
class,
simple
scalar
and
coder
extends
react
component
and
then
add
a
constructor.
If
I
want
a
constructor
and
a
runner,
so
basically
I
need
a
render
function
and
I'm
gonna.
A
A
C
C
A
A
A
Hello
world,
of
course,
so
I
should
be
able
to
on
my
encoder
encoding
numbers
page
now:
import
right,
import,
simple,
scalar,
encoder
from
opponents
diagrams,
simple
scalar
encoder
and
in
my
layout
for
coding,
numbers
I
can
just
put
simple
scalar,
encoder
and
I'll.
Get
no
props.
I
get
no
props
for
that.
Okay,
let's
see
if
it
works,
because
it
should
work.
I
have
to
run
this
again
around.
A
C
A
Have
this
page
up,
yeah
kody
numbers,
alright,
reference
era,
this
hasn't
been
initialized.
Super
hasn't
been
called,
oh
yeah,
so
if
I'm
gonna
override
the
constructor
I'm
gonna
have
to
call
super
so
I'm
assuming
I'm
missing
anything
yeah.
This
should
be
easy.
I'm,
just
gonna
call
this
that's
unsafe
component.
Well,
we'll
see
that's
interesting
all
right!
Well,
let
me
go
back
to
this
tutorial.
I
was
pseudo
following
because
maybe
he
has
something
to
say
about
super.
No!
No!
No!
No
super
super
props
super.
Not
this!
That's
that's
the
thing
just
super
super
props
and.
C
A
A
A
A
Let's
go
back
to
this,
and
so
my
simple
so
I'm
gonna,
it's
gonna,
be
it
I'm.
Gonna,
follow
this
diagram
pattern
and
I
know
that
this
simple
scalar
encoder
needs
to
have
some
parameters.
If
we
look
here
the
way
it
looks
like
it
should
have
several
parameters,
not
this
one,
just
a
simple
one
yeah.
So
we
have
a
minute
of
Max.
That's
definitely,
parameters
and
I.
A
A
Although
no
see
I
don't
know
what
to
do
we
should
set.
We
should
allow
them
to
set
a
selected
scalar
value
and
I
selected
bit.
We
should,
let's,
let's
just
make
it
completely
configurable,
now
here's
the
question
I've
got
now
because
I'm
gonna
be
calling
this
from
here
should
I
make
those
things
parameters
right
here
in
this
code
should
I-
and
if
so,
how
do
I
do.
A
That
is
that
it
makes
sense
that
that
I
would
put
it
here
and
then
I
could
just
change
the
parameters
if
I
to
fit
the
pros
around
it,
particularly
if
okay,
so
now
so
now,
I'm
starting
to
realize
these
parameters
are
exactly
the
type
of
things
that
could
be
changed
by
other
parts
of
the
page,
but
we'll
get
to
that
in
a
minute.
But
we
have
to
think
about
that
because
these
things
could
be
changed
elsewhere,
but
for.
A
A
A
Let's,
let's
do
some
stuff,
then
so
so
we'll
just
set
min
equals
zero.
I
guess
I
have
to
do
this
max
equals
55.
Just
why
not
we'll
say
value
Val
equals
twenty-seven
and
a
half,
because
it's
halfway
and
then
we
will
not
set
a
selected
bit.
Okay,
it
will
not
set
a
selected
bit,
that's
something
that
has
to
come
with
user
interaction
because
then
it
won't
display
initially.
So
if
I
do
that,
boom
yay,
so
that's
nice,
it
just
reloads
and
and
there
we
go
so
now,
I
know
my
props.
A
A
These
state
object.
Okay.
What
so
I
need
to
look
that
up.
So
is
there
a
react?
State
object
component
state.
That's
the
right
place
to
look.
Okay
set
state
update,
okay,
so
each
component
has
a
state
object.
That's
what
you're
telling
me
gotcha
so,
and
the
props
and
state
are
both
okay,
prot
and
they're,
both
playing
JavaScript
objects.
So
I
can
go
to
this
state
I'm
assuming
or
call
a
set
state.
A
A
A
But
you
do
want
to
use
it
when
event.
He
things
happen:
okay,
gotcha,
so
so
I
could
could
I
directly
set
the
state
by
saying
this
state
dot,
something
in
the
constructor
and
then
later
call
set
state
and
that'll
cause
a
redraw.
Is
that
the
right
pattern
to
use
is
then
I
could
just
say
this
dot
state,
dot,
min
and
then
call
set
state
later.
A
A
No,
it
doesn't
like
that.
Oh
this
state
doesn't
actually
exist
yet
even
after
that,
okay,
so
it
still
has
the
same
question.
I
want
to
put
something
into
the
state,
but
without
calling
set
state
in
the
constructor
or
do
these
properties
they're
already
there
is
that
right,
maybe
they're
already
there
maybe
eat
the
props,
become
the
state.
Let's
see
no.
A
A
B
A
B
A
A
C
A
A
A
A
A
Every
diagram
should
probably
be
completely
self-contained,
so
I
don't
want
to
have
to
add
any
HTML
around
this
and
add
an
SVG
around
this
or
anything.
It's
just
going
to
contain
everything
itself.
So
this
has
got
to
be
the
SVG
and
all
that
stuff,
and
then
we
get
we
do
have
to
tell
it
here's
a
question:
how
do
I
know
if
I'm
calling
this
from
here?
How
do
I
get
reference
to
myself?
Like
the
me,
the
Dom
component,
that
I'm
rendering
from
within
this
render
function?
A
And
the
reversing
component
did
mount
this
component
did
mount.
That's
a
react
thing
right
when
it
did
mount
reacts.
It
is
okay,
okay,
so
that's
the
point
that
we
need
to
inject
that
make
sense
okay,
so
so
we
draw
the
chart
once
a
component
did
mount
in.
In
this
case,
though,
this
seems
wrong
to
me
that
we're
doing
any
of
this
stuff
right
here,
I
wouldn't
want
to
do
any
of
this
stuff
here.
A
A
Component
did
mount
but
invoked
immediately
after
a
component
is
mounted
inserted
into
the
tree.
Initialization
that
requires
Dom.
Node
should
go
here.
Okay,
if
you
try
and
modify
the
Dom,
you
are
not
being
reactive,
yeah,
but
I
need
to.
A
A
C
A
Svg
element,
I
assume
it
would
be-
would
be
down
here.
You
put
the
SVG
element
down
here
and
then
in
component
did
mount
you'd
have
to
tell
you'd
have
to
have
access
to
the
SVG
component,
so
you
can
call
d3
on
it
right.
That
seems
like
the
only
way.
I
was
the
only
way
I
really
understand
doing.
This
is
I'd
need
to
give
myself
an
ID.
Much
like
this
one
does.
D
A
A
A
Dot
ID
I
know,
there's
a
way
that
you
can
tell
it
like
force
it
to
say
this
is
a
required
required
ID,
but
I'm
not
going
to
do
that
yet
so
now,
if
I
override
this
function
component
did
mount
or
provide
my
own
component
did
mount
get
out
of
here.
A
A
A
C
C
C
A
A
A
There's
the
SVG,
but
it's
not
getting
this
the
ID
right,
I'm,
obviously
doing
a
substitution
wrong.
Maybe
you
guys
could
tell
me
what
I'm
doing
wrong
here
do
I
need
these
No.
Okay,
let's
try
that
there
we
go
there.
We
go
all
right
yep.
That
was
it
all
right,
so
I
got
an
SPG
I
got
the
yeah
I!
Don't
need
that
so
I
have
an
SPG
for
my
component.
A
Each
one
of
the
so
so
again
this
is
just
called
once
so
I'm
gonna
call
I'm
gonna
create
an
SVG
and
I'm
gonna.
Send
it
to
my
two
other
functions
that
are
gonna.
Do
the
other
thing,
so,
let's
say
let's
say:
we've
got
a
function
called,
let's
look
and
see
what
he
called
his
functions.
Add
grid
add
track.
Okay,
so
it
will
use
the
add
something
we'll
use
the
add.
So
we're
gonna
have
to
add
a
number
line.
Okay,
that's
one
thing
and
I'm
just
gonna
empty
these.
A
Let's
leave
it
at
that
for
now
and
we'll
decide
we'll
decide
whether
we
want
to
how
we
want
to
do
the
details
of
those
we
want
to
make
other
functions
for
them
or
not
so
then
I
could
say,
add
number
line
and
then
send
it,
the
SVG,
maybe
and
then
just
know
this
is
called
once
you
give
your
SVG
do
what
you
need
to
do
to
it.
So
I'm
gonna
append
a
group,
but
first,
let's
go
look
at
this
old
source.
C
A
Template
I
had
some
text
in
a
specific
place
for
like
scalar
value
encoding,
so
I'm
and
I
actually
I
kept
the
hard-coded
the
groups
in
here.
So
I
don't
want
to
do
that
anymore,
but
at
least
this
gives
me
an
indication
of
what
I
want
and
and
for
stuff
like
this
I
don't
really
mind
just
putting
it
in
really
maybe
I
mean
it's
the
simplest
thing
to
do
so.
These
are
just
labels.
It'll
be
one
for
scalar
value,
one
for
encoding
the
g's.
A
However,
the
groups
I
think
I'd,
better
I
think
it's
cleaner
to
do
them
programmatically
and
it
may
end
up.
You
know:
I
could
take
these
out
and
create
render
functions
for
them,
but
do
I
need
to
not
really
so
look
there.
I
got
them
there
and
they're
in
SVG.
So
and
that's
about
we'll
just
leave
this
for
now.
I
think
it's
okay.
A
A
A
A
A
A
A
You
that's
why
alright
open
this
code
for
the
command
line?
Perfect!
Thank
you!
Oh
I
can
be
on
this
board.
I
just
haven't
gotten
to
it.
Yet
I'm
more
than
happy
to
help
with
okay,
anyway,
I
didn't
mean
to
ignore.
You
is
just
it's
been
a
busy
week.
You
know
all
in
one,
so
we
got
that
and
then
this
one
for
the
command
lines.
Apple
shift,
P
type
command,
install
code,
commanded
path,
really.
A
Was
gonna
say
a
consistent
diagram
styling
pattern,
so
if
someone
could
come
up
with
something
like
that,
because
right
now,
I
don't
like
like
this
I
know
that
should
be
pulled
somewhere
of
this.
It
should
be
somewhere
else
so
but
I
don't
quite
know
what
so
I'll
do
it
later.
I
wouldn't
be
his
code.
Okay,
thank
you.
A
A
So
now
I'm
gonna
go
into
dev
making
code
that
that's
weird
I
mean
it's
kind
of
weird
that
there's
not
an
option
to
open
in
a
new
window.
You
know,
but
thank
you
cool
all
right.
So
now
I
could
kill
Adam
kill
Adam.
Why
would
you
kill
Adam,
okay,
setup
diagram
backward
where
we
are
right
now
added
this
font,
so
we're
gonna
go
back
to
here
and
so
I
know
that,
first
of
all,
there's
a
value
line
with
a
text
in
a
rectangle,
so
I'm
just
gonna
copy.
A
This,
so
I'm
like
to
remind
myself
so
for
the
number
line.
First,
there's
gonna
be
first,
we
want
to
create
group
and
now
I'm
gonna
follow
along
with
what's
his
name
here
like
let's
look
at
add
grid,
for
example.
First
thing
he
does
so
he's
got
this
parent.
Maybe
that's
what
I'll
do?
Maybe
that's
what
I'll
do
that
seems
pretty
clean
right
and
and
instead
of
doing
this
in
setup
diagram
will
just
say
this
dot.
Parent
can
I
should
I
not
use
this.
A
A
I
think
it's
just
a
mistake.
Okay,
so
we're
gonna
add
class
grid,
but
it's
gonna
be
number
line,
number
wagging
number
four
a
number
line
and-
and
we
can
say
let
G
equal
this.
So
then,
now
let's
go
look
and
see
what
our
d3
magic
was.
So
that's
gonna,
be
please
forgive
me
before
I
crack
open
this
code,
okay,
value
access,
so
I
got
a
minute,
a
Max
and
a
max
width.
Okay,
so
we
haven't
talked
about
width
yeah.
A
A
A
A
A
C
A
C
D
A
C
A
C
A
Okay,
human
readable
reference
marks
for
scales,
so
I
want
an
access,
left,
I,
believe,
oh
no
X's
bottom
and
just
a
reminder
what
this
is
giving
us.
Is
this
thing
just
this
line
just
an
access
to
a
chart?
You
know
and
we're
just
going
to
tell
it
zeroed
or
whatever,
and
it's
never
going
to
update
that's
the
thing
so
I
don't
know
why
I
tried
to
apply
it
with
a
data
update.
C
A
C
C
A
If
you
don't
update
it,
wouldn't
the
red
line
leave
marks
when
it
moves
over
it
yeah
yeah.
Well,
we
will
have
to
update
that
we
won't
update.
We
won't
have
to
update
the
axis
so
in
this
code.
I
I,
don't
know
why
I
did
this
I
created
the
axis
with
it,
with
the
dealt
with
the
data
in
our
exit
remove
pattern,
it
doesn't
I,
don't
know
why
I
don't
think
I
needed
to
do
it.
It
doesn't
that's
what
I'm
talking
about,
but
the
actual
mark
with
the
actual
mark
on
it.
That
is
something
else.
A
A
A
Values
so
I've
got
a
couple
of
settings
here:
apparently
value
scale,
top
margin
and
value
scale,
side
margins
and
I'm,
assuming
the
value
scales.
What
I
I
would
call
a
number
line
now,
so
do
I
went
to
hard-code
that
or
not
let's.
Let's
do
it
for
now
and
decide
if
we
want
to
take
it
out
later
and
also
I,
don't
like
that
name,
rename
number
line
margin,
side,
okay,
and
then
we
have
to
do
this.
One.
A
A
A
A
A
Oh,
that's
why
I
renamed
it
value
to
X,
because
it
goes
from
min/max
to
the
width
of
the
page
and
the
other
one
goes
the
other
direction
and
you
have
to
have
both
for
the
interaction.
But
let's
not
worry
about
it.
Let's
not
worry
about
it
yet
because
we
don't
need
it
yet,
okay,
so
yeah!
So
let's
just
keep
this
simple.
We're
gonna
have
an
x
axis
and
we're
gonna
scale
it
across
the
whole
width
with
a
minute
of
Max
and.
C
A
B
A
A
A
D
D
A
A
C
A
A
A
C
A
C
A
A
C
A
Do
I
need
to
like
run
next
and
I
mean
I'm
in
development
mode
I
was
hoping,
I
would
get
debuggable
things
in
here,
but
I
don't
I,
don't
where
are
the
things
here's
some
of
them?
Okay?
Here,
maybe
this
is
it
here
we
go
well,
let's
see
debug
right,
stop
right
there,
let's
see
if
I
can
force
it.
Let's
see
if
I
can
force
it
I,
don't
know
why
I
can't
get
a
good
debugger
right
here,
debugger
see,
if
that
does
it
did
okay.
My
axis.
A
It's
a
context.
It's
a
function!
Oh
that's
right!
Okay!
So
that's
right!
Okay!
So
this
gives
you
a
function.
I
should
I
get
a
brush
up
on
my
d3,
so
when
you
call
axis
it
gives
you
a
function
that
will
create
an
axis
for
you.
That's
why
your
that's?
Why
you're
calling
access
you?
That's
your
last
thing
that
you
have
to
do
after
a
pin,
so
you're
a
pending,
transform
and
translate.
A
C
A
A
A
A
A
Okay,
now,
let's
do
the
encoding.
Let's
get
done
with
these
static
parts,
let's
get
down
to
the
static
parts
and
then
we'll
worry
about
the
dynamism
dynamism,
so
the
static
parts,
the
other
thing
that
I
want
to
do
I
hope
this
is
this
becomes
much
simpler
doing
it
this
way,
so
we
have
a
value.
So
there's
going
to
be
a
marker,
as
we
want
to
put
well
played.
There's
gonna
be
a
marker
that
we
want
to
put
in
here
and
I.
Remember
this
being
too
complicated,
but
the
last
time
I'd
mess
with
this.
A
But
it's
based
on
this
value
will
do
the
mouse
moves
later,
but
we
already
know
the
value
we're
setting
its
27.5.
You
know.
So
a
part
of
this
is
don't,
don't
pay
any
attention
to
the
JSDF.
Scrap
okay,
hopefully
explain
it
someday
it's
an
old
observable
data
store
I
used
to
use
for
everything
and
I
saw
the
bad
habit
of
using
it
on
things.
A
Moves
the
value,
not
update,
output
bits,
that's
the
encoding
update
value
here.
It
is
so.
This
is
my
whole
function
to
update
the
value.
So
before
updating
the
value
we
have
to
create
CNET.
So
now
now
I
have
to
think
okay
do.
I
do
I
want
this
to
be
in
the
group
with
the
number
line,
or
is
this
a
new
group
and
I
think
I'll
make
it
a
new
group
I
think
this
will
be
a
new
group.
A
A
A
Here
and
this
thing,
hey-oh
Jasper
BTS,
J,
how's
it
going
I
am
working
on
building
HTM
systems
and
it's
gonna
be
an
interactive
visualization
of
each
TMS
and
how
to
create
them
and
I'm
like
neck
deep
in
it
right
now,
I,
don't
even
know
where
my
oh
here's
here's
here's
example
case.
You
want
to
check
it
out.
This
works
I'm,
translating
this
into
react
into
a
react
server,
because
this
was
all
just
client-side
JavaScript,
so
still
gonna
be
all
client-side
JavaScript
for
the
most
part,
but
I'm.
C
A
B
A
A
A
A
So
here's
something
I'm
assuming
I'm
gonna
have
this
scale
available
and
I
and
I
made
it
when
I
created
the
number
line,
but
I
certainly
did
not
store
it
anyway.
So
so
that's
a
bit
tricky.
Maybe
I
should
have
a
function.
That's
like
that
sets
up.
Maybe
that
should
just
be
done
in
the
constructor.
That
sounds
like
something
that
I
could
do
in
the
constructor.
A
Let's
do
that
I.
Think
that
makes
sense.
I
think
it
makes
sense
to
do
this
in
the
constructor.
All
right.
Take
this
out.
This
X
scale
out
and
I
and
I
create
something
here
and
I
just
say
it's
not
a
state
I'm,
just
gonna
say
this
dot
X
scale
and
I
use
props,
Ben
crops,
dot
max
crops,
dot
width
to
create
the
X
scale
and
I
don't
need
any
this
stuff.
Oh
wait
a
minute.
If
I
want
the
width
to
be
right,
I'm
gonna
need
to
use
the
X
offset
right.
A
C
A
C
A
A
Minus
6
pixels
for
some
for
some
reason,
I,
don't
know
why
there's
six
pixels
there,
okay!
So
now
we
need
to
just
like
we
did
here.
We're
gonna,
create
this.
We're
gonna,
create
a
group
and
it's
gonna
be:
let's
call
it
marker
number
mark.
Let's
call
it
number
mark
okay,
so
so
here
I'm
doing
two
things
here:
first
I'm
doing
I'm
doing
texts
and
rectangles.
Why
am
I
doing
a
rectangle
Oh.
A
A
A
So
what
I
want
is
this
is
going
to
put
the
value
in
the
right
place.
A
A
C
A
A
A
A
A
C
A
A
A
C
A
A
So
I
think
my
scale
I
don't
want
to
do
this
translate
here,
because
I
think
my
scale
that
I'm
using
to
transform
and
get
my
ex
already
has
the
offset
baked
into
it
yeah.
So
I
don't
need
to
do
this,
transform
because
I'm
calling
scale
with
the
transform
already
and
I
yeah
and
I
do
need
to
do
that.
That's,
okay,
so
that
so
I've
got
my
ex
and
I've
got
my
Y
where
I
want
the
marker
to
be
I
should
just
be
able
to
say
this
Y
you,
the
minus
six
I
still.
A
A
Bye
Jasper,
thanks
for
dropping
by
I,
appreciate
it
come
back
every
Thursday
I'll
be
here:
okay,
I
just
did
this
to
be
silly,
but
I'll
fix
it
later.
It
makes
it
obvious
that
it's
dumb
so
I'm
appending
this
too.
Oh,
let's
see
if
the
text
is
in
the
Dom,
that's
what
I
should
be
doing,
because
I
like
that
I
swear.
I
saw
something
the
text
should
be
in
the
Dom,
at
least
in
SVG
text
text
scalar-valued.
That's
the
other
text!
Here's
the
number
line,
here's
the
number
mark!
This
is
where
the
text
should
be
there.
A
It
is
okay,
so
the
number
marks
off
the
number
mark-
oh
the
whole
Trent.
Oh
I'm,
not
transforming
this
okay.
So
that's
in
the
wrong
place:
okay,
okay,
okay!
I-
can
fix
this.
I
can
fix
this,
so
the
number
line
I
did
that
I
did
the
transform
on
it
and
I
didn't
do
the
Train
I
do
need
to
do
this.
Transform
I
do
need
to
do
this,
transform
for.
B
C
A
A
So
I
did
this
a
little
spacing
just
put
seven
pixels
between
them.
I
guess
so.
My
mark
is
I'm
appending
a
rectangle,
stroke
width
fill
dadada
yata
said
it,
that's
it
that
was
it
so
I
don't
have.
Let's
make
the
mark,
oh,
that
the
reason
it
looks
off-center
is
because
well
I'm,
not
centering.
It
obviously
and
I
may
have
just
hard
coded
it
to
do
that.
A
C
B
A
Go
back
to
the
encoding
and
we'll
do
the
boxes
we'll
do
the
cells
all
right
all
right,
so
this
is
good
cuz,
it's
definitely
simpler.
I,
don't
know
what
this
is.
Oh,
this
was
the
encoding.
I
didn't
almost
almost
didn't
do
so
height
with
this
this
stuff,
the
styling
stuff
I'd
like
to
consistently
do
this
properly
in
the
right
way,
and
maybe
this
should
all
be
done
with
react.
I.
A
Wonder
if
that's
a
good
idea,
I,
don't
think
that
would
work,
though
no
that
wouldn't
work
I
have
to
do
it.
This
way,
I
have
to
do
it.
This
way,
I
think
this.
This
depends
on
the
Dom
that
this
is
already
created.
So
I
have
to
do
this
at
this
point.
I
can
alright,
but
that's
fine
I'm
used
to
doing
d3
stuff.
So
now
we
want
to
add
the
output
cells.
Okay,
so
we
added
the
number
line.
We
added
the
value
marker
and
now
we're
gonna.
Add
the
output
cells,
where.
C
A
I,
oh
right,
yeah,
this
ad
output
cells,
all
right
back
into
the
other
function.
Great
encoder
render
setup
value
access,
update
output,
bits,
I,
think
this
is
an
output
bit.
C
A
B
C
A
I
create
an
encoding
right
here.
The
encoding
is
actually
sent
in
here,
so
I
haven't
gotten
to
the
point
of
creating
encoding.
Yet
that
is
going
to
require
a
simple
HTML
or
encoder.
That's
what
we're
going
to
actually
use
to
do
the
encoding
so
we'll
hook
that
up
in
a
moment,
but
for
now
let's
just
create.
A
Let's
just
see,
here's
the
thing
every
time
the
value
updates.
We
have
to
update
the
encoding
as
well,
so,
for
example,
as
soon
as
this
so
so
I'm
going
to
add
a
function
to
this
simple
scale,
encoder
called
encode
and
what
its
gonna
do.
Is
it's
basically
going
to
call
the
scalar
encoder
on
its
value
and
set
its
state.
A
A
A
C
A
A
Let's,
just
let's
just
do
it
like
this,
let
and
code
and
coding
equal
that
and
then
I'm
just
gonna
mark
I,
don't
know
for
I'm
just
gonna.
Do
this
real
stupid,
okay,
encoding,
0
equals
1
I
just
want
something:
I'm,
just
gonna
I'm,
just
gonna
set
the
first
few
bits
and
then
we'll
set
up
the
encoder
later.
Ok,
that's
all
that's
all
I'm
doing
the
turn
encoding
and
and
so
for
now
all
I'm
gonna
do
is
I'm
gonna
set
the
stay
up,
so
it
has
an
encoding
I.
A
A
A
A
A
So
this
has
to
do
with
hovering
and
we'll
get
to
this
I'm.
Hoping
I
can
maybe
cut
back
on
this
code
here,
but
I
do
think.
I'm
gonna
need
this
rectangle
stuff
top
margin
padding,
so
so
I'm
gonna
give
my
I
already
know
the
the
main
diagram
offset.
So
this
is
going
to
be
offset
even
further
and
that's
sort
of
what
the
top
margin
and
padding
are
about.
Let's
take
this
and
get
to
the
point
where
we
exit
and
leave
it
leave
it
at
that.
A
A
It
and
then
it's
gonna,
that's
gonna
work.
Obviously
all
right,
so
I
got
a
top
margin
of
padding
a
bit.
So
it's
gonna,
be
this
dot
state
dot
and
coding
dot
length.
No,
no.
This
dot
state
got
bits.
I
can
I.
Think
I
can
I.
Think
I
can
assume
that
max
width
minus
padding
times
two
bits
to
output
display
okay.
So
this
is
a
linear
scale.
I'm
gonna
be
using
that's
good.
That's
fine!.
C
A
A
A
A
Okay,
so
we've
got
our
our
group
and
I'm.
Just
gonna
call
this
G
at
this
point
and
not
star
G,
that's
more
important
to
train
that
between
that
classifier,
okay.
So
so,
basically,
this
treat
cells,
Rex
gets
called
for
every
rectangle
that
we
create
in
this
group.
That's
the
that's
the
idea
anyway,
yeah
it's
weird
people,
I've
had
two
people
randomly
come
in
here
and
ask
me
completely
unrelated
questions
about
programming
and
networking
and,
like
you've,
looked
at
my
description,
I'm,
a
I'm
programming
about
brains.
This
is
all
about
brains.
A
It
just
tells
you
there's
not
enough
people
in
science
and
technology
streaming
stuff,
they're,
testing,
I'm,
not
taking
a
test.
Okay,
so
output
group
is
not
up
a
group.
It's
just
G
we're
going
to
select
all
the
recs
in
here.
I!
Don't
need
to
call
it
a
bit
they're
the
only
the
only
recs
that
are
gonna
be
in
here.
I've
already
got
mine
coding
and
then
I'm
gonna
treat
them,
and
basically
it
just
tells
me
if
filled
e
on
color
stroke
darker,
oh.
A
A
A
Because
I'm
doing
this
in
the
constructor
and
I
haven't
set
the
state
yet
so
I'm
just
doing
this
a
little
bit
prematurely
so
I'll
just
do
it
like
this.
It's
okay,
it's
okay,
everything's,
fine,
everything's!
Fine!
No
need
no
reason
to
panic,
we'll
leave
it
like
that.
After
the
statist
status
they
have
to
theta
that
they'll,
say
state
dot
and
coat
and
and
code
coding
equals.
This
daca
coded
prop
stop
value,
and
if
we
do
it
this
way,
I
mean
jeez.
Why
don't
I?
A
A
A
Encoding
is
not
defined,
103
we're
getting
there.
That's
okay,
because
I
know
where
it's
at
this
dot
state
dot
the
coding,
okay
on
color
off
color,
not
to
fine,
okay,
so
others
stylee
things
we
can
and
we'll
get
to
the
fun
stuff
we'll
get
to
the
fun
styling
stuff.
Later
where's
on
color
was
sky,
blue
and
white.
Okay,
I'm
just
gonna
constant
these!
A
For
now
we
can
play
with
them
later
hoho
there
we
go
okay,
but
it's
not
in
the
right
place
and
the
bits
that
are
off
aren't
really
showing
up
well,
they
should
be,
they
should
have
okay,
so
it's
only
drawing
the
output
bits
that
are
on
none
of
them
that
are
off.
So
it's
probably
a
true
thief:
all
C
type
of
problem,
I'm
guessing.
A
A
A
A
A
Please
don't
tell
me
yeah
that
was
it
okay,
this
that's
I,
know,
there's
a
there's
a
react
way
that
I
can
specify
the
types
of
my
properties.
I
know
this
I
saw
this
when
I
was
looking
at
Redux.
So
let's
look
at
that.
I
remember
seeing
this
and
it
looks
it
looked
useful
here
we
go
there's
somewhere
here
we
go
okay,
so
prop
types.
A
This
prop
types
thing
so
like
if
I
create
is
this
am
I
on
the
right
track
here,
maybe
we'll,
if
you're
reading
this,
what
I
want
to
do
or
hearing
I
want
to
validate
some
of
the
properties,
so
that,
like
my
width,
is
an
integer
and
I
don't
have
to
parse
int
when
I
use
it.
So
is
this
something
I
can
do
using
prop
types
so
that
I
can
have
my
class
and.
A
Specify
somehow
prop
types,
yeah
prop
types,
okay,
good,
so
so
I
think
I'm
gonna,
try
and
do
this
then
so
it
looks
like
I
should
be
able
to
just
do
this
as
a
there's,
a
property
on
the
class
and
then
the
properties
coming
in
okay,
I'm
gonna,
try
this
real,
quick
and
then
and
then
hopefully,
I
can
take
out
that
person.
So,
let's
see,
if
we
can
do
this,
that's
gonna
be
here
ready
there.
So
I'm
gonna
get
prop
types.
A
A
B
A
A
A
A
A
B
A
A
Prop
type
number:
let
me
make
sure
that
I'm
doing
this
right,
yeah
and
so
I
just
add-
is
required
if
I
needed
to
be
required,
but
it
doesn't
cast
anything
object
taking
on
a
particular
shape.
You
can
change
any
of
them
as
required.
Make
sure
horniest
shown
with
strict
shaped
required
function
required
any
custom
property.
A
So
I'm
a
little
confused
because
I
expected
when
I
specified
these
prop
types,
that
the
properties
would
be
automatically
validated
and
I
assumed
to
do
that.
You'd
attempt
to
cast
them
into
one
of
those
property
types,
but
it
doesn't
actually
cast
any
of
them.
It
just
validates
them
so
I
wanted
this
bits
to
be
a
number
and
it's
still
a
string.
Even
after
applying
the
prop
types
here,
bits
number
is
required
any
any
clue
on
why
that
is
I
mean
I.
Can.
A
C
A
Saying
so
let
me
try
that
you
mean
if
I
do
this
can
I
take
out
this?
Oh,
my
goodness,
I
think
you
just
I
think
I
figured
you
help
me
figure
this
out,
so
I
don't
need
to
send
strings.
I
can
send
the
exact
values
I
just
have
to
parameterize
them.
This
one
is
gonna,
be
a
string.
So
that's
fine
for
now.
I
want
to
get
rid
of
this
eventually
I.
Don't
think
I
even
need
it
well.
A
A
A
A
C
A
A
If
I
have
an
entry
point,
if
I
just
put
in
index
here,
let's
try
something.
I
might
actually
put
this
off.
I'm
I
I
think
I'm
gonna
continue
putting
this
off
and
I
might
hook
this
up.
In
the
background,
it's
not
it's
sort
of
it's
not
very
exciting.
Let's
just
let's
continue
getting
this
working
and
and
once
we
have
something
once
we're
in
the
dynamic
realm,
then
it'll
be
interesting
to
see
the
encoder
value
changing
as
you
move,
but
for
right
now
it's
not
even
interesting,
we'll
just
hard
code
it
for
now.
A
A
C
C
A
This
is
right,
so
I've
got
my
yeah
with
I'm,
not
using
so
here's
the
thing
I've
got
a
different
padding
on
this
one
than
I
do
on
the
excuse
me.
So
this
Y
offset
and
an
X
offset
I
should
consider
that
for
the
entire
diagram
the
whole
the
whole
civil
scaler,
encoder
and
I'm,
using
it
to
set
up
where
the
number
line
is
and
where
the
value
marker
is
and
I
also
want
it
to
start
where
this
is,
but
I
also
have
additional
padding.
I,
don't
think
I
need
any
additional
padding.
A
B
A
Right
so
we've
got
no
interaction
or
anything
so
the
encoding,
I've,
I've
I've,
spread
out
but
I
think
that's
fine
I
think
it's
fine
spread
out.
It
doesn't
need
to
be
closed.
So
as
we
change.
This
should
be
super
easy
to
change.
If
I
want
to
make
this
105
and
500
bits
is
gonna.
Look
awful,
but
there
you
go.
Okay,
cool.
C
A
Right
we're
getting
there
getting
to
a
place,
we're
making
some
progress,
but
the
hard
part's
coming
up
the
interactivity
is
coming
up.
So
we
want
two
interactions
here.
This
is
the
actual
size
of
the
component.
I
had
it
zoomed
in
quite
a
bit,
but
I
am
gonna,
try
and
make
these
relatively
small,
500,
500,
pixels
or
so
I
think
just
so
that
it'd
be
nice
if
they
displayed
well
on
mobile
devices.
C
A
A
For
this
encoder
I'm
not
planning
on
re,
changing
the
min
and
Max
values,
the
only
thing
that's
going
to
change
is
the
the
value
you
know
where
the
marker
is
or
the
encoding
so
or
excuse
me
there
would
be
the
the
value
or
the
selected
cell,
because
that's
the
other
thing
that
changes
this
that's
what
this
is
the
selected
cell,
that's
in
response
to
Mouse
hover.
This
is
in
response
to
Mouse
hover,
so.
A
I'm
just
trying
to
think
what
should
I
add
now
should
I,
try
and
add
the
idea
of
a
selected
cell
cuz,
that's
gonna,
add
those
Bezier
curves
or
should
I
work
with
the
dynamic
portion
of
it
and
work
through
that
I'm.
Sorry
I'm,
starting
to
think
now
that
I
have
a
component
to
interact
with
I.
Have
this
value?
That's
what
I
should
work
with
so
I
want
to
onmouseover
this
something
on
I
mean
it
could
be
the
whole
component
mouse-over,
but
really
it's
the
axis.
A
A
A
this
is
a
function,
that's
being
attached
on
a
on
a
data
update,
so
KJ
SDS
is
an
observable
data
store,
and
these
are
saying
after
the
selected
output
bit
has
been
set.
Call
hover
range,
okay,
so
so,
basically
something
set
the
selected
output
bit.
What
we,
what
we
have,
we
don't
know
what
it
did
it,
yet
it
doesn't
matter
so
we're
gonna
get
two
selected
alpha
bit
and
hover
group
range
circle.
That
is
there's
a
lot
of
little
complicated
things
going
on
here.
So
this
this
is
one
hover,
I
think
that's
the
one!
A
D
A
For
me,
okay,
it's
been
handled,
update,
values,
this
update
value
is,
is
what
we
want
to
do
so
something
hovers
and
the
value
changes,
and
this
is
what
we
do
when
we
update
the
value
so
I
think
I.
Can
this
is
the
function
that
I'm
going
to
want
to
replicate
and
but
I
also
have
to
decide.
When
does
this
get
called,
and
it
looks
like
update
display.
A
Display
is
getting
called
after
render,
okay,
so
so
all
of
this
program
is
like
Lynch
pinned
on
this
J
SDS
observable
data
store,
so
the
program
starts
by
setting
a
value
and
by
setting
a
value
it
kicks
off
a
if
function.
You
know
an
update
function
so,
which
is
this
after
set
a
value,
render
and
that's
what
calls
update
display.
So
something
sets
the
value
elsewhere.
A
There
we
go
so
this
is
the
SVG
that
we
created
right
just
for
the
axis,
so
this
is
on
mouse
move
on
the
axis.
So
let's
do
something
like
this.
So
we're
this
is
where
reacts
on.
Click
I
think,
is
something
we
need.
We
should
look
at.
So
let
me
look
at
that.
Let
me
look
at
the
react
on
court
react
component
on
quick
because
that's
really
what's
gonna
happen.
A
Somebody's
gonna
click
on
this
thing
handling
events
with
react
elements
is
very
similar
to
handling
Dom,
so
I
just
give
it
an
on-click,
so
I
could
do
but
I
don't,
but
I
want
it
to
handle
its
own
on
click.
So
here's
an
action,
link
handle
click,
OK,
okay,
I
can
see
this
okay.
I
can
see
this
happening,
but
what,
if
I'm?
So
here's?
So
the
problem
is
maybe
there's
no
problem.
A
A
A
A
So
I
got
an
idea.
I
think
maybe
for
the
clicks
I
might
want
to
add
some
more.
Like
add
the
groups.
Add
the
G's
right
in
here
I'm
thinking
about
adding
the
groups
into
the
markup
instead
of
instead
of
I.
Won't
I
won't
add
the
dynamic
stuff.
But
you
know
all
these
groups,
like
the
output
class,
one
I
could
just
select
them.
You.
D
A
C
C
A
A
Yeah,
so
in
a
selection
does
it
find
all
there's
some
function?
You
can
call
select
all
select
the
pen
to
pen
dependents,
don't
like
selecting
all
of
us
selection,
its
select
off
or
select
I.
Think,
oh,
it's
probably
just
select
not
find
yeah.
There's
a
select
right
there,
so
I
think
I.
Can
you
select
on
the
parent,
not
certain.
D
A
A
A
A
A
A
A
A
A
A
A
A
A
A
It's
because
I'm
not
calling
by
and
right
I
hate
binding.
That's
that's
what
I'm
missing
is
this:
handle
click
equals
so
I
have
to
I
have
to
make
this
I
have
to
do
this
bind
or
else
I
can
use
public
class
field,
syntax
or
use
class
fields
to
correctly
bind
callbacks
public
class
fields
and
I'll
click
and
they'll
click.
Click
me
this
syntax
assures
this
is
bound
with
an
handle.
Click.
Oh
and
I'll.
Do
the
bind
that
seems
weird,
but
I
bind
it
I'm
binding.
A
A
A
D
A
A
B
A
A
C
B
B
C
A
So
it's
not
we're
gonna
have
to
transpose
it
or
translate
it
so,
and
we're
only
gonna
be
looking
at
X
and
I
need
to
make
sure
that
it's
over
the
axis
right.
This
is
oh.
This
should
only
work
when
it's
over
the
axis,
which
is
fine,
that's
we're
doing
a
mouse
move,
then
page
accent,
page
wise,
seems
legit.
A
A
A
A
No,
no!
That's
right!
We're
going
the
right
direction!
We're
gonna
use
this
to
go,
but
first
we
have
to
start
at
zero.
So
we
need
to
add
the
X
offset
and
then
we're
going
to
scale
it
I'm
going
to
add,
add
the
X
offset
so
this
number
line
here
and
the
marker
okay,
so
the
marker
we're
gonna,
use
the
same
scale
as
it.
A
A
B
A
A
A
D
A
C
A
A
C
A
So
I
understand
this:
I
can
do
onmousemove
equals
something
here,
but
I
can't
do
style
equals
here.
What
what
is
the
difference?
Oh
oh
yeah,
yeah!
It
wants
the
whole
thing.
Okay
order,
solid
red
one.
Pics
I
just
want
to
see
the
thing:
okay,
okay,
I
just
I
needed
to
see
the
boundaries
to
this
thing,
so
I'm
starting
the
axis
off.
Let's
do
this
to.
A
You
can't,
oh
you
can't
that's
right,
you
can't
you
can't
style
a
you
can't
style.
Svg
elements
like
this,
you
put
it
I,
can
put
it
around
the
I
got
to
do
it
with
I
got
to
draw
things.
That's
me
Jean,
okay,
so
that's
that's
style.
It's
not
gonna
work!
That's!
Okay!
It's
not
a
big
deal
this.
This
is
fine.
A
A
A
B
A
A
A
B
C
A
A
Okay,
where
were
we
okay,
yeah
yeah,
so
I
was
just
messing
with
the
offsets,
for
these
I
wanted
something
a
little
simpler,
so
I
don't
want
to
have
a
global,
not
global,
but
a
diagram
specific
offset
every
every
one
of
those
little
groups
needs
to
have
its
own
offset.
That's
what
I
was
that's.
What
I'm
getting
to
and
I
was
treating
the
offset
as
if
it
were
sort
of.
B
A
I
certainly
want
to
and
here's
another
thing
this,
this
text
value
this
text
thing
should
be
in
the
group.
Let's
see,
let's
fit,
let's
see
if
we
can
fix
that.
That
would
make
me
feel
a
little
better
and
then
have
some
place
to
something
to
improve
there,
but
this
isn't
where
I
want
this
I
want
this
I'm
still
getting
used
to
this
whole
react
stick.
B
A
These
should
be
relative
to
the
groups,
so
I'm
gonna
take
them
out.
No
I'm
gonna
I'm
gonna
move
it
I'll,
move
it
where
I
want,
but
for
right
now,
let's
put
it
0
&
0
0
0
same
here
same
for
this,
so
this
is
gonna.
Make
it
look
bad.
It's
gonna
be
right
on
top
of
each
other,
you
can't
even
see
them
because
they're
rendered
up
above
threshold,
but
we'll
move
everything
down.
Now
we
will
first
offset
the
this
group.
A
A
The
value
marker,
let's
okay,
the
value
marker-
let's
put
it
in
the
same-
let's
put
it
in
the
same
place-
let's
let's
give
it,
let's
put
it
inside
the
number
line,
so
yeah
yeah,
let's
put
inside
the
number
line,
and
now
when
we
go
here,
value,
has
a
number
line
value
marker
I,
don't
need
this
I'm,
just
gonna.
Take
it
off!
So
there's
no
value
marker
group,
we're
gonna,
just
add
the
value
marker
right
on
the
number
line:
okay,
good
and
that
works
fine,
I,
don't
think
we
really
didn't
need
a
group
for
that.
A
D
C
A
There
is
a
group
in
here
it's
there,
so
why
won't
this
translate
it
to
40,
that's
odd,
so
this
this
group
did
not
get
translated
like
I
thought
it
would
number
line,
translate.
0-0
fill
9
fonts.
A
A
A
D
A
A
A
A
A
C
C
A
A
Run
run,
run,
I,
think
I'm
messing
with
the
wrong
one.
I
was
just
messing
with
the
wrong
code.
Okay
close
this,
and
let's
just
focus
on
getting
this
this
one
exactly
the
way
I
want.
Okay,
so
it
doesn't
need
to
be
40
down.
It
can
be
maybe
30
down
and
then
also,
why
didn't
this
thing
come
with
it?
Why
didn't
the
the
text
come
with
it?
A
C
A
A
A
D
A
A
C
A
C
A
A
C
A
Sorry
Falco
I
was
I
was
lost
in
my
own
world,
hi
Shane
Shane,
hopefully,
I
said
all
right,
Shane
I'm
doing
some
d3.js
trying
to
build
some
HTML
is
a
shion's
and
it
broke
I'm.
Getting
towards
this.
This
is
I'm
moving
this
from
into
a
react
component.
This
is
the
first
in
a
series
of
interactive
visualizations.
I
will
be
moving
to
react,
so
I
am
sort
of
in
the
middle
of
this
and
fifty
this
is
great.
Okay,
x,
ì,
óù.
A
C
C
A
A
I
should
have
realized
that
a
long
time
ago.
Okay,
so
we're
not
doing
this
offset
anymore,
the
only
place
I
set
the
offset
up
was
right
here:
okay
and
I-
just
coded
it
right
in
there,
so
our
Valda
screen
and
screen
to
vowel
only
take
the
gutters
into
account.
They
will
take
the
gutters
into
account
X
on
the
x
dimension
and
then
let's
get
the
encoding
working
again.
A
B
A
B
A
A
A
Rick's
out
I
think
I
think
I'm
about
to
turn
into
you
guys.
I'm
I
am
I,
think
I'm
gonna.
Stop
it
right
here,
going
it's
pretty
strong,
four
or
five
hours,
so
I'm
going
to
take
off
four
hours.
That's
good
thanks!
Everybody
for
joining
I
will
be
back
on
Thursday
and
we
will
I'm
just
going
to
push
this
I'm
just
going
to
push
this
to
upstream
master.
Nobody
else
is
working
on
this
right
now
and
if
anybody
wants
to
help
out,
maybe
before
I
take
off,
let
me
just
update
my
Trello
stuff.
A
A
Interactions
or
data
events,
yet
okay,
that's
still
to
do.
Data
sources
are
still
to
do.
Converting
is
still
to
do,
are
still
working
pull
out.
Statically
serve
blog
post
code.
That's
easy,
I,
just
find
it
just
so.
I
still
need
to
find
a
display
tool
for
code
examples,
meaning
like
code,
syntax,
highlighting
the
law
check.
Conversion
new
favicon
I
did
that
consistent
diagram,
styling
pattern,
still
sort
of
working
that
out
I'm,
not
doing
deployment
or
converting
CoffeeScript
yet
so
this
is
still
working
on
the
same
same
things.
A
This
is
where
I'm
at
I
I
am
NOT
working
really
working
on
this.
Yet
so
I'll
put
that
to
the
side.
If
anybody
is
interested
in
picking
up
one
of
these
go
for
it.
In
the
meantime,
I'm
going
to
keep
working
on
this
simple,
scalar,
encoder
I'll
be
back
on
the
next
Thursday
and
week
to
continue
working
on
that.
So
thanks
everybody
for
for
watching
and
I'm
going
to
stop
streaming
right
now,
so
take
care.