Scaffolding Interactives Using Idyll to rapidly create interactive narratives, a walkthrough.

Idyll is an open source software project that I work on at the University of Washington Interactive Data Lab. It can be used to help quickly structure, write, and deploy interactive posts like this one.

This post is meant to showcase recent updates to the way that scroll and step functionality is defined. This page is built from a single Idyll markup file, with no external JavaScript or CSS.

Narrative Structures

In this post we cover two types of narrative structures: steppers, and scrollers. As we’ll see, although these layouts are visually distinct, Idyll provides a similar declarative specification for each. Both may be further parameterized and customized to support a range of design output.

Steppers

A Stepper can be thought of as an abstract version of a slideshow. There are controls that allow the user to navigate through a series of steps. A persistent graphic may also provided in order to create visualizations with object constancy.

For example, one could use the Stepper component to create a slideshow with captions for each image.

That is created with the following markup:

[var name:"stepperIndex" value:0 /] [Stepper currentStep:stepperIndex] [Graphic] [img src:`"static/images/examples/" + stepperIndex + ".png"` /] [/Graphic] [Step] [The Barnes-Hut Approximation: Efficient computation of N-body forces](https://idyll-lang.org/gallery/the-barnes-hut-approximation) [/Step] [Step] [Kernel Density Estimation: An Interactive Explanation of the Statistical Technique](https://idyll-lang.org/gallery/kernel-density-estimation) [/Step] [Step] [The Etymology of Trig Functions](https://idyll-lang.org/gallery/the-etymology-of-trig-functions) [/Step] [StepperControl /] [/Stepper]

In this example, a variable named stepperIndex is bound to the currentStep property of the stepper, causing it to automatically be updated when the controls are pressed. This in turn causes the image source url to update. The Graphic component isn’t limited to displaying static images. Any Idyll component may be used or you can include your own custom D3 or React component.