►
Description
The rising complexity of modern software is pushing the limits of human understanding. Fortunately, visualization is here to help, allowing us to see surprising patterns in data at a glance!
In this session, you will learn how visualization can help us understand both the static structure and runtime behavior of software. Through visualization, you will gain a deeper understanding of your code, make better-informed design decisions, and have new tools for sharing insights with your team.
About GitHub Universe:
GitHub Universe is a two-day conference dedicated to the creativity and curiosity of the largest software community in the world. Sessions cover topics from team culture to open source software across industries and technologies.
For more information on GitHub Universe, check the website:
https://githubuniverse.com
A
Hi
thanks
so
much
for
coming.
My
name
is
melody
and
I
lead
a
company
called
observable.
With
my
co-founder
and
friend
Mike
Bostock,
you
may
know
Mike
he
created
d3,
which
is
an
open-source
data.
Visualization
framework
and
I'm
super
grateful
to
work
with
everyone
at
on
the
observable
team,
so
I've
been
in
software
all
my
career,
developing
at
startups
and
enterprise
companies.
I
was
at
Google
for
quite
a
bit
of
time,
and
the
thing
that
I
was
really
passionate
about
this
point
in
my
career
is
how
we
help
developers
become
happy
and
productive.
A
So
I
was
working
on
a
bunch
of
developer
tools.
You
know
billions
of
lines
of
code
builds
and
tests.
How
you
run
services
at
scale
and
understand,
what's
happening
with
the
software
observable,
is
a
magic
notebook
for
exploring
data
and
thinking
with
code,
and
most
of
our
users
are
developers
so
I'm
super
passionate
about
how
visualization
can
help
us,
as
developers,
be
smarter
and
move
faster
and
have
a
greater
understanding
about
the
code
that
we're
writing.
A
So
today,
I'm
gonna
make
a
case
that
visualization
of
software
is
an
essential
tool
for
us,
as
developers
and
many
of
the
examples
that
I'll
show
you
today
come
from
community
members
in
observable,
so
other
developers
that
are
trying
to
use
visualization
for
software
and
I
hope
that
you
walk
away
with
the
basic
knowledge
of
a
few
powerful
code,
visualization
tools-
maybe
some
things
you
haven't
seen
before-
that
you
can
use
immediately
sound
good,
yeah,
okay
survey
time,
how
many
people
here
write
code.
The
majority
of
your
day
raise
your
hand
nice.
A
How
many
people
like
worried
about
managing
people
that
are
writing
software
and
maybe
making
cases
for
better
software
development,
raise
your
hand
awesome
how
many
people
have
created
visualizations
before
nice.
All
right.
The
challenge
is
ahead.
I
need
to
show
you
some
new
stuff.
Okay,
well
I,
hope
to
share
a
bit
for
everyone
here.
A
A
A
So
it's
no
surprise
that
complexity
is
increasing
right
and
complexity
has
a
real
cost
rust,
both
in
terms
of
correctness
and
speed,
so
complexity
challenges,
correctness
in
that
the
software
may
not
be
doing
what
we
actually
think
it
should
do
or
expect
it
to
do
it's
often
unstable
or
buggy
or
insecure,
and
there's
a
lot
of
examples,
but
we
can
think
of
some
big
ones
right
like
event
stream
or
heartbleed
or
the
737
max.
You
know
there's
plenty
of
evidence
that
shows
we
don't
understand
what
our
software
is
doing.
It
can
cause
real
damage.
A
A
These
are
some
words
of
wisdom
from
Nancy
Levinson.
We
are
attempting
to
build
systems
that
are
beyond
our
ability
to
intellectually
manage.
So
if
we
don't
do
something
to
improve
how
we
develop
and
understand
software,
the
complexity
is
going
to
overwhelm
us
if
it
hasn't
already
and
that
cost
that
I
was
just
talking
about
it
doesn't
occur
all
at
once
right
it.
It
takes
time
it
like
creeps
up
on
us
slowly
over
and
over
it's
insidious,
any
Brett
Victor
fans
in
the
audience.
A
Anyone,
oh
thanks,
I'm,
a
big
fan,
okay,
the
power
to
understand
and
predict
the
quantities
of
the
world
should
not
be
restricted
to
those
with
a
freakish
knack
for
manipulating
abstract
symbols.
Manipulating
abstract
symbols.
Isn't
that
what
it
means
to
write
code,
it's
kind
of
crazy
to
think
about,
but
by
symbols
he
doesn't
mean
that
we're
manipulating
the
outputs
of
our
program
directly,
but
instead
we're
working
in
abstractions
and
these
abstractions
are
really
powerful
but
sometimes
they're
difficult
to
grasp
so
bring
together
like
an
ever-growing
set
of
complex
abstractions
and
we
as
developers.
A
We
need
super
powers
as
opposed
to
just
this
freakish
knack
that
we
may
have
to
write
code.
Okay,
so
I'm
gonna
go
back
to
that
formula.
Developers,
collaboration
complexity,
okay,
so
let's
talk
about
the
humans
right,
we
heard
from
October's
40
million
developers
more
developers.
Many
more
people
writing
software
right.
It's
just
not
a
couple
more
or
a
few,
and
with
every
industry
investing
we
can
expect
that
population
of
developers
to
continue
to
grow.
A
Today
is
software:
it's
either
open
source
or
it's
built
on
it
extensively,
and
this
means
that
we
as
developers
are
more
dependent
on
code
written
by
other
people
or
we're
more
likely
to
share
the
code
that
we've
written
so
many
more
humans
writing
code.
There's
more
ramp
up
for
all
of
us,
maybe
bigger
teams,
larger
software
projects
and
distributed
teams.
A
So,
let's
go
back
to
the
beginning,
hello,
world
right,
simple
software
that
we
write.
My
point
here
is
that
soft
developing
software,
it's
creative
and
it's
iterative
right.
It
can
start
simple
and
grow
quickly
to
be
complex.
We
have
an
idea
as
a
developer.
We
iterate
and
that
guides
our
creation,
and
sometimes
we
don't
know
exactly
what
we're
doing.
We
don't
know
what
we
should
do.
We
make
it
up
as
we
go
along
great.
We
tinker
reduce
trial
and
error.
We
test
our
hypothesis
and
the
more
creation
that
we
do
in
software.
A
The
more
change
there
is
so
hello
world
quickly
becomes
hello,
churn,
more
developers,
more
collaboration
on
software,
more
complexity.
You
know,
there's
significant
duplication
and
fragmentation
in
the
ecosystem,
that
we
have
to
search
for
tools
and
different
frameworks
and
different
libraries,
and
so
we
often
don't
know
what
to
use
when
the
tools
that
we're
dependent
upon
are
released
frequently.
So
we
have
to
spend
more
time
learning
how
to
use
other
people's
code,
our
teaching
them
to
use
ours.
So
there's
more
churn
in
who
and
how
much
software
is
being
written.
A
But
we
don't
write
software
alone
right.
We
don't
write
it
for
ourselves,
so
our
programming
should
favor
collaboration
and
we
need
to
have
different
ways
to
collaborate.
We
need
to
move
beyond
just
static
text
files-
okay,
but
let's
remember
some
other
important
factors
to
our
brains
right
time.
It's
finite!
We
want
to
make
best
use
of
both
so
Don
Norman
I'm
familiar
with
Don
Norman,
it's
the
father
of
cognitive
design.
He
has
this
quote,
which
I
love
the
power
of
the
unaided
mind
is
greatly
exaggerated.
It
is
things
that
make
us
smart.
A
Ok,
so
if
our
minds
need
aids
or
tools,
what
does
that
mean?
I
mean
we
don't
design
new
aids
or
tools
to
perform
mundane
tasks
right
or
automate
away?
Our
toll
I
mean
we
do
do
that,
but
we
also
want
to
build
tools
that
actually
have
the
capacity
to
make
us
smarter.
So
what
is
he
talking
about
things
here?
Well,
you
can
look
to
writing
as
of
the
most
successful
cognitive
tools
or
things,
and
that's
why
we
write
source
code
to
produce
programs.
A
So
this
is
my
case
for
why
we
as
developers
need
better
cognitive
tools.
Okay,
so
let's
start
talking
about
visualization,
visualization
and
graphics.
More
generally
are
powerful
tools
for
thinking.
We
should
have
them
directly
available
to
us
in
our
programming
environment.
Understand
our
software
to
review
it
to
explain
it
and
visualization.
It's
it's
a
means
to
an
end,
and
that
means
that
means
is
to
insight
for
us
as
developers.
We
generate
ideas
to
prove
to
improve
our
research
and
our
software
creation.
A
We
gain
insights
to
make
better
decisions
and
we
explain
things
to
support
learning
and
teaching.
So
before
I
show
you
some
examples
from
the
community.
I
just
wanted
to
show
you
the
notebook
that
I
mentioned
we're
using
Java,
Script
right,
very
popular
language.
The
code
is
running
automatically,
so
you
get
instant
feedback,
you
can
add
interaction
to
explore
the
diagram
and
you
can
have
access
to
your.
You
know
libraries
and
favorite
web
technologies,
so
this
is,
it's
gonna
run
fast,
but
this
is
an
example
of
creating
a
world
map
using
d3.
A
So
you
can
modify
the
code,
you
can
add
components
to
interact
with
the
visualization,
and
this
is
the
interface
behind
many
of
the
visualizations
I'm
going
to
show
you
today
again
created
by
members
of
the
community,
and
you
can
see
here.
You
know
the
code
kind
of
ran
quickly,
but
we
have
ways
to
interact
and
change
the
visualization
as
its
as
it's
being
created.
So
my
invitation
to
all
of
us
today
we
have
half
an
hour.
More
of
your
time
is:
let's
be
smarter
developers
together
visualization.
A
A
Visualization
helps
us
be
smarter
by
under
exposing
the
underlying
data
and
code
to
allow
us
to
question
to
explore
and
to
derive
new
insights
in
our
software,
and
we
can
use
it
to
better
understand
those.
You
know
abstract
symbols,
right
our
processes
and
maybe
some
other
important
things
too,
like
how
we
can
communicate
more
effectively
with
each
other.
So
I'm
going
to
talk
through
a
bunch
of
examples
now
to
show
you
some
visual
tools
and
there's
two
categories
of
these:
the
first
one
is
kind
of
the
landscape
or
the
overview.
A
How
do
we
understand,
structure
and
flow
and
invocations
and
relationships
with
the
intent
of
making
our
code
better?
It
could
be
to
refactor
to
maintain
it
to
develop
new
features,
but
just
to
create
positive
change
in
our
software,
and
the
second
category
really
has
to
do
with
getting
into
the
weeds
and
the
details
of
things
like
decisions
we
make
around
algorithms
or
particular
you
know
formulas.
We
need
to
model
in
our
software.
A
You
ready
yeah,
okay,
so
the
first
one
we
may
not
think
about
it
while
we're
writing
code,
but
it's
really
important
to
understand
structures
and
flows
with
the
intent
that
we're
always
having
to
learn
as
we're
writing
software,
and
we
want
to
act
on
what
we
learn.
So
anyone
ever
struggle
with
understanding
packages.
A
Someone
has
to
raise
their
hand,
no
dependencies,
you
don't
struggle
with
dependencies.
Oh
my
gosh,
maybe
I'm
just
strange
well
hello,
dependency
graph.
This
is
d3
s,
dependency
graphed,
and
this
was
made
using
graph
is
and
observable-
and
this
is
pretty
much
as
simple
as
it
gets.
D3
doesn't
have
any
external
dependencies
and
it
has
just
a
few
development
dependencies
which
have
to
do
with
bundling
and
testing.
A
A
Hello
data
flow
diagram.
So
this
is
an
example
of
a
diagram
modeling
how
data
flows
through
code,
each
arrow
indicates
a
dependency
between
two
cells.
So
that
d3
cell,
that
I
showed
you
before
you
can
see
it
there
on
the
left.
It
represents
the
d3
library
and
it's
referenced
by
many
cells
makes
sense.
So
this
graph
is
computed
automatically
using
static
analysis
of
the
code,
but
I
think
the
thing
that
I
look
at
here
is
when
we're
writing
code
and
we're
developing
software.
A
We
may
sort
of
think
about
it
in
the
beginning,
but
how
often
do
we
go
back
and
assess
like
how
complexity
has
built
up
over
time?
And
these
graphs
are
a
really
good
way
for
us
to
visually,
see
and
come
back
to
how's
the
code
changing
and
how's
the
flow
change,
as
maybe
many
more
of
our
teammates,
have
been
modifying
the
code
and
here's
another
interesting
way
to
look
at
it,
which
is
actually
animating
the
flow
of
data
through
the
graph.
So
this
is
a
video
of
code.
That's
running
on
live
data
flow.
A
You
can
see
the
order
in
which
the
cells
run.
It
runs
in
topological
order.
Rather
than
top
down,
we
can
automatically
rerun
cells
when
code
or
state
changes
and
we're
kind
of
stepping
through
the
evaluation
of
this
notebook
and
able
to
visually,
see,
what's
happening
so
the
previous
one.
You
can
visualize
statically,
but
you
can
also
add
animations,
so
you
can
learn
the
flow
of
what's
happening
in
your
software.
A
What
about
state
management
all
right?
We're
thinking
about
the
software
that
we're
writing
well,
hello
graph.
This
graph
is,
is
super
easy
and
great
for
understanding,
state
machines,
parsers
protocols
and
data
structures
like
linked
lists.
So
what
you're
seeing
on
the
bottom
is
code
actually
producing
the
diagram
above.
So
this
is
a
toy
example.
You
have
to
use
your
imagination
for
a
problem
that
you
may
want
to
solve
in
your
own
work,
but
each
node
corresponds
to
a
different
state.
A
You
know
there's
many
different
ways
that
we
can
create
diagrams
by
hand
on
paper
at
the
whiteboard
or
piping
data
through
them.
But
graph
is
a
really
easy
way
to
start
hankering.
You
don't
have
to
think
about
the
layout
and
you
can
see
right
we're
assigning
labels
to
the
diagram
and
the
code.
We're
gonna
add
some
formatting
here
to
sort
of
indicate
the
state
through
different
shapes
and
then
we're
actually
going
to
be
able
to
see
how
the
state
flows
and
and
essentially
using
visual
modeling
like
this,
can
make
it
easier.
A
When
we
actually
sit
down
to
write
code,
you
could
come
back
and
tinker.
I
mean
I.
Think
that
took
us
like
20
seconds
to
do.
Okay,
so
lots
around
dependencies
and
being
able
to
visually
see
things.
What
about
when
we
want
to
understand
different
types
of
structures
like
file
systems
files
and
folders,
hello,
zoomable,
sunburst,
I
love
this
one.
So
this
gives
you
a
macro
view
and
then
the
micro
view
of
individual
details.
So
what
you're
seeing
is
spatial
they
files
and
folders
with
relative
size?
A
You
can
visually,
see
drill
down
and
explore
and
get
a
sense
of
the
complexity
and
size
of
the
software
that
you're
writing
or
you're
accessing
and
some
of
these
examples
you
can
just
easily
fork.
Add
your
own
data
and
make
it
your
own.
But
it's
pretty
cool
to
visually,
be
able
to
see
those
relative
sizes
as
you're
looking
at
as
you're
looking
at
the
structure.
A
But
what
about,
if
you're,
trying
to
understand
the
structure
of
your
code?
What
can
you
use
to
help
you
do
that
hello
radial
tidy
tree?
This
visualization
creates
a
hierarchal
node
link
diagram.
This
is
the
code
hierarchy
for
flair,
which
is
a
visualization
framework,
so
it's
modeling
the
leaves
and
nodes
and
code
and
I
think
by
looking
at
it's
kind
of
easily
understandable
right.
You
can
kind
of
immediately
start
to
grok
what's
happening
in
this
code
versus
moving
in
and
out
of
directories.
A
A
Okay.
So
what
about
understanding
the
relationships
in
the
code
that
we're
working
with
I
think
visualizations?
One
of
the
many
ways
that
they're
really
helpful
is
they
can
help
us
spot,
find
hotspots
in
our
code
to
sort
like
start
to
detangle.
The
hair
ball
when
complexity
builds
up,
and
this
provides
us
with
opportunities
to
improve,
restructure
refactor
our
code,
hello,
hierarchical
edge,
bundling
love
it
so
beautiful.
This
chart
shows
the
relationship
among
classes
in
a
software
hierarchy.
Each
directed
edge
going
from
source
to
target
corresponds
with
an
import.
A
So
let's
look
at
some
details,
so
the
links
go
from
blue
to
red,
so
packages
with
more
blue
links
have
more
outgoing
edges.
They
depend
on
other
packages,
whereas
the
packages
with
more
red
links,
they
have
more
incoming
edges,
they're
dependent
upon
by
other
packages,
and
the
packages
with
both
the
blue
and
the
red
links
have
both
incoming
and
outgoing
edges,
they're
really
central
and
tightly
coupled,
but
you
could
also
see
where
there
a
bunch
of
just
only
local
dependencies,
it's
pretty
self
contained
in
the
code.
Maybe
maybe
that's
fine.
A
You
don't
need
to
worry
about
that
code,
but
here's
an
example
of
data
sprite.
It
has
24
incoming
dependencies
so
that
data
package,
it's
pretty
central
I,
think
the
thing
for
us
to
think
about
is
like
okay,
so
say
we're
gonna,
go
in
and
modify
that
code
or
access
that
code.
Like
understanding
its
dependencies
and
visually
being
able
to
explore
that
can
really
help
us
with
our
understanding
and
what
we
do
next
in
the
code.
Here's
another
example
of
seeing
relationships
between
core
data
code,
so
this
guides
us
sorry
I
have
to
go
back.
A
It
guides
us
to
look
for
places
to
understand
the
relationships
decide
you
know.
Do
we
want
to
refactor?
Do
we
want
to
make
some
coding
changes
and
I
think
that
the
interesting
thing
about
using
a
visualization
is
sometimes
you
can
be
surprised
right?
You
can
find
things
you
didn't
know
we're
there
and
you
can
use
the
visualization
to
really
help
yourself
understand
the
relationships
between
those
code
and,
potentially,
you
know,
reduce
or
minimize
those
relationships.
If
that
makes
sense,
you
already
saw
this,
but
it
does
come
in
rainbow
which
I
really
like
okay.
A
So
we
talked
about
structures
and
relationships
and
how
to
you
data
flow
through
our
code.
What
about
the
humans
right?
What
about
the
developers?
So
what?
If
we
want
to
learn
more
about
authors
and
contributors,
think
about
open
source
contributions?
So
what
if
you
want
to
understand
more
about?
What's
happened
with
a
particular
library
that
you're
interested
in
contributing
to
ok,
so
hello,
edit
visualization.
Now
this
is
an
old
visualization.
A
It's
an
example
of
edits
in
Wikipedia,
so
each
color
corresponds
to
a
different
author
and
we
can
see
the
first
version
on
the
far
left.
You
can
see
content
being
inserted
and
removed
the
black
squares
and
you
can
observe
how
the
content
grows
over
time
and
how
it
was
added
in.
But
do
you
see
that
zigzag
up
there?
That's
an
edit
war,
or
maybe
we
should
call
it
like
an
edit
dialog
and
discussion
right.
A
What
about
this
example?
You
know
hello
code,
def,
probably
all
seen
various
flavors
of
this
right
examples
of
using
visual
design
to
improve
the
readability
of
get
blame
for
a
file
and
react,
so
you
can
see
which
parts
of
the
file
have
changed
more
recently
and
who
the
frequent
authors
are
Street
super
helpful
context
for
us
as
we're
writing
software
or
hello
bar
chart
race.
So
this
is
a
way
to
view
data
over
time.
So
this
is
7
years
of
react
development
in
30
seconds.
A
It's
like
mesmerizing,
ok,
so,
admittedly,
this
is
only
looking
at
inserted
and
deleted
lines,
which
is
not
a
good
proxy
for
value,
but
you
can
see
the
activity
of
the
contributors
over
time
and
it
really,
you
know
you
can
kind
of
have
some
insight
into
what's
what's
happening
with
this
code,
who's
involved
who's
contributing
to
it
that's
fascinating
to
watch.
Is
it
done?
Ok,
so
that
was
a
bit
about
the
high
level
structure
and
flow
and
invitations
where
we
understand
visually
and
then
we're
able
to
make
changes.
A
Positive
changes
in
the
software
so
now
I'm
going
to
drill
into
some
deets
like
really
go
into
the
weeds,
and
there
are
times
right
when
we
need
to
interact
and
explore
when
we're
making
design
and
implementation
decisions.
So,
for
example,
how
do
we
understand
algorithms?
How
do
we
make
decisions
around
the
algorithms
to
use?
How
do
we
know
it's
running?
What
do
we
or
do
we
understand
when
it's
done
so
hello,
algorithm,
visualizations,
so
I'm
gonna
walk
through
a
couple
of
examples
of
these
just
to
demonstrate
alternatives,
but
consider
the
simple
problem
of
generating.
A
A
Okay.
So
what
if
we
care
about
the
points
being
evenly
distributed
right?
It's
not
great.
You've
got
these
points
where
it's
too
sparse,
there's
no
dots
or
too
dense.
There's
you
know
too
many.
So
how
do
we
get
more,
even
coverage?
So
this
is
a
visualization,
that's
built
modeling,
the
algorithm
in
code
and
then
playing
that
algorithm
over.
So
this
is
a
different
approach.
A
So
here's
what
it
looks
like
when
it's
running
this
is
Mitchell's
best
candidate
algorithm.
The
result
is
more
even
coverage,
less
clumping,
look
better
yeah,
maybe
not
sure.
Okay,
here's
another
algorithm,
that's
even
better
for
the
task.
This
is
Britain's
algorithm
and
it
uses
a
grid
to
tell
when
a
candidate
samples
are
too
close,
it
makes
it
more
efficient
than
Mitchell's
algorithm.
A
So
I'm
not
gonna,
go
into
a
lot
of
detail
here,
but
hopefully
you
can
see
it
just
kind
of
get
a
sense
of
how
the
algorithms
running
on
the
grid
and
here's
what
Britain's
looks
like
when
it's
running
it
expands
progressively
out
from
the
middle,
and
you
know.
Hopefully,
you
can
see
the
difference,
usually
when
I
run
through
both
of
these
of
how
the
algorithms
are
different.
A
So,
based
on
what
the
problem
you're
trying
to
solve,
you
may
decide
that
one
algorithm
is
better
than
the
other,
and
visualization
can
help
you
do
that
it
can
help.
You
explore
the
algorithm
and
here's
just
a
slightly
different
view
where
you
can
see
the
relationship
of
the
existing
samples
and
the
neighboring
samples
as
they
spawn
out,
and
this
is
a
variation
of
Britten's,
where
it
picks
the
most
recent
sample
and
to
expand
from
rather
than
a
random
sample
and
just
kind
of
goes
like
wildly
picking
the
points.
A
I
think
the
fun
thing
about
developing
visualizations
is
that
you
can
kind
of
tweak
the
code
and
see
the
effect
in
the
visualization.
So
I
can
see
how
things
are
working
and
I
can
write
better
code
visualization.
It
really
reinforces
our
understanding
as
we're
building
and
if
we
incorporate
visualization
into
our
process,
we
can
learn
and
move
faster.
A
So
a
couple
more
examples:
this
is
one
from
a
developer,
who's,
trying
to
understand
and
modern
model
and
algorithm
they're
using.
So
this
is
Hello
terrain
visualization.
This
is
reconstructing
a
mesh
or
height
map
of
terrain
of
Mount
Fuji.
So
it's
a
visualization
of
mesh
retrieval
for
a
hierarchical
data
structure.
That's
called
right,
triangulated
irregular
network.
It's
a
mouthful!
You
have
these
two
big
triangles
and
they
recursively
subdivide
when
they
don't
approximate
the
underlying
surface.
Well
enough.
A
So
this
is
an
algorithm
where
we
can
control
the
level
of
detail,
either
less
detail
or
more
detail
and
then
construct
the
mesh
at
the
right
level.
This
is
an
example
of
using
visualization
to
understand
different
thresholds
and
algorithms,
see
where
it
works
and
see
where
it
doesn't,
and
we
don't
have
to
just
read
the
code:
the
code
that
Vladimir
wrote
we
can
see
and
actually
working
on
real
data.
A
A
You
know
for
California
the
name
California
on
the
map
of
California,
so
you
can
see
at
the
top
we're
using
sliders
to
estimate
how
large
we
can
make
the
text
without
over
running
the
shapes
borders
and
it
just
walks
the
centerline
measuring
the
distance
from
the
center,
and
this
was
an
example
that
a
developer
put
together.
It's
like
six
steps
with
code.
You
can
copy
it.
A
Maybe
you
want
to
help
people
understand,
dinette,
the
behavior
of
dynamic
systems,
so
we
have
a
pair
of
differential
equations
describing
population,
mice,
prey
and
cats,
predators,
no
offense
to
cat
owners
or
mice
owners.
But
if
we
change
the
starting
population
of
the
cats
or
the
mice
right,
we
can
see
how
this
affects
the
population
over
time.
The
populations
are
cyclical
right,
as
the
number
of
mice
increases.
A
But
there's
a
final
point:
I
want
to
raise,
and
that
is
we
collaborate
around
software
right.
It's
a
team,
sport
and
so
sometimes
visualizations
are
helpful
to
share
with
others
right
visualization
isn't
something
we
do
for
ourselves.
We
want
to
share
insights
with
other
people,
so
maybe
you
need
to
convince
your
co-workers
that
your
code
needs
to
be
reformed
into
a
gigantic
ball
of
mud.
A
You
can
use
visualization
to
strengthen
your
argument,
so
this
chart
shows
the
number
of
lines
of
code
of
a
set
of
react
components
in
observable
my
company's
code
base,
so
that
big
one
there
is
the
notebook
component
and
it
needed
to
be
refactored
as
the
application
grew
a
while
ago.
But
the
developer
put
this
together
on
the
team
and
two
weeks
ago
we
kicked
off
a
project
to
refactor
it
because
we
just
like
we
knew,
was
getting
bad,
but
we
just
didn't
know
how
bad
it
was.
A
So
here's
a
way
that
you
can
actually
motivate
toward
positive
change
in
your
in
your
code
or
maybe
you
just
want
to
help
people
understand
a
programming,
language
or
concepts
right.
Here's
an
example
from
Julia
Evans
of
the
anatomy
of
a
sequel,
query:
new
visualizations,
don't
have
to
be
traditional
charts.
They
can
be
diagrams
that
have
pictures
and
concepts
using
color
using
text,
so
I
hope
you've
learned
several
new,
powerful
visualization
tools
and
some
examples
that
you
can
walk
away
and
try.
A
But
I
just
want
to
come
back
to
how
visualization
benefits
us,
as
developers
I,
think
it's
fun
I
mean
you
can
watch
and
interact
with
code
and
algorithms.
It's
fascinating
right.
It's
much
more
fun
than
interacting
with
a
static
text.
File
and
visualization
helps
us
see
and
understand
at
a
deeper
level,
and
maybe
we
have
more
appreciation
for
the
code
or
algorithm
that
we're
using
what
helps
us
learn
by
visualizing
the
output
of
our
code.
A
Our
understanding
of
software
is
more
intuitive
and
accessible,
so
like
a
couple
more
broad
Victor
quotes
so
bear
with
me,
but
I
love.
This
one
programming
is
a
way
of
thinking.
Not
a
rote
skill.
Learning
about
for
loops
is
not
learning
to
program
any
more
than
learning
about
pencils
is
learning
to
draw,
and
how
true
is
that
we,
as
software
developers,
are
always
learning
always.
A
Teaching
is
the
other
side
of
learning
right
teaching
is
the
most
one
of
the
most
effective
ways
of
learning
and
implementing
a
visualization.
It's
like
teaching
yourself
you're,
placing
a
stronger
focus
on
intuitive
learning,
rather
than
that
rote
learning
that
Brett
Victor
was
talking
about.
So
it
can
be
easier
to
internalize
and
remember,
having
interacted
with
the
code
rather
than
just
memorizing
it
or
trying
to
remember
where
you
were
when
you
were
writing
what.
A
Finally,
it
helps
us
get
our
work
done
by
being
able
to
observe
our
code.
It
helps
our
productivity
through
visualizations.
We
can
discover
new
things.
Write
unexpected
behavior
surprises
that
we
can
then
take
action
on
and
visualization
can
help
you
get
the
code
right
at
the
beginning.
You
can
see
it
rather
than
just
maybe
guessing
about
tasks
now
I
mean
we
still
have
to
write
tasks,
but
visualization
can
be
really
helpful
when
you're
iterating
in
the
early
stages,
faster
iteration,
more
insight
and
the
work
that
we
do
coding
is
a
way
of
thinking
visualization.
A
It
helps
us
improve
our
way
of
thinking
as
we
code,
we
can
see
it,
we
learn
through
interaction
and
if
we
can
help
humans
ourselves,
better
understand
computation,
we'll
design,
better
software
and
do
it
more
efficiently.
Ship
faster
make
our
users
happier
and
hopefully
we're
a
little
bit
happier
and
productive
I
mean
it's
not
easy.
I
can
show
you
a
bunch
of
examples.
The
right
data
is
and
information.
You
have
to
transform
the
data
in
code
to
make
it
meaningful,
like
some
visual
channels
are
less
effective
than
others.
Not
all
colors
are
perceived
equally.
A
So
you
need
to
think
about
what
colors
you're
choosing
and
you
can't
just
like
wave
a
magic
wand
for
visualization.
It
takes
time
to
do
it
right.
You
need
to
think
it
through
also
think
about
the
tools
that
you
need
in
visualization
and
I
really
hope.
You're
walking
away
today
with
many
more
tools
in
your
tool
set.
My
last
breath,
Victor
quote
I
swear
people
understand
what
they
can
see.
If
a
programmer
cannot
see
what
a
program
is
doing,
she
can't
understand
it
visualization
it
leverages
our
human
visual
system
to
help
us
think.
A
You
know
we're
here
at
github
universe,
you
know:
github
has
been
driving
open
source
software
and
collaboration
in
the
developer
community,
it's
pretty
inspiring,
but
if
get
the
right
tools
to
visualize,
we
can
make
our
software
better.
We
can
better
understand
both
the
structure
and
flow
and
the
details.
I
really
hope
you
consider
how
you
bring
visualization
into
your
own
software
development.
So
much
hasn't
been
visualized.
Really,
let's
make
visualization
a
core
part
of
how
we
build
modern
software,
let's
visualize
software
together
thanks
so
much
thanks
for
coming
I
hope
you
have
a
great
conference.