Archive for September, 2013

Fun with the Weather Underground API

Posted: September 27, 2013 in CC Lab
Tags: , ,


link to live example here

code on github here

For this assignment I used the Weather Underground’s API to create weather identifiers for some of my favorite cities. The API call grabs data for satellite imagery, current weather, wind, high, and low temperatures for the day. In my next iteration (unfinished) I’m looking to write the javascript code so that an object of areas and cities can be given rather than rewriting the $.ajax script 4 times.  For example an object called `geo` would have the following:

‘NY’ : ‘New_York’,
‘CA’ : ‘San_Francisco’,
‘MI’ : ‘Detroit’,
‘Germany’ : ‘Berlin’

and could be passed to a function that then generates data for all four locations, rather than hard-coding them. A further option could ask for a list of cities as user input and then generate the data.

Interactive Abstract Expressionism

Posted: September 25, 2013 in Web3
Tags: , ,


For this Web3 assignment I used CSS3 properties and Javascript to create an interactive and playful webpage. Using CSS’s transition allows for smooth animation like actions, so when using the :hover selector to change the objects’ shape, location, and color the transition happens smoothly rather than abruptly.  Additionally the @media query dectects if the browser is resized to a small width or height and causes the shapes to behave differently. If the user clicks on the shapes they will change color an action that is being implemented using a javascript function that converts HSV input values to RGB outputs for CSS. This allows for easier play with color (it’s much easier to adjust colors using HSV than RGB when passing number values). The function takes randomly generated numbers as inputs for the Hue and Saturation parameters. Saturation stays in the upper end so the colors don’t get too pastel looking, while Hue cycles through all 360 degrees of the color spectrum. Setting a min-max value for saturation involved a bit of a hack for the Math.random() method but appears to work well. Value (aka brightness) is kept at 100% so the shapes don’t get muddy or grey looking. For Safari to read the CSS transition selector it pust be prefixed with `-webkit-`.

link to live webpage here

Fun with Canvas and Javascript

Posted: September 25, 2013 in CC Lab
Tags: ,


For this assignment we explored the canvas element in html5 with javascript to create an interactive web page. My code incorporates two draw functions, one to create circles at random sizes and another for the lines.  JQuery maps the mouse’s position to the center of the circles and end point of the lines. while a setInterval function calls the drawing functions at a specified rate in frames per second.  The transparency effect is created using the rgba color mode where an “alpha” or opacity value can be given to the normal rgb color value.

link to live page here

Maker Faire observations

Posted: September 23, 2013 in gallery or event viewing

Despite having a head cold that is making it seem like I’m living in a dream like state during my waking hours I managed to make the trek out to the New York Hall of Science in Queens for the 2nd(?) NYC Maker Faire. This will have been my fourth time attending Maker Faire, the previous three having been in San Mateo, CA.  The first project I noticed was in the Microsoft tent and was called ‘Project Spark’; a new concept for creating worlds, characters, and plots in a role playing game WHILE PLAYING THE GAME! The graphics and UI were amazing, a Ginormous screen with a touch interface allowed very elegant control with extremely responsive play. Unfortunately I didn’t get a photo as it was so crowded, but I did get a couple of these amazing robots that would box each other. They were being controlled by two kids standing in front of Kinects who were boxing into the air. Their movements controlled the robots punches, needless to say everyone was amused.

IMG_2302 IMG_2304

The Kraftwurx 3D printing service, which is global and gives the client 83 materials to choose from including metals, plus the 3D scanning technology for highly customized, wearable, 3D printed fashion was off the hook.  I can’t imagine the possibilities these technologies are bringing to a global audience, they’re simply incredible. However what really blew my mind was a robot someone made that automated the pour-over style of coffee brewing that has become trendy at high-end coffee shops:


I’m sure all my barista friends back in Oakland will get a huge laugh out of this.  I can’t tell you how many hours they spend doing this at coffee shops and farmer’s markets for blue bottle. Speaking of coffee someone also made an arduino controlled coffee roaster, I believe the device controlled the temperature and rotation of the beans:


My favorite project I came across was one from a group of Young Makers from San Jose (I think) who made a huge gaming board inspired from the mobile-app game Flow. Toddlers and kids absolutely loved running around this thing and interacting with it. The people who made it envision using it for an educational tool that teaches children about team work, what a great idea!

IMG_2314 IMG_2315

Finally, I came across a project called Mannahatta; a web app in the works from Wildlife Conservation Society (local non-profit that manages the NYC Zoo’s and does international work as well!) that is a scientific modeling tool for predicting NYC’s climate by the year 2409 (no idea why this date was chosen). This app is absolutely incredible because 1. it involves an interactive web map as a platform / interface for visualizing future land-use data, and 2. the GUI let users ‘paint’ small squares of land-use data on the map in a sim-city style fashion. The user could decide if a block would be grass, buildings, have a green roof, solar panels, a backyard orchard, etc.  After editing an area, say a block or several blocks, the model could be run and the user would see how the changes to the built environment they made would influence NYC’s climate in the future while comparing it with today’s climate and prior the invasion of western Europe. This is an educational service open to scientists as well as the public with a supposed launch date in December of this year. WOW!  I’m currently trying to talk the main person who created this app into giving a talk at the Geo NYC Meetup, we’ll see…


Once again Maker Faire, you did not fail to impress me, definitely worth the ~2 hour subway commute each way and money spent on the ticket. Truly inspirational and exciting.



After spending a considerable amount of time on the NYC Open Data portal (Socrata) I started to consider how the website / application could move beyond it’s current state as a data repository and simplistic mapping application to become a tool for visualizing and analyzing the data it contains.  I’ve spent a considerable amount of time looking through a lot of data on this site, and even more time editing data so that it could be mapped / visualized.  What if users could contribute back edited data that is more user and analysis friendly? For example, a lot of this data contains addresses or even lat lon coordinates but often these elements are encoded in the data poorly making the data hard to geocode. If for example someone like myself could create an account, copy the data, then edit the data to make it more user-friendly, then upload it back to the site, a lot of time would be saved for future users down the road. Other users on the site could inspect the data and make corrections or flag it if it contained errors.

The image above is a prototype of what such an application might look like for NYC Open Data 2.0. A user could select from multiple data types and create overlays to draw connections such as mapping demographic data and grocery stores to determine areas of the city that might be considered food desserts.  The app would go further than visualization and actually analyze data; effectively giving the user statistical information and letting them know if there is significance such as correlation between datasets.  This is a first iteration and needs to be further developed and revised.

Screen Shot 2013-09-16 at 8.34.55 PM

link to interactive map

The inspiration for this map came from Rebecca Solnit’s Infinite City; an illustrative atlas that features a collection of maps and writings about San Francisco. One of my favorite maps in the book is titled; “Poison/Palate”. The map shows locations of sites designated as either a ‘palate’, ‘poison’, ‘poison/palate’ or ‘EPA Superfund.’  Farmers markets, organic farms and well known eateries are juxtaposed next to nuclear research laboratories, chemical plants, and Silicon Valley’s legacy of tech waste.  The map I made shows only locations of NYC’s farmers markets linked to their nearest superfund site (within city limits, their are many more just outside in other counties and New Jersey). With more time I would include other types of ‘palate’ and ‘poison’ sites such as notable NYC eateries and restaurants.  Further user interaction with the data would developed as well; such as the ability to search all sites from a certain distance of an address entered by the user.

Data was obtained from the EPA and NY State open-data.  CartoDB is being used to host and render the data live; a PostGIS SQL query links the two data-sets and a subtle light-grey base-map I imported from MapBox puts the data in context.  To process the data I used GDAL’s ogr2ogr utility to query out the 5 boroughs of farmers markets from all of NY.  I used QGIS to perform a spatial query on the EPA data to only select sites within the NYC boroughs (this could probably be done with ogr2ogr but I’m not certain).

*note: when searching for superfund data the EPA Environmental Dataset Gateway is a good place to start. Superfund sites are also known as “Comprehensive Environmental Response, Compensation, and Liability Act (CERCLA)”, a term that comes up a lot in the EPA websites.

**the list of NYC farmers markets I used appears incomplete. The dataset I originally downloaded from nyc open-data contains more records but the address data is not easily geocodable; there are many addresses like: “Crotona Park South & Clinton Ave, in Crotona Park” instead of the typical format of street address, city, state, zipcode. Given more time I could have reconciled the state and city datasets and included more market locations.

NYC Mental Map

Posted: September 15, 2013 in hand-drawn map, seven in seven
Tags: ,


>link to high-res

For day five of the 7 in 7 project I drew a mental map of NYC depicting my limited knowledge of the city’s geography. A mental map visualizes a unique perspective from the person who draws it; places of importance, routes traveled, known and unknown areas, and perhaps most importantly how they feel about their geographic location(s). For example in my map I depict parks and a “Beach Land” area in the Rockaways which is telling of how public lands and open space are of importance to me. I filled a lot of unknown areas of Brooklyn and Queens with question marks, these are areas I’ve yet to venture to and know little about on a personal level.

Bike Collisions and Routes June 2013

Link to interactive map

This map shows cycling crashes recorded by the NYPD for June 2013, following the launch of Citibike in late May that year.  Bicycle lanes are shown color coded for off-street (green) or on street (purple), transitional (yellow), or null (grey). Ultimately my goal is to show where collisions tend to take place and if there has been an increase and in what areas following the launch of Citibike. This data only represents a sample of the dataset I collected, more collision data can be found hereThe map was created using CartoDB with QGIS and GDAL for inspecting and editing the geo-data prior to visualization.

NYC bicycle facility data is available here

Citibike station data is available here: which I believe is the live update.

More mapping of NYC’s open-data, this time with CSV data of graffiti reports, rat sighting calls to 311, and wi-fi hotspots. Graffiti sites are shown in yellow, rat sighting locations in red, and wifi hotspots in blue.

Screen Shot 2013-09-14 at 12.30.06 PM

link to map here

The point of mapping this data is that there really isn’t a point, just how arbitrary datasets could be viewed amongst each other. Once again TileMill, QGIS, GDAL, and MapBox were the tools I used to create this map.


Link to interactive map

This Choropleth map shows the number people per acre by census track. Data was used from the 2010 Census and taken from NYC’s open-data website. 

Tools used include QGIS, TileMill, MapBox, and GDAL.