# GDV P.3.1.4 Text diagram

Lets begin with the original text of the Generative Design book: ‘What were Melville’s Goethe’s, or Dickens’s favorite words? The possibility of mechanically reading and processing large amounts of text provides considerable room for experimentation. All the words Goethe’s Faust, for instance, can be counted and their frequency represented by elements (in this case, rectangles) of varying sizes to create diagrams that function as static literary criticism. Ben Fry’s Treemap library allows treemaps to be constructed easily. The aim is to divide up the display window according to the frequency with which each word is used in a text. The complete text of Goethe’s Faust is read from a text file and passed to the Treemap library for visualization. The Treemap’s basic layout algorithm can then be selected.’ Until so far the text of the generative Design book.

I made a Flickr page which has all the images on it which I made during this exercise. And you can find all  Processing files right here. I checked if the programs could correctly be converted from Processing to JavaScript but again that did not work out. So I have put only Processing files on the loftmatic site. Here is the original program from the Generative Design site.

To familiarize myself with how treemaps work I went through the first part of chapter 7, Trees, Hierarchies, and Recursion of Ben Fry’s publication ‘Visualizing Data’. An excellent book which I tried to finish four times but with no success. I could not make it any further than the beginning of chapter 6. Let’s see if it makes any sense this time. First question: HashMap? I am not fully aware of what a hashmap is. Checked the reference: A HashMap stores a collection of objects, each referenced by a key. This is similar to an Array, only instead of accessing elements with a numeric index, a String is used. Still not very clear because I thought that Arrays could also contain Strings. Another question… what does strokeWeight (0.25f) mean? Nor the reference pages or forum could give me any information about that. So I made 2 screendumps. One created with a strokeWeight of (0.25) and one with (0.25f). But I could not find any changes. What I do know now is that I can use strokeWeights of less than (1) pixel.

Even after doing some research it is still not fully clear to me what a hashmap does or is. Maybe it will be clear when I finished these exercises. I checked the reference of Ben Fry’s Treemap library. I found that there are actually a few more classes in the treemap Interface MapLayout. Added them to the keyRelased list in the main tab of the program. Changed the display size and font to DINCondensed-Bold. But does this program work in JavaScript? The error console tells me: [Error] ReferenceError: Can’t find variable: SimpleMapItem. Probably JavaScript cannot handle the Treemap Library. In total I would like to make five variations of the program. And it would be nice if I could use five different (well known) books for the text. Can this program for instance read the full edition of Sir Thomas More’s ‘Utopia’? Tried that first. It seems it can. Cleaning up the Utopian text file a little. Changing the background and line and font color. Removed the background color in the main tab. Used the fill function to fill all boxes in the WordItem tab. In that way I can control the colors of the individual boxes better. I also would like to show which text is displayed by mentioning the title, author and date of the book. Top left seems to be an ideal place. It seems even better to me that I put the title under a key. Key 0 for instance. By default the title is on. Hitting the zero-key will switch it off. Hitting it again will switch it on again. Defined an if block for DrawTitle.
P_3_1_4_01_GDV_01

Imported ‘The Importance of Being Earnest’, by Oscar Wilde. Added some refinement into the element fills. The smaller the element the darker it will be. Got the background color back because I noticed  some of the pages were not refreshing in the display window. This doesn’t work very well in the SliceLayout and the StripTreemap.
P_3_1_4_01_GDV_02

Because I see this exercise as a kind of decorative one I found out that rounded rectangles are also possible. Not that I would like to use them. At this moment I don’t like the results of SliceLayout and StripTreemap. But Ben Fry’s website does not give me enough information how to change the results. Imported ‘The Devine Comedy’ from Durante degli Alighieri and started changing the color mode from RGB > HSB because I would like to try some color changes. Used a for loop to create a gradient foreground per module.
P_3_1_4_01_GDV_03

As text I have chosen ‘Dubliners’ from James Joyce. Used the for loop for gradients in a horizontal way. spend a lot of time to get the gradient right. Tried lerpColor but the results were not satisfying. I leave it by this proposal.
P_3_1_4_01_GDV_04

After all this gradient stuff as a last exercise I would like to try incorporating the number which indicates the amount of times a word has occurred into the sketch. The amount will not only be represented by the size of a word but also by a number. Made a very simple text file with just 8 words in it to check which function is responsible for the counting. That was not very easy to find. Adding a println command to map gives: treemap.Treemap@2e413336. println (items); gives me: P_3_1_4_01_GDV_00\$WordItem@58da1994 P_3_1_4_01_GDV_00\$WordItem@56c5711e P_3_1_4_01_GDV_00\$WordItem@3c859513 P_3_1_4_01_GDV_00\$WordItem@65fe316f P_3_1_4_01_GDV_00\$WordItem@135fa2b9. And this turned out to be not very helpful. A count variable was already created but I could not find out where and how to use it. In my naivety I just entered a println (word, (word.length()));  command in the WordItem tab after the program line (word, x + w / 2, y + h / 2); That gives me a list of words with the amount of times they are used in Franz Kafka’s book The Metamorphosis. At least I thought so in the beginning. Because when I check the original text file and do a search on ‘fresh’ I get 6 hits. When I do that in the list created in the command display I get only 5 hits. I try another word. ‘Between’. In the original text file ‘between’ is counted 7 times as a full word. In the command display I get zero hits. Original: morning, 22 hits. Console 7 hits. Lets take a very common word: ‘the’. Original: 1.148 hits. Console: 3 hits. The word ‘and’. Original text: 624 hits. Console: 3. What is going on here? Hmmm… could it be that the smaller the number in my console the more it appears in the original text. I just assume that ‘the’ is the most common in the original text (it appears 1148 times). That would make that line: text (1148 – word.length() , x + (w / 2), y + (h / 3)); I am sure that this is wrong. All my console numbers are way above 1100. Ok. I got it. Word.length gives me not the amount of times a word appears in the text but the amount of characters that word has. So the calculation is wrong. I started again in another way. The square amount of pixels for one element is calculated by w * h. This must give me an indication for the amount of times a word occurs in the text. I already found out that the word ‘the’ occurs most in the text. And because it has the largest box (w * h gives me the number 29807). The word ‘staggered’ only occurs once (w * h gives me 51). By calculating (w * h) / 26 this gives me a very close outcome for the number of times a word occures in The Metamorphosis. Changed everything to shades of grey. Added a colored rectangle in the background to put the numbers in. The rectangles get smaller when a smaller number is displayed. So the smallest numbers get no rectangle at all because it’s too small to see. Made it a static size. Just as the numbers. It seems to be better to leave the idea of a rectangle behind. Better try to color the numbers. Finally I used only yellow. And changed the point size of the numbers according its appearance.
P_3_1_4_01_GDV_05

To wrap things up: I have no doubt about that libraries allow you to construct treemaps very easily. And that”s fine. But they also limit me in my graphical expression. It does not matter who imports or what you import it will alway going to look like what the library dictates. In this exercise I was only able to do some decorative adaptions. But there is also the lack of information on how you can use a library to its outer limits. Maybe this is different per library. So I hope I am wrong and it’s just my lack of experience with libraries.

Henk Lamers