1. From
storymaps
to
notebooks
-­‐
do
your
compu3ng
one
bit
at
a
3me.
In
this
presenta3on
I
will
review
various
ways
in
which
we
can
engage
with
linear
narra3ves
for
both
explanatory
and
exploratory/inves3ga3ve
Purposes.
In
the
first
case,
storymaps
can
be
used
to
visualise
a
linear
explana3on
of
the
connec3ons
and
rela3ons
between
a
set
of
geotemporally
distributed
events.
In
the
second
case,
interac3ve
computa3onal
notebooks
provide
a
powerful
way
of
construc3ng
and
interac3ng
with
digital
resources
in
a
process
that
might
be
described
as
having
"a
conversa3on
with
data”.
1

2. We
are
wired
to
listen
to
stories.
Narra3ves
serialise
and
contextualise
a
series
of
events.
2

3. We
listen
to
stories
in
linear
3me.
We
write
our
stories
in
linear
3me.
Stories
may
relate
a
linear
sequence
of
events
or
they
may
relate
a
series
of
out
sequence
events.
In
the
laJer
case,
narra3ve
devices
are
used
to
join
one
event
to
another
so
that
the
serialised
telling
of
the
tale
is
coherent
and
makes
sense.
3

4. I
want
to
consider
two
sorts
of
serialised
narra3ve.
4

5. Story
maps
are
interac3ve
maps
that
can
be
constructed
or
animated
such
that
the
serialisa3on
of
the
telling
is
sequenced
using
“loca3ons”.
Loca3ons
may
be
places,
or
more
generally,
scenes.
The
presenta3on
of
a
geographical
story
need
not
force
a
unique
serialised
reading
of
it.
We
need
to
learn
how
to
read
such
texts.
5

6. This
famous
map
in
visualisa3on
circles
by
Charles
Minard,
popularised
by
Edward
TuUe,
who
described
it
as
“[p]robably
the
best
sta3s3cal
graphic
ever
drawn”,
tells
the
story
–
if
you
know
how
to
read
it
-­‐
of
Napoleon’s
1812-­‐13
Russian
campaign.
(There’s
at
least
one
good
reading
of
it
on
Youtube:
a
search
for
/numberphile
greatest
ever
infographic/
should
turn
it
up.
Another
great
chart
storytelling
video
on
Youtube
is
Kurt
Vonnegut’s
“Shapes
of
Stories”,
but
that’s
part
of
a
slightly
different
story.
The
forward
mo3on
in
the
reading
of
the
chart
is
to
read
the
brown
line
from
leU
to
right
as
a
progression
across
space
–
the
coordinate
system
is
a
geographical
one
–
through
3me,
followed
by
the
black
line
from
right
to
leU,
again,
across
space
and
over
3me.
The
line
thicknesses
are
also
meaningful.
6

7. Another
way
of
telling
stories
through
maps
is
to
animate
a
story
through
a
sequence
of
scenes
that
take
place
in
different
geographical
loca3ons.
Timemapper
is
an
open
source
online
applica3on
that
takes
data
hosted
in
a
Google
spreadsheet
and
generates
a
3me
map
from
it.
Each
scene
is
comprised
of
a
loca3on,
a
date,
a
3tle
and
a
descrip3on
(which
may
include
an
image).
The
calendar
shows
the
events
along
a
3meline,
and
on
a
map.
Highligh3ng
an
event
in
the
3meline
also
highlights
it
one
the
map.
Events
on
the
3meline
are
actually
ranges,
rather
than
point
events.
(As
an
aside,
geographical
representa3ons
can
in
general
–
though
not
in
Timemapper
–
take
three
forms:
point
loca3ons,
paths
(points
connected
by
lines,
or
regions/shapes
(that
is,
areas
bounded
by
a
closed
line
–
one
that
starts
where
it
ends.)
Other
variants
of
this
theme
include
the
Simile
Timemap.
There,
the
map
display
shows
loca3ons
rela3ng
to
only
those
events
that
are
visible
in
the
calendar.
7

8. Storymap.js
-­‐
developed
under
the
auspices
of
the
Knight
Founda3on
–
provides
a
similar
mechanic
to
Timemapper,
although
this
3me
lines
connec3ng
loca3ons
in
the
serlalisa3on
of
the
story
are
also
displayed.
The
world
of
“data
journalism”,
in
which
the
Knight
Founda3on
is
a
key
mover,
is
currently
one
of
the
driving
areas
for
the
development
of
data
driven
storytelling
devices
(where
“device”
is
meant
in
the
most
general
sense).
8

9. Another
applica3on
–
currently
under
development,
but
one
I
think
to
watch
out
for
–
is
Odyssey.js,
from
online
mapping
providers
CartoDB.
The
“slides
or
scroll”
mechanic
is
something
worth
bearing
in
mind
when
looking
for
a
way
of
stepping
between
scenes
in
a
serialised
narra3ve.
9

10. A
few
weeks
ago,
I
got
a
tweet
from
@fantas3clife
–
BBC
R&D
hacker
Michael
Smethurst
–
asking
if
I
knew
how
to
generate
“narra3ve
charts”
as
popularised
by
a
par3cular
cartoon
on
the
XKCD
web
comic.
Michael
actually
provided
the
answer
in
his
request
–
in
the
form
of
this
example
from
Canada
–
but
hadn’t
read
the
source
code
properly.
The
narra3ve
chart
–
and
there
are
easily
discovered
examples
on
the
web
(Star
Wars,
Lord
of
the
Rings,
you
get
the
picture)
–
sequences
a
from
of
3me
along
the
horizontal
x-­‐axis
and
a
nominal
scale
on
the
ver3cal
y-­‐axis
represen3ng
different
characters.
Ver3cal
bars
represent
scenes.
Scenes
take
place
at
a
certain
3me
(in
the
storyworld)
and
loca3on
and
incorporate
par3cular
characters.
Michael
was
interested
in
the
way
this
sort
of
representa3on
might
be
able
to
support
con3nuity
checking
in
the
development
of
a
new
radio
drama
(I
think?),
and
it’s
something
I
think
could
be
worth
exploring
in
more
detail,
not
just
for
the
representa3on
of
drama3c
texts,
but
also
in
support
of
inves3ga3ons,
for
example,
criminal/police
inves3ga3ons,
or
inves3ga3ve
journalism.
Issues
we
might
one
to
dig
into
further
are
how
to
represent
different
3me
scales.
For
example,
telling-­‐3me,
that
is,
where
a
scene
happens
x
minutes
through
episode
1,
or
Act
3,
or
‘story-­‐3me’,
twenty
years
into
the
future
in
scene
1,
flashback
100
10

11. “Sentence
Drawing”
is
a
beau3ful
liJle
technique
–
if
you
like
that
sort
of
thing
–
(originated
by
data
ar3st
Stefanie
Posavec?)
for
serialising
the
turns
taken
by
speakers
in
a
drama3c
text.
[There’s
an
implementa3on
in
R
at
hJp://trinkerrstuff.wordpress.com/2013/12/08/
sentence-­‐drawing-­‐func3on-­‐vs-­‐art/
]
In
this
case,
the
colours
represent
the
family
origins
of
the
speakers
in
Romeo
and
Juliet.
Turns
in
the
line
represent
new
sentences
(though
I
would
like
to
see
them
represent
changes
in
speaker,
with
line
length
rela3ve
to
line(s)
length…
As
it
is,
the
length
of
the
line
indicates
number
of
words
in
each
sentence.
Sentence
drawing
represents
a
macroscopic
view
over
a
text.
Whereas
microscopes
allow
you
to
look
at
the
very
small,
macroscopes
allow
you
to
look
at
the
all
in
a
single,
glanceable
view.
11

12. Notebook
compu3ng
is
my
great
hope
for
the
future.
Notebook
compuIng
is
like
spreadsheet
compuIng,
a
democra3sa3on
of
access
to
and
the
process
of
prac3cally
based,
task
oriented
compu3ng.
Spreadsheets
help
you
get
stuff
done,
even
if
you
don’t
consider
yourself
to
be
a
programmer.
My
hope
is
that
the
notebook
metaphor
–
and
it’s
actually
quite
an
old
one
–
can
similarly
encourage
people
who
don’t
consider
themselves
programmers
to
do
and
to
use
programmy
things.
12

13. Notebook
compuIng
buys
us
in
to
two
ways
of
thinking
that
I
think
are
useful
from
a
pedagogical
perspec3ve
–
that
is,
pedagogy
not
just
as
a
way
of
teaching
but
also
as
a
way
of
learning
in
the
sense
of
learning
about
something
through
invesIgaIng
it.
Here,
I’m
thinking
of
an
inves3ga3on
as
a
form
of
problem
based
learning
–
I’m
not
up
enough
on
educa3onal
or
learning
theory
to
know
whether
there
is
a
body
of
theory,
or
even
just
a
school
of
thought,
about
“inves3ga3ve
learning”.
These
two
ways
of
thinking
are
literate
programming
and
reproducible
research.
13

14. In
case
you
haven’t
already
realised
it,
code
is
an
expressive
medium.
Code
has
its
poets,
and
ar3sts,
as
well
as
its
architects,
engineers
and
technicians.
One
of
the
grand
masters
of
code
is
Don
–
Donald
–
Knuth.
Don
Knuth
said
“A
literate
programmer
is
an
essayist
who
writes
programs
for
humans
to
understand”
as
part
of
a
longer
quote.
Here’s
that
longer
quote:
“Literate
programming
is
a
programming
methodology
that
combines
a
programming
language
with
a
documenta3on
language,
making
programs
more
robust,
more
portable,
and
more
easily
maintained
than
programs
wriJen
only
in
a
high-­‐level
language.
“Computer
programmers
already
know
both
kind
of
languages;
they
need
only
learn
a
few
conven3ons
about
alterna3ng
between
languages
to
create
programs
that
are
works
of
literature.
A
literate
programmer
is
an
essayist
who
writes
programs
for
humans
to
understand,
instead
of
primarily
wri3ng
instruc3ons
for
machines
to
follow.
When
programs
are
wriJen
in
the
recommended
style
they
can
be
transformed
into
documents
by
a
document
compiler
and
into
efficient
code
by
an
algebraic
compiler.”
Notebooks
are
environments
that
encourage
the
programming
of
wri3ng
literate
code.
Notebooks
encourage
you
to
write
prose
and
illustrate
it
with
code
–
and
the
14

15. The
other
idea
that
the
notebooks
buy
is
into
is
reproducible
research.
I
love
this
idea
and
think
you
should
too.
It
lets
archiving
make
sense.
Do
I
really
have
to
say
any
more
than
just
show
that
quote?
Now
you
may
say
that
that’s
all
very
well
for,
I
don’t
know,
physics
or
biology,
or
science,
or
economics.
Or
social
science
in
general,
where
they
do
all
sorts
of
inexplicable
things
with
sta3s3cs
and
probably
should
try
to
keep
track
of
what
they
doing.
But
not
the
humani3es.
But
that’s
not
quite
right,
because
in
the
digital
humaniIes
there
are
computa3onal
tools
that
you
can
use.
Par3cularly
in
the
areas
of
text
analysis
and
visualisa3on.
Such
as
some
of
the
visualisa3ons
we
saw
in
the
first
part
of
this
presenta3on.
But
you
need
a
tool
that
democra3ses
access
to
this
technology.
You
need
an
environment
that
the
social
scien3sts
found
in
the
form
of
a
spreadsheet.
But
beJer.
15

16. (I
also
like
to
think
of
notebooks
as
a
place
where
I
can
have
a
conversaIon
with
data.).
16

17. So
how
do
notebooks
help?
The
tool
I
want
to
describe
is
–
are
–
called
IPython
Notebooks.
IPython
Notebooks
let
you
execute
code
wriJen
in
the
Python
programming
language
in
an
interac3ve
way.
But
they
also
work
with
other
languages
–
Javascript,
Ruby,
R,
and
so
on,
as
well
as
other
applica3ons.
I
use
a
notebook
for
drawing
diagrams
using
Graphviz,
for
example.
They
also
include
words
–
of
introduc3on,
of
analysis,
of
conclusion,
of
reflec3on.
And
they
also
include
the
things
the
code
wants
to
tell
u,
or
that
the
data
wants
to
tell
us
via
the
code.
The
code
outputs.
(Or
more
correctly,
the
code+data
outputs.)
17

18. The
first
thing
notebooks
let
you
do
is
write
text
for
the
non-­‐coding
reader.
Words.
In
English.
(Or
Spanish.
Or
French.
I
would
say
Chinese,
but
I
haven’t
checked
what
character
sets
are
supported,
so
I
can’t
say
that
for
definite
un3l
I
check!)
“Literate
programming
is
a
programming
methodology
that
combines
a
programming
language
with
a
documenta3on
language”.
That’s
what
Knuth
said.
But
we
can
take
it
further.
Past
code.
Past
documenta3on.
To
write
up.
To
story.
The
medium
in
which
we
can
write
our
human
words
is
a
simple
text
markup
language
called
markdown.
If
you’ve
ever
wriJen
HTML,
it’s
not
that
hard.
If
you’ve
ever
wriJen
and
email
and
wrapped
asterisks
around
a
word
or
phrase
to
emphasise
it,
or
wriJen
a
list
of
items
down
by
puzng
each
new
item
onto
a
new
line
and
preceding
it
with
a
dash,
it’s
that
easy.
18

19. Here’s
a
notebook,
and
here’s
some
text.
There’s
also
some
code.
But
note
the
text
–
we
have
a
header,
and
then
some
“human
text”.
You
might
also
no3ce
some
up
and
down
arrows
in
the
notebook
toolbar.
These
allow
us
to
rearrange
the
order
of
the
cells
in
the
notebook
in
a
straigh{orward
way.
In
a
sense,
we
are
encouraged
to
rearrange
the
sequence
of
cells
into
an
order
that
makes
more
sense
as
a
narra3ve
for
the
reader
of
the
document,
or
in
the
execu3on
of
an
inves3ga3on.
The
downside
of
this
is
that
we
can
author
a
document
in
a
‘non-­‐linear’
way
and
then
linearise
it
for
final
distribu3on
simply
by
reordering
the
order
in
which
the
cells
are
presented.
There
are
constraints
though
–
if
a
cell
computaIonally
depends
on
the
result
of,
or
state
change
resul3ng
from,
the
execu3on
of
a
prior
cell,
their
rela3ve
ordering
cannot
be
changed.
19

20. As
well
as
human
readable
text
cells
–
markdown
cells
or
header
cells
at
a
variety
of
levels
–
there
are
also
code
cells.
Code
cells
allow
you
to
write
(or
copy
and
paste
in)
code
and
then
run
it.
Applica3ons
give
you
menu
op3ons
that
in
the
background
copy,
paste
and
execute
the
code
you
want
to
run,
or
apply
to
some
par3cular
set
of
data,
or
text.
Code
cells
work
the
same
way,
but
they’re
naked.
They
show
you
the
code.
At
this
point
it’s
important
to
remember
that
code
can
call
code.
Thousands
of
lines
of
code
that
do
really
clever
and
difficult
things
can
be
called
from
a
single
line
of
code.
OUen
code
with
a
sensible
func3on
name
just
like
a
sensible
menu
item
label.
A
self-­‐describing
name
that
calls
the
masses
of
really
clever
code
that
someone
else
has
wriJen
behind
the
scenes.
But
you
know
which
code
because
you
just
called
it.
Explicitly.
Let’s
see
an
example
–
not
a
brilliant
example,
but
an
example
nonetheless.
20

21. Here’s
some
code.
It’s
actually
two
code
cells
–
in
one,
I
define
a
func3on.
In
the
second,
I
call
it.
(Already
this
is
revisionist.
I
developed
the
func3on
by
not
wrapping
it
in
a
func3on.
It
was
just
a
series
of
lines
of
code
that
wrote
to
perform
a
par3cular
task.
But
it
was
a
useful
task.
So
I
wrapped
the
lines
of
code
in
a
func3on,
and
now
I
can
call
those
lines
of
code
just
by
calling
the
func3on
name.
I
can
also
hide
the
func3on
in
another
file,
outside
of
the
notebook,
then
just
include
it
in
any
notebook
I
want
to…
…or
within
a
notebook,
I
could
just
copy
a
set
of
lines
of
code
and
repeatedly
paste
them
into
the
notebook,
applying
them
to
a
different
set
of
data
each
3me…
but
that
just
gets
messy,
and
that’s
what
being
able
to
call
a
bunch
of
lines
of
coped
wrapped
up
in
a
func3on
call
avoids.
21

22. As
far
as
reproducible
research
goes,
the
ability
of
a
notebook
to
execute
a
code
element
and
display
the
output
from
execuIng
that
code
means
that
there
is
a
one-­‐
to-­‐one
binding
between
a
code
fragment
and
the
data
on
which
it
operates
and
the
output
obtained
from
execu3ng
just
that
code
on
just
that
data.
22

23. The
output
of
the
code
is
not
a
human
copied
and
pasted
artefact.
The
output
of
the
code
–
in
this
case,
the
result
of
execu3ng
a
par3cular
func3on
–
is
only
and
exactly
the
output
from
execu3ng
that
func3on
on
a
specified
dataset.
23

24. The
output
of
a
code
cell
is
not
limited
to
the
arcane
outputs
of
a
computa3onal
func3on.
We
can
display
data
table
results
as
data
tables.
24

25. We
can
also
generate
rich
HTML
outputs
–
in
this
case
an
interac3ve
map
overlaid
with
markers
corresponding
to
loca3ons
specified
in
a
dataset,
and
with
lines
connec3ng
markers
as
defined
by
connec3ons
described
in
the
original
dataset.
We
can
also
delete
the
outputs
of
all
the
code
cells,
and
then
rerun
the
code,
one
step
–
one
cell
–
aUer
the
other.
Reproducing
results
becomes
simply
a
maJer
of
rerunning
the
code
in
the
notebook
against
the
data
loaded
in
by
the
notebook
–
and
then
comparing
the
code
cell
outputs
to
the
code
cell
outputs
of
the
original
document.
Tools
are
also
under
development
that
help
spot
differences
between
those
outputs,
at
least
in
cases
where
the
outputs
are
text
based.
25

26. To
summarise,
technologies
such
as
story
maps
and
computa3onal
notebooks
encourage
you
to
create
a
story
–
or
analysis
–
one
frame
at
a
3me,
one
cell
at
a
3me.
But
that
is
not
to
say
that
the
result
of
that
construc3on
need
necessarily
be
presented
in
the
same
linear
order.
Story
maps
powered
by
data
construct
3melines
based
on
3mestamps,
and
may
generate
connec3ng
lines
between
loca3ons
based
on
data
that
either
explicitly
maps
from
one
loca3on
to
another
(from
and
to
column
cells
in
the
same
row
of
a
dataset)
or
that
implies
a
step
from
loca3on
to
another
(such
as
moving
from
a
loca3on
in
one
row
to
the
loca3on
specified
in
the
next
row).
As
with
all
networks
constructed
from
a
set
of
independently
stated
connec3ons,
some3mes
the
gross
level
structure
and
paJerns
only
become
evident
when
you
look
at
everything
all
at
the
same
Ime.
26

27. As
well
as
construc3ng
stories
one
step
at
a
3me,
can
they
also
be
read
one
step
at
a
3me.
And
if
so,
how
is
that
sequencing
managed?
Is
the
reader
lead
down
a
single
path?
Are
there
decision
points
whey
they
can
change
the
direc3on
of
the
story?
Is
it
obvious
even
where
the
star3ng
point
of
the
story
reading
is,
and
when
the
end
has
been
reached?
If
your
notebook
–
or
story
–
was
constructed
in
a
conversa3on-­‐like
way,
does
it
read
back
well
as
one?
27

28. To
learn
more
about
working
with
data,
as
well
as
finding
and
telling
stories
in
data,
visit
the
School
of
Data
website
at
SchoolOfData.org
The
website
includes
a
regularly
updated
blog
featuring
news,
events
and
stories
from
the
world
of
data,
as
well
as
a
growing
body
of
openly
licensed
free
courses
and
tutorials
on
working
with
data.
The
School
of
Data
also
runs
an
ac3ve
fellowship
programme
for
prac33oners
who
regularly
work
with
open
data.
Visit
SchoolOfData.org
to
learn
more.
28