Generative Design Variations M.5.3 Sunburst diagrams

Sunburst diagrams. Again something I never used in my work. Here is the description the Generative Design book gives: ‘A sunburst is a visualization technique that simultaneously depicts hierarchical structures and proportions in a radial diagram. The entire diagram is composed of arcs. The farther out the arc lies the lower the object it represents is in the hierarchy. The size of the object is visualized by the angle the arc spans. In the example of data from a hard drive, this means that each arc represents a file or folder size, and the distance from the center represents the hierarchical depth. It is also ensured that the inner arcs span the entire 360º. Instead of (or in addition to) file size, other properties such as file age can be coded in the arc depiction (as color, line value etc.). The arcs of the sunburst diagram are generated by the SunBurstItem class. Sunburst diagrams are special because hierarchical nesting and relative proportions can be displayed and read simultaneously. The legibility of sunburst diagrams can be increased when the areas of the individual rings are identical. This ensures that the arcs situated on different rings remain comparable. Otherwise, the appearance of the arcs would be emphasized more the farther out they are. Using the following function, a circle with a defined radius (here half the display height / 2) is divided up into the number of rings defined by thedepthMax function.’ That is what the Generative Design book tells me. If you would like to see the original code you can find it here.

I first copied all comments of the book version into the program. Usually that works best to get an idea of what the program does but this time the program is still not very clear to me. Most of the time I find out how everything connects together during working and modifying the program. But that is not the case yet. I have to solve something else first. In the previous session I thought I could use a FakeDirectory with FakeFolders and FakeFiles. But when I read that FakeDirectory in the Sunburst program it was pretty boring. It might have something to do with the fact that all directories, folders and files are the same. So That was a wrong thought. You might say ‘but why don’t you fill the directories with random FakeFiles. Good question… but that is a lot of work. By the time your tree in the console window looks interesting you might be a few days further. Luckily I had another idea. On the 5th of January in 2015 I started with reviewing films using Processing. I made a very simple program which counts variables together and gives you a number in the end which represents the quality of the film you have seen. Here is one of them. We have seen almost 100 films since the day I started it. And that directory may be a good candidate to use as a sunburst diagram. So I copied the directory with all files to my desktop and let the default folder path point to it. This is what it creates:

Also not so impressive. And there are a lot of bezier errors in it. At least I thought it were bezier errors. But when I looked for a bezier function I couldn’t find any. Have to find out why these rendering errors appear. But first I have to reorganize the film review directory. I think we get a directory of 10 levels deep. Our rating is ranked from 0 – 10. And I think a 10-points film can go in the inside ring. All other points will be outside rings. Might as well turn out that I just need to reverse that order in a later stage. This means that the top folder should be filled with films rated 10. I just call the folder 10. In that folder should be a 09 folder. In that folder should be a 08 folder en so continuing until we arrive at a folder which is named folder 00. Although I am almost sure that we did not see a film which has zero or no points at all. Looking at the image the program creates there is something wrong. The inner circle is white. But it should be filled with five films which scored 10 points. But they are located one ring deeper. Oh I see… the inner ring is shaped by the folder called FilmReviewData_GDV_02

I changed the path to FilmReviewData_GDV_02/10 but the result stays the same. What happens if I copy the folder named 10 to the desktop and point the Sunburst diagram to that? That seems to work. So I have to change the name of the top folder from FilmReviewData to 10. And that seems to work fine. The only thing I have to find out is why that the diagram has strange unwanted lines (or rendering errors) in it which are made by what? The only thing I can think of is that some Java files in the directory have influence on the shape. Or maybe these are rounding errors? After cleaning up the directories and files they are almost gone. Otherwise I have to remove them in Photoshop.

Changed the color range. Used all colors from te color spectrum for the files. Used grey for folders. I halved the thickness of the arcs for folders. And I used radius in a linear way. All circles are now of the same thickness.

In this last version I will try to look for other changes. And I must admit it is very difficult to make any change because the program is very tight written. If you try to change something it has an effect on everything. Main thing is that any modification of the diagram is closely connected to the data. When you see it in that light the version I created here is not very functional.

I know this does not make any sense but it is interesting to see how far you can deconstruct the image. Of course this hasn’t anything to do with visualizing data but it has everything to do with deconstructing or repeating data.

More circular movements. Used the alpha channels for overlays. Again a useless data visualization.

This is a bit more functional version. All documents are represented in the full color spectrum. Folders are grey or blue. But it still gives me a lot of render faults.

Again not very functional. But the image looks interesting.

Another version with different layers and repetitions.

After working with the sunburst diagram I think the problem is that anyone can do this. Just choose a directory and let the program do its work. Another point is that the program is very hard to modify to something you would really like to have. As I said before the programming is very tight. Everything is strongly connected with each other because of it’s connection with the data. And that is a good thing. But it gives you less room to design something special. And if you do change something things will get very puzzling. For instance when you change strokes for fills diagram is completely changed to something wich looks interesting. But looking it from the data’s point of view it is a useless change. Another thing is that this diagram gives you an overview of the directories, folders and files in a root directory but it is difficult to see which file is where in the diagram. But maybe my reaction is a bit too premature. Let’s see how the next assignment will evolve.


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