ICM - Week 7 - MTA Lost and Found Data Vis

final_working.gif

final project code

I spent more time that I expected this week thinking about and searching for the data set that I wanted to use for my project this week. But that was until I stumbled upon the hourly updated XML-formatted list maintained by the MTA of all the items they currently hold in their Lost and Found. It is a fascinating list broken down into hundreds of categories and subcategories of everything from movie tickets to skis. In the interest of simplifying my project a bit, instead of actively calling the list, I copied the XML, converted it to JSON using an online converter and then created a local JSON file which is what I then referenced. I then further narrowed down the data I would be working with to just include the 27 subcategories of the ‘Electronics’ category.

Based on thinking about my own interest in retro graphics and vintage digital imagery, I knew I wanted to do something with an 8-bit, glitch art feel, but while still maintaining a random generative element. I discovered this really fantastic artist online who calls himself Pixel Noizz and was inspired by the more abstract work he has done.

I started thinking about how to create fields of color which would seem both ‘low-res’ digital but still have an organic feel to them. And what I eventually did was write code which generated a single ‘pixel’ (square) and then using random(); selected from 4 options which would print the next ‘pixel’ adjacent to the former either on top, below on the left or right. Then the next pixel would be printed in the same way in relation to the one before it. From here it was just a matter of moving the creation of each of these ‘blobs’ into an object class and calling one for each of the subcategories. The number of ‘pixels’ in each blob corresponds to the number of items in each subcategory currently in the lost and found. I was pleasantly surprised when I got this to work that it started to look a bit like an abstract map which I found very appropriate for data related to things that need to be found.

After this was working I was also interested in making this data vis interactive, and I found the different categories so interesting that I wanted users to be able to see the names associated with each blob. My goal was to allow a user to hover their mouse over each blob and have it increase in saturation and the rest of the sketch grey out slightly. I achieved this with a single blob fairly easily by checking if the mouse was inside each ‘pixel’ using a for loop. Then once I instated another for loop to check every blob, I simply had to introduce a counter which kept track for each blob whether the mouse was inside of any of its ‘pixels’.

single_hover.gif

I had a few minor snags up until this point, but I was well and truly stumped when I got to the stage where I wanted to print the name of the hovered blob. If I created the text in the for loop checking for hover, the text would be printed under other blobs, and if the hover is over multiple blobs at once, it would show two different subcategory names at once. On the other hand, if I created a variable which was filled with the name of a hovered blobs, that variable was only able to show the name of the last category scanned by the for loop. After much experimentation and head-scratching what I finally created was an array which reset every draw() loop and would store the names of all hovered blobs. Then, only the very first name entered would be drawn, thus insuring that the top-most blob is the one whose name is displayed.

All things considered, nearly everything about this sketch works, with only a few small glitches that potentially could be worked out in the future. The first thing is that if you are hovering over multiple blobs as once, the intensity of the ‘greying out’ of the background is stronger because it currently draws a light white rectangle over the whole canvas for each blob that is selected. Also my system of storing the name of the currently selected blob does not work if you hover over one blob and then move to another without first moving the mouse to an empty area which is what effectively allows the array of names to reset.

ICMStefan SkripakComment