All posts by Michelle Luo

Final Assignment Documentation

December 14, 2014 Michelle Luo

For the final assignment, I made an interactive map of New York City (Manhattan only for now). I have lived in the city for all my life but in the more recent years I have heard about issues with rising property costs and affordability as well as gentrification. People have started to believe that it will ruin how diverse the city can be by pushing out the people who cannot afford to live here such as budding artists. I wanted this map to show the makeup of each district to see how they compare to each other. I got most of my information from the nyc.gov site. There is a lot more information available on each district that I may want to include in the future (such as type of housing residents live in, type of jobs they have, how they commute to work, how large the families are, etc.) but for now I only included the most general information.

I used Mapbox to make the make the interactive map and then used HTML, CSS, and JQuery to make the rest of the site. The most difficult part of the project was trying the make the Mapbox program listen to commands from my site so that I could go into the map and connect it to the links on my site. Also, drawing out the districts on the map was the most time consuming. It took forever to make sure the district lines were being drawn on the right streets. Mapbox only has general areas drawn out such as the states borders and country borders.

Site: New York City Districts

Final Assignment

November 17, 2014 Michelle Luo

~~Instagram API~~

I was originally intending do something with the Instagram API. I wanted to be able to color analyze and geolocate the most popular photos of a certain hashtag. I looked up Color Thief.js, as suggested last week, and it looked great. Except the major portion of what I needed came from the Instagram side of things and that was not working out.

I had set up the account and got the Client ID and tried to get the data to my site. It is not working for me. It doesn’t help that I don’t even know if I set up the account right (I have a Client ID and Secret) but every time I Google for help every site takes me back to the same place – Instagram. There IS a lot of information there but I can’t make any sense out of it. So I tried looking for third party help such as Instafeed, or this, or this helpful site by IBM, and this helpful Github site. All I ended up getting was a blank page or an error message. Which makes me believe I’m not doing something right…(also don’t know how PHP works). Here is what I thought might be a hopeful working sample (it was not).

Interactive

So for now, I decided to work on an interactive map of the New York City districts as to compare the living and economic situations. It isn’t too far from what I needed for my original idea so if I get that API stuff working I can just incorporate it into the map.

Data

NYC Neighborhoods Map

NYC Demographics

NYC Crime Map

NYC Population

NYC Economic Characteristics

POCs

1. Interactive Map – click places on the map and have stuff show up. (Mapbox is awesome.)

2. Stuff that shows up should be relevant – as I was working on the map I was having a hard time getting the polygons on the map to interact with my side of coding. So for now, I got a way to put infographics into the description of each district.

3. Pie Charts

Pie Chart

NYC Districts

Little Big Data Documentation

November 3, 2014 Michelle Luo

I checked off “Become an organ donor” easily when recently getting my state identification card. This made me wonder how many people actually become organ donors and why there aren’t more. According to the New York Times, 95 percent of Americans support organ donations but less than 40 percent are actually donors, 23 percent of people fear they are not healthy enough or are too old to donate their organs, 50 percent of respondents are concerned that doctors will not try as hard to save them if they are known to be an organ donor, 44 percent believe there is a black market in which people can buy or sell organs or tissue, and 57 percent question whether or not a person can recover from brain death (source). It baffles me why anybody would not donate their organs after death when they won’t need them.

This chart shows the trend of donations from 1988–2013 in the states. It only shows donations from donors who have died and which organs were procured (kidney, liver, pancreas, lung, heart, and intestine). Some interesting things that I have noticed is that in some states the amount of donations actually decreases, and in other states there are dramatic jumps in donations. It’s also interesting that in 1988, America has an estimated population of 244.5 million people and in 2013 they had 316 million people. Meanwhile, some states have seen less than a 50 person increase in donations over the last 26 years.

The coding was not difficult, just tedious. In the code, I directly inputted the data because it only took me a few seconds to copy and paste the table from the OPTN site. A snafu I encountered was that all the visualizations were too big to fit on my Processing screen so I had to wait until I opened the PDF to see if there were any visualization errors.

It is important for people to see how many people are actually donating. Instead of thinking “If I don’t donate at least someone else will” the viewer should be thinking about donating themselves. This poster could be put up in hospitals, donation centers, and if I had my way, DMVs. If I had more time on it I would research more on the deaths of the people on the waiting list.

Code: Organs Visualization

PDF: Donor Types

Little Big Data POCs

October 13, 2014 Michelle Luo

Find an effective way to extract the data.

First, I needed to get my data from the Organ Procurement and Transplantation Network which was in the form of HTML tables with no link to click on to get the data a .CSV or .XML. I did, however find this site, Convert CSV, that converted HTML tables into CSV files. It has the option of entering in an URL but the link to the data didn’t work because it was interactive. Instead, I downloaded the HTML code of the site when it loaded the data I wanted used the option of uploading HTML files to the Convert CSV site and chose the table I wanted to convert. It worked but all the labels were missing (years and organ donated). That isn’t a problem when entering the programming stage because all I need are the numbers and I can just add the labels myself. It works way better than transferring the data by hand myself.

Importing and plotting the data.

Second, I need to visual the data. In my comp I used stacked bar graphs to do this. I took the code used in class and tweaked it to fit my data. I had to change all the floats to ints and make sure my arrays were not out of bounds (which kept popping up as an error until I fixed it.) Also, after looking at the stacked bars, I am debating on whether or not it should be a stacked bar graph or just separate bar graphs.

Code: POC

Get the visualization into Illustrator to tweak.

The only problem I had was that at first illustrator was unable to read the file. Which was weird because it clearly said it was a PDF. Then I went back into the code and realized I forgot to add endRecord(); at the end of the code.

Little Big Data Proposal

October 6, 2014 Michelle Luo

The purpose of my poster will be to inform viewers about the benefits of becoming an organ donor. When I got my state identification, I had no question about whether or not I wanted to become an organ donor. At this current time, there are over one hundred thousand people on the list waiting for a new organ and, on average, eighteen people a day die from waiting (American Transplant Foundation). There are some misconceptions about what happens when someone becomes an organ donor such as people thinking the doctors would not work as hard to save an organ donor’s life. This poster can hopefully show that all the amount of organs and how much help (and how much more help is needed) organ donors provide.

The data that will be used in my poster is located on the U.S Department of Health and Human Services website and was collected by UNet, created by the United Network for Organ Sharing (UNOS), which is an “online database system for the collection, storage, analysis, and publication of all OPTN data pertaining to the patient waiting list, organ matching, and transplants.” It everything one might need to know about the Organ Procurement and Transplantation Network (OPTN). It has national, state, and regional data that consists of filters such as donor type, donor age, donor ethnicity, donor gender, donor by death, etc, from as far back as 1988 to the present (it is constantly being updated to the minute). It also has transplant data, the waiting list, waiting time, and percent transplanted. I specifically need data only about donors and transplants, as well as waiting time and deaths. The U.S. Department of Health and Human Services already has an infographic from a couple of years ago but I plan to go more in-depth than it does. OPTN Data.

It might be a problem to export all the data because it’s interactive data that I can change based on the filters I have chosen but I DO have access to the data. So a step in production will be to find a way to get the data in friendly format. I will use Processing and Illustrator as my main tools to create the visualization. These programs are located on my computer and it will be printed at school.

PDF: Organ Donations Comp

Code Warm Up Part II

September 29, 2014 Michelle Luo

Pre-Illustrator

After-Illustrator

I took the information from the New York City Census. I decided to do pie charts this time (even though it might have been better as a stacked area chart) because all the other graphs have been very “straight”. I had trouble creating a function for mapping. My code contains many, many lines of me calling variables over and over again because I could not figure out how to get it so that I could just replace a variable within the mapping. Every time I created a function to replace the mapping lines, the program would tell me values needed to be determined before anything else was called. Instead, I just have a ton of lines changing each percentage to an angle.

Code: NYC Demographics

PDF

Code Warm Up

September 22, 2014 Michelle Luo

I chose to do another infographic I found in “The Answers Issue” of Time Magazine. I did was able to do everything in Processing except for the spaces between the columns when the colored bar for each drug transitions into the next column; those are svgs. It was a pain in the ass to center all the text within the shapes and was also difficult to calculate each shape with variables so that when I changed the height of one shape, it will change all of them. It was also hard to see it the colored bars were proportionate to each other. I don’t even think Time Magazine has it proportional (they do have to fit the image into the magazine).

Code: What are we high on now?

This is also from Time Magazine. It was a little hard to get the circles proportionate to each other because I was not sure of what the scale/ratio was. Positioning was also difficult; I wish there was grid on Processing. This visualization, compared to the top one, has all the shapes made in Processing (no svgs).

Code: Who has the most cash?

Makeover Assignment

September 16, 2014 Michelle Luo

I was reading this week’s issue of Time Magazine “The Answers Issue” and it was just filled with cool infographics. I came across “Where do babies come from?” and thought it was an interesting article. Link to it here (it has the actual chart online, I just do not have a subscription) and the source it uses is here (which is another data visualization). Here is a scan of the physical copy:

The chart compares adoptions in 1999 and and in 2013. The issue with it is that it uses squares to represent the numbers and that the width and height of the square change according to the number. This makes it a little difficult to proportionally compare the squares. Also, the squares are in seemingly no order. One can see that the jumble of squares representing 1999 is larger than 2013 but not exactly.

For the makeover I made the numbers visually proportional to each other in a stacked bar graph; this way it is easier to compare two numbers. In my chart, I also decided to add more information between the years so that a trend can be seen. I also decided to keep all the countries listed from 1999-2013 so that none of the countries just suddenly disappear (like in the original one).

PDF: Adoption

Survey Assignment

September 9, 2014 Michelle Luo

Everything You Need to Know About The Data, Design, Code Class of Fall 2014

I wanted to show as much information as I could about the class. As I continued to make the infographic I wanted to be able to stick to the people icons as much as possible so any information I couldn’t represent with the people I omitted. This included information that had too many options such as what TV shows were watched and programs used.

Making this and looking at this, I immediately know that a majority of the students in the class are seniors, most are from Design and Technology as well as Communication Design, everybody uses Macs, and that I am the only one who uses a phone running on the Android operating system. One can also use my infographic to learn a lot of information about one student rather than the class as a whole.

Research Assignment

September 8, 2014 Michelle Luo

Data Visualization Aggregator
Spurious Correlations
This site is hilarious. It serves as a reminder that it is important for everyone who collects data to remember that correlation does not mean causation.

A Visualization
NYC Crime Map
This is important for everyone who lives in NYC (though it may cause slight paranoia, I found out there was a rape across the street from my home). Do not forget that the city sponsored this, it may be biased.

Artist/Designer
Marc Inignac
His work is beautiful but hard to read so it is more about aesthetics than function. However, he does have a lot of experimental visualizations that would interesting to take further.

Visualization Tool
Many Eyes
You can just upload a data set and then choose the type of data visualization. Boom. Done.

Data Collection Tool
Microsoft Excel
Good for personal data collecting and can be attached to other applications. It can also provide its own data visualizations (though not amazing).

Discussion Forum
Datavisualization.ch
A whole site dedicated to data visualization new, discussion, and even data sets.

Criticism
The Cartography of Peevishness
This criticizes “The Map of Racial Tolerance” published by The Washington Post and how the visualization is not correct because the data itself has problems with it.

Data Source
World Health Organization Data Repository
Data collected from all over the world about all sorts of diseases and other health issues.

Data Ethics
Why You Should Never Trust Data Visualization
This article talks about how skewed data visualizations can be and provides many links to examples.

A Book
Form + Code
This books shows not only data visualizations but how artists and designers are creating new visual forms using code.