INTRODUCTION

Last year, I attended UX-A-Ton held by UXPD and was received the challenge to help provide disaster relief to people who had experienced a disaster. During the time of research, a picture of NYC Hurricane Evacuation Zones was my inspiration which led me to create a map with home prices in New York City.

TOOLS & METHODS

1. Data Collection

Tools: Rayer A. Hurricane Evacuation Zones Data created  July 14, 2015

NYC open data allowed me to have precise data to create a flood hazard zone. Zone 1 refers to the most dangerous area colored darker grey, zone 6 is the least dangerous one which I use a lighter grey and safe area is where usually in the middle of the borough with no color.

• Used for: To see where the standard of flood hazard area in NYC
• The quantity of the Data: 8 rows
• The main value of the column’s name: hurricane_

Hurricane Evacuation Zones are determined by New York City Emergency Management and represent varying threat levels of coastal flooding resulting from storm surge(NYC open Data).

https://data.cityofnewyork.us/Public-Safety/Hurricane-Evacuation-Zones/uihr-hn7s

Tools: Rayer B. New York Market Overview Data through Feb 28, 2019

With searching many times at Google, a real estate company named Zillow offers information of hose with data. They provide a good amount of data with graphs and even show me a predicted data one year later.

• Used for: To find out the home prices in NYC
• The main value of the column’s name: home_value, y_oy
• The quantity of the Data: 173 rows

The median home value in New York is $681,000. New York home values have gone up 4.3% over the past year and Zillow predicts they will rise 3.3% within the next year(Zillow).

https://www.zillow.com/new-york-ny/home-values/

2. Pre-Design Research & Visualization creation (Back & forth)

Tools: https://carto.com/developers/styling/cartocss/

For further studying CartoCSS, I looked carefully through the styling page at Carto. Markers which is one of the CartoCSS properties can be applied to point, line and polygon layers. Also searching Google is always the best way to find good insights.

Tools: https://www.flaticon.com/free-icon/price_1508398#term=home&page=4&position=53

I downloaded an SVG file, a home icon to place on the point which has the top increased and top decreased price. Also, some points in Manhattan were clustered, I used the property of marker-comp-op and put the value of multiply.

Tools:

Luckily, I found this video titled Learning CartoCSS with CARTO, and Eric Brelsford’s playlists have full of tutorials on learning visualization software. He taught how to use CartCSS to have a filter on each value of the column. This code, [ column_name = some_condition ], allowed me to combine some amount of values in the year to year dataset.

Tools: https://www.w3schools.com/colors/colors_picker.asp

The map contained lots of layer of value which is my desire to show them all, so I had to carefully choose two types of color set. Flood hazard zone and Percentage of Changes of home price needed to be colored and they got more than 10 of fields to show. I tried to limit the colors and emphasize the big number of value.

Last but not least, I named my map to be NYC Home Prices by Flood hazard area, 2019 and chose three legends, two widgets. The map indicated three facts which are the area of Flood Hazard by color, 1-year change of home price from 2018 by color, and home prices by size. Two other prominent values, top decreased and increased price, were able to use the home icon to be highlighted.

REFLECTION

I eventually became a friend with Carto, but every time I faced some difficulties with dataset, I used to be a “hater” of Carto, because I got used to creating a graph in Tableau Public. would be another reason. Finding good enough and interesting data and studying CartoCSS brought me an enthusiasm for Carto.

Carto is one of the prominent software which I can create an animated map, but I wasn’t able to make my map to be animated. That’s because my dataset is mainly home prices that there’s no certain time-based. I do have home prices of 2018 and 2019, but the full version of date and time are required, E.g. 2019-03-15 03:47:48+00.  So, later I must use the right dataset to be able to use the animated feature.

During the research – calling the SVG file to CSS on style, I coincidently download a software called TileMill, it looks like a lot of similarity with Carto. I still need to study further Carto first, and then will play a little bit at TileMill.