• Blog
  • CV
  • Woodworking
  • Portfolio
  • About
Menu

Gideon Goldin

  • Blog
  • CV
  • Woodworking
  • Portfolio
  • About
How long it took to type each character. Try the interactive demo below.

How long it took to type each character. Try the interactive demo below.

Data visualizations for Writing: How to show the process of writing with the writing graph

November 27, 2018

TEXT EDITORS and the files they work reveal little about the history of editing. Some tools provide revisions to browse, while others are limited to undo/redo. By adding temporal metadata to files, editors can display process in addition to product. This post introduces the writing graph, a timeline for viewing editing activity.

THE HISTORY OF MANIPULATING TEXT is rich with innovation from clay tablets to copy & paste. The predominant narrative converges on a digital standard adding and removing glyphs via a caret in a sequence of lines typically called a document.

Vi, Word & Notes. The more things change, the more they stay the same.

Vi, Word & Notes.

A growing community of new media artists and creative coders would love tools that felt less utilitarian (e.g., Word) and more exploratory (e.g., Max); as a generative writer once told me, “[electronic] musicians are spoiled.”

Max enables interactive sounds via a complex (yet playful) interface. Imagine a visual programming language designed for textual synthesis.

Max enables interactive sounds via a sort of patch bay interface. Imagine a visual programming language designed for textual synthesis.

Introducing the Writing Graph

This visualization arose after talking with talented poets at Brown. As a psychologist I was intrigued to learn more about the creative process, to look inside their work. Visualizing typing over time gives readers a kind of x-ray vision into the ebbs and flows of a piece, something otherwise only conveyable in performance. More practically speaking, experts like computer programmers might use the temporal metadata to track when a particular line of code was not only committed, but authored.

THE APPROACH is to simply draw a rectangle under each glyph, the height of which represents time elapsed since the last activity. Activity can be defined in a number of ways (e.g., last click, last edit, etc.). Proof of concept:

You can only type in a single-line—which goes off-screen—or backspace. Press enter to reset. View the source (click this if your browser plugins block this embedding).

You can imagine complicating this ad infinitum: coloring the bars by other variables’ state at the time & location of each keystroke; normalizing the bars by difficulty of reaching for different keys on desktop/mobile; showing total time per document/paragraph/line/word/character; etc.

You can also imagine looking beyond typing, like showing how a paragraph and its alternatives were copyedited, or how the complex web of undo/redo was collapsed.

Tags visualization
← Two-Letter Scrabble Words Visualized as Stem and Leaf PlotNew Paper in SIGCHI: "Causal Interactions" →
  • cognitive science 8
  • visualization 2
  • woodworking 1