►
From YouTube: Data Visualization Altair Demo
Description
Part of the Data Day 2022 October 26-27, 2022
Please see https://www.nersc.gov/users/training/data-day/data-day-2022/ for the training agenda and presentation slides.
A
A
You
know
the
the
distinction
that
I'm
making
here
when
it
comes
to
working
with
visualization
data.
Is
you
know
that
you
know
if
you
have
an
imperative
approach
to
it,
you're
going
to
be
using
a
tool
like
maybe
matplotlib,
or
something
like
that?
That
makes
you
sort
of
go
through
things
in
a
very
programmatic
way
and
you're
trying
to
make
sure
that
things
happen
in
the
right
order
and
you're
making
sure
that
you're
you
know
going
through
all
the
right
loops
and
everything.
A
So,
for
example,
here
you
know,
this
is
just
kind
of
fake
code,
but
you
know
you're
gonna
separately
draw
the
different
axes
and
maybe
the
ticks,
and
maybe
for
each
layer
of
data
that
you
have
in
there.
You
have
to
set
it
to
a
certain
color
and
draw
an
item.
Whereas
with
a
declarative
approach,
then
you
have
you're,
basically
just
going
to
State
what
you
should
be,
what
you
want
people
to
see
what
what
should
be
rendered,
and
so
here
you're
thinking
very
differently.
A
It's
more
about
like
saying,
I
want
to
use
this
data
to
make
a
chart,
and
it's
going
to
be
using
points
and
I'm
going
to
encode
the
First
Column
as
X
position
and
second
column
as
a
y
position,
and
the
third
column
is
going
to
be
color.
And
if
you
notice,
like
my
description
of
that,
the
declarative
part
follows
the
actual
code
much
more
readily
and
it's
like
really
I,
think
a
lot
more
natural
to
be
able
to
think
of
these
things.
In
this
way,
and
especially
for
visualization.
A
So
now,
let's
think
a
little
bit
about
Altair
itself.
So
it's
a
python
library
and
it's
based
on
a
thing
called
Vega
light.
A
A
So
if
you
didn't
know
what
Vega
light
is
you're
probably
also
wondering
what
Vega
is
Vega
is
a
very
detailed
declarative
grammar,
that's
built
on
D3.
A
You
know
it
has
a
runtime
that
will
actually
render
Graphics
as
well
and
it'll,
render
them
for
the
web
and
interactively
and
for
those
who
aren't
familiar
with
D3
D3
is
a
pretty
low
level.
Javascript
library
that's
used
for
data
visualization
and
right
now,
it's
probably
the
most
web,
the
most
commonly
used
web
library
for
databiz.
A
A
People
like
building
libraries
on
top
of
it
because
it
itself
is
pretty
low
level
and
it
takes
a
bit
of
fitted
thing
to
get
it
to
do
what
you
want,
and
you
end
up
really
kind
of
worrying
more
about
the
programming
than
about
the
relationships
that
you
want
to
show.
This
can
be
great
if
you
want
to
do
something
highly
customized,
which
is
really
wonderful
for
that.
But
if
you
want
to
be
able
to
iterate
quickly,
it's
not
so
great,
so
thinking
about
a
more
declarative
approach
helps
solve
that
so
Vega.
A
This
is
an
example
of
a
Vega
spec.
So
this
is
Json.
This
is
looking
at.
You
know
a
simple,
more
or
less
simple
area
graph
that
you
might
try
to
render
with
it,
and
you
know,
there's
just
a
lot
here.
Right,
I
mean
I
had
to
make
this
tiny
I.
A
Don't
expect
anybody
to
necessarily
even
read
this,
but
you
know
you
can
see
that
there's
a
lot
of
detail
here,
because
Vega
is
trying
to
capture
everything
about
that
graph
and
it
doesn't
make
any
assumptions,
so
it
doesn't
kind
of
fill
in
the
sort
of
basic
stuff
that
you
think
you
wouldn't
maybe
have
to
have
to
specify
in
order
to
get
a
graph.
A
So
Vega
light
is
kind
of
a
way
of
taking
that
and
saying.
Well,
let's
do
something
a
little
higher
level,
let's
make
it
so
that
you
can
fit
the
code
for
a
simple
area
chart
in
letters
that
you
can
read
in.
You
know
just
one
column
here,
much
smaller
much
much
simpler
and-
and
it
does
kind
of
answer
some
questions
for
you.
A
It
doesn't
make
you
come
out
with
everything,
but
it's
also
it's
extremely
customizable
as
well,
because
it
allows
you
to
set
the
things
that
you
do
want
to
differ
from
the
defaults
so
like
here
changing
the
the
axis
a
little
bit
and
formatting
it
by
the
years,
and
that's
just
like
you
know
a
small
thing,
but
in
the
it
was
without
that
it
would
make
a
guess
as
to
what
you
wanted
to
see
for
the
dates,
and
it
might
not
be
what
you
wanted.
A
So
in
Altair,
here's
how
you
would
do
an
area
graph
as
another.
You
know
relatively
simple
graph
style.
This
is
even
shorter
and
it's
a
little
different,
so
I
mean
I.
Don't
want
to
like
say
that
you
need
to
understand
how
to
read
Vega
light
Json
in
order
to
do
anything
in
Altair.
A
Altair
basically
takes
the
same
idea
and
puts
it
into
a
more
pythonic
way
of
expressing
it,
and
then
you
can
see
here,
you're
just
pulling
in
the
data
set
and
then
when
you're,
rendering
the
chart
itself
and
it's
basically
a
one-liner
and
to
talk
about
a
little
bit.
The
you
know
the
the
detail
here,
we're
starting
with
alt
dot
chart,
which
is
just
saying
we're
going
to
create
a
chart,
we're
using
Altair,
so
I
imported
it
as
alt,
so
it's
pulling
in
source
as
the
data
file
and
then
it's
doing
a
transformation.
A
Even
so,
it's
filtering
a
bunch
of
stock
data
and
it's
pulling
out
only
the
items
that
have
Google
as
the
stock
stock,
ticker
symbol
and
then
we're
saying
what
Mark
we
want
to
use
we're
going
to
use
areas,
and
it
has
a
little
bit
of
refinement
on
how
we
want
to
draw
the
line.
We're
going
to
make
that
a
dark,
blue
and
then
we're
just
saying
how
we're
encoding
the
X
and
the
Y
so
we're
also
giving
it
into
the
date.
A
Colon
T
is
saying
that
that's
a
Time
data
type
and
the
price
colon
Q
is
a
quantitative
data
type
and
you
know,
for
you
can
actually
get
altered
to
infer
whether
it
should
be
a
time
or
a
ordinal
or
nominal
or
quantitative
data
type.
But
it
is
for
us
to
express
it
just
in
case,
because
it
won't
always
fill
it
in
depends
on
the
data
source,
whether
you'll
be
able
to
do
that,
but
you're
getting
a
lot
here.
If
we're
interested,
which
is
essentially
a
one-liner.
A
So
I
just
wanted
to
show
you
the
kind
of
pulled
up
the
gallery
that
they
have
for
Altair,
and
this
shows
a
range
of
different
graphs
that
one
can
make
with
them.
These
are
just
examples,
and
it
isn't
everything
that
our
examples
and
in
fact,
I
have
two
pages
worth
of
them.
You
know
so
to
start
on
the
oops
on
the
previous
page,
you
have
simple
charts
and
then
for
each
simple
chart
type,
there's
a
whole
bunch
of
different
options.
A
Scatter
Plots
lots
of
different
ways
of
doing
that
as
well,
and
we
have
histograms
and
Maps
some
examples
of
interactivity
in
there
and
then
on
the
right,
there's
just
a
bunch
of
kind
of
other
charts.
So
you
know
there's
the
things
that
you
might
have
been
more
used
to
being
able
to
do
readily
in
my
potlib,
like
violin
plots
different
ways
of
representing
ranges
like
bullet
graphs.
That
kind
of
thing
parallel
coordinates.
A
A
So
all
these
These
are
different
options
and
for
output.
You
can
now
put
something
as
Json.
It's
one
way
in
which
you
can
get
Json
out
of
it
is
like
just
getting
the
the
graph
spec.
You
can
get
the
Vega
light
spec
out
of
that
and
that
can
be
used
along
with
the
Vega
light
library
to
publish
anything
on
a
web
page
wherever
you
like,
but
also
you
can
use
it
to
Output
the
data.
So
if
you've
made
Transformations,
you
want
to
capture,
you
can
use
it
that
way.
A
A
A
If
you
want
to
use
it,
you
can
set
it
up
with
your
own
kernel
that
will
run
Altair.
You
just
do
a
module
load
python
like
everything
in
Python
land,
then
you
create
a
conda
environment.
A
Thank
you,
and,
along
with
that,
you
may
want
to
grab
a
thing
called
Vega
data
sets,
which
is
just
a
collection
of
data
sets
that
are
super
easy
to
pull
in
and
work
with
and
just
kind
of
nice
for
having
a
range
of
data
to
play
with
when
you're
trying
to
figure
out
how
to
do
stuff
in
Altair
and
then
once
that's
done.
You
end
up
seeing
in
Jupiter,
Hub
you'll
see
the
Altair
option
or
whatever
you
decided
to
name
the
kernel
that
you
set
up
so
I
thought
at
this
point.
A
A
B
A
B
Oh,
wait
did
I
didn't
set
up,
DF
did
I
yeah.
A
See
what
this
is
shaped
like
so
we've
got
by
date.
I
think
this
is
four
years
worth
of
precipitation,
temperature,
wind
and
overall
weather,
so
pretty
straightforward
to
start
making
a
chart
with
that
so
I'm
using
DF
and
I'm
going
to
start
this
with
an
area
chart.
A
And
just
encode
X.
This
is
like
the
super
simple
way
of
doing
it,
where
I'm
not
even
putting
any
detail
in
the
the
X
and
Y
spec
here
and
then
boom
I
have
a
chart
and
I
can
see
yep
four
years
worth
of
data,
so
okay,
so
that
that's
just
a
pretty
plain
boring
one.
What
happens
if
we
want
to
add
some
style
to
that?
Do
something
a
little
different,
so
I'm
going
to
say:
let's
do
something
to
the
way
those
marks
are
shown.
A
And
how
about
we
play
with
some
CSS
kind
of
styles,
turn
down
the
opacity
and
then
we've
got
something.
Looks
like
this
simple
enough
to
do
something.
A
little
different,
usually.
A
A
So
this
is
a
really
powerful
feature
where
you
can
say
well:
I
want
to
break
out
multiple
charts
based
on
a
single
column,
so
I'm
using
the
weather,
which
is
going
to
give
me
four
different
or
five
different
charts
for
the
different
kinds
of
weather.
So
all
of
a
sudden
boom
I
have
all
these
different
charts.
So
it's
faceting
on
the
weather,
there's
no
sun
rain,
Etc,
that's
pretty
cool
and
then
also
I'm
gonna
do
filtering
on
the
Fly.
B
B
A
B
B
A
B
A
This
gives
me
a
big
long,
ER
and
it
says
number
rows
in
your
data
sets
is
greater
than
the
maximum
allowed,
but
we
knew
that
that
would
happen.
So
there's
a
trick
to
this
there's
actually
a
couple
different
tricks,
but
one
of
them
is
letting
it
store.
It
store
the
data
in
Json
format
on
its
own
and
lo
and
behold,
I'll
get
that
enabled
and
then
I'm
just
going
to
make
a
copy
of
this
and
I'll
show
you.
A
There
we
go
almost
9
000
points
just
plunked
on
there
and
it's
pretty
much
okay
with
it.
There's
also
one
other
way
of
doing
this,
but
I'm
not
gonna,
do
anything
here
with
it,
but.
A
D
Max
Rose
is
another
option,
but
that's
better
to
to
use
other
options
like
using
the
Json
enablement
or
pulling
the
file
from
a
URL
directly
is
also
another
way
to
get
around
that
that
limit.
A
A
So
that's
what
I
wanted
to
show
I
think
it's
kind
of
head
back
here
and
say
thanks
and
ask
if
there
are
any.