Visualizing OpenProcessing is an interactive data visualization of the activity of users on OpenProcessing.org in 2012. This visualization allows you to observe each user-to-user interaction as well as the high level patterns on different interaction channels

• commenting on sketches
• following users
• tweaking (forking) sketches
• favoriting sketches

on different user types

• Professors
• Students
• Regular users

Visit the project

I have been always a great supporter of using analytics tools to observe user patterns and use that insight as a guidance for the next phases of updates. Since I launched OpenProcessing almost 5 years ago, I used Google Analytics to track the website traffic. I have also used many other analytics tools on projects I worked on as a UX designer. However, I have been always frustrated to see that these tools are great on displaying user-to-website interaction but they are very limited on providing any user-to-user interaction information. On social platforms like OpenProcessing, Twitter, Facebook, etc., it is extremely important for the designers to have a sense of the interaction between users, because it is what defines a social platform and makes these websites different from each other although they may provide similar functionality. Being able to answer such questions is crucial:

• Who are your users? Who is an influencer, who is a contributor, who is just a random visitor…
• How do they interact with each other?
• What kind of interaction do they have with each other? eg. comments, retweets, etc.
• What kind of user behavior patterns are there?

The Making Of…

Some early dry-erase wall sketches

There is a common question in data visualization: Do you start with the question or the data? In my case, it was the questions above. I started concepting a network visualization. Currently, there is 20000+ registered users and 70000+ sketches on the website. There are different user types and they can interact with each other in different ways. It was easy to expect many different behaviors and patterns in this ecosystem, and a circular network visualization seemed best approach to visualize these. Now with the great visualization tools like d3, Raphaël, processingjs, creating such visualizations are easier and more fun. I started designing the concept for this visualization (thanks to Mahir for his input during brainstorming) by some sketching and coding in d3 at the same time.

I chose to use d3 because I wanted to learn this popular library which is both web-based and uses svg element. It allows you to make your data visualization interactive pretty easily, with the common mouse events being available on DOM elements (unlike Canvas element). However, it took quite sometime for me to understand of how the library works; Its future-data-referencing structure is pretty interesting and uncommon, but Scott Murray and Mike Bostock‘s tutorials came to rescue on this one.

After the getting some basics done with dummy data on d3, I started tying the OpenProcessing database to the visualization. At this stage, performance started being an issue: Data needed to be optimized and formatted to work with D3, and required a lot of tweaks and redos: I had to strike the balance between doing some of the data handling on MYSQL-PHP level and some on the javascript level. I didn’t want my server to handle all the data formatting because it would clog the server overall but I also didn’t want to weigh on javascript because I didn’t want the front-end experience to be laggy on browsers.

I had to implement an indicator to show that performance may drop with more data points selected

The rendering performance was also an issue for all those lines representing a year of interactions. I couldn’t do much effects like fades and animations because of the decreasing frame per seconds. In order to get the best performance I had to tweak the D3 related code, css, jquery, etc.. Realizing that performance will not be great on slower devices such as mobile phones, I made the site responsive and made it gradually reduce the available functionality on slower and smaller devices.

Finally, I worked on the page functionality and user interface. I designed a simple interface to filter through the data and navigate through the editorial section: A data visualization is at its best when it is telling a story, and even better if it is accompanied by an editorial piece (yes, I guess I am talking about many impressive New York Times visualizations). So I wanted to make sure I guide the user through the visualization to explain how it works and the patterns it includes. The rest is left for users to explore…

Before I launched it, I showed it to some people, got their feedback, did some user tests (Hello sister!) and some tweaks upon my observations. It took many weekends and after-hours over the course of 3 months, and finally I am happy to share this project with you.

Some Take Aways

When I tied the visualization to the actual OpenProcessing database, some patterns started to emerged right away.

• Students were much more active on the website than I thought.This is particularly true for commenting on and tweaking each others’ sketches. Students seem to be very vocal when comes to interacting with each other.
• Aligned with my expectations, professors are highly focused on interacting with their students, and less social with the rest of the site.
• Tweak feature was used by the community more than I thought and it was particularly helpful to classes. This is helpful information as I am continuing to simplify the features on the website.
• I introduced the follow feature on March 2012, users caught up pretty quickly and became the most important interaction between users next to favoriting each others sketches. (This makes me wonder if ‘follow’ activity is higher than ‘tweet’ activity on Twitter.)
• I was aware of the influencers on the website however the conversationalists  proved to be the ‘core’ users of the website together with influencers. This is a good directional input to weigh equally on both uploading/following process and improving the interaction channels for conversations.

There is so much more to discover when you analyze the visualization in-depth.

Future Iterations

There are definitely many other ways to visualize the activity on a social website. I will be continuously thinking of and searching for other data visualization types that might reveal other patterns, such as user activity frequency and drop outs.

Also, I am hoping to find more ways to improve performance: one thing I went back and forth was using JQuery vs D3 to interact with some elements, and using CSS vs. D3 to style elements. Eg. You can hide/show elements using JQuery or D3, you can set the color of elements in D3 or in CSS, but at the moment it is not clear to me which way would be faster. I ended up using CSS for most styling, but this came with the limitation of not being able to tweak individual elements.

I would love to hear your feedback as well as any questions you might have design/coding wise.