Ian Ferguson | MDDN242

FINAL IMAGE
This image illustrates the most visited websites of 2011 - specifically the top 10.
Inspired by French Impressionist Art, this visualization contains short quick brushstrokes of color which are blended together, giving the image a slight illusion of movement. When I figured out I was capable of creating this style in Processing early on, I knew this was something I wanted to achieve. I wanted to make a visualization that is unique/not often seen.
Each website is represented through the shades of color that are formed from their logo. (See key below). This makes the visualization more readable and understandable as you are able to identify the different websites. They have been arranged in such a way that the hierarchy is in the more popular websites (Google, Facebook, Youtube etc.) The scale of the logos represent the actual amount of people that visit the sites (e.g. the larger the logo, the more visits from people). 
The shades of grey between the websites represent the masses of people that visit these websites. 
The process of making this final composition involved;
-Creating the different pieces/parts of the image in Python
-Positioning these pieces into one composition in Photoshop (Photoshop was used to a minimal degree)
-Using Processing to modify the composition so it looked the way I wanted.

FINAL IMAGE

This image illustrates the most visited websites of 2011 - specifically the top 10.

Inspired by French Impressionist Art, this visualization contains short quick brushstrokes of color which are blended together, giving the image a slight illusion of movement. When I figured out I was capable of creating this style in Processing early on, I knew this was something I wanted to achieve. I wanted to make a visualization that is unique/not often seen.

Each website is represented through the shades of color that are formed from their logo. (See key below). This makes the visualization more readable and understandable as you are able to identify the different websites. They have been arranged in such a way that the hierarchy is in the more popular websites (Google, Facebook, Youtube etc.) The scale of the logos represent the actual amount of people that visit the sites (e.g. the larger the logo, the more visits from people). 

The shades of grey between the websites represent the masses of people that visit these websites. 

The process of making this final composition involved;

-Creating the different pieces/parts of the image in Python

-Positioning these pieces into one composition in Photoshop (Photoshop was used to a minimal degree)

-Using Processing to modify the composition so it looked the way I wanted.

KEY (for the final image)
This is the key/guide that shows what feature in the image coressponds to what website it is. I really like how code has given me the ability to produce such pictures out of the color of their logos. The actual statistics for these are listed further down my blog.

KEY (for the final image)

This is the key/guide that shows what feature in the image coressponds to what website it is. I really like how code has given me the ability to produce such pictures out of the color of their logos. The actual statistics for these are listed further down my blog.

FINISHED COMPOSITION (PRE-FINAL)
Here is the composition I made before the final stage of using Processing.
As you can see it has the website logos I made (using recursion) in Python. As well as the line compositions (sine/cosine function). The scale of the logos determine the actual amount of visits each website had in 2011. The line compositions are used to represent the masses of people that visit the sites.
Everything so far has been created using Python, however, Photoshop was used only to positions everything I created (because Python would have been really hard to use for doing this).
I like how this looks ‘as is’, but I would still like to use Processing to give it the final look that I want.

FINISHED COMPOSITION (PRE-FINAL)

Here is the composition I made before the final stage of using Processing.

As you can see it has the website logos I made (using recursion) in Python. As well as the line compositions (sine/cosine function). The scale of the logos determine the actual amount of visits each website had in 2011. The line compositions are used to represent the masses of people that visit the sites.

Everything so far has been created using Python, however, Photoshop was used only to positions everything I created (because Python would have been really hard to use for doing this).

I like how this looks ‘as is’, but I would still like to use Processing to give it the final look that I want.

FURTHER VARIATION
Pixelated version using processing. Somewhat interesting, but not the look I’m going for.

FURTHER VARIATION

Pixelated version using processing. Somewhat interesting, but not the look I’m going for.

VARIATIONS

These are some slight variations (in Processing) of my final image. I didn’t like them because they completely abstract the information that I am trying to communicate. I made these just for the sake of experimentation and incase I came across something I felt looked better. However, I didn’t play around with variations too much because I knew what I wanted all along.

LINE COMPOSITIONS

In order to make these line compositions, I used a similar technique to what I used during project one - sine and cosine waves. I felt that this technique produces great rhythmic and  fluid-like structures,  and the infinite lines it has works great in representing the people who use the websites.

LOGOS

I have taken the website logos into python and used recursion to make these radial patterns that I’d like to incorporate into my final. I like how these turned out because the colors of the website logos are recognizable, so that the viewer can understand the different websites when I make my final composition.

PRECEDENTS/INSPIRATION

Now that I have done some very basic experiments, I know what I’m going for in this project. 

The first two images are the kind of style and aesthetic that I think I would like my final composition to look like; brush strokes and the illusion of movement.

I felt the third image is a good reference as to how I will create each logo; circular and simple. However, I want to make them distinctive and identifiable in their logo colors.

Many visualizations relating to the internet (such as the fourth precedent image) have this aesthetic of many infinite particles. I think having this kind of aesthetic would be very appropriate for my visualization, as it deals with the millions of users that visit websites.

EXPERIMENT TWO
I made this in python by taking the website logos and using recursion.
This is not what I’m going for but it was worth a try. The problem with it is that the different logo colors aren’t distinguishable, and there are crazy amounts of colors.

EXPERIMENT TWO

I made this in python by taking the website logos and using recursion.

This is not what I’m going for but it was worth a try. The problem with it is that the different logo colors aren’t distinguishable, and there are crazy amounts of colors.

EXPERIMENT

In processing, I have imported Google’s logo and manipulated it’s colors in a variety of ways. I particularly like how the first image turned out because it is made by taking a simple logo and turning it into an abstract set of lines.

MY DECISION + RESEARCH
I decided that I want to make a data visualization based on a topic that most people can relate to - the internet.
I wondered what kind of data relating to the internet could be visualized, then website popularity came to mind. I felt that this would be a great topic to look into, because website logos and color are often how we identify and recognize certain websites. Therefore, if these logo colors are integrated into the visualization, people will be able to understand what data is being displayed in the visualization.
So I searched online and found the ‘Huffington Post’ website which shows Google’s ranking of the most visited websites in the year 2011. Obviously, 2012’s data is not available yet, which is why I’m working with the 2011 statistics. 
In addition, I’ve added Google itself as being the number one visited sites (since it is a website after all, and is obviously the most visited).
So this is the information I’ve taken from my research and will put into my visualization:
Google - 12 million + + +
Facebook - 8.8 million
Youtube - 8 million
Yahoo - 6.6 million
Windows Live - 5.5 million
Wikipedia - 4.9 million
MSN - 4.5 million
Blogspot - 4.1 million
Baidu - 3.4 million
Bing - 3.4 million

MY DECISION + RESEARCH

I decided that I want to make a data visualization based on a topic that most people can relate to - the internet.

I wondered what kind of data relating to the internet could be visualized, then website popularity came to mind. I felt that this would be a great topic to look into, because website logos and color are often how we identify and recognize certain websites. Therefore, if these logo colors are integrated into the visualization, people will be able to understand what data is being displayed in the visualization.

So I searched online and found the ‘Huffington Post’ website which shows Google’s ranking of the most visited websites in the year 2011. Obviously, 2012’s data is not available yet, which is why I’m working with the 2011 statistics. 

In addition, I’ve added Google itself as being the number one visited sites (since it is a website after all, and is obviously the most visited).

So this is the information I’ve taken from my research and will put into my visualization:

Google - 12 million + + +

Facebook - 8.8 million

Youtube - 8 million

Yahoo - 6.6 million

Windows Live - 5.5 million

Wikipedia - 4.9 million

MSN - 4.5 million

Blogspot - 4.1 million

Baidu - 3.4 million

Bing - 3.4 million

INFORMATION OVERLOAD

This video was really helpful in understanding the notion of “information overload”. 

CHANGE OF PLAN

I talked to Richard a while ago about my concepts and it seemed like 3D music visualization would be possible with Python scripting in Maya. However, I’ve changed my decision for the reasons that; a) It would be quite hard for me to learn how to do with the given amount of time. b) Many music visualizers have been made so I’d like to make something that feels more original and unique.

I’ve decided to take a step back and start from scratch because, to be honest, I felt like I jumped straight to ideas without doing any background research. For this project, I feel like it will be appropriate to utilize what I know and what I’ve learnt from coding; recursion/rondomness (Python), and image manipulation (Processing).

PROJECT FOUR CONCEPTS

EXERCISE FOUR

I’m not really proud of these, but it does the job!