7in7 – 02 – The Silent History

I decided to keep visualizing books, though I gave up on working with Invisible Cities for the 7 projects. Instead, I chose The Silent History, a digital book/app.

The Story
I won’t tell what The Silent History to avoid spoilers. For this project, all you need to know is its structure. It is made of 6 volumes, sold separately. Each volume has 4 chapters. Each chapter, 5 subchapters. Each subchapter is a report from a different character and contains information about its location and year.

IMG_4038 IMG_4039 IMG_4041

1. Sketches
Before working on the sketches, I asked myself what I wanted to show in this visualization. The book structure contains a lot of data. Though, what questions would it answer?
– Are there main characters in the book?
– Is there a main location?
– Is there a pattern in the character/location/chapter choices?

So I planned to make 2 different graphs, showing character x chapter and location x chapter.


2. Prototypes
I wrote all information about the chapters I’ve read so far in a Google Spreadsheet:


Once again, I used Processing to build the prototype:


I was pretty happy with this simple scatterplot. It tells a lot about the narrative. You can see that most of characters from the first chapters, for example, appear only once in the book. Their function is to provide context for the story. Some characters appear in a regular basis and are probably the main ones.
While testing the data loading, I displayed both graphs, characters and location, in the same screen:


Each vertical line is a chapter. Blue and red circles are shown together in the first time a character and location appear. If they are shown separately, the character has moved to somewhere else.
That may not be the more clear solution to display the 3 variables, but I kept with it due to time restriction and started adding interaction, first with simple hover:

Then click/select:

3. Final
In the final version, users can select a character and see all locations related to him — and vice versa. I also added some visual elements to make the interaction more clear — drawing a background behind the selected element and changing the others to gray.
Once again, no ProcessingJS. But you can download it here and run from your Processing app.

4. Note
I would definitely change the visualization if I had more time. But that’s ok, I chose to focus on the interaction instead and that proved to be more useful.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s