Generative Design Variations M.6.3 Force-directed layout with data

This is the summary from the Generative Design book ‘The plan is now to begin with a Wikipedia article and, each time it is clicked, reveal a specific number of links, thereby enabling the linking structure to be gradually expanded. In order to maintain legibility in the increasingly complex program, it is useful to summarize a part of the functionality with classes. The WikipediaNode class expands the node class so that It can load the data as independently as possible. These, and the linked springs, are administered in the class WikipediaGraph.’ So far this summary. Here is the original program.

JavaScript does not support the Generative Design library and I think it does not support Processing data XML class. But I am not sure about that. Further there are some (for me) obscure things imported like:, and a few java utilities. That’s why I thought it was not necessary to put the programs online. I have created a Flickr album where you can find all the images that I have made during this exercise.

The first thing I tried is to take a different keyword for each exercise and not the keyword ‘Superegg’. This time I choose the name ‘Steve Jobs’. And that does not work. Except when I bring back the pllimits in Wikipedia node from 500 to 100. The program also keeps on displaying [Fatal Error]: 1: 1: Premature end of file in the console. But it continues to work. So I do not worry too much about me. Commented out the frame.setResizable (true). I’m not going to the increase or decrease the display window. I keep it always at 800 x 800 pixels. I made the background black. Then it seems that all rectangles below the text there are displayed. That does visually not seem right to me. Which function is responsible for displaying those rectangles? Ah… some of the rectangles dissolve in the background over time. The backgrounds are black now but it would be better if they were completely transparent. I find it unnecessary to display them. Another thing is that the nodes are getting now much more attention than the texts. While the text for me is much more important. Hmmm … there are many more things I can not fix at this time. That is something to be done later.

There is a problem with the color scheme. Two color modes (RGB and HSB) are mixed. Why? And who uses what? Let me first start filling in another keyword. I choose ‘Processing (programming language)’. I am trying to figuring out why I have two different shades of red. Ok… everything is changed and the place to do that can be found in the draw label block in the Wikipedia Node class. All top-nodes are now red. The sub-nodes are blue. Not everything is quite clear to me. I have extended the display time of the sub-nodes. I think they’re too short on the screen.

Keyword: Data Visualization. It seems better to make smaller nodes and fill them with white. Probably it is also better to use a larger point size for the top-nodes. The point size of the sub-notes is fine.

Keyword: Color. When you increase the point size 10 times and when zooming in the point size of the top-nodes is increased again. So I guess I that the point size should stay lower than 1.0. Zooming in the keyword related top-nodes increases their point size. And that’s actually a good thing. Because you eventually want to know where the top-nodes are located. But maybe this is not such a good idea after all. This will become clear later. M_6_3_01_GDV_04

Keyword: Interpolation. I would actually also be able to zoom in and out much deeper. And maybe the length of the spring needs to be shortened. So just for fun, I have increased the node radius to 10. That means I get very short springs. Then I clicked on a large number of links. Which gives me total chaos.

Keyword: Complexity. I have no idea why the nodes are drawn in 3 steps. So I started with commenting out the last dot. This results in one circle less in the node. The second block comment out displays no node at all. I check the code in the original program. Ok. The first circle is drawn to the first node. But apparently I do not see that. The second circle is a white ring between the center circle and the link circle. And the last circle is the point at the center of the node. I exaggerated the second circle in size with a very low alpha channel.

Keyword: Population genetics. I changed the color blue. The texts are more readable now. Perhaps I should give the larger circle a bit more transparency. Finally opted for a line version. But that made the image very unclear and therefore less legible. So I go back to the earlier version. Brought the nodeRadius back to its original setting.
Keyword: Greek history. In one way or another, the program does not always start. Sometimes it does nothing when you let it run. Sometimes it works. I have no idea why. The readability of the blue text is no longer optimal when they are on a light gray rectangles. I could replace the rectangles by horizontal or vertical lines. I now uncomment the original white rectangles. But I think the overall picture did not improve. I have applied a gradient in the background. But I think that those rectangles behind the text are not an improvement.

Keyword: Typography. Time to add some sophistication. I’m going to remove the areas behind the text. And I think that the gradient must begin darker at the bottom otherwise the texts are no longer legible.

Keyword: Dada. A few more optimizations. But I have not changed a lot when you compare it with the earlier version. The focus was on the details. And details make (or break) the image.


Comments? Leave a reply.

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

You are commenting using your 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