UW Interactive Data Lab
IDL logo

Idyll Studio: A Structured Editor for Authoring Interactive & Data-Driven Articles

Matt Conlen, Megan Vo, Alan Tan, Jeffrey Heer. ACM User Interface Software & Technology (UIST), 2021
Figure for Idyll Studio: A Structured Editor for Authoring Interactive & Data-Driven Articles
A view of The Barnes-Hut Approximation, an existing explorable explanation reimplemented using Idyll Studio. A graphic stays fixed to the right side of the page as readers scroll, and responds to links and input widgets placed in the text.
Materials
Abstract
Interactive articles are an effective medium of communication in education, journalism, and scientific publishing, yet are created using complex general-purpose programming tools. We present Idyll Studio, a structured editor for authoring and publishing interactive and data-driven articles. We extend the Idyll framework to support reflective documents, which can inspect and modify their underlying program at runtime, and show how this functionality can be used to reify the constituent parts of a reactive document model—components, text, state, and styles—in an expressive, interoperable, and easy-to-learn graphical interface. In a study with 18 diverse participants, all could perform basic editing and composition, use datasets and variables, and specify relationships between components. Most could choreograph interactive visualizations and dynamic text, although some struggled with advanced uses requiring unstructured code editing. Our findings suggest Idyll Studio lowers the threshold for non-experts to create interactive articles and allows experts to rapidly specify a wide range of article designs.
BibTeX
@inproceedings{2021-idyll-studio,
  title = {Idyll Studio: A Structured Editor for Authoring Interactive \& Data-Driven Articles},
  author = {Conlen, Matt AND Vo, Megan AND Tan, Alan AND Heer, Jeffrey},
  booktitle = {ACM User Interface Software \& Technology (UIST)},
  year = {2021},
  url = {https://uwdata.github.io/papers/idyll-studio},
  doi = {10.1145/3472749.3474731}
}