I'm just starting to learn JavaScript, starting with d3, coffeescript, and Paper.js

I'm excited about the possibilities of flexible web graphics!

Skirts network

(click for interactive version)

One project in Leah Lievrouw's Human Computer Interaction course was to design a data visualization about a personal collection. I chose to visualize my skirt collection using a network (it's debatable whether that was a good choice) and used Jim Vallandingham's Interactive Network Visualization tutorial as a base.

Skirts are connected to one another if they share any one attribute in common (e.g. length, color, pockets or lack thereof). You can choose a force-directed layout or a grouped layout. If you choose a grouped layout, there are a number of grouping choices. The screen shot below shows skirts grouped by color. Dots are sized by length, and color represents the color of the skirt (although the color of the circle does not necessarily correspond with the color of the skirt. Blue represents "printed"). Hovering over any node displays the data associated with it, including a photograph of the skirt.

Paper.js word-painting project

My first exposure to JavaScript was through Paper.js, when I took a class from Jürg Lehni during the fall of 2012. For my final project, I chose to do a purposely-meaningless take on the word cloud, those mullets of the internet. Am I just as guilty for perpetuating this iconography? Perhaps.

The idea for this project was to pull trending topics from twitter, remove the phrase of the trend, and do some simple parsing to remove as much punctuation as possible (because I loved seeing all the creative emoji that twitter users create, I decided not to strip all punctuation), before allowing a user to paint with words on the canvas. Each trend is given a unique color, and words are displayed at random sizes to prevent a user from being able to control the overlap of words. The lightness of each word is controlled by a piece of modular arithmetic on the unique twitter user ID, so all words from a particular tweet should appear the same value. Finally, all words pulled for a particular trend were permuted, so that intelligible phrases would not emerge as the user placed words on the canvas.

This used to be a working project, but as the Twitter API has changed, it's no longer functional. I'm looking forward to digging into the new API and getting this up and running again.