►
From YouTube: Saite interactive document creation - visualizing COVID-19 data tutorial - Jon Anthony
Description
Preparing to the Scicloj COVID-19 Clojure hackathon on March 29th, we recorded a short conversation with Jon Anthony with an overview of Saite -- an interactive documents application with editor support, graphics and visualization, markdown, and LaTex.
Project code repository:
https://github.com/jsa-aerial/saite
Discussion:
https://clojurians.zulipchat.com/#narrow/stream/210075-saite-dev
A
B
B
And
if
you
have
questions
on
this
stuff,
we
can
discuss
it
over
on
the
sharp
side,
ke
dev
channel
of
Zulu.
That's
there
and
you
can
ask
me
questions
once
you
run
this
thing
and
go
to
localhost
3000
you
will
be.
This
is
what
you'll
see
to
start
with.
This
is
what
it
comes
up
looking
like,
and
then
you
can
upload
a
document
in
particular
that
I
have
more
things
in
my
sessions.
B
B
So
Vega
light
is
a
interactive
grammar
of
graphics
produced
by
the
folks
at
the
interactive
data
lab
at
University
of
Washington,
and
it's
a
really
cool
thing.
You
can
go
to
their
website.
There's
tons
of
information
on
this
thing,
really
good
documentation.
There's
these
examples.
In
fact
the
example
that
we
were
just
kind
of
looking
at
started
out
from
this
little
bagel
like
Jason
specification
and
and
there's
as
you
can
see,
there's
boatloads
more.
So
that
is
basically
this
little
bit
here.
B
B
Maybe
be
diversity
need
to
do
the
data
source,
so
we
have
in
a
quick
example
here
so
now,
I
can
visualize
this
and
say
I
wanted
in
a
new
chart.
A
new
tab
called
charts.
I
can
just
execute
this
we'll
see
we
got
a
new
tab
charts
with
this
simple
little
graphic
I'm
going
to
delete
this,
because
we
won't
need
it
and
we'll
go
back
to
the
simple
example,
and
we
can
do
a
little
bit
more
than
that
where
we
can
render
it
in
the
body
right
here
and
this
body.
B
The
other
thing
is:
is
that
in
any
of
these
tabs,
you
can
open
the
main
editor
that
created
them
and
walk
through
the
code
kind
of
mess
with
it
far
as
that
goes,
and
you
can
close
them
back
up
and
there's
a
tab
that
goes
over
templates
templates
as
discussed
are
part
of
Hana
me
and
there's
an
entire
thing
about.
How
templates
are
the
description
in
there
by
the
word?
B
B
Any
data
structure,
if
you're
familiar
with
the
lambda
calculus,
this
thing
is
effectively
a
version
of
lambda
substitution
that
that's
how
it
works
and
there's
this
whole
walking
tutorial
kind
of
you
can
go
through
and
interactively
work
with.
You
get
a
feel
for
how
these
things
work.
You
know
you
just
walk
through
these
things.
You
say:
oh,
how
am
I
executing
that
stuff?
B
Well,
if
you
go
over
to
this
question,
mark
here's
the
default
text,
manipulation
all
of
this
stuff
can
be
configured
by
a
user
to
be
while
they
particularly
want
it
that
defaults
are
based
on
Emacs.
These
editors
are
basically
Emacs
editors,
encode
mirror,
but
they're,
basically
Emacs,
and
so
this
control
X
control.
The
very
similar
decider
control,
X
control
C
is
a
similar
kind
of
thing
to
wet.
Cider
is,
and
you
can
do
control
XJ
to
execute
forms
over
on
server
the
JVM
and
or
an
entire
over
the
expression
everything.
B
So
it's
very
similar
decider
in
that
regard,
but
you
can
mix
it.
The
other
thing
you
can
do
is
you
can
actually
mix
server
and
client
side
code
together.
The
execution
there's
an
in
there's
actually
in
the
when
you
install
it,
you
will
have
a
test
directory
and
in
there
there's
this
business
of
you
won't.
You
will
see
a
mixed
client
server
and
then
it'll
give
you
some
examples
of
how
you
can
mix
the
code
from
the
climb
server
together.
So.
B
There
you
go
I
think
I
already
talked
about
this
a
bit,
so
you
can
open
this
up
and
play
around
with
inserting
picture
frames
and
then
ordering
them
in
various
ways
by
changing
the
column
and
rows
per
the
elements
per
row
or
column
and
stuff
like
that.
So
all
of
these
things
will
be
available
and
you
can
just
sort
of
mess
around
with
them
and
then
finally,
here's
just
this
will
be
in
the
site,
a
overview
document
as
well.
B
A
B
B
B
Right
now,
these
colors
are
picked
basically
by
the
idea.
I
just
used
them
because
they
tend
to
do
a
really
good
job
of
picking
appropriate
color
schemes
for
that
kind
of
stuff
all
right.
So
that
just
gives
you
a
little
bit
of
an
appetite
like
you
say:
they're,
sharp,
sharp
sign,
take
them
on
and
look
if
we
can,
you
got
questions
and
stuff.
You
wanna
ask
me:
that's
a
great
place.
People
have
recorded
conversation
about
how
to
do
different
things
so,
but
we're
in
packet
on
having
to
do
with.
B
Tsarskoe
be
tuned,
so
let's
take
a
look
at
an
example
moving
around
with
datasets
with
that,
and
we
have
a
couple
tabs.
This
is
daily
by
stage
and
we
have
overview
here
on
a
geomap.
This
is
just
straight
raw
positive
confirmed,
counts
per
state,
as
of
yesterday.
Ovulated
I
should
probably
have
that
in
the
tooltip
the
latest
date.
This
is.
B
This
is
a
log
version
of
exactly
the
same
data,
and
if
we
go
down
here,
this
is
for
hungry.
This
is
by
capita,
but
there's
a
definitely
a
more
useful,
a
little
more
informative,
more
less
or
less
misleading
than
just
the
raw
counts,
and
this
is
a
log
of
capita
stuff
and,
very
god,
I
know
these
things
are
pretty
picking
off
and
they're
kind
of
alarming
rates,
and
just
like
in
the
previous
Dagon,
you
can
open
up
the
editor.
So
this
is
the
main
editor
that
created
these
things.
B
B
A
A
A
B
A
B
And
I
guess:
if
they
got
the
ad
here
and
then
you
can
do
different,
you
can
also
change
the
numbers
here.
There's
a
lot
of
other
stuff.
You
can
do,
but
that's
all
encoded
in
the
user
meta
step,
which
is
a
piece
of
the
specification
that
is
surrounds,
the
Vega
and
Vega
like
spec,
but
then
that's
specifically
accounted
for
by
the
interactive
data
lab
folks,
where
the
author's
a
big
and
big
a
bite.
Also
there's
a
authors
of
d3
okay.
So
so
we
go
over
here.
I've
got
a
similar
kind
of
theme.
B
Increases
per
day
and
that's
what
this
chart
does,
so
we
take
a
look
at
that
a
little
bit
better
and
that's
there
you
go
so
you
have
an
increase
in
positive.
The
increase
is
on
a
linear
scale
over
here
on
the
left,
and
then
the
positives.
The
cumulative
positives
is,
is
on
a
log
scale
on
the
right,
and
you
can
change
that.
However,
you
want
bar
that
goes
and
that's
given
by
this
definition
here,
which
is
effectively
a
Vega
light
layer
chart
which
is
whoa
the
Mac
bit
me
yeah.
B
So
there's
this
is
a
layer
chart.
The
overall
thing
is
a
layer
chart
which
has
two
line:
charts
on
top
one
of
them.
That's
what
these
two
guys
are,
so
you
can
and
then
you
can
stylize
it
in
different
ways
like
here's,
the
the
Y
my
scale
here
through
the
log
unpossible
cumulative
positive
and
again
we
can
change
change
this
and
say
Massachusetts.
B
B
So
it's
pretty
nice
right.
So
there
you
go
and
that
is
done
effectively.
It's
the
exact
same
chart.
It's
this.
Only.
We
added
a
right
panel
to
the
picture
frame
which,
again,
in
that
over
to
psyche
overview
document,
you
can
look
at
it
more
detail.
You
looking
up
its
describes
with
hop
picture
frames
are
organizing
all
that
and
it.
B
No,
this
is
this,
is
psychic
stuff,
just
like
la
tech.
Isn't
that
part
of
Vega,
like
think
yeah,
that
that's
stuff
that
psychic
ads
around
these
visualization
capabilities
so
and
the
key
thing
to
this?
Is
this
update
daily
right?
There
that's
the
function
that
actually
gets
called
when
you
do
the
selection-
and
you
said
well,
where
did
that
come
from
that
has
to
be
a
client-side
function?
I
can't
be
server
or
anything
like
that,
and
that
comes
from
this
closure
script
code,
I'm
here
and
so
here's
the
Mac
got
me
again.
B
So
here
we
are,
maybe
maybe
I'll
stay
off
the
pad
for
a
second.
So
that's
this
function
here
and
then
you
register
it
with
side
tag
down
here.
This
add
the
same
old
translate
thing
so
that
the
specs
will
understand
where
that
is
so.
This
is
just
straight
closure
script
code,
which
you
would
use
the
control,
X
control
e
in
order
to
run,
and
then
the
actual
data
wrangling
code
for
the
code
for
the
data
sets
is
over
in
this
tab.
B
B
Yeah,
this
is
intermixed
code,
so
this
is
code
that
runs
both
on
the
client
and
the
server,
and
the
clj
is
effectively
an
indicator
to
the
site:
a
machinery
to
take
the
enclosed
form.
So
this
deaf
ear,
F
deaf
states,
URL
blah
blah
blah.
It
runs
that
over
on
the
JVM
and
then
returns
the
result,
which
is
just
a
string
and
assigns
it
to
this
client-side
variable
and
the
same
thing
happens
down
here.
B
B
B
B
But
obviously
it
would
be
much
nicer
to
instead
of
again
fooling
with
the
editor
is
to
put
a
reactive
component
over
here,
where
you
could
select
the
states
that
you're
interested
in,
but
maybe
it's
like
groups
of
states
and
do
it
with
these
kind
of
buttons
or
reactive
components
like
like
we
get
up
here.
With
this
thing,.
A
A
One
more
question,
yes
and
so
I
understand
that
all
these
called
code
blocks
what
they
return
is
this
superset
of
Vega
like
justification
and
by
control
X
control
I.
You
insert
the
visual
result
of
these
specifications
yeah
in
the
detail
body
here.
But
what,
if
I,
want
to
see
the
specification
itself
as
data
you.
B
B
There's
an
output,
it's
kind
of
like
a
rebel
output
like
an
exciter
thing.
So
if
I
come
up
here
and
I
just
put
my
cursor
on
true
and
I,
do
it
and
feel
like
to
control
even
lead
down
here?
True
gets
comfortable
and
I.
Can
this
little
button
here
will
clear
that
output
area
and
then
so
I
can
execute
this
whole
thing
and
I
get
effectively
this
entire
specification
down
here.
B
A
B
Including
all
the
control
information
in
the
user
meta
field,
so
there's
a
lot
of
them
this
stuff
is,
you
can
see
what
you
can
see
just
the
Mac
tells
me
there's
a
lot
of
this.
That
is
this.
Here's
the
picture
frame
definition
this
top
comes
from
this
top
up
here,
the
left.
It's
been
the
same
left
yeah.
All
of
that
stuff
is
in
there
all.
A
A
B
It
disclosed
through
in
pretty
much
a
detail,
and
also,
let's
see,
if
you're
over
here
yeah
this
it
kind
of
goes
along
with
the
flow
of
the
documentation
and
fauna
me
on
on
this.
You
go
to
hana
me
get
this
table
of
contents
go
over
here,
the
templates
and
all
this
stuff
in
particular.
It
talks
about
the.