…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 constrains I have, the better I work.
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.
This city story reminded me immediately of the work of Stefanie Posavec:
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:
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:
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.
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.
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.