The Encyclopedia of Storytelling

Speaking the same language can help journalists, designers, and programmers to be able to collaborate.
The Encyclopedia of Storytelling is an open source repository of terms, techniques, and concepts that spans multiple disciplines.
It is open source and open to contributions on GitHub.

Geospatial Information Systems (GIS)

Geo, from the Greek “ gē ” for ‘earth'. Spatial, from the Latin_“ spatium ”_ for ‘space'.

In other words, maps with data.*

### Examples

* [Mapping data and visualizing geospatial information: A quick introduction for journalists](

Google Alert

You set it once, and Google will tell you when new pages are added to the internet that match your search keywords.

Journalists can use this to effectively set up your own push notifications when Google indexes a new search result on a given keyword.

To [set up a Google Alert,]( you first set a keyword and a delivery method. Google will notify you when new results get published.

There are other ways to do the same concept…


HTML is the standard markup language for displaying content in a web browser. When combined with [CSS] to define visual presentation, and [JavaScript] for interactivity, you get… websites!

In other words, HTML is the code that defines the structure of the content you see on the web.

Lottie Animation

A lightweight web-friendly animation format based on [JSON].

They're like [GIFs], but made from [vector graphics].


Markdown allows you to quickly turn written text into HTML using simplified symbols in place of tags. For example…

Markdown was created by [John Gruber](

Open Source Intelligence (OSINT)

The collection and analysis of data gathered from publicly available sources - such as online databases or social media to support an investigation. A relatively new field born on social media and innovated largely thanks to the work of dedicated amateurs, it has proven a powerful tool for journalism.

- Information from the [Center for Investigative Journalism](

Optical Character Recognition (OCR)

## Optical Character Recognition (OCR)


PDF documents, especially if they were created from scans of paper docuents, may not have the text converted into machine-readable text characters, which would allow you copy & paste it, or extract the data in order to do any further analysis. In that case, you will need to run it through a program that can perform Optical Character Recognition (OCR).

These include:

- Abode Acrobat (licensed)

- (Open Source) [GUI]( or Command Line

See more about [working with scanned documents…]()

Raspberry Pi

A tiny computer the size of a sandwich, that can run simple programs and be deployed cheaply almost anywhere.

* [Who Gets to Breathe Clean Air in New Delhi?](

Scalable Vector Graphics (SVG)

An image that is created using [vector graphics], as opposed to raster.


Like the notes and doodles in the margin of a high school textbook left by its previous owner, annotations draw your attention to the most important information. Often used to highlight the key figures in a document, annotations reveal [the artists hand] and give the reader access to the thinking behind the creation, for example to demonstrate an expert saving you the time of sifting though countless documents to point out primary source of a data point - while still respecting you to show you the source, if you'd like to have a look yourself. The result is that you feel cared for, guided through a curated experience.

[Nieman]( uses them as a little chat bubble that the user can click on to view something… a meta-conversation outside the main content

### Tools

* [DocumentCloud](

### Examples:

* [Secret IRS Files Reveal How Much the Ultrawealthy Gained by Shaping Trump's “Big, Beautiful Tax Cut”](

audio forensic analysis

A technique to visually represent sound on a timeline – especially useful for mapping gunshots.

Audio forensics is the field of forensic science relating **to the acquisition, analysis, and evaluation of sound recordings**. The field of audio forensics was largely established in 1973 during the Watergate scandal.

### Tools:

* [Audacity](

* [Ardour](

* Adobe Premiere / Adobe Audition

* OpenShot(?)

### Examples:

* [Video: 10 Minutes. 12 Gunfire Bursts. 30 Videos. Mapping the Las Vegas Massacre.](

* [The Killing Of Tahir Elçi](

augmented reality (AR)

Augmented reality (AR) is an enhanced version of the real physical world that is achieved through the use of digital visual elements, sound, or other sensory stimuli viewed through a device such as a stereoscopic headset, "smart glasses," or a smartphone camera and screen.

_Games such as[Pokémon Go]( and[Ingress]( utilize an[Image Linked Map]( interface, where approved[geotagged]( locations appear on a stylized map for the user to interact with._

### Examples

* [Masks Work. Really. We'll Show You How](

* Pokémon Go


A story form that gives the reader the feeling of familiarity. Their purpose is to engage users by replicating human conversation - sometimes to [eerie effect](


From the Italian for “bright and dark.” High contrast, evoking a sense of heightened intensity or drama. Black and white

For example: The high-contrast polarity of a chessboard can create a sense of order, but also restriction: a limited set of possible moves, entrapment.


Choice is critical. As humans, we want to be able to choose.

Choice in storytelling can be as complex as in Black Mirror's _[Bandersnatch]( - or as simple as offering a reader an option to click view a piece of information - or not.

Ask: Do you want to know the answer to this question? - and you've enticed them, involved them - not just throw information at them.


Color shows harmony. The goal should always be to use color to simplify the information, but it's easy to have a little too much fun with the color palette and overcomplicate the message. A rainbow palette is visually interesting, but usually makes the data more difficult to understand. Instead, choose a palette that helps viewers read your visualization at a glance—and always use darker or more vivid colors as the fill color. A solid foundation to use when getting started is to start with some widely accepted basic color schemes: _

* _Complementary Colors: opposite one another on the color wheel. _

* _Split Complementary: One color and the two colors on either side of its complementary color wheel. _

* _Triad: Three colors from equidistant points on the color wheel._

completion bar

Shows the user a milestone of how far along they are.

Effective at motivating the user, especially if you are asking them to do something. This creates a feeling of respecting their time, a visual reward for sticking through to the finish.

* Example[on the web](


Two things side by side.

### Examples

* [](


Expectations, when they're met, imply regularity and inspire calm. Betray them, and it can generate a sense of excitement, or also anxiety. That can be what you want, but even when trying to be avant garde, always remember basic expectations - that something will function basically.


Contextual facts that can be reused about a person or issue mentioned in the reportage. Helps readers get filled in about context that they might not be up to speed on.

### Examples

* The Guardian uses them often

* and [New York Times](

* …So does [Reuters](

* [](


A fade-in creates a sense of the ephemeral – it serves to underscore an element's existence – not just that when you come to it while scrolling on a page.

A fade-in is (usually) achieved by changing the element's [opacity] over a short transition period._ A quick transition means …, a slower transition can mean…_

_see also: [opacity]


It takes two to be _inter_-active – feedback is the part that the page gives back to you. Think when you scroll down and the laptop opens, à la [](

field of view

In cinematography, the eye of the camera tells the viewer where our vantage point is.

On the web, this can be attained with photographic or video elements, or even the viewport.

see also: [perspective]

fixed position

When an object on a web document is "fixed" to the [viewport]

Not to be confused with [sticky] - where an object is fixed for a certain period while [scrolling]


Everyone knows what a form is. We fill them out in order to give to someone who is collecting data. So what happens with that data?

On the web, a form is made up of HTML [input] elements, and a magic Submit button that takes all the data from the inputs and fires it off somewhere on the internet. Presto! Now you have [data].

### Examples:

* [reader submissions]


Games are fun. People like games. If you can make learning fun, then you can make news interesting.


The science of looking at photos and determining where on the map they were taken.


This technique selects information of great importance and draws extra attention to it, to give the reader.

### Examples:

- NYT Jan 6 — by pausing and using light to mark a subject they want you to follow for what comes next.

[Tracking China’s Muslim Gulag: Turning the desert into detention camps - Reuters](


Though this term spans history from theater to cinema to AR,

its origin is in architecture and theater.

The composer Richard Wagner described an experience called _gesamtkunstwerk_ or "total theatre" , where he wanted audiences to be immersed...

Wagner was the first major composer to do operas where the orchestra was concealed from the audience's view - the first time music was effectively a background element to other things going on stage. In the late 1800's, this was an early precursor to the use of music in cinema.


The curtain goes up. The first shot of the film. The overture of a symphony.




Placing two objects next to one another implies some sort of a relationship between them. They are worthy of our considering them together, comparing, or contrasting them. It may imply they are equal or concurrent, or perhaps in opposition.

See also: [diptych]

loading screen

We're all familiar with these, but behind the scenes is basically an illusion...

Any magician knows that the key to a good trick is distraction.

When you visit a website, the magic of transporting all the assets - images, video, JavaScript interactivity - take time to load.

A loading animation can be used to basically cause a diversion to sustain the audience's attention long enough while the real work gets done.

It may reflect the measure of the acutal progress of the assets loading, or it may not.

### Examples

- [Awwwards - Loading Screens](


The melody is the main voice of a piece of music, as opposed to the harmony.

Melody guides the center of the narrative. It can be thought of as the "main character" in a story, where the harmony serves as supporting characters. Of course, the melody can be a [duet] without changing its character too much.


Motion captures attention, and can represent energy,.

Motion needs to be [motivated] by something. In cinematography, camera movements are often described as being motivated or unmotivated by something happening in the frame - a character's movements, actions, or maybe even their thoug


There are moments in the films of French filmmaker Jean-Luc Godard, father of what came to be known as the French New Wave in cinema, where the camera moves in an unmotivated way, almost like a distracted viewer who wants to get away and focus on a window or something. This de-emphasizes the subjects, and serves as a meta-commentary on cinema: implying on the relative unimportance of the things we point our cameras, and therefore attention at – I'm not creative enough to think of a way that might be applicable to journalism - but if you want to be the Godard of journalism, say go for it! Send me a postcard from ;;


Motion can very easily be overused. Especially in journalism, things need to stay still for people to absorb them, especially words… So how it be used effectively?


When an object's opacity = 0 it is fully transparent, or invisible. When it's opacity = 1, it is fully visible.

In [this section]( of a larger piece [chronicling the history]( leading up the systematic genocidal killings targeting Armenians in the late Ottoman Empire, [opacity] is used on a series of photos showing graphic, pain-stricken bodies. Appearing in quick succession, with a timed transition that renders the photos appearing slowly, ephemerally, almost ghost-like - the use of [opacity] has the effect of lessening the impact of disturbing images. Although more such images appear later in the piece, this technique also serves as a sort of disclaimer, alerting the reader that more graphic images are to come.


Parallax is an optical illusion that occurs because objects closer to the viewer appear to move faster than objects that are further away.

Picture yourself on a moving train watching the trees go by. The trees close to the track appear to whiz by, while the trees further away appear to slowly crawl by in the distance.

_What does this visual effect accomplish on the web?_


Photogrammetry is the art and science of turning two-dimensional images into 3D by tracing the overlap in photographs (or video frames) and converting them into a 3D digital models of an object or space.

Photogrammetry is often used by surveyors, architects, engineers, and contractors to create topographical maps, meshes, point clouds, or drawings to recreate simulated 3D representations of the real world.

reader submissions

This "community engagement" strategy is old as newspapers themselves. Whether Letters To The Editor, Dear Abby, or user-generated stories... It's a great way to let your audience see themselves.

_Technology Needed:_ * A [form] on your website to receive submissions

* Either a service, or a server to receive the form entry data

### Examples:

* The New York Times[Tiny Love Stories]( ([Submissions](


Though best described in modern terms as "the part where you begin wrapping it up"- the recapitulation is one of the defining characteristics of the sonata form in Western classical music.* Read more from [Encyclopedia Britannica](

_Fun fact:_ Scholars of Beethoven have studied his Fifth Symphony and [pointed out]( that the recapitulation starts wrapping up exactly 61.8% of the way through ~ which is the Golden Ratio!


The element of surprise: the curtain going up. The camera comes around a corner. Reveal is all about how you unveil something that was hidden.

reverse IP address lookup


rule of thirds


Without scale, you don't know where you are. You can't have the zoom-in.

This is so important when it comes to photography and cropping. It's not just about absolute size, but the size relative to how much space there is in the room of the viewer's mind. Can you feel big in a desert?

- Example: Note in [this New York Times Magazine cover]( how the use of cropping creates a sense of scale that aligns with the content of the story - emphasizing the grandeur of this dying rhinoceros and the small text evoking powerlessness in face of its tragic, yet imminent extinction.

- The importance of understanding scale is both the methodology and the theme of this piece by Reuters Graphics looking at the [Rohingya exodus](


Scrolling is how we are used to navigating websites, on screens large and small.

* For example: conveying a sense of parallel or concurrent actions or paths.

### horizontal scrolling

Yes, we're used to web pages scrolling top to bottom. Scrolling vertically down a page is generally understood to be the default. However, it can be exchanged for a horizontal scroll, to defy the user's [expectations].

* [Horizontal Scrolling in Web Design: How to Do It Well]( also: motion_

### scroll snapping

This can be used to more neatly guide the experience onto certain points, giving the feeling of "slides."


Musical term, from Italian meaning " ". A loud sound suddenly coming to a chokingly abrupt stop.

It's like the audio version of a "cliffhanger" - which is a story form in itself.

Editors oftem employ this technique when they abruptly pause followign the narrative strands of a text story - which focus on the characters and what's happening with them - and switch to

Even though this may sort of drop the bottom out from a story that reader was engaging with, it serves to hold their attention and use the suspense of wanting to know what happens next, and utilize that to give them a boost of energy to get through a section of contextual factoids that may be a bit dry, yet necessary to delivering the larger goal of connecting this individual's story to a larger trend, or perhaps the nutgraph.

sticky position

A useful CSS property that makes things stick in place in the browser, enabling lots of story possibilities.

- This [photo essay]( is driven by its portraits,

the artist's hand

"The artist's hand" refers to the evidence of authorship in a work, identified by the creator's unique personal left in the final product. It may be hidden, or it may be carefully deployed at certain moments to achieve maximum affect.

see also: [annotations]



Sometimes people get lost, and need a reminder of where thy are, so they can find their way. This is esepcially important on the internet, where are readers are asked to process a lot of information, even on a single page, let alone across all the tabs they have open, and whatever is going on IRL.

_Wayfinders can take the form of..._

### navigation

### progress indicators

web scraping

A technique for automatically extracting information from a website.

### Tools

* [ browser extension](

word cloud

A bit cheesy, but if done right:

* [New York Times: Why Therapists Are Worried About America's Growing Mental Health Crisis](