ICM Final – Trash in New York City

For my ICM final project, I wanted to look at trash and waste in New York City.  Originally, it was going to be combined with my PComp final for an interactive data visualization on food waste.  As the PComp project evolved and went in a different direction, I decided it would be best to separate my ICM.  I was still interested in a data visualization of some aspect of trash and waste, inspired by the work of Nicholas Felton, Jer Thorpe, and others.  After looking through NYC OpenData, I decided on using the Collection Tonnages data set, which looks at the level of trash and recycling collected in the city, broken out by borough, by district, for the month of September 2011.  It wasn’t an ideal data set, lacking a time dimension or secondary framing aspect like population or income, but I thought there would be enough angles to explore, and serve as a good introduction to data viz.

My first step was getting the data into Processing and plotting it.  Shown below is the trash collection levels, laid out by borough, by district.  The X axis iterates through the locations, with the height of the lines and size of the data point, mapped to the trash total.  Originally, I wanted to connect the data points and use a triangle mesh fill, similar to this, but using the points became appealing.  The buttons were placeholders for what I thought would be future interactions.

Screen Shot 2013-11-12 at 11.11.13 AM

 

After successfully accessing the data, I mapped the origin lines of the data point to follow the mouse along the X axis, looking to develop the interaction.  The borough names on the data points were just a visual reminder for me to keep track of what was where in the graphic.

Screen Shot 2013-11-13 at 9.01.33 PM

Taking that idea a step further, I was able to highlight the data points by borough as the mouse passed between boroughs on the X axis with a different color and the borough name changing.  At this point, those boundaries were hard-coded.  I also added a Y-axis, some explanatory text, and aesthetic changes.

Screen Shot 2013-11-19 at 11.55.59 PM

After an office hours talk with Danne Woo, I realized that my visualization was just too vague, regardless of whether it was visually appealing or not.  I abandoned the mouse-controlled origin points and the varying data point size, both of which conveyed nothing and added confusion.  I made the switch to more standard vertical lines.

Screen Shot 2013-11-19 at 12.13.51 PM

 

 

This unfinished piece took me to in-class user testing, which provided a lot of useful feedback.  The biggest takeaway was that the piece needed more explanation, with less text.  The explanatory text I added in the upper left corner was almost universally ignored, and people were unclear of what the data was representing.  The different alpha on the data points vs lines was confusing, as were the gaps between the data and the background total lines (which I knew was an issue going in).

The feedback and unfinished work left me with a good to-do list for the final.  I wanted to add an interactive map, remove the non-functioning buttons, change the data explanation method, make an efficient highlighting function instead of hard coding, and, most importantly, get some animations present.  I followed the early advice of Dan Shiffman (my professor, the best guy ever) to build a working model first in whatever manner possible, then rewrite correctly later.  To get my animation working, I had to follow the second step of that advice and rewrite in object-oriented notation, something I really should have just done in the first place.  With that out of the way, I was able to complete the animations I was looking for, import the map, and turn in what I think was a nice, finalized piece.

The following is my completed final, presented in class.  The dark background lines show the total collection, with the red highlighting trash collection, and green being recycling.  Seeing the data is possible by mousing over the boroughs on the map at the top of the screen.

 

ICM Final – Trash in New York City from John Farrell on Vimeo.

(working on a better recording)

ICM Final Update

After some second looks from friends and the resident Danne Woo, I am making some changes in my ICM data viz.  Previously, the size of the points was mapped to the collection number, which is also what was being mapped on the Y.  This double representation of data was confusing, as nothing indicated what the point size was being mapped to, and it wouldn’t make sense to convey the same data twice.  Also, all the data points were mapped to one Y coordinate, tracking along the X axis with mouseX.  Again, this wasn’t really conveying any information.  Taking an action like what with no reason just adds confusion to the visualization, regardless of whether it was visually appealing or not.

Screen Shot 2013-11-19 at 11.55.59 PM

 

Realizing I needed to get back to basics, I reverted back to the vertical lines I had set up before the mouseX point, with some different styling.   As seen below in the first screenshot, I am still currently laying the data out by borough, by district.  The second screenshot shows that, on hover, the borough still highlights.  The dark gray data represents the total tonnage collected by the Department of Sanitation.  The red bar shows the trash collected, leaving that gap to represent the amount of recycling connected.

Screen Shot 2013-11-19 at 12.13.40 PM

Screen Shot 2013-11-19 at 12.13.51 PM

 

 

A lot of people in class liked the visual representation, likening it to a skyline.  They also commented on the Helvetica font, which I was hoping would invoke feelings of the city, as the font is used for all Subway signs.  It still needs significant work to present next Tuesday.  My wish list includes:

  • Highlighting the recycling data
  • Clearing up ambiguous text and axis labels
  • Remove currently non-functioning buttons
  • Insert NYC map using PImage to highlight boroughs on hover

IF that all gets done…I would like to add another layer of data.  Either looking at total borough data, which would break out to district data, or show the district data per capita.  There’s some styling to be refined as well.  But there was a lot of good feedback in class today, both aesthetically and functionally.   I hope I can get it all integrated in time.

ICM Final proposal

ICM Final (4)

ICM Final (3)

ICM Final (2)

ICM Final (1)

   ICM Final

 

For my ICM final, I am producing a data visualization on trash collected in New York City (**data could change…**).  After investigating waste for our initial PComp final concepts, I explored trash and waste data in the city, and began looking at this particular data set.  It shows trash collected per ton in each district in each borough, for the month of September 2011.  I have been interested in data visualization for a couple years now and, combining this data with an initial framework developed for our data homework assignment, I decided to pursue something more realized.  Looking at the work of Jer Thorpe, Edward Tufte, and Nicholas Felton has been a huge inspiration and, though my work obviously won’t be in the same ballpark, they are very helpful resources.  The graph on the “Initial Thoughts” page was the first step.  Each dot represents a district, and the boroughs are labeled for the moment.  The Y axis will show the trash by weight.  Labels are needed of course.  Below:

 

Screen Shot 2013-11-13 at 9.01.33 PM

I experimented with grouping the connection lines to the left…

Screen Shot 2013-11-13 at 9.02.06 PM

…then grouping them on mouseX…

Screen Shot 2013-11-13 at 9.02.22 PM

…and finally on highlighting boroughs through mouse interaction.

I’ve begun to like the look of what’s happening.  As noted in the last slide, I still have some important decisions to make.  Interactive graphic, or series of prints of static images?  Color scheme needs a lot of work.  If it will be interactive, what animations and visualizations do I go with?  What will those buttons in the top left look like and control?  Should I look up population data to help contextualize the trash data?  Should I work on trying to show was 7000 tons of trash actually looks like?  All questions I need to answer in the next two weeks.

ICM Week 6: Simulation

firework3

firework1

firework2

 

Natural simulation in processing, using the tocixlibs libraries.  300 particles are emitted (pic 1), whose behavior can be manipulated.  Key presses can reverse their attraction, making them group together or erupt apart like fireworks.  The intensity of the gravitational force can be changed, as well as the fading alpha background, which can be used to produce trails (pic 3).  The particles also group together around a mouse click, which can produce an effect of throwing the particle (pic 2).  Having trouble getting the code to run right in the javascript export so no live animation for now.

ICM Week 5

Week 5 assignment for ICM.  Decided to work in 3D, originally hoping to replicate Thai lanterns.  I was never happy with the visual appearance, so I changed gears to a space-looking sphere animation.  The spheres pulse in and out using sin wave oscillation, using Perlin noise for the fill to simulate lighting.  Rendering appears slightly different in-browser, getting too light.  I would like each sphere to also pulse at a different time using that same oscillation, but couldn’t figure it out in time for class today.  I’d also like to involve some interactivity, with a way for the user to break apart the spheres, either in explosions or, in a more advanced exercise, pulling the spheres apart polygon by polygon.

ICM Week 4

 

Week 4 homework in ICM.  Working further with particle systems to develop warp speed-esque animation.  Fell into this after looking to make an ink drop in water.  Looks cool but work is needed, for both interaction, aesthetics, and personal understanding.   Also, apparently can’t run in a browser…so that’s a problem.  The code is available on OpenProcessing if you want to copy/paste or download to check it out.

ICM – Working with Classes

click to interact

Homework for week 3 ICM.  Solidifying concepts in Object Oriented Programming.  Chose to work in particle systems with partner Gladys Chan (HUGE thanks to her for her help this week).  Proved to be a bit of a struggle, but after abandoning work with colliding particles, came to this abstract sketch with regenerating tear drop shape resembling smoke.  Looking to expand this in the future to model surreal landscapes like those by Naoya Hatakeyama.

Processing Weave Animation

Weave animation done in Processing.  Ellipses with trails move at varied speeds, slowing down and speeding up to pass above and under other lines, forming a weaving pattern.  Current iteration grew out of a desire to increase complexity from a simple 2×2 grid.  Sketch is far from perfect though – there are spacing issues with some of the trails where ellipses are too spaced out, and ideally the weave would be uniform – over, under, over, under for every line, like a true knit.  Also, with so many iterations, we never had time to tidy up our code.  It could really use an object-oriented rewrite.  It is definitely a project that can be pursued further.

 

Completed with my partner Pamela Liou.

ICM HW #1

Our assignment for week 1 was to create a static sketch in Processing.  I came up with the following:

Space Oddity

 

I had a tough time nailing down what I wanted to accomplish on this assignment.  I started off looking to make an abstract drawing involving some triangles, beziers and rotated objects.  I was getting somewhere but never totally satisfied.  Also, apparently I don’t know how radians work, so I need to put some more time into that.  Then I changed course to some kind of space drawing, which I eventually stuck with.  A few series of randomly generated stars in different colors, sizes and opacities set the backdrop for an astronaut man and alien ship.  Originally I was working on a sort of gas cloud/nebula to occupy the lower left area, but could never get it to a point I was happy with.  Instead I decided to make the ship shooting some lasers, but I will be continuing to work on the nebula idea as I gain a deeper understanding of Processing.

 

int x = 75;
int y = 75;
int w = 375
size(500, 500);
background(30);
//stars 1
for (int i = 0 ; i < 1000; i++) {
float diam = random(0, 8);
float locX = random(0, 500);
float locY = random(0, 500);
fill(255, 255, 0, 175);
ellipse(locX, locY, diam, diam);
}

//stars 2
for (int i = 0 ; i < 1000; i++) {
float diam = random(0, 8);
float locX = random(0, 500);
float locY = random(0, 500);
fill(255, 255, 0, 90);
ellipse(locX, locY, diam, diam);
}

//stars 3
for (int i = 0 ; i < 250; i++) {
float diam = random(0,8);
float locX = random(0,500);
float locY = random(0,500);
float r = random(0,255);
float g = random(0,255);
float b = random(0,255);
fill(r,g,b,110);
ellipse(locX,locY,diam,diam);
}

//flames
fill(255,115,0);
ellipse(x+300,y*3,18,36);
fill(255,255,0);
ellipse(x+300,y*3.1,10,16);

//jetpack
rectMode(CENTER);
fill(120);
rect(x+300,y*2.8,20,x/2,7);

//helmet
fill(255, 65);
stroke(255);
strokeWeight(2);
ellipse((x+300), y*2, 68, 70);

//head
fill(255);
stroke(0);
strokeWeight(1);
ellipse(x+300, y*2, 48, 50);

//outer eyes
fill(0, 255, 163);
ellipse(w+13, y*2-10, x/5, y/5);
ellipse(w-13, y*2-10, x/5, y/5);

//inner eyes
fill(0);
ellipse(w+13, y*2-13, x/10, y/10);
ellipse(w-13, y*2-13, x/10, y/10);

//mouth
stroke(1);
bezier(385, 155, 375, 164, 370, 164, 365, 155);

 

//body
stroke(255);
line(w, y*2.3, x+300, y*3.3);

//legs
bezier(375,247,380,255,385,265,390,270);
bezier(375,247,370,255,365,265,360,270);
//arms
bezier(375,200,385,205,390,215,395,225);
bezier(375,200,365,205,360,215,355,225);

 
//ship
//bubble
rotate(0.2);
stroke(0);
fill(255);
ellipse(x+10, y+15, 50, 50);

//alien
fill(52, 198, 58);
ellipse(x+10, y+5, x-55, y-55);

//eyes
noStroke();
fill(255, 0, 0);
ellipse(x+8, y+5, x-73, y-73);
ellipse(x+12, y+5, x-73, y-73);

//ship
stroke(0);
fill(150);
ellipse(x+10, y+30, x*2, y/2);

//lights
fill(255, 0, 251);
ellipse(x+10, y+30, x/10, y/10);
ellipse(x, y+30, x/10, y/10);
ellipse(x-10, y+30, x/10, y/10);
ellipse(x+20, y+30, x/10, y/10);
ellipse(x+30, y+30, x/10, y/10);

//death rays
stroke(0,255,255);
fill(255,0,0,190);
quad(x-9,y+30,x-10,y+30,x+100,y+425,x+30,y+425);
quad(x+29,y+30,x+30,y+30,x+425,y+425,x+150,y+425);
noFill();
bezier(x+29,y+30,x+149,y+170,x,y+170,x+300,y+425);
bezier(x-9,y+30,x+10,y+100,x-5,y+250,x+100,y+425);