►
From YouTube: Seeing the Data Around Us - GitHub Universe 2020
Description
Presented by James Proctor, Data Visualization Engineer, Pitch Interactive
Visualization is a powerful tool for describing and understanding information. You're probably used to seeing these kinds of visuals accompanying news stories, or as part of tools that you use at work, or to keep track of personal information like your finances or health. It's easy to focus on the massive scale of a dataset or the dramatic quality of spectacular design, but data visualization as a process begins much more simply by asking questions, observing, and thinking critically. This session will discuss that process from start to finish: beginning with data collection, moving on to analysis and sketching, and finally creating the visualization itself.
For more from GitHub Universe 2020, visit https://githubuniverse.com
As always, feel free to leave us a comment below and don't forget to subscribe: http://bit.ly/subgithub
Thanks!
Connect with us.
Facebook: http://fb.com/github
Twitter: http://twitter.com/github
LinkedIn: http://linkedin.com/company/github
About GitHub
GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Millions of people use GitHub to build amazing things together. For more info, go to http://github.com
A
Hi
everyone
and
welcome
my
name
is
james
proctor,
and
this
session
is
called
seeing
the
data
around
us
so
we're
looking
here
at
a
satellite
image
of
the
area
around
the
github
office
in
san
francisco.
But
you
know
my
goal
here
is
to
get
us
thinking
about
data
at
a
bit
more
of
like
a
human
first
first-person
kind
of
scale.
A
I'll
tell
you
a
little
bit
about
myself
and-
and
you
know
where
I
work
and
then
we're
going
to
go
through
data
collection,
where
we're
probably
going
to
spend
most
of
our
time
and
then
we're
going
to
get
into
analysis
and
sketching
right
so
finding
patterns
in
that
data
and
then
finally
visualization
so
like
thinking
about
well,
how
do
we
refine
sketches?
How
do
we
try
to
get
towards
a
finished
product?
A
And
the
goal
here
really
is
to
go
start
to
finish
through
the
visualization
process,
because
we
want
to
think
about
and
understand
that
process
right
more
so
than
worrying
about
creating
like
an
amazing,
visual
right
away.
You
know
we
wanna,
we
wanna
like
understand.
You
know
a
pattern
that
we
can
use
in
the
future,
so
I'm
gonna
show
you
an
example
piece
that
I
made
recently
just
kind
of
going
through
these
steps.
A
Did
it
over
the
weekend
and
you'll
see
it's
really
simple
right,
so
I
would
encourage
you
to
do
something
like
not
too
complicated
like
that
to
start
with,
just
because
you
know
makes
it
manageable
and
it'll
give
you
a
pattern
to
follow
in
the
future.
So
first
me,
I'm
james
proctor,
I'm
a
data,
visualization
engineer
at
a
company
called
pitch
interactive
and
I'm
also
an
artist,
and
you
know
in
both
of
those
sort
of
capacities.
A
I
work
a
lot
with
software
and
digital
tools,
and
you
know
I'm
interested
in
themes
but
in
particular
the
built
environment,
so
things
like
housing
and
transportation
which
are
really
pressing
issues
here
in
the
bay
area.
Where
I
live,
you
know,
I,
I
think
those
things
are
interesting
because
I
think
they
reflect
our
values
right.
You
know
what
sort
of
things
get
built
for
whose
benefit
pretty
interesting
kind
of.
Tells
you
a
lot.
A
So
a
lot
of
my
suggestions
will
be
about
things
in
the
physical
world
and
public
space,
because
that's
where
my
mind
tends
to
go,
but
I
would
say,
like
you
know,
you
should
choose
topics
you're
interested
in
right,
because
that'll
make
this
much
more
fun
for
you.
Another
thing
that
kind
of
became
a
theme
in
this
presentation
sort
of
unintentionally
is
covid.
We're
going
to
see
a
few
different
pieces
that
relate
to
that.
A
So
I
don't
know,
prepare
yourself,
wasn't
my
intent,
but
so
so
pitch
interactive,
where
I
work
is
a
studio
that
creates
data
visualizations
and
interactive
experiences.
So
we
do
work
across
a
pretty
wide
range
of
media.
So
you
know
web
apps
and
interactives
are
probably
the
thing
we
do
most
often,
but
you
know:
we've
worked
on
physical
installations
projections
pieces
for
print,
so
I'm
going
to
share
a
few
examples
here
with
you
to
just
give
you
a
sense
for
the
work
kind
of
where
I'm
coming
from.
A
That's
you
know
to
you
know:
americans
often
feels
very
distant
and
kind
of
intangible,
and
we
want
to
like
use
choices
of
things
like
animation
and
color,
in
the
way
that
we
presented
it
to
kind
of
give
it
the
appropriate
weight
right
to
make
this
thing
sort
of
visible
and
affecting
another
piece.
This
one
has
sort
of
a
personal
angle
on
it
because
we're
based
in
california
this
is
called
drought,
monitor
and
it
grew
out
of
work.
A
We
had
done
in
print
for
scientific
american
and
we
were
sort
of
interested
to
add
a
little
more
to
that
story.
So
some
of
it's
like
new
data,
but
some
of
it's
also
this
interactive
component.
This
ability
to
kind
of
look
at
particular
seasons
and
more
detail
and
at
a
high
level.
What
the
story
is
here
is
really
that
these
extreme
wet
and
dry
conditions
have
become
more
frequent
and
more
volatile
over
time.
A
A
So
it
has
a
bunch
of
sort
of
embedded
options
for
embedding
right
so
that,
if
you
have
an
article
about
a
particular
area,
you
can
sort
of
select
kind
of
the
level
of
focus.
So
we've
got
country
level
in
most
cases
where
we
can
we've
got
state
or
province
level
views
and
then
within
the
us
we
can
actually
go
down
to
specific
counties,
and
so
you
know
it's
set
up
such
that
yeah.
A
So
you
know,
I
mentioned
our
format
I'll
just
kind
of
hit
those
points
again
right,
data
collection,
analysis
and
sketching
and
visualization,
and
so
why
are
we
doing
it?
This
way,
I'm
going
to
make
a
few
references
to
things
like
paper
and
pencil.
What's
all
that
about?
This
is
adapted
from
a
workshop
that
I've
run
in
person
in
the
past
and
the
idea
there
has
typically
been
that
you
know
over
the
course
of
you
know,
day
or
whatever.
A
A
So
we
want
to
keep
the
focus
on
the
process
and
so
for
those
in
person
workshops
generally,
you
know
I
emphasize
using
analog
tools
because
it's
great
to
not
have
to
debug
everyone's
setup
and
just
kind
of
get
going
right
away,
but
we're
not
going
to
do
that
today,
because
you're
doing
this
on
your
own
time
right
if
you're
already
familiar
with,
you
know
a
digital
tool
that
you
want
to
use,
that's
great,
you
can
go
for
it.
You
know
I
use
things
like
d3
and
react
and
different
libraries.
A
You
know
daily
right,
they're,
great
tools,
they're
they're,
really
wonderful
technologies,
but
I
would
say,
like,
however,
you
sort
of
choose
to
approach
this.
What
I
want
to
encourage
you
to
do
is
just
keep
that
focus
on
process
in
mind.
So
just
you
know
don't
get
too
hung
up
on
like
what's
easy
or
hard
to
do
in
a
particular
library.
Don't
worry
about
making
a
visual!
That's
like
really
flashy.
A
I
sort
of
said
this
before,
but
we're
we're
gonna
spend
more
time
on
this
step
because
that's
you
know
the
seeing
part
of
seeing
the
data
around
us
and
also
because,
like
a
lot
of
technical
tutorials
on
data,
visualization
start
you
off
with
a
sample
data
set
and
that's
great
like
for
getting
out
of
the
gate
and
learning
a
new
technique
or
something.
But
we
want
to
start
with
the
collection
itself
and
the
reason
for
that
is
right.
A
A
You
know
in
terms
of
the
story
that
you
want
to
tell
this
is
kind
of
a
silly
example
right,
but
something
that
seems
really
simple
would
be
like.
Okay,
I'm
going
to
watch
people.
You
know
walk
by
on
the
street
and
look
out
my
window
and
say
what
what
are
the
colors
of
the
clothes
that
they're
wearing
right
just.
I
think
that
would
be
pretty
simple
right
but
say
someone
goes
by
and
you're
like.
A
A
So
you
know,
I
would
encourage
you
to
kind
of
think
about
what
do
I
want
to
find
out
and
then
choose
a
method
that
will
work
well
for
that,
so
paper
and
pencil
are
great,
because
they're
really
flexible
you're
not
going
to
do
like
a
big
data
set
with
them
right,
it'd
be
very
time
consuming,
but
you
can
add
or
drop
characteristics
on
the
fly.
You
can
kind
of
make
notes
in
the
margins
and
you
can
also
use
sort
of
expressive
marks
or
symbols.
A
A
A
So
this
is
a
piece
by
artist,
kenny
agioma
and
he
set
up
this
website
and
a
phone
line
that
allows
people
to
call
in
record
their
voices
and
then
also
there's
a
way
for
others
to
kind
of
help,
identify
and
transcribe
their
messages,
and
so
this
is
for
a
piece
called
accounting,
and
so
it's
it's
like
a
series
of
voice
portraits
for
different
u.s
cities
right.
So
I
think
this
is
really
cool.
It's
done
in
response
to
the
census
right.
A
You
can
sort
of
see
that,
but
it's
also
capturing
this,
this
more
nuanced
kind
of
personal
thing
that
the
census
does
right,
like
the
human
voice,
another
sort
of
novel
example
right:
this
is
what
nicholas
felton
calls
photo
visualization,
so
he's
sort
of
aggregating
these
photos
and
the
story
is
about
how
they,
you
know,
come
together
to
form
patterns.
So
so
all
sorts
of
things
can
be
methods
for
collecting
your
data
right,
keep
your
options
open
and
just
you
know
I've.
A
Given
you
a
few
examples
here
for
things
you
might
want
to
collect,
you
don't
need
to
use
these,
but
just
to
kind
of
get
your
mind
going.
You
know
you
might
look
out
your
window
and
say
well,
okay,
what
kind
of
what
kind
of
birds
do
I
see
in
the
yard?
How
many?
How
many
recruits
they're
trying
to
dig
into
my
trash?
You
know,
maybe
you
go
through
your
ticket
stubs,
there's
all
kinds
of
things
you
can
do
right.
A
The
main
recommendation
I
would
make
here
is
well
sort
of
two
things.
The
the
one
is
choose
something
you're
interested
in
and
you
know,
because
that'll
just
make
this
much
more
enjoyable.
If
it's
something
you
find
boring,
you
won't
want
to
spend
time
with
it
and
that's.
The
second
thing
is
that
allow
a
good
chunk
of
time
here,
because
often
like
in
the
process
of
collecting
data,
you
might
get
new
ideas.
A
You
might
change
your
mind
about
what's
interesting,
so
you
know
you
could
go
out
in
the
world
and
maybe
something
catches,
your
eye,
that's
different,
and
so
you
know
give
yourself
that
chance
to
like
add
a
dimension
to
your
data
or
change
your
approaches.
You
know,
because
that's
fine
and
it'll
be
more
interesting.
A
The
other
thing
I
want
to
sort
of
stay
at
this
stage
are
two
sort
of
disclaimers
right
and
the
one
is.
We've
mentioned
a
few
different,
some
suggestions
or
projects
that
involve
data
on
people
and
what
I
would
say
is
just
like:
if
you
are
going
to
record
data
on
human
beings,
just
be
thoughtful,
be
circumspect,
right,
don't
creep!
A
Anybody
out,
don't
share
information
that
could
put
someone
at
risk
just
kind
of
consider
like
how
would
you
feel
if
someone
was
recording
this
data
about
you,
and
you
know
the
other
thing
is
then
paint
yourself,
yeah
be
careful
right,
so
so
don't
put
yourself
in
a
risky
situation.
Use
good
judgment.
You
know,
consider
your
own
safety
as
well,
and,
if
you're
looking
for
more
inspiration
about
things
to
collect
a
really
cool
project
that
you
could
look
at.
A
A
Well,
there's
actually
other
things
that
are
interesting
about
this
like
like.
Where
are
those
seats
so
like?
Are
they
right
on
the
sidewalk
or
are
they
in
apartment
or
an
existing
like
patio
space
or
something,
and
I
played
with
a
few
different
ways
of
recording
that
as
well,
so
you
can
see,
there's
like
some
little
pictograms,
there's
labels
and
counts,
and
I
sort
of
also
brought
little
notes
to
myself
like
stuff.
I
wasn't
sure
how
to
deal
with.
A
So
you
know,
ideally
at
this
point,
we're
gonna
move
on
to
analysis
and
sketching,
and
you
know
so,
hopefully,
you've
gone
out.
You've
collected
some
data
so
like
now
the
thing
to
say
is
well
what
does
it
say?
What's
interesting
about
it?
How
do
you
want
to
present
that
story,
and
so
you
know
one
of
the
first
things
you
can
look
at
is
like
did
what
you
record
match
your
expectations.
A
So
this
will,
you
know,
maybe
sounds
a
little
familiar
from
science
class
or
something
like
you
went
in
with
a
rough
hypothesis,
probably
about
what
you
might
find,
and
if
you
did
it's
like
well,
did
it
pan
out
or
you
know,
is
there
something
surprising
there?
The
other
big
thing
to
look
for
is
patterns
right,
so
maybe
you're
counting
how
many
people
are
walking
down
different
streets
and
you
notice.
Oh
there's
more
people
on
this,
one
that
one's
sunny-
oh
it's,
because
it's
warmer
right,
so
you
know
think
about.
A
Oh,
is
there
like
a
story
that
explains
this
another
thing
that
might
happen?
Is
you
realize
you
don't
actually
have
enough
information?
And
you
know
maybe
there's
other
questions
that
you
have
or
pieces
of
context.
That
would
like
help.
You
better
understand
what
it
is
you
saw,
and
so
you
know
that
that
can
be
a
cause
to
like
go
back
and
gather
some
more
information,
or
maybe
you
want
to
pose
that
question
in
your
in
your
sketches.
A
So
if
group
sketching
analysis
together
because
they
really
are
linked
right
often
trying
a
way
of
presenting
something
will
help,
you
see
a
pattern
that
you
didn't
perform
and
so
there's
all
sorts
of
ways
to
to
sort
of
encode
your
data
as
well.
So
these
are
obviously
not
comprehensive
examples,
but
just
you
know
keep
in
mind
you
know:
color
can
be
used
for
all
sorts
of
things.
A
A
A
Like
that's
interesting,
so
I
started
adding
labels,
but
that
was
kind
of
like
an
afterthought.
So
it's
not
maybe
the
clearest,
and
so
I
was
like
well,
let's
push
that
forward.
So
here's
these
little
pictograms
where
I've
kind
of
drawn
you
know,
okay,
there's
like
a
structure
around
the
people
or
there's
a
little
empty
chair
or
a
little
person
sitting
in
it,
which
is
you
know,
cool
but
like
maybe
a
little
too
complicated.
So
I
sort
of
took
that
and
simplified
it
down
right.
A
But
if
you
do
know
what
it
is,
then,
maybe
it's
a
little
easier
to
see
at
a
glance
like
okay,
these
are
occupied
and
those
aren't-
and
you
know
so,
coming
back
to
the
the
chart
types,
it
can
be
really
valuable
at
the
stage
to
look
at
other
people's
charts,
and
it's
also
good
to
have
a
sense
for
like
what
kinds
of
diagrams
are
going
to
be
well
suited
to
different
kinds
of
data.
So
I'll
just
give
a
couple
of
examples.
A
A
A
We're
going
to
pick
one,
that's
the
best,
once
we've
kind
of
tried
them
all
together
and
then
you
know
all
the
the
sort
of
like
less
favored
ones
are
going
to
get
cut
up.
Once
you
settle
on
that
like
core
or
story
and
presentation
style,
something
else
you
might
want
to
do.
Is
you
know
you
might
decide
that
your
data
and
its
story
are
better
expressed
in
like
a
less
conventional
form.
A
So
maybe
you
want
to
use
things
like
sculpture
or
sound,
and
the
kenneth
idioma,
who
I
mentioned
before,
has
this
really
cool
piece
called
wage
islands
and
it
visualizes
where
in
new
york
city
low-wage
workers
can
afford
to
rent
as
topography?
So
it's
created
with
these
stacked
acrylic
sheets,
where
affordable
places
are
higher
and
less
affordable
places
are
lower
and
to
really
sort
of
illustrate
the
point
he
actually
submerges
it
in
water.
You
know
another
similar
example.
You
might
also
think
well,
you
know,
being
able
to
get
specific
numerical
values.
A
Might
not
be
your
first
priority.
Maybe
it's
just
about
you
know
the
general
trend
or
creating
like
a
feeling
or
interest,
and
then
maybe
you
reveal
details
later
right,
so
this
one's
called
air
transform.
This
is
by
stephanie
pozmak,
and
this
is
based
on
open
air
quality
data
from
sheffield
in
the
uk,
which
is
kind
of
known
for
its
bad
air,
and
once
you
know
what
it
is
you
can
sort
of
say.
A
Oh,
I
bet
that
spiky
one
is
some
bad
air
and
you
can
sort
of
see
how
things
progressed
over
time,
even
though
you
don't
necessarily
know
what
the
values
are.
So
you
know
at
this
point,
we've
spent
some
time
with
our
data.
We've
considered
some
narratives
and
different
ways
of
presenting
it,
and
it
can
be
tough
to
choose
them
all.
Your
sketches
right,
but
often
a
particular
direction.
Will
start
to
stand
out
as
more
interesting,
and
this
doesn't
necessarily
mean
throwing
out
your
other
ideas.
A
You
might
also
want
to
go
with
like
a
synthesis
of
a
few
different
approaches,
but
it
is
best
to
choose
sort
of
a
core
narrative
of
some
kind,
because
that
can
help
you
make
other
choices
like
what
tools
you
want
to
use
so
like.
If
you're
going
with
a
map,
you
might
say:
okay,
well,
I'm
going
to
you
know,
use
mapbox
or
leaflet
or
if
you
want
to
do
like
simulation
or
have
lots
of
particles.
Well,
maybe
then
you
say:
okay,
I
want
to
use
something
performant
like
open
frameworks
or
webgl.
A
You
know
pixie
or
deckjail
things
like
that,
and
so
so
here's
the
you
know
the
final
visualization
that
I
created,
and
so
it's
definitely
you
know
it's
not
the
most
impressive
piece.
I'm
gonna
show
you
today
right,
but
you
can
see
like
kind
of
how
it
how
it's
a
progression
from
the
sketches
right.
It's
a
bit
more
polished,
it's
a
little
easier
to
read.
I
I
broke
out
the
ruler
for
a
couple
of
things
here
and
you
know.
A
Hopefully,
this
also
feels
like
sort
of
an
achievable
target
right
if
you're
doing
this
over
the
course
of
an
afternoon
or
something-
and
you
know
so
what
to
focus
on
here
is
like
how
this
pulls
ideas.
From
a
few
of
the
different
sketches,
I
kind
of
took
those
like
abstracted
top-down
chairs,
but
then
I
was
also
like.
Well,
that's
not
enough
on
its
own.
We
need
to
have
these
groupings
by
you
know
parklet
or
patio,
and
we
also
need
labels
and
annotations
for
the
account
just
to
kind
of
give
it
more
context.
A
So
you
know,
another
thing
is
like
when
you're
actually
at
that
implementation
stage.
This
is
where
those
sort
of
technical,
tutorials
or
you
know,
looking
at
examples
of
other
people's
code,
can
be
really
valuable
so
and
going
in
with
that
level
of
specificity
is
good,
because
then
you
say
you're
like
oh.
I
know
I
want
to
make
an
animated
line
chart.
A
Well,
you
can
search
for
that
specifically,
and
that
way
you
avoid
getting
sort
of
steered
towards
just
like
what's
easy
to
do,
or
you
know
what
yeah
whatever
is
like
the
common
thing
in
the
tool
that
you
happen
to
grab
first,
so
I'm
showing
flowing
data
here.
This
is
a
really
great
site,
it's
a
good
resource
because
they
have
a
lot
of
like
essays
and
analysis
on
databases
as
well
as
tutorials,
and
you
know
those
are
all
things
that
can
be
really
helpful
to
reference
as
you're
refining
your
sketches
into
a
finished
product.
A
A
few
more
examples
here,
kind
of
get
you
thinking.
This
is
a
piece
called
by
monaco
lobby.
She's
a
data
journalist
uses
this
really
unique,
illustrative
style,
and
you
know
in
this
example
right.
The
point
is
sort
of
less
about
perfect
accuracy
than
kind
of
giving
you
a
sense
of
scale
by
using
a
familiar
metaphor.
So
she
has
this
kind
of
mountain
right
and
so,
instead
of
saying,
oh,
you
know,
70
000,
that's
just
kind
of
really
big
right.
A
It's
like
hard
to
kind
of
get
a
sense
for
that
like
having
this
this
metaphor,
to
put
numbers
in
context,
you
know,
is
actually
really
harmful.
The
other
thing
you'll
notice
here
is
like
it's
a
pretty
spare
visual
there's,
not
a
lot
of
like
extraneous
stuff,
and
you
know
that's
another
thing.
That's
often
a
part
of
going
from
sketch
to
visualization
is
figuring
out.
Well,
what
can
you
remove
like
what
are
the
most
interesting
parts?
What
are
the
most
important
parts?
A
You
know
I
often
find
it
really
fun
to
put
in
controls
to
like
filter
and
manipulate
your
data.
Those
things
can
be
great
to
play
with,
but
for
you
know,
for
a
broad
audience
that
you
know,
may
not
be
as
familiar
with
the
topic
and
definitely
isn't
as
familiar
with
the
controls
that,
like
you,
built
removing
options
or
pre-selecting
the
most
interesting
moments
and
kind
of
guiding
your
audience
through.
That
is
often
more
effective.