A couple of days ago, I got a message from @fantasticlfe asking if I’d done any tinkerings around what turned out to be “narrative charts”. I kept misapprehending what he was after (something to do with continuity?!;-), so here’s a summary of various graphical devices for looking at narrative texts that we passed back and forth, along with some we didn’t..
looking for robbable #d3 code to plot a sankey diagram showing people sharing different locations over time. like http://t.co/JsnkfVFIVh
— Michael Smethurst (@fantasticlife) April 3, 2014
A Sankey diagram typically uses variable thickness lines to show flow between different elements in a system. (For this reason it’s often used to show energy flows throuygh a system, though it can also be used to good effect to show money flows.) The chart Michael linked to comes from xkcd:
In this chart, we have time along the horizontal x-axis. The y-axis is ambiguous (some sort of nominal ordering?) and the line thickness appears to represent army size.
To a certain extent, this diagram is reminiscent of Minard’s famous chart…
(See also What Makes a Minard? for some contemporary Minard diagrams. Is code available, I wonder?)
However, in the case of Minard’s chart (which I personally don’t like at all!), the x-y and co-ordinates represent map co-ordinates – the thick lines aren’t thick lines in a line chart (which a glanced “up and to the right” view might make you assume), they’re flow lines across a map.
I got distracted for a while by the Sankey aspect, and dug around my own bits of code. For example, Generating Sankey Diagrams from rCharts, an rCharts wrapper for the d3.js Sankey diagram. Michael was particularly interested in being able to group lines vertically (though I wasn’t sure what the y-axis would actually correspond to: some loose function of “location”, maybe as a categorical variable? Time was definitely to be on the horizontal x-axis); a posting on Stack Overflow (d3 sankey charts – manually position node along x axis) seemed likely to be able to help with that.
I then started going off on one…
Would a variant of nltk style lexical dispersion plots help, using characters rather than word categories? That would show when a character was in scene, but not much else?
How about sentence drawing, in which we show “turns” taken by different speakers?
This shows something, but again, not relevant…
Nor are Kurt Vonnegut’s shapes-of-stories diagrams that plot some sort of emotional state on y and time on x:
Hmmm… Michael wanted to be able to look at scenes on x and presumably some function of location on y. Hmm… why? And how might we actually order those axes? Scenes occur in order in a film or play, but scene is a ranked, ordinal value. That said, scenes also have duration in terms of screentime, which may or may not be the same as the “interval” that the scene portrays in terms of the world it represents (this must have a name? eg a 20 second screen time scene shows a plane flying and this represents x hours in the story). The scene may also have a ‘calendar time’ associated with it in the story – so where you have a flashback scene this corresponds to a previous calendar time in the represented world. Did Michael want any of these dimensions capturing?
Related to shapes of stories, here’s how someone analysed several thousand plots: Examining the arc of 100,000 stories: a tidy analysis.
And then there’s location… how should these be represented? Locations are a distance apart and, perhaps more importantly from a continuity point of view, a travel time apart; as well as maybe a timezone difference apart. Did that need capturing in any way? Ordering axes for this could be quite hard if we wanted close things in space (distance? travel time?) to be close together on a single axis (A is 10 minutes from B and C, B is ten minutes from C: how do you show that intransitive relation on a single dimension? [Maybe relevant? Storygraph: Extracting patterns from spatio-temporal data, A Shrestha et al., Advances in Visual Computing.] Hmm… If we can capture distance between locations, and some sensible notion of time relating to scenes, could we maybe use line thickness to show that a person has lots of time to move between one (time, location) and another, as compared to scenetime? Do filmwriters have tools to support this? Do the police…?! Is the Mythology Engine relevant?
How about thinking about it as a graph? I’ve used Gephi before as a foil for getting me to think about ordered series as connected events in a graph – for example, Visualising F1 Timing Sheet Data. If we encode scene number as the x-coordinate and location number as the y-coordinate, with each graph line being the connected series of scenes a particular individual is in, then we can simply use a line chart to connect “individual lines” to different scene and location numbers. We’d also have a couple of extra dimensions to play with – node size and node colour, at each location. We’d also have the opportunity to play with edge (that is, line) colour and edge thickness?
Maybe I need to try to do some demos? But no time for that right now…
How about trying to find some? Here are some discovered via @jamesjefferies:
Here’s a view of connected (by travel between) locations in Game of Thrones:
There’s also an animation of event in Game of Thrones, but I can’t quite figure out how to read it?!
Let’s go back to the sort of thing Michael was after – narrative charts..
@imhelenj found a related if cluttered interactive describing the evolution of web tech:
Then Michael shared a link to Comic Book Narrative Charts, a project for automatically generating xkcd style narrative charts:
Hovering over these charts, I noticed they were interactive d3.js charts. A quick View Source and the code for generating the chart dynamically from a characters file and a narrative file appeared to be there. Which I think is what Michael wanted all along…!
(By the by, the post also describes how the developers started thinking about fixing the vertical y-coordinate values. Here’s another example of someone thinking aloud around producing a narrative chart for the Holy Week story.)
Ho hum, an interesting set of detours nonetheless – and it got me thinking about the time-space complexity of a scene based tale that could keep be confused for weeks! :-)
PS this is quite interesting – visualising a process, via Tactical Tech Drawing By Numbers project:
PPS some more bits: @r4isstatic points to Some visualisations of stories and narratives, another summary post similar to this one. Also via Paul Rissen, and picking up on whether the police have any interesting actor/event/time/location diagramming techniques, Vispol – An Interactive Scenario Visualization.
Elsewhere, I find Storyline Visualizations, which includes a paper (Design Considerations for Optimizing Storyline Visualizations, Y Tanahashi, and K-L Ma, IEEE Trans on Visualisation and Computer Graphics, 18(12) 2012, pp2679-2688 and some python code.
PPPS Some more… A collection by Stewart McKie of techniques for visualising screenplays: Screenplay Visualization: Concepts and Practice. The posts I wrote on the Digital Worlds game design uncourse blog about narrative structure. Sort of via Scott Wilson, some crime analysis software from xanalys.com (Link Explorer – White Paper) which includes descriptions of an event chart, a transaction chart and an activity timeline:
Via the comments, this rather lovely animated discourse map:
OUseful.Info, the blog... 
Thanks for describing the process and the tools you encountered along the way. I’m currently working through similar problems around discourse and have found that an Animated combination of a network plot and Gantt plot can also give valuable insight.. Here is an example, but is more intensive than the d3.js and less interactive: http://trinker.github.io/qdap_examples/animation_gantt_network/act_1/
Ooh… that’s interesting. I was trying to avoid animation, but that’s quite neat:-) Have you looked at fading out links that are older than a certain time?
Hmm, which reminds me, have you see things like gource? https://blog.ouseful.info/2011/06/07/visualising-openurl-referrals-using-gource/ I’m not sure what mappings would make sense in a conversation context? Character as user and scene, or location, as file, perhaps?
No, so thanks for the link! Very cool and demonstrates how projects (including sciences) is a social process of distributed cognition. Yeah fading is easy enough to do (less so than coloring the current speaker as it’s a continuous scale that’s readily calculated by sentence_number/current_sentence_number. I did so for a colleague for whom I made a similar plot for messing with alpha levels (this is an R scales package thing). For my purposes this is less useful but for others this may be perfect. I love that there’s conversation around this. Thanks again for sharing.
You mention R – are you using rCharts at all? I find it a handy wrapper (and note there’s now also an rMaps). An alternative to fading out old links completely might be fading to a faint grey, so that the memory of a character having already been introduced is retained, but as a trace?
As far as distributed cognition goes I couldn’t agree more:-)