Real-Time Cities: an Introduction to Urban Cybernetics Harvard Design School: SCI Spring 2014 Jian He Exercise #2: Case Studies in Data Analysis (5 Ways to Make a Story out of Numbers)

Narrative Title 1 | The Rising of Olympic Mountains 2 | The Egyptian Revolution on Twitter 3 | How We Visualized America’s Food and Drink Spending 4 | Seattle Band Map 5 | How to Create a Real-Time Web Traffic Map for Your Site

An interactive visualization for the Olympic Summer Games. Project Video: 1 | The Rising of Olympic Mountains

What is the raw data? Use sports-reference.com/olympics as the data source for the project, because the site is well structured and also offered some of the data as downloadable CVS files. What processes are deployed to transform the raw data to information? Sketched out the complete data structure needed for the visualization consisting of informations about the games, the sports and each individual country; wrote a handful of python scripts to fetch all the medal-counts and information for each country sorted by year. What is the information that is the outcome of the aforementioned processes? The result was a collection of 137 separate country data files in the JSON format which merging together into one big file.

1 | The Rising of Olympic Mountains How the act of sensing or access to raw data leads to comparison, judgment, reflection, reasoning, and abstraction? The next step in the process was to test the dataset and look for emerging patterns. After reconsidering the placing of each sport, the author came up with the elegant and simple solution to sort each sport by the medal count and arrange them from the center outwards, thus showing which are the top sports for each country while reinforcing the metaphor of growing mountains. How the sum of all the above processes is resulting in a limited sort of agency for the data-driven construct? The author tried to keep the design of the visualization as clean and simple as possible in order to keep the communication on a clear and focused manner and support the idea of the metaphorical mountains. Therefore the author limited the use of color to labeling of the selected sports and to indicate the newly won medals in the currently selected Olympic game. The author also limited the user interaction to allow only the possibility to change the year of the game and to highlight a chosen sport across all countries.

This is a preliminary result of the network of retweets with the hashtag #jan25 at February , at the time of the announcement of Mubarak’s resignation. Project Video: 2 | The Egyptian Revolution on Twitter

What is the raw data? Twitter Streaming What processes are deployed to transform the raw data to information? To collect the network data, the author used the Gephi Graph Streaming plugin, connected it to a Python web server. This web server works like a bridge, it connects to the Twitter Streaming API using the statuses/filter service and converts the users and retweets to nodes and edges in a network format that can be read by the Gephi Graph Streaming plugin. Nodes are twitter users, and links appear between the nodes A and B when B retweeted a message of A containing the hashtag #jan25. What is the information that is the outcome of the aforementioned processes? It shows the dynamic network construction during the hour of data collection, compacted in less than four minutes.

2 | The Egyptian Revolution on Twitter How the act of sensing or access to raw data leads to comparison, judgment, reflection, reasoning, and abstraction? The static network visualization is just the final result of about one hour of data collection. It is a dynamic network, and it’s possible to get much more information from the collected data. For example, before the announcement, there were few nodes and edges, sparse in time. But when the announcement arrives, a boom of retweets appears on the network. How the sum of all the above processes is resulting in a limited sort of agency for the data-driven construct? It was very interesting to see, in real time, the exact moment when Tahrir Square, from a mass protest demonstration, has been transformed in a giant party, and the burst in the Twitter’s activity. It was like covering in real time a virtual event, a big event that was happening in the Twitter virtual world.

Everybody’s Money a is a mix of anonymized credit card transactions and governmental data. It aims at helping people to compare their savings and spendings all over the United States, in all possible categories. This project is to dive into a bunch of interesting data about food and drink spending in America and to develop an exciting infographic. Project Video: 3 | How We Visualized America’s Food and Drink Spending

What is the raw data? After a full year of collecting and providing data, Bundle engaged different designers to participate and create a series of reports to summarize America’s total spending. What processes are deployed to transform the raw data to information? After structuring the data file, the first goal is to gain a primary, rough visualization. In this way, people get a nice overview and people can even make first conclusions about data quality and emerging patterns. What is the information that is the outcome of the aforementioned processes? The main intention is to make the huge differences in spending amounts visible, not only for the “Food & Drink“ total, but also for the two sub-categories “Dining Out“ and “Groceries“.

3 | How We Visualized America’s Food and Drink Spending How the act of sensing or access to raw data leads to comparison, judgment, reflection, reasoning, and abstraction? Another decision to make was whether to refer to the complete dataset that contains a broad range of states and cities, or to focus on a smaller selection. The author opted for the display of cities only, because people tend to have a stronger empathy with a concrete place. How the sum of all the above processes is resulting in a limited sort of agency for the data-driven construct? To distinguish which cities rank above and which below the ordinary food and drink cunsumption the author integrated a horizontal bar and vertical lines representing the U.S. average of spending on groceries and dining out respectively. And finally, to add the finishing touch, the author arranged every single pixel, added all the labels, and inserted a header and a footer.

This project aims to diversify the audience for and broaden the understanding of Seattle’s music scene, while spotlighting unrepresented artists and musical genres. Seattle has long been known as a hotbed of musical creativity, from the thriving 60s and early 70s Soul and Funk scene, to the 90s grunge movement. Music continues to thrive in Seattle, and we see the Seattle Band Map as an opportunity to keep it in the forefront of people’s minds. Project Video: 4 | Seattle Band Map

What is the raw data? bands from the Pacific Northwest are interconnected through personal relationships and collaborations. Bands are connected if a) they share band members or b) two artists have collaborated on a project. For the purposes of this map, to qualify as a band, a project must have recorded and publicly shared at least one song and/or played a public show. What processes are deployed to transform the raw data to information? The Seattle Band Map began as a mental-exercise in the fall of 2009 when Rachel Ratner sketched out the connections between local bands on a pad of paper. Quickly the map began to grow, and with the help of artist Keith Whiteman, the map was redrawn to gargantuan size and displayed at a local art gallery. Whiteman envisioned it as an interactive piece, and the duo invited viewers to add their own connections. In 2011, with the help of University of Washington computer science student Golf Sinteppadon, the map was transformed into an interactive website What is the information that is the outcome of the aforementioned processes? The user-submitted bands connect to each other if they have played together or have shared a band member. The result is a monstrous spiderweb of the Seattle music scene.

4 | Seattle Band Map How the act of sensing or access to raw data leads to comparison, judgment, reflection, reasoning, and abstraction? This has lead to increased academic interest in the band map as a unique means of using digital technology to at the same time illustrate and foster relationships within communities. How the sum of all the above processes is resulting in a limited sort of agency for the data-driven construct? This project aims to diversify the audience for and broaden the understanding of Seattle’s music scene, while spotlighting unrepresented artists and musical genres. Seattle has long been known as a hotbed of musical creativity, from the thriving 60s and early 70s Soul and Funk scene, to the 90s grunge movement. Music continues to thrive in Seattle, and we see the Seattle Band Map as an opportunity to keep it in the forefront of people’s minds.

Project Video: 5 | How to Create a Real-Time Web Traffic Map for Your Site

What is the raw data? The data (i.e. IP addresses) come from Apache log files. What processes are deployed to transform the raw data to information? The IP addresses are mapped to location with the free version of MaxMind'sGeoCity database. Get the data from server log files and geolocate IP addresses. Map data in a way that doesn't look ugly. What is the information that is the outcome of the aforementioned processes? A map shows web traffic, that shows bubbles in places your site visitors are, visiting from. Bubble size represents the number of requests a particular visitor made recently.

5 | How to Create a Real-Time Web Traffic Map for Your Site How the act of sensing or access to raw data leads to comparison, judgment, reflection, reasoning, and abstraction? Creating the Markers, making the animation with TweenFilterLite. Starting the marker at scale zero, tell it to grow, and then make it fade away over a minute. How the sum of all the above processes is resulting in a limited sort of agency for the data-driven construct? A way to see where your site visitors are coming from in near real-time, and after plenty of hearty discussion.