Tag Archives: 7in7

7in7 – 07 – “Invisible Cities”, Fedora

The Story
Inside of a palace in Fedora, there are several miniatures of the city. Each one is a city design that wasn’t built. Before it was ended, the city had changed already.

1. Sketches
I thought that the best way to represent Fedora was with prototypes. Like the city, they would always be the planned and unfinished version for a bigger project.
I started working once again on the book structure. I imagined an app version of Invisible Cities and drew some quick sketches of its table of contents:


I picked 3 of them to build paper prototypes.

2. Prototypes
I build 3 screens for each prototype. They would show basically the same features, visualized in different ways: the complete list of chapters; the chapters filtered by number; the chapter filtered by theme.
I made them using my notebook pages to simulate an iPad-like size, though they are slightly smaller. I also tried to color code the chapters.

IMG_5169 fedora_v1a fedora_v1b fedora_v1c fedora_v2a fedora_v2b fedora_v2c fedora_v3a fedora_v3b fedora_v3c

3. Final
With the prototypes finished, I tested them with my wife. We shot a video of the section.

4. Notes
None of my prototypes worked. They are all an epic fail. If I had to change any of them, I wouldn’t even know where to start. My assumptions about the navigation were clearly wrong, and I have the impression that I made something simple complicated.
However, this last project was about prototyping — and failing. Considering that, I wouldn’t change anything.

7in7 – 06 – Invisible Cities, “Zobeide”

The Story
Zobeide is a city built by men who had a dream of a woman escaping them. Retracing the route of their dreams, they end up building a trap — for dreams who already escaped them.

1. Sketches
Zobeide’s metaphor reminded me of São Paulo. That made me ask myself how many of my friends moved to there in search of something? How many of them achieved their goals?
To answer that, I created a simple Google Form, with only 2 questions:
1. What did you want to achieve when you moved to São Paulo?
2. Did you achieved this goal?

Screen Shot 2013-09-16 at 4.30.21 AM Screen Shot 2013-09-11 at 4.23.40 PM

After 64  answers, I started to plan my visualization. First, I tagged the data in order to get any conclusion out of it. I found 6 categories: work, friends, relationship, study, personal development and attractions. Since there was not a limit, one answer may related to more than one tag.
Then I started coding, back to Processing again. My first idea was to display a bar graph showing each tag and its count. The percentage of yes/no would be displayed in the same bar, using color/gray.


While still working on the code, I realized that this was not the best approach for the visualization. Reading the answers was important, too. So I changed it to:
– Large donut showing the total percentage of yes/no.
– Bar graph for tags and counts.
– Text area to display filtered answers (by tag or yes/no).


3. Final
I think that this is the most complete visualization of all 7 projects. Maybe because I learned a lot with the previous ones and didn’t have to struggle with basics — except for this scrollbar I had to code from scratch.
Its main feature is certainly interaction: you couldn’t show all responses or filter them in a printed page.
Working online here.   Screen Shot 2013-09-16 at 4.57.01 AM

4. Notes
Though I am happy with the interaction in general, I think that clicking once again to deselect an element may not be clear for everyone. If I had more time I would also make it look better, maybe put some more colors.
At last, I would also translate the answers.

7in7 – 05 – Invisible Cities, “Despina”

The Story
People can reach Despina by the sea or the desert. For each option, the city seem different: from the sea it looks like a camel; from the desert, a ship.

1. Sketches
My attention to this chapter was drawn after I read this sentence from the Wikipedia page about Invisible Cities:
“The book is structured around an interlocking pattern of numbered sections, while the length of each section’s title graphically outlines a continuously oscillating sine wave, or perhaps a city skyline.”
That analogy seemed to fit perfectly the city’s concept. Also, it would give me a chance to work on a visualization about the book structure. So I started to look for this pattern in the titles. The weird thing is that the american titles really seem to draw this curve — except for a slight detour in “Continuous Cities”. But, if that was in fact Calvino’s idea, why don’t the italian titles show the same pattern?

Screen Shot 2013-09-16 at 3.30.28 AM Screen Shot 2013-09-16 at 3.30.25 AM

I also tried to look for it retaining only the themes (“memory”, “desire” etc) instead of the whole title (“Cities and Memory”, “Cities and Desire” etc). It didn’t work either.
At last, it seemed to be even more appropriate for a story. People see patterns everywhere, and they they usually have more connections to their own thoughts than to the object itself.
My idea then was to visualize the book structure as an abstract pattern, pretty much like Stefanie Posavec‘s works once again. I decided to make a physical object, because:
– I couldn’t stand coding for 5 days without stop.
– I missed paper and pens.
– One of my constraints was “interaction design”, not “digital design”.

I bought acetate and permanent markers. I knew, yet vaguely, that it would be made of transparent sheets so that the user could change the patterns. I started working on Illustrator, though:

Screen Shot 2013-09-11 at 5.58.12 PM

In fact, there is a rigorous structure in Calvino’s book that ends up drawing a pattern — though it is not a skyline. I started drawing a sort of abstract bar graph, using different colors and heights to display each chapter and theme.

despina_v2_01-01 despina_v2_02-01 despina_v2_03-01 despina_v2_04-01

2. Prototypes
Finished with the pattern, I started to test how it would work with actual acetate and ink:

IMG_0270 IMG_0280 IMG_0279

I decided to make the keep the sheets separated, instead of using some binding. That would keep a bigger combination of patterns. I drew a grid in my notebook and began painting the bars, using the Illustrator mockup as a guide. I also made an acetate box to make it feel like a single object:

IMG_0307 IMG_0284 IMG_0296 IMG_0292 IMG_0304 IMG_0311

Works fine as photography filters as well!

4. Final
I was happy with the final result. The transparency allows for the combination of different patterns. The colors produce a great effect:

IMG_5228 IMG_5240* IMG_5241* IMG_5282 IMG_5298 IMG_5269 IMG_5303 IMG_5252 IMG_5250 IMG_5248

4. Notes
If I had more time I would design a better box. This one probably won’t last longer.

7in7 – 04 – Invisible Cities, “Ipasia”

The Story
Ipasia, one more from the “Cities and Signs” theme, is a city place where things are found in the exact opposite place where they should be.

1. Sketches
As well as in “Eutropia”, the idea was to express a concept using a visualization. One of my main inspirations for both works was Jaime Serra’s work for La Vanguardia. Serra uses infographics to tell a wide range of stories in an experimental way.


My goal for this one was to use interaction to tell the story, instead. The city concept was simple and straight, great for an interactive version. I thought of a map with upside down controls: zoom out enlarges the view, left leads to right and so on.

2. Prototypes
Since the new Google Maps version doesn’t have left/right buttons, I tried to make that with the dragging-only as well.
Adding the zoom buttons was not a big deal. Except for technical problems: ProcessingJS doesn’t seem able to read an image size. After some time trying to figure out a solution, I found out that svg shapes work fine.

3. Final
Something was still missing to make the concept clear. So I added an intro screen. By pressing “enter”, it closes the window. By pressing the X “close” button, it leads the user to the map. Pretty cool that I could make it with a native javaScript function. I didn’t know that it would work from inside the Processing sketch.
However, it is not working on OpenProcessing versionProbably the website prevents scripts from closing the window.
Update: “scripts can’t close windows that were not opened by script”. That’s what Firefox says and that’s why it won’t happen in any browser. It was working on the javaScript mode preview in Processing because that script WAS opening a new window.
P.S.: yes it is a China map downloaded from Wikimedia Commons. It’s not an accurate representation of the Mongol Empire and the divisions don’t make sense for this case, but that doesn’t matter for what I needed in this project.

ipasia_v06a ipasia_v06b

4. Notes
I probably wouldn’t change anything if I had time, but add more inverted functions — typing backwards, for example.

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.

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.

7in7 – 01 – Invisible Cities, “Eutropia”

My first idea for the project series was to make all of them based on Italo Calvino’s book, Invisible Cities. The book describes 55 imaginary cities, grouped by themes such as “Cities and Memory”, “Cities and Desire” etc. The descriptions may vary from concrete to abstract, but they all seem to convey a metaphor for different aspects of human nature.

The Story
From time to time the citizens of Eutropia move out. Because of that, the city location is always changing. Also, they change their role in the city when they move, choosing different professions, wives and houses. In spite of the changes, the city always stays the same.

1. Sketches
My first sketch for this story is probably from 2009, when I first read this chapter.


I wanted to show the changing elements in the city in a bubble map. Lines would show the flow. Their crossing connections would suggest the shifting elements. The sequential groups of circles would show the repeating pattern.
I also thought about changing this first draft to display icons and make the trading roles more clear. I gave up on that because the concept behind the story is more abstract. There is no sense in presenting it literally.
These were my first sketches:


I thought that it would be a good idea to mimic a real timeline. That would add the time element to the story, and also make it interactive.
The visualization was loosely based on Moritz Stefaner’s project Map Your Moves, and the GUI on the standard NY Times interactive features.

eutropia_inspiration_mapYourMoves  eutropia_inspiration_nyTimes

2. Prototypes
I started to make a Processing sketch. The code basic idea is very simple:
– generate random coordinates for a predefined number of elements, constrained by an area;
– define random sizes for them;
– repeat this same pattern in different locations.
That was easy. The second step was to add interaction. As the user drags the timeline, bubbles should shrink and grow. No problem with that, too.

But making that in a sequence… That was hard. I did a lot of sketches trying to figure out the overlapping pattern and ended up using a sine curve formula.


After that, I added the flow lines. The tricky thing is that they need to connect to a different bubble in the next city. Creating a non-repeating sorting algorithm  took me some time.

3. Final
Then I applied the same algorithm to the lines’s alpha, added a play button and a background map.
Finished project: all variables are parametrized; you can change the number of bubbles, the city size and the number of cities. It’s not working on javaScript mode, but you can download the code here and run it on Processing app.

4. Notes
If I had more time, I would:
– draw curves instead of straight lines.
– draw arrows; it would reinforce the flow idea.
– make it work on processingJS.