►
From YouTube: Interactive Data Visualization Leveraging Jupyter, Rust and WebAssembly | SciPy 2018 | Munk
Description
This talk covers a Jupyter widget built using Rust and WebAssembly for interactive, browser-based visualization of datasets with yt, a python package used to analyze and visualize volumetric data in a number of scientific domains. Users can interact and explore datasets of varying sizes with our Jupyter widget. We minimize latency that results from data transmission between yt and the browser by compiling our pixelization routines to WebAssembly and pushing data to the browser. Operations on the canvas are subsequently done in the browser. Our tool enables interactive data exploration accessible to a broad user base.
See the full SciPy 2018 playlist at https://www.youtube.com/playlist?list=PLYx7XA2nY5Gd-tNhm79CNMe_qvi35PgUR
A
Thank
You
Chelsea
yeah.
So
that's
a
really
long
title.
Hopefully
we'll
walk
through
it
together
today
and
you
understand
why
I
had
to
make
it
so
long
and
I
couldn't
make
it
any
shorter.
But
first
I
want
to
tell
you
all
a
little
about
me
I'm.
This
is
my
first
time
at
Syfy,
so
I'm
gonna
give
a
little
introduction.
Thank
you.
A
There's
a
lot
of
members
of
the
data
exploration
lab
here
too,
at
SCI
PI
this
week
you
might
have
seen
Nathan
goldbam,
give
an
update
on
whitey
the
package
I'm
going
to
be
kind
of
talking
about
today.
Yesterday,
in
the
tools
plenary
session,
you
might
have
seen
Megan
Lang,
give
attack
on
interfacing
science
models
in
using
CIS
interface.
That
was
two
days
ago
or
you
might
have
seen.
A
Casper
carbolic
give
a
talk
on
the
whole
tale
and
I'm
also
involved
in
scientific
computing
I'm
in
a
software
carpentry
instructor
I
maintain
the
software
carpentry
get
lesson
and
I'm
a
member
of
the
curriculum,
Advisory
Committee
for
cyber
carpentry
and
I'm,
a
part
of
the
committee
for
diversity,
inclusion
in
scientific
computing
unfocus,
that's
a
lot
of
stuff!
Sorry!
A
So
we're
in
the
data
visualization
section
all
of
us
care
about
data,
visualization
and
I'm,
going
to
be
specifically
talking
mostly
about
a
package
called
YT.
Today.
Yt
is
a
package
that
is
designed
to
visualize
multi-dimensional
data.
It
was
originally
designed
for
astronomical
data,
but
now,
as
Nathan
mentioned
yesterday,
it
is
branching
into
domaine,
so
I've,
given
a
little
selection
of
different
domains
that
are
that
whitey
is
branching
into
here.
We
have
meteorology,
we
have
an
original
astronomy
data
set.
We
have
high
energy
physics
and
oceanography.
A
Interactivity
allows
on
the
fly
parameter
tuning.
You
know
we
can
change
the
color
map
to
bring
out
features
that
interest
us.
We
might
change
the
min
and
the
max
values
of
our
data
that
are
being
visualized
because
we
are
interested
in
them,
but
it
also
allows
for
this
exploration
of
our
data.
We
can
like
zoom
in
on
a
feature
that
we
care
about,
and
maybe
we
see
things
that
we
didn't
expect
in
our
simulations
or
in
our
observations.
This
reveals
the
interesting
science
and
it
also
allows
science
to
be
accessible.
A
We
might
have
a
data
set
that
we
want
to
share
with
the
public
and
interactive
data.
Visualization
allows
the
our
science
to
be
accessible
to
be
non-scientists,
maybe
to
scientists
that
don't
really
like
coding
very
much
or
find
coding
really
intimidating,
and
also
the
people
who
are
new
to
the
data
set.
A
So
these
can
be
like
I
might
pass
my
radiation
simulation
data
to
a
friend
and
they
don't
really
know
it
very
well,
giving
them
an
interactive
tool
to
browse
that
data
and
visualize
it
interactively
is
very
helpful
to
them
and
there's
a
lot
of
interactive
tools
that
exist
in
the
Python
ecosystem.
We
care
about
this.
This
is
our
community
right,
so
I'm
going
to
be
specifically
talking
about
interactive
visualization
with
YT.
A
Today,
YT
has
some
interactive
features
already,
but
I'm
going
to
be
talking
about
the
niche
area,
where
you're
going
to
be
having
data,
maybe
on
a
remote
server
or
something
like
that.
You
want
to
browse
it
on
your
local
machine,
so
I'm
gonna
do
like
we
were
talking
about
the
last
one.
I'm
gonna
do
a
live
demo.
So
we'll
see
how
this
goes.
So
we
can
so
I
especially
want
to
talk
about
how
amazing
the
jupiter
widget
ecosystem
is.
A
I
pi
widgets
has
developed
a
whole
suite
of
tools
that
you
can
use
to
interactively
browse
your
data
in
a
jupiter
notebook.
I'm
going
to
show
you,
though,
that
this
can
be
limiting,
sometimes,
especially
when
you
have
larger
datasets
or
if
you
have
an
image,
that's
quite
large
or
you're
re-rendering
things
a
lot,
so
I'm
going
to
import
I'm
using
YT
here.
Is
this
also
readable
to
everybody?
Okay,
you
want
a
bigger
okay.
A
Yeah
I'm
trying
it
I,
okay,
I'll
talk
through
it,
I,
don't
know
why
it's
not
going
suing
this
time.
Okay,
so
I'm
gonna
interact.
This
first
execution
is
I'm
loading.
My
data
set.
This
is
on
my
machine
and
I,
have
I'm
gonna,
be
loading
isolated
galaxy,
which
is
a
data
set
that
you
can
download
with
the
that's
in
the
documentation
of
YT?
It's
something
that's
used
is
to
introduce
beginners
to
YT.
So,
yes,
I
want
to
download
that
oh
great,
oh.
A
Thank
you
that
was
me,
leaning
on
it.
Oh
I
see
what
I
did
there
thanks
everybody
there.
We
go
okay,
well
good!
Now,
everything's
going
super!
Well,
so
I've
imported.
My
data
I
get
some
information
from
whitey
about
my
data
set
and
now
I'm
gonna,
try
and
use
Jupiter
widgets
out
of
the
box,
with
this
data
set
so
I'm
creating
I'm
using
a
set
of
widgets
to
create
I'm
setting
some
traits
first.
So
trait.
Let's
are
things
that
I
can
sync
with
Jupiter
widgets
and
they
you
can
use.
A
A
What
this
is
going
to
do
is
this
is
in
it
I'm
going
to
have
to
update
the
image
and
I'm
gonna
have
to
re
pixelize
it
to
update
the
view,
if
I
zoom
out
and
if
I
do
this
I'm
gonna
let
go
now
and
it's
gonna
keep
moving
and
my
T's
printing
some
error
messages,
which
is
why
now
we
have
this
extra
box.
So
if
I
go
down,
I
can
see
that
I've
recreated
this
fixed
resolution
buffer.
A
This
is
part
of
YT
and
basically
the
fixed
resolution
buffer
will
take
a
slice
and
it'll
create
in
an
array
that
is
fixed.
So
if
I
have
like
a
data
set
that
has
a
mesh,
that's
variable,
it's
gonna
make
it
so
it's
all
equal.
So
if
I
want
500
by
500
pixels,
it's
going
to
give
me
the
array
in
that
fixed
resolution.
A
So
I
have
to
re-up
date
it
every
time
with
that
new
fixed
resolution,
even
though
I
have
a
slice
that
I
had
already
taken
out
and
I've
done
this
lots
of
times,
so
you
can
imagine,
as
you
are
as
you
peruse,
your
data
set
you're
gonna,
be
regenerating
images,
lots
and
lots
of
times.
So
if
you
have
a
really
large
data
set
on
a
machine
or
even
on
your
computer,
this
can
take.
This
can
be
very
slow.
A
Okay,
so
I
mentioned
that
this
can
be
very
slow,
what's
really
happening
when
we
start
rendering
images
on
our
in
a
browser
but
from
on
our
local
machine
or
even
on
a
remote
server.
We
send
a
request
from
the
browser
to
the
machine
and
then
that's
gonna,
like
serialize
the
data,
it's
going
to
calculate
the
image
and
then
it's
going
to
send
it
back
and
we're
gonna
pull
that
image
down
from
this
remote
server
onto
our
machine.
And
then
we
have
a
visualization
super
cool.
A
But,
as
I
said
before,
you
can
get
you
know
you
can
do
this
lots
and
lots
of
times.
So
when
might
this
become
cumbersome,
we
have
the
total
time
to
generate
a
single
image
on
the
server
and
I've
kind
of
selected,
a
couple
of
different
things
that
I
think
might
spend
time
that
you
might
spend
time
doing
that.
A
But
when
you're
doing
it
with
this
this
process,
you
have
to
do
this
n
times
and
all
of
these
times
are
good
at
all
of
these
specific
time,
variables
are
going
to
be
multiplied
by
n
interactions,
so
if
I
zoom
I
might
have
like
20
images
that
are
created
in
a
zoom
action
if
I
want
that
animation
with
these
data
sets.
So
what?
A
A
Pushing
data
to
the
client
makes
sense,
as
is
if
we
can
make
the
time
to
calculate
the
image,
the
client-side
smaller
than
the
time
to
calculate
it
on
the
server
side,
so
I've
kind
of
condensed
those
teeth.
Those
small
T's
in
the
previous
slide
into
two
kind
of
big
chunks.
That
I
think
are
interesting.
So
there's
the
number
of
interactions
we
have
times
the
time.
T
client
is
the
time
to
calculate
the
image
on
the
client
side
so
in
the
browser,
and
then
we're
going
to
add
this
with
the
time.
A
The
data
like
how
large
the
chunk
of
the
data
we're
sending
from
the
server
divided
by
whatever
our
speed
is.
So
if
we
have
an
extremely
fast
internet
connection,
this
is
going
to
be
a
very
small
component,
but
we
want
that
in
particular
to
be
less
than
this
so
the
time
to
generate
the
image
on
the
server
plus
the
time
to
generate
the
to
generate
to
the
time
that
it's
going
to
take
to
transfer
it.
A
So
the
data
divided
by
the
rate,
to
transfer
it
back
and
forth,
and
you
can
see
that
we've
taken
this
n
and
the
number
of
interactions
is
only
times
the
time
to
generate
the
image
on
the
client
on
the
left
side,
so
I've
kind
of
talked
through
those.
So
how
might
this
happened?
What
are
the
big
features
that
we
think
we
can
make
that
happen?
A
First
of
all,
I
kind
of
mentioned,
the
more
interactions
you
do,
the
more
time
you're
going
to
be
generating
you're,
going
to
be
wasting
transferring
images
from
your
server
up
onto
your
local
machine
or
down
onto
your
local
machine.
Also,
as
you
increase
the
size
of
the
image,
this
is
going
to
get
more
and
more
cumbersome
right,
because
this
this
term
over
here
is
going
to
get
much
larger
and
also
if
we
can
decrease
the
time
to
calculate
the
image
on
the
client
side,
that's
going
to
make
this
a
more
beneficial
transfer.
A
So
this
is
just
an
illustration
kind
of
giving
you
an
idea.
If
you
have
a
data
set
that
has
this
multi-resolution
data,
we
can
overlay
what
the
grid
looks
like
and
you
can
see
towards
the
edge
of
the
data.
We
have
a
pretty
sparse
set
of
data,
but
in
there
there's
some
interesting
regions
where
our
mesh
is
much
much
finer.
A
Let's
see
if
I
can
push
Plus
in
the
right
place
this
time,
so
this
is
the
same
data
set
and
we
have
some
controls
here
they
go
away,
but
this
is
actually
a
fairly
large
image.
I
have
chosen
at
1000
by
1000
pixel
image
and
I'm,
using
a
PI
widgets
layout
to
shrink
it
down.
So
it's
not
stretched
weirdly
during
this.
During
this
interaction,
so
I
can
change.
The
color
scale
to
live.
I
can
also
change
the
color
map
to
whatever
I
want
it
to
be.
A
And
then
I
also
can
click
in
the
image
and
it
updates
way
faster
than
if
I
was
using.
Traditional
widgets
I
also
can
drag
in
it's
gonna
and
that'll
update
immediately,
whereas
if
I
did
a
drag
event
like
this,
if
I
built
this
in
purely
on
the
Python
side
with
the
widget,
it
would
be
much
much
slower,
because
this
is
very
significant.
Transferring
this
1000
by
that
1000
pixel
array
back
and
forth
into
the
browser.
A
So
what
does
this
mean
like
we
built
this
widget?
It's
cool.
It
seems
kind
of
neat,
maybe
not
cool
as
an
awesome
cat
plot,
but
you
know
that's
pretty
cool,
but
with
a
single,
fixed
upfront
cost
we
eliminate
the
requirement
to
transfer
all
of
those
images
between
the
server
and
the
client.
This
is
useful
in
some
cases,
but
not
all
so
you
know
if
you
have
a
data
set,
that's
really
dense
and
you
have
an
extremely
fast
internet
connection.
A
Then
maybe
it's
not
going
to
be
useful
to
use
this,
but
this
is
useful
for
a
lot
of
different
cases,
so
I'm
gonna
kind
of
talk
through
what
is
happening
and
that
and
a
little
bit
I'm
going
to
tell
you
more
about
webassembly,
but
so
I'm
going
to
tell
you
how
the
first
render
kind
of
works.
So
we
have
our
data
from
YT.
We
send
a
couple
of
different
arrays,
px
and
py
are
the
center
points
of
each
of
those
mesh
cells
that
you
saw.
So
you
can
see
it's
variable
and
P,
DX
and
P.
A
Dy
are
the
half
width
values
of
each
of
those
mesh
cells,
and
then
value
could
be
any
field
that
you're
interested
in
it
could
be
density.
It
could
be
temperature
or
something
like
that
and
I
have
a
little
key
down
here.
So
the
yellow
is
going
to
be
a
function
that
we
built
in
web
assembly.
This
is
custom
and
then
trait
lips
are
things
that
we
can
like
you
saw
before.
These
are
things
that
we
can
sync,
and
these
are
on
the
Python
side.
These
are
accessible
to
any
user.
So
you
could.
A
You
could
modify
these
as
you
wanted
to
and
then
so
we're
going
to
pass
this
in
to
our
widget,
it's
called
YT,
pi
canvas
and
all
of
the
threads
are
going
to
go
into
a
widget
called
the
fixed
resolution
buffer
viewer.
This
has
two
custom
web
assembly
modules,
there's
a
variable
mesh,
which
is
the
data
structure.
We
store
all
of
the
data
in
and
then
there's
a
fixed
resolution
buffer,
which
is
like
the
view
of
the
data
that
we're
interested
in.
A
A
So
we
pass
that
array
and
we
want
to
do
another
performance,
important
function,
so
we're
gonna
pass
it
into
web
assembly
again
and
that's
going
to
be
color
maps.
This
is
the
name
of
the
module,
but
it's
actually
normalizing
and
it's
creating
an
image
or
eight
out
of
the
data
array.
So
it's
taking
this
single
array,
that's
all
data
points
and
it's
going
to
make
it
into
this
RGB
a
image
and
then
we're
gonna
pass
that
image
array
back
into
the
fixed
resolution
buffer
viewer,
which
deposits
it
in
a
canvas
and
then
renders
the
image.
A
If
we
change
the
color
map,
I've
now
highlighted
this
in
red.
Nothing
upstream
of
this
needs
to
change,
so
we
don't
actually
have
interact.
We
don't
have
to
interact
at
all
with
the
variable
mesh
or
the
fixed
resolution
buffer,
because
we
didn't
change
where
the
view
was.
So
what
this
is
going
to
do
is
going
to
send
the
data
array
back
through
the
color
Maps
web
assembly
function,
it's
going
to
change
the
imagery
and
the
rendered
image.
A
If
we
do
a
canvas
interaction,
though
we're
going
to
be
moving
the
fixed
resolution
buffer
around
in
the
variable
mesh,
so
the
view
width.
This
is
if
we
change
the.
If
we
zoom
in
then
that's
gonna
change,
where
the
fixed
resolution
buffer
is
that's
going
to.
Consequently,
change
the
data
array,
the
image
array
and
then
the
rendered
image
so
I
said
I'm,
saying
I
just
mentioned
that
we
did
this
stuff
and
web
assembly,
but
I
didn't
really
say
what
webassembly
was
so
web
assembly
is
what
a
lot
of
the
web
is
built
on.
A
It's
it's
a
language,
that's
supposed
to
work
seamlessly
with
JavaScript,
but
it's
the
performance,
important
parts
of
the
web.
So,
instead
of
using
javascript
and
serializing
to
json
all
of
our
data,
we
can
put
it
directly
in
web
assembly
if
we
build
custom
web
assembly
modules,
but
because
web
assembly
was
designed
with
interacting
with
javascript
in
mind,
these
two
can
seamlessly
interact
together.
A
We
also
have
a
sandbox
memory
environment,
so
all
of
our
calculations
are
gonna,
be
done
in
the
browser
and
it's
not
gonna
happen
anywhere
else,
and
this
reduces
that
t
client
that
I
talked
about
in
that
equation
earlier
and
why
restau?
Well,
so
you
can
compile
into
web
assembly
from
a
lot
of
languages
from
C
or
C++,
so
I
have
never
programmed
before
this
in
rust
or
JavaScript
and
rest
was
extremely
approachable.
It
was
had
a
pretty
low
time
to
get
up
to
speed.
It
was
super
fun.
A
A
So,
to
do
this
to
create
our
functions
in
web
assembly,
we
can
annotate
our
this
is
in
rust,
so
we
can
annotate
our
functions
with
this
wasum
bind
gen,
and
this
is
saying
we
want
to
make
these
functions
available
to
JavaScript
from
web
assembly.
Then,
when
we
compile
that
we
get
an
autumn,
we
created
JavaScript
a
file,
and
this
is
kind
of
what
that
structure.
Data
structure
is
going
to
look
like
when
exposed
from
JavaScript.
A
Another
package
that
we
found
very
useful
is
wasum
pack,
so
this
actually
compiles
all
your
rest
code
into
web
assembly
and
then
packages
up
in
a
package
that
you
can
put
on
NPM.
So
this
super
easy
you
just
upload
it,
and
so
none
of
your
users
really
have
to
deal
with
compiling
to
web
assembly
from
rust
or
anything
like
that.
A
A
So
we
have
a
couple
of
different
things
here.
This,
in
particular,
is
from
a
simulation
of
a
population
to
star
which
is
like
the
second
generation
of
stars.
That's
formed
after
the
really
light
hydrogen
helium
based
stars
and
I'm
loading.
This
in
the
original
data
set.
So
I
mentioned
that
we're
taking
chunks
of
data.
The
original
data
set
is
several
hundred
gigabytes
of
data.
We
pulled
a
slice
down
for
this
particular
chunk,
so
if
I
do
that,
log
I
can
see
this
data
set.
A
And
I
can
do
the
same
thing
just
before,
so
the
slice
is
quite
a
bit
smaller
than
the
original
data
set.
But
this
is
because
we
made
this
into
a
widget.
We
can
also
leverage
all
the
functionality
of
the
wedges,
so
we
can
link,
for
example,
another
field
I've,
plotted
density
here,
but
I
can
link
it.
A
There's
another
field
in
this
particular
simulation
of
temperature
of
this
star
forming
so
I'm
gonna,
first
create
a
slider
that
allows
me
to
see
things
in
log
scale,
because
I
know
this
data
set
is
very
sparse
and
then
so
I
want
to
zoom
in
really
far
and
then
I'm
going
to
create
a
temperature,
a
temperature
one
as
well.
So
let's
see
what
happens?
Okay,
so,
let's
say
I
decide.
Okay,
I
really
hate
this
color
map.
A
On
the
other
side,
I've
now
linked
the
fields
on
both
sides,
so
I
can
do
a
log
and
we
can
see
both
of
them,
and
this
looks
pretty
cool.
These
are
really
different,
but
I
can
change
the
color
map
just
using
the
trait
'lets
and
then
I
can
move
these
around
as
well,
and
I
can
click
to
a
new
center
that
might
interest
me
and
do
that.
A
I
also
can
use
a
projection,
so
YT
has
tons
and
tons
of
really
interesting
ways
that
you
can
explore
your
data
that
haven't
been
accessible
and
this
interactive
this
directive
and
interactive
way.
So
this
is
doing
everything
I
just
did
in
one
giant
cell,
so
I'm.
Sorry,
it's
like
very
much
a
wall
of
text.
A
And
it's
going
to
take
a
little
bit
because
the
I'm
doing
a
projection
instead
of
a
slice
which
actually
collapses
all
of
the
data
and
brings
out
features
from
all
the
dimensions.
I'm
sure
I've
been
showing
XY
slices
so
far,
but
this
is
including
this
is
trying
to
pull
out
some
of
the
Z
dimensional
data.
A
A
A
A
There's
also
potential
to
limitation
for
data
sizes.
I've
shown
this
I've
shown
like
some
pretty
large
data
sets
and
we
haven't
like
reached
a
limit,
but
it
exists
and
we
have
limited
functionality.
This
is
nowhere
near
like
the
ability
of
a
lot
of
other
interactive
tools,
but
this
is
the
first
that
has
web
assembly
that
we
know
emotion
and
it
requires
multiple,
multiple
packages
and
package
ecosystems.
This
is
non-trivial
and
can
be
kind
of
rough
sometimes,
and
it's
still
really
early
in
development
moving
forward.
A
We
want
to
broaden
the
functionality
we
want
to
make
it
so
it's
even
more
intuitive
for
users
to
use
I'm
going
to
build
out
functionality
with
ytyt.
Has
all
this
cool.
These
cool
features
that
we're
not
exposing
yet,
and
we
want
a
restructure
of
the
widget
to
enhance
performance
even
more
there's
some
links
I'm
going
to
tweet
this.
The
slides
of
this
talk,
so,
if
you're
really
interested
afterwards,
you
can
go
these
all
link
to
everything.
You're
interested
in
and
I
want
to
give
Lois
uber
shout
out.
A
He
gave
a
poster
on
build
restructuring,
some
of
your
backends
from
C
to
rest
also
here
at
Syfy,
and
we
you
can
install
this
very
easy
we
have.
As
of
this
morning,
we
have
this
widget
on
pipe
I
and
you
don't
have
to
compile
to
rest
and
I'd
like
to
thank
the
following
individuals.
Matt
Turk
really
helped
me
with
this
nathaniel
klaussen
did
a
lot
of
the
early
feasibility
studies
of
this
work.
Nathan,
Goldman
and
Castro
Cavalli
helped
me
debug
a
lot
of
things:
I'm,
just
gonna.
Let
you
know
that
debugging
in
three
languages
sucks.
A
B
You
talk,
you
talk
a
lot
about
the
application
side
of
it,
the
programming
or
but
as
a
user
support
or
a
consultant.
My
worry
is
usually
about
the
network,
the
memory.
So
how
much
does
the
memory
count
in
serving
as
a
bottleneck?
If
you,
if
you
are
computing
from
the
HPC
from
the
server
versus
the
client
and
how
much
memory
do
you
need?
Because
all
the
manipulations
you
were
doing
and.
C
B
A
So
I
have
not
done
a
full
benchmark
of
when
we
reach
a
bottleneck.
We
know
it
exists,
but
I
don't
have
something
off
the
top
of
my
head
for
that.
I
will
say
that
this,
like
very
large
data
set,
is
a
pretty
good
example
of
the
types
of
data
sets
that
people
would
be
interested
in.
So
we're
pulling
that
slice
down
that
slice
we
saw.
The
projection
was
like
several
hundred
megabytes
and
that
was
directly
in
the
browser,
but
I
didn't
I.
A
D
C
A
Actually,
because
rest
and
web
assembly
are
dozens
are
what
web
assembly
and
JavaScript
are
designed
to
work
together,
we're
actually
just
passing
the
pointer
of
the
web
assembly
data
through
JavaScript.
We
have
like
we're
using
clamped
arrays.
We
don't
have
the
like
serialization
to
JSON,
so
it's
actually
like
very
friendly
to
transfer
the
data
between
JavaScript
and
web
assembly.
The
hard
part
is
getting
it
down
into
the
web
assembly
in
the
first
place.