Posts Tagged ‘data-viz’

nwb-map-redesign

The Northwest Bushwick Community Map is meant to be a resource for local community organizations and tenants rights groups to easily access disparate information around land use, housing and urban development for the neighborhood of Bushwick in Brooklyn, NY. It is also intended to be a tool to inform NYC residents about what kinds of indicators may be used to predict new urban development and help prevent displacement of residents in their own neighborhoods. Recently I had the opportunity to work with the original author of the map and some fellow designers in the MFA DT program at Parsons to improve the map’s design and functionality.

Background

In the fall of 2014 two members of the Northwest Bushwick Community Group (NWB), Michael ‘Ziggy’ Mintz and Brigette Blood, met with several graduate students from MFA DT to discuss improvements to the beta-version of the map. Previously, the map used vanilla Leaflet.js with GeoJSON data created from NYC’s MapPLUTO and Department of Buildings permits open data. However the original map lacked a cohesive design and was slow in regards to loading of the data due to technical issues.

Map Improvements

To improve the interactivity of the map I chose to host the data on CartoDB and use the CartoDB.js library to handle loading, styling and toggling of the map’s data layers. When the user selects layers, CartoCSS and SQL code is passed to CartoDB to retrieve and style the data being rendered on the map. Hosting the data on CartoDB also allows for processing of the data in the CartoDB dashboard using PostgreSQL and PostGIS. This is beneficial as SQL scripts can be run to automate the processing of new data when the map needs to be updated.

To improve the context of the map (the Who, What, Where, When, Why and How) the MFA DT team asked Ziggy and Brigette to provide us with some real world stories that show how the data relates to the dwindling affordable housing stock and displacement of longtime residents in Bushwick. To accomplish this we used the Odyssey.js Javascript API to create an interactive slide show with the map which transitions between three of NWB’s stories. With a bit of hacking we were was able to use the changing of the slides as a jQuery event trigger to toggle the map’s data layers. This allows for the slide show to give background and context about the project while also relating seemingly abstract data in a visceral way.

Besides Cartodb.js and Odyssey.js we added some other features to the map to make it more useful for the Bushwick community. As there is a large Latino presence in Bushwick it was imperative to have the text of the map’s UI and the overall website toggle between English and Spanish. Additionally the non-map parts of the site were redesigned responsively using CSS Media Queries so that the other content such as “Get Help” can be easily viewed on a mobile device.

Future Plans

In the future NWB plans on adding participatory map data they’ve collected on housing vacancy and new development as well as stories of people who have experienced being displaced or harassed by their landlords. These features may be integrated with the current map or developed separately, but either way CartoDB and Odyssey will allow for the further creation of customized interactive map content to be readily achievable.

Links:

scatterplot-v8-combined

This is a Processing Sketch that visualizes data relating to climate change from the World Bank Data Indicators. Two visualizations can be toggled using a switch in the upper right corner. Specific data for each country can be viewed by hovering the mouse over each circle. Color scheme was borrowed from Cynthia Brewer’s Color Brewer tool.

Process:

  1. I downloaded data from World Bank Data indicators in the Climate Change category. I noticed problems with the raw data:
    • Not every country listed has data for the same year.
    • There are aggregates of countries within the dataset such as “East Asia and the Pacific” or “Sub-Saharan Africa”. While these may be useful, for my data-viz I’m attempting to compare only countries.
  2. To sort out countries only from the raw data:
    • Grabbed category data for 2010 as this was the latest year available for the CO2 kt category.
    • Combined the data into one spread sheet.
    • Used a join in QGIS to a world dataset file so that only matching countries would be imported. I used the ‘Country Code’ key from the World Bank data and joined it to Natural Earth‘s ne_10m_admin_0_countries.shp ‘Adm0_a3_is’ column.
    • To only keep matching countries from Natural Earth and the World Bank I filtered out data with NULL values using an SQL WHERE clause:
      • SQL SELECT * FROM ne_10m_admin_0_countries WHERE "pop_gni_co2_2010_Country Name" != 'NULL' AND "pop_gni_co2_2010_GNI_2010" !='' AND "pop_gni_co2_2010_CO2_2010" != '' AND "pop_gni_co2_2010_POP_2010" != ''
  3. I noticed that some countries lacked data for 2010. To fix this I manually added data from the next available previous year to try to fill in the gaps (probably not the most statistically sound method). These problem countries are listed below. A couple countries such as Myanmar and North Korea did not have any data from the World Bank so were excluded from the viz.
    • Countries shown that had no data for 2010. Their values were replaced with data from next available previous year. The countries and year of data is listed below:
      • Argentina GNI (country & per capita) 2006
      • Greenland GNI (country & per capita) 2009
      • Libya GNI 2009
      • Sudan and South Sudan: I split Sudan’s CO2 evenly as South Sudan has no data in this category (probably due to it being a relatively new country)
      • Djibouti GNI (country & per capita) 2005
      • Somalia / Somaliland GNI (both) 1990
      • Iran (both GNI) 2009
  1. In future iterations the following features would be added:
    • Animate the circles when switching visualizations.
    • Add an ability to turn on/off the logarithm.
    • Highlight all circles by region when hovering over a region in the legend.
    • Improve the typography.
    • Add a label for the toggle switch.
    • Show a projection of the trend into the future
    • Toggle a view to display the data on a world map.

Code is available on Github.

IMG_0022

For our first Data Visualization class of the Spring 2014 semester our professor gave us a problem to solve in twenty minutes: visualize the numbers 10, 30 and 60 using materials he provided such as colored cotton balls of various sizes, crayons, popsicle sticks, pipe cleaners, etc. We were to draw inspiration from a blog post by the website Visual.ly titled 45 Ways to Communicate Two QuantitiesThe class split into teams of 3 people each and solved the problem in various ways, all of which can be seen on this Flickr page. My group solved the problem by deciding that the numbers 10, 30 and 60 represented specific colors on the HSB spectrum. At 100% saturation and 100% brightness the hues represented red(10), orange(30) and yellow(60). We were lucky that some of the materials matched these colors. For the second dimension we attempted to work proportionally as 10+30+60=100. So the proportions are 1/10, 3/10 and 3/5. We used a pipe cleaner 30mm long and divided it into sections according to these proportions which were 3mm, 9mm and 18mm. We then were able to use this as a guide for the amount of each colored material as is evident in the photo above. In the photo above red takes up about 10% while orange takes up about 30% and yellow takes up about 60% of the total materials used. Given more time than 20 minutes this data-viz could be refined and made more accurate. There are an infinite number of iterations to visualize such a concept as is evident in my other classmate’s work on the Flickr page.

data_app_sketch

data_app_sketch

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.

Two of my final projects from bootcamp relate to code, the first uses the D3JS library to visualize location data hacked from my mobile device during my move from Oakland to Brooklyn during June and July:

http://a.parsons.edu/~henrc131/final/

The second is a processing sketch that uses object oriented programming to create a pinball inspired game using random generators and vectors:

http://www.openprocessing.org/sketch/106743

The last project was a design concept to create a community driven solution to educate people on how to lock their bicycles correctly. This was executed in the form of a citation that could be printed from a PDF and left on a bicycle that the user deemed to be locked improperly:

psa_bicycle_ticket_FINAL

Screen Shot 2013-09-13 at 7.11.51 PM

link to interactive map

I’ve used a tool called OpenPaths to hack my mobile device’s location data and have been playing around with visualizing it, previously using a javascript library called D3JS. This time however I created a visualization using open source GIS and web-mapping tools including TileMill from MapBox in the form of an open-source web-map. The user can zoom and pan to view the data while hovering the mouse over a point will display the date and time. At a smaller scale (eg. zoomed out) the overlapping data points become opaque showing where I’ve spent the most time. Upon zooming in the points become more dispersed. Despite the data not being entirely accurate, displaying this data raises questions of privacy and in a time of Snowden’s leaks on the NSA’s covert surveillance programs it seems appropriate to bring attention to the ways in which the government has been tracking those with mobile devices.