Author: krushton

Memex

In my Art 133 – Advanced Sculpture class we were tasked with creating a self portrait. I called my submission Memex, after the hypothetical proto-internet Vannevar Bush described in his 1945 article “As We May Think“.

Memex is a visualization of 1 month of my Chrome browser history. The links between sites are captured by a D3 force graph which I then cut into wood with a laser cutter to create a 3′ x 3′ wall hanging.

View Visualization (warning: takes a few seconds to load)

memex (1)

288 Cities

One of the hardest decisions we face is choosing where to live, and often there is simply not enough data available to make an informed decision. To attempt to make this process easier, 288 Cities aggregates facts about the most populous cities in the United States (the top 288, to be precise). Slider controls enable the user to narrow down the results based on economic, geographical, political, and other important factors.

Key Screens

The default view maps all results across the country
The default view maps all results across the country
The card view shows one card for each of the results with photos linked from Flickr
The card view shows one card for each of the results with photos linked from Flickr
The table view shows all of the data in raw form
The table view shows all of the data in raw form
Clicking on a card or table row drills down to the data for a single city
Clicking on a card or table row drills down to the data for a single city

Gif Cubby

Gif Cubby is a web app for storing links to animated gifs. The site features tagging, searching, user accounts, sharing (to Pinterest and Facebook), and Facebook authentication via OAuth. It also has a companion Chrome extension for rapidly posting gifs to the site from anywhere on the web.

main page

Code Map

CodeMap shows job search result counts in 100 U.S. cities for 200+ programming languages. The data was obtained by cross-referencing Wikipedia’s List of Programming Languages with Indeed.com search result counts for the top 100 largest U.S. cities. The result is a heatmap of programming language popularity across the country.

Code Map

SF Street Art Map

This project was created for a web development lab course. When planning the project, my group wanted to take advantage of one of the many sources of open data made available by the city of San Francisco. We pulled data from several sources into Google Fusion tables to create the multi-layered SF Street Art Map. Viewers can map the location of graffiti reports and recognized murals along with traffic, transit, and income layers to investigate the (sometimes tenuous) lines between art and crime.

Key Screens

Street art map main page. Map viewers can toggle different layers and visualizations with the filters panel
Street art map main page. Map viewers can toggle different layers and visualizations with the filters panel
Clicking one of the mural markers shows a popup image of the mural
Clicking one of the markers shows a popup with more information

Bots and Pans

Bots and Pans was a project for Info 213 – User Interface design. Over the course of the semester, my group took this project through a full design cycle, from initial concept, to contextual inquiry (studying how people interact with their favorite casual games), to paper prototyping and user testing, and finally to an interactive prototype.

View Research Report (PDF)

Key Screens

Bots and Pans - Game Screen
The game screen, where players attempt to prepare the recipe before time runs out.
Bots and Pans - Character Customization
Players could customize their robot character by picking and choosing different body parts.
Bots and Pans - Recipe Book
The Home screen, designed to resemble a recipe book
The tutorial level introduced players to game mechanics
The tutorial level introduced players to game mechanics

Tag Radio

Tag Radio is a music classification visualization that shows the relationships between genres. We used the Last.fm API to pull in the top 50 tags, and then created a python script to measure similarity between a tag and all others based on the number of shared tags. Finally, we used this data to build a visualization with d3.js that arranges these tags in space based on similarity (closer distance = more similar tags).
Tag Radio

Catmonsters

Catmonsters was a webcomic I authored primarily between 2007 and 2009. When I started out, my subpar drawing skills made it tough to create anything resembling a person. As a workaround, I created the Catmonsters, characters who talk and think and behave exactly like people, except with heads shaped like cats and amorphous multicolored bodies.

2008-02-13-coffee

Durian

3VR Web

3VR designs and manufacturers DVRs (digital video recorders) for the security industry. The company’s flagship product is a desktop application, but their customers also require web and mobile access to their security systems. For this project I was tasked with reinvisioning the company’s interface for the web, and produced an interactive prototype to demonstrate some of the design’s concepts.

Key Screens

The main interface is subdivided into three panels - the map view, camera view, and events view
The main interface is subdivided into three panels – the map view, camera view, and events view
The camera view is used for live monitoring of surveillance footage. The user can quickly create and load preconfigured arrangements of cameras
The camera view is used for live monitoring of surveillance footage. The user can quickly create and load preconfigured arrangements of cameras
The map view lets users browse appliances and cameras to monitor by physical location