hi everyone today i'm talking about Idyll
studio a structured editor for authoring
interactive and data-driven documents
i'm matthew conlen and this work was
done in collaboration with jeff heer at
the university of washington along with
megan vo and allen tan of the idyll open
source collective
interactive articles are popular in
domains like data journalism and
scientific communication because they
can foster more engagement from readers
and result in improved learning outcomes
but these benefits come at a cost
the articles can be difficult and time
consuming to produce and are often only
a feasible option for those versed in
general purpose programming tools like
javascript and the command line
in this work we extend and build upon
Idyll an existing tool kit for developing
interactive articles
while Idyll requires users to write
markup with Idyll studio we attempt to
lower the threshold for authors to
create interactive articles through a
wysiwyg style editor allowing
non-technical authors access to the
medium and enabling technical authors to
develop articles more rapidly and with
less cognitive overhead
now let's start by jumping right into a
live demo
i'll start with an overview of the basic
interface
in the main panel we have a document
rendering i can interact directly with
the text of the article to edit it
and use markdown syntax for basic
styling
the left sidebar contains three tabs the
document tab controls top-level
information like the theme and layout
being used
metadata for social media and search
engines and buttons to preview and then
ultimately publish the article to the
web
the components tab allows me to add
components to the document for example i
can search for a table and then drag it
onto the page
components are grouped according to
their functionality and authors can add
their own custom javascript components
as well
the variables tab allows me to create
reactive variables and import tabular
data sets
i can create a new variable by clicking
this button and then setting its name
and assigning an initial and current
value
and i can import tabular data sets by
taking a json or csv file from my file
system
dropping it onto this panel
components are all annotated with a
small icon which can be clicked to
reveal an editing instrument
for example clicking the header
components icon allows me to edit the
title
subtitle date authors and so on
the table component expects a data set
as an input property
i can drag the imported data set onto
this property to connect it to the table
notice that it immediately starts
showing runs from the data set
properties have different types
including literals like numbers booleans
and strings
variables which create a two-way binding
between the property and the variable
and expressions which are reevaluated as
variables change
these simple constructs can be combined
to rapidly create interactive articles
for example let's say i want to add a
dynamic sentence that stated
if my dog is x years old
that's equivalent to
7 times x in human years
and i want readers to be able to
manipulate this value x and see the
equation update in real time
i'll start by creating a new variable to
represent the dog's age
give it a name
and i'll start writing my sentence i'll
say if my dog is
and now i want to add a component that
will allow readers to manipulate this
value so i'm going to drag and drop a
scrubbable value and put at the end of
my sentence
and i'm going to set its value to dog
age
so now we see as i scrub this the value
the current value of the dog age
variable is updating in real time on the
left
i'll also edit some of these other
properties like the minimum and maximum
value to make it appropriate for the
sentence at hand
and i'll keep editing my sentence i'll
say
years old
that's equivalent
to
okay now i want to have 7 times x and i
don't want readers to be able to edit
this i just want to display this
expression so i'm going to add a display
value
i'm going to edit its property and set
it to an expression
that is seven times dog age
okay and now we can see that as i scrub
this number that's going to update in
response seven times
and i'll finish the sentence finally in
human years
all right i'll delete my example
and let's see we have a fully working
sentence
under the hood the application starts by
parsing an arbitrary Idyll program and
generating an abstract syntax tree
representing the structure text
components and reactive variables
constituting the interactive article
we then modify this ast by inserting
instrumental components including text
editors insertion points and component
editors which are used by authors to
make changes to the article
the modified version of the ast is
rendered into the Idyll studio gui
as authors make edits a new version of
the Idyll program is serialized starting
the loop again
to implement this architecture we
extended Idyll to support reflection
allowing components to read and write to
the underlying program as it runs
to assess the effectiveness of the
editor we conducted a study with 18
users including journalists researchers
and data scientists
participants were assigned a technical
score based on their familiarity with
various programming and data science
tools
after a five-minute tutorial
participants were given 30 minutes to
complete a series of six tasks
a basic intermediate and advanced task
along an interaction track and a
data-driven track
each task required implementing a small
self-contained design that frequently
appears in interactive articles
the results can be seen here with each
row corresponding to a participant with
the most technically savvy participants
at the top and each colored column
corresponding to a task
with one exception all participants
completed both of the basic and
intermediate tasks
a participant's ability to complete the
advanced tasks was highly correlated
with their technical background
through semi-structured interviews we
found that the interface enabled users
to rapidly create designs with less
stress compared to existing tools but
there was a learning curve for some
authors
participant nine said
adding the interactivity and putting it
into text if you wanted to do it in
another way you could but it's more work
and more stressful
participant 15
what i really like is to drag and drop
components and then wire them up with
point and click
and participant 17 it's fully something i
would use i don't have the time or
energy to code from scratch
while all of the users were able to
figure out the basic primitives of the
system when asked to compose these
building blocks together some users
needed more time to learn
participant three a more expert user
said
i came in with a slightly wrong
preconception that was all of 30 seconds
or so
while less expert user participant 17
noted everything logically made sense
but it took some time to think through
things
and participant 15 said i would have to
do it a few times to get that to work
still the interface empowered users and
provided better support to users
compared to existing tools
participant 18 noted
sometimes i use powerpoint but it is
limiting
i can write a little html too but that
is also limiting
and participant 17 said i don't have a
good workflow i've tried other tools and
just gave up
i have used observable notebooks it's a
bit confusing i get overwhelmed
to recap we presented three main
contributions
we extended Idyll with support for
reflective documents allowing authors to
interactively edit articles at runtime
we use these extensions to power Idyll
studio a wysiwyg style structured editor
Idyll studio is open source software that
can be downloaded and used today
finally we evaluated the usability of
the editor
our system helped make the authoring
process less stressful and limited the
need for authors to use general purpose
programming tools
with that i'd like to say thank you for
listening and open it up to questions