7in7 – 03 – Invisible Cities, “Tamara”

…and we’re back to the same book. I talked to Kyle and he said it wouldn’t be a problem using the same book for all projects. Also, I think that the more constraints I have, the better I work.

The Story
Tamara is a city made of symbols. Each one of its elements is a sign, and it’s hard for a traveler to tell what its real content is.

1. Sketches
This city story reminded me immediately of the work of Stefanie Posavec:

highlightpstr lrg-literary-organism-poste sentence-drawings-poster-thumb-600x848 sentence-length-poster-thumb-600x848

She takes data (words, sentences) from texts in books and transforms them into visualizations that are highly abstract. I thought that converting this chapter’s letters to signs would be an appropriate way to tell this story:


2. Prototypes
Gathering the data here began with getting the digital text. I only have a brazilian printed edition of the book, in portuguese. So I went to Google Books, took some screenshots of this chapter and converted them to text in an online OCR. Done. I wasn’t sure about the interaction for this piece. Anyway, I knew that the user would be able to change from text to color view. To do that, I needed to display the letters one by one, instead of using a text box. It took me a long time to display this:


After that, I struggled to find the best data type to store — and read — the letters: ArrayList, StringList, HashMap… I was also determined to make it work on ProcessingJS, so the code took twice the time that I was expecting to display. After 3 hours, I finally made the HashMap work, but instead of using the values to store a letter count, I mapped them to different color hues. In the sequence: displaying color blocks; testing different palettes; adjusting block size:

tamara_prototypes_01 tamara_prototypes_04 tamara_prototypes_05 tamara_prototypes_06 tamara_prototypes_07 tamara_prototypes_08

Visualization done, I had some different ideas for how the interaction in this piece would work: a) Display a letter list on the side and allow user to turn each letter on/off, as well as switch between letter and color. b) Display a list of color blocks and make them input fields. The user would have to guess each letter and try to restore the original text. c) Switch between color block visualization and bar graph, showing the number of times each letter appear on the text. I began trying to write the basic switch color/letter function. I was using the keyboard to get the debug feedback, when I realized that it would work much better than any of the mouse options.

3. Final
The keyboard input made the interaction more simple and intuitive. It also kept the “data-art”-like aesthetic I was looking for. Adding GUI would have ruined it. Pressing a key the user switches from color to letter, until the whole text is revealed. Working on ProcessingJS here.

tamara_final_01 tamara_final_03 tamara_final_04 tamara_final_05 tamara_final_06 tamara_final_07

4. Notes
I wish I could make the relationship between the characters and the colors more meaningful. I made some manual adjustments on some characters — periods are black, commas and semicolons, gray. But it would have been better to display an uppercase “A” with the same hue but different brightness than a lowercase “a”, for example. The alternative b) for the interaction part seems pretty cool, I’ll try to make it someday.


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