Flying Machine Studios
adventures in making stuff with Daniel Higginbotham

Notes From Tapestry 2013

28 February 2013

Yesterday I had the immense pleasure of joining about 100 other designers, programmers, educators, data scientists, journalists and storytellers in a day-long conference "designed to advance interactive online storytelling with data."

Below is a list of links to many of the presentation examples followed by notes on the presentations. You might like the way it's presented on github better - my blog isn't ideal for this kind of content.

If you'd like to make any contributions or corrections, please leave a comment, tweet me @nonrecursive, or submit a pull request :)

Resources

Keynote by Jonathan Corum

  • When we tell stories we adjust them based on audience - can't do that with a graphic
  • Have an audience
    • He partitions his audience into reader viewer listener user
  • Focus on the people rather than the mechanism/content delivery vehicle
  • A colleague think s of designing for bart simpsons vs lisa simpsons
    • quick overview (Bart) vs ability to deep dive (Lisa)
  • three types of people (science graphics)
    • high school science student
    • busy commuter - how to keep them interested instead of going to their phone, playing a game
    • his grandmother - does it pull together as a cohesive visual whole?

  • whole goal is to design for someone else

    • tensions
      • oversimplification vs. overwhelming detail
      • explanation vs. decoration
      • storytelling vs interactivity - narrative vs exploration
    • don't be your own audience

  • show ideas + evidence

    • understand, translate, display, explain
    • find the central idea. find one idea to use as the basis for your graphic

  • respect the reader - help them through the story

    • allow for multiple entry points - compartmentalized graphical sections
    • interactive tools to allow reader to pace themselves through
    • use disparate scales to give context. Example, mixing longjump distances with free-throw line

  • add meaningful annotations

    • close proximity between graphics and labels
    • don't make people go back and forth between graphics and labels
    • another way to provide context
    • example: annotate each step in a sequence. flea jumping

  • show change

    • motion
    • show large scale, small scale what's happening each step
    • change in form is another kind of change

  • reduce complexity and opportunities for confusion

    • adding interface can be adding complexity

  • reduce tedium

    • interact with data, not the interface
    • strip out tedious activities - usability

  • visualization is not explanation

    • dont let technology drive
    • add enough information beyond your visualization to explain a pattern in data
    • or structure your visualization to reveal and explain patterns

  • reveal patterns

    • layer multiple data sets

  • respect the data

    • show what's unique about it

    if your visualization can apply to something completely different, you might not be telling the unique story. detainees vs cups of tea

  • edit - throw things away.

    • throw as much away as possible but actually tell a story
    • If you're spending most of your time editing you know you're on the right track

  • apply common sense vigorously

Showing is Not Explaining, Pat Hanrahan

  • trying to explain Euclid's algorithm for Greatest Common Divisor
    • algorithm animation / explanation
  • problems with animation
    • motion is fleeting and transient
    • cannot simultaneously attend to multiple animations
    • ... more
  • Pat showed the animation of the algorithm, but it didn't really explain how the algorim worked

I had trouble thinking of what to note for this one, would greatly appreciate contributions here.

Choosing the Right Visual Story, Cheryl Phillips

Side note: This seemed mostly aimed at journalists.

  • What's the story?
    • data without a theme is just a bunch of data - not a story
    • who what when where why how - oldies but goodies
    • interview your data. think of it as the man on the street. keep asking it questions
  • avoid "notebook dump"
    • don't put every last detail in the story
  • use the nutgraf (theme) to help define a strong visualization
  • data is more than numbers -- what little stories make up the larger whole which can be visualized?
    • example: methadone the politics of pain
    • example: family tree of songlaw

29, Nigel Holmes

My sparse notes here don't really do the talk justice, probably because I was enthralled with the presentation. Especially Nigel attempting the long jump - I doubt any of us will forget seeing that!

  • 29 is not interesting in itself, but interesting in context
  • you understand something when you see it next to something you already something understand
  • context is the key to understanding

The Art of Honest Theft: Evolution of a connected scatterplot, Hannah Fairfield

  • How graphics influence each other
  • if you move away from plotting time against the horizontal you can reveal interesting trends

See Driving Shifts Into Reverse and Driving Safety, in Fits and Starts

  • what's next?

    • one technique: associate ancillary content (animations) with scroll

    so that extra information shows up in a way that it's tied to what the reader is reading at that moment (this idea shows up a lot during the conf) * focusing on immersive content * it's important to carve out time, even just 10%, to play

The Why Axis, Bryan Connor

  • nick felt (?) was inspiration
  • is a critic on the why axis, but doesn't mean that in a negative way
  • "the finished piece frequently acts as a seductive screen that distracts us from the higher level of investigation"
  • move past being psychics into being an investigator: as a critic, move from guessing to asking
  • once you know the objective of the visualization you're able to judge whether it succeeded or failed
  • designers: provide retros. be accessible to critics

Visual storytelling in the Age of Data, Robert Kosara

  • academics don't get the idea of presenting data, communicating data. it's just an afterthought
  • argues that stylizing charts is quite useful. helps to tell the story. emotional impact?
    • example: monstrous data by Nigel Holmes

  • there's a danger to telling stories

    • can lead you down the wrong path

    example: driving an electric car in the parking lot until the battery runs down

  • story telling potential of charts

Story Depth Tells a Story
Facts Narrative
Information Scent Focus
Audience Author
  • storytelling affordances (I love the idea of storytelling affordances)
    • the form which lends itself to storytelling
    • what are they?
      • reading direction, left to right
      • in the famous napoleon chart, the area gets thinner
      • follow along a line, like following a journey on a map uses the driving safety in fits and starts article as example
      • animations
      • direction - the bush admin vs. obama admin us job loss bar chart effective way of walking you through developments
  • narrative ties facts together
    • provides causality
    • walks you through a story
  • facts - story depth
  • focus - tells a story
    • kind of the natural enemy of more data
    • you must be selective in presenting data for it to be a story
  • information scent - story depth
    • hints used to guide people, indicate that there's more data. example: the jobless rate for people like you
    • present a lot of information, but focus only on one bit. provide other data in a less visually prominent manner
  • author - tells a story
  • audience - story depth
  • "we're at the cusp of something amazing and powerful that goes way beyond what's out there right now"

comics and visual communication, scott mccloud

  • in a 10" cube box of air is information
    • wifi, cell, radio
    • until there's something to decode that air, it really is just empty
  • we both receive meaning and create it on the fly
    • the artist gives a hint of life, and the audience will meet them half way
  • cartoonists
    • simplification creating a kind of human calligraphy
    • write with pictures
  • human calligraphy takes many forms
    • body language
    • facial expressions
  • there are six primary emotional expressions
    • anger
    • disgust
    • happiness
    • surprise
    • sadness
    • fear
    • the six primary combine
      • anger + happiness = cruelty
      • you can paint on the face the variety of emotions
  • the grimace project
    • apparently useful for kids on the autism spectrum
  • secret ingredient of the look of love is sadness
  • all pictures are words
  • all pictures speak
  • all pictures have something to say
  • something happens in lower grades - teach kids to write and to draw
    • at a certain point we teach kids words can be used for
      • lists
      • poems
      • express themselves
  • but pictures - we try not to be too specific
  • this overlooks the fact that pictures have a multiplicity of uses
    • can transmit messages, emotions
  • as a result we have a society that divorces pictures from... specificity?
    • we have downstream pictures - advertising
    • don't have as much going upstream
  • comics are a way to send messages upstream - can go out to a mass audience but retain their subjectivity
  • will eisner believed comics can teach
    • the influencing machine
  • tone is important
    • readiness.gov spawned great parodies
  • now people are empowered to combine words and pictures anyway they want to
    • example: historical event facebook pages
  • we need to be vigilant of cognitive load time
    • the speed at which individual parts load is the speed at which we can convey complex info
    • the rsanimate series, www.thersa.org
  • synchronization of data/visuals with content
    • "i'm not going to even allow you to think about anything other than what I'm talking about right now"
    • order of presentation matters
    • "if I don't need to think it, I don't need to see it"
    • "the quicker the parts the richer the whole" cognitive load
  • "form and content must never apologize for each other"
  • the grammar of comics is putting one picture after another
    • creating a flow of time between images
    • as we move through space we move through time
    • any two images, we'll find a story, we'll find a narrative
    • cartoonists are finding the poetry in the gaps between frames
  • as storytellers, you want your audience to lose themselves in the story
    • all narrative art forms are based on extremely simple principles
    • in comics: space = time
  • "each successive technology would appropriate the previous technology as its content"
  • grumpy old man rant about form factor
    • we see the world as rectangles in landscape mode
    • what possibilities open up when you consider the monitor to be a window?
    • lots of cool examples of comics taking advantage of the possibilities inherent in browsers
  • responsive web design
    • separating content from presentation
    • a noble impulse
    • but at the same time there are art forms which are fixed. comics is one of them
  • the form matters!
    • in comics, the spatial relationship is part of the artistic intent
  • when you have violent shifts in the landscape, the only thing you can do is hold on to basic principles
    • in comics, people losing themselves in the story

Many thanks to the hosts for putting together a great conference. I'm looking forward to next year's!

Comments