{"id":13414,"date":"2019-04-04T04:13:54","date_gmt":"2019-04-04T08:13:54","guid":{"rendered":"http:\/\/studentwork.prattsi.org\/infovis\/?p=13414"},"modified":"2019-05-09T21:57:14","modified_gmt":"2019-05-10T01:57:14","slug":"nyc-home-prices-by-flood-hazard-area-2019","status":"publish","type":"post","link":"https:\/\/studentwork.prattsi.org\/infovis\/labs\/nyc-home-prices-by-flood-hazard-area-2019\/","title":{"rendered":"NYC Home Prices by Flood hazard area, 2019"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-rich is-provider-cartodb\"><div class=\"wp-block-embed__wrapper\">\n<iframe width='100%' height='520px' frameborder='0' src='https:\/\/savi.carto.com\/u\/rimhoho\/viz\/89326918-8457-4a87-bb35-7b0345a32c5e\/embed_map' allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen><\/iframe>\n<\/div><figcaption><a href=\"https:\/\/savi.carto.com\/u\/rimhoho\/builder\/89326918-8457-4a87-bb35-7b0345a32c5e\/embed?state=%7B%22map%22%3A%7B%22ne%22%3A%5B40.64183303643057%2C-74.07806396484376%5D%2C%22sw%22%3A%5B40.920776739865985%2C-73.70864868164064%5D%2C%22center%22%3A%5B40.78145131992721%2C-73.8933563232422%5D%2C%22zoom%22%3A12%7D%2C%22widgets%22%3A%7B%22589767f0-ce6a-4e68-b425-3ef1c5c060f8%22%3A%7B%22normalized%22%3Atrue%7D%7D%7D\">NYC Home Prices by Flood Hazard Area, 2019<\/a><br>Please go to the link to see full version of a map. The <em>embedded container&nbsp;is&nbsp;very&nbsp;small..<\/em><br><br><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>INTRODUCTION<\/strong><\/h2>\n\n\n\n<p>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. <br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"840\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/04\/NYC-Hurricane-Evacuation-Zone.jpeg?resize=840%2C840\" alt=\"\" class=\"wp-image-13415\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/04\/NYC-Hurricane-Evacuation-Zone.jpeg?w=1000&amp;ssl=1 1000w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/04\/NYC-Hurricane-Evacuation-Zone.jpeg?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/04\/NYC-Hurricane-Evacuation-Zone.jpeg?resize=300%2C300&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/04\/NYC-Hurricane-Evacuation-Zone.jpeg?resize=768%2C768&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/04\/NYC-Hurricane-Evacuation-Zone.jpeg?resize=800%2C800&amp;ssl=1 800w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/04\/NYC-Hurricane-Evacuation-Zone.jpeg?resize=180%2C180&amp;ssl=1 180w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><figcaption>&#8211; NYC Hurricane Evacuation Zones &#8211;<br>The interactive map is available at <a href=\"https:\/\/www1.nyc.gov\/site\/planning\/data-maps\/flood-hazard-mapper.page\">https:\/\/www1.nyc.gov\/site\/planning\/data-maps\/flood-hazard-mapper.page<\/a><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>TOOLS &amp; METHODS<\/strong><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>1. Data Collection <\/strong><br><\/h4>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Tools<\/strong>: Rayer A. Hurricane Evacuation Zones Data created &nbsp;July 14, 2015<\/h4>\n\n\n\n<p>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.<br><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Used for: To see where the standard of flood hazard area in NYC<\/li><li>The quantity of the Data: 8 rows<\/li><li>The main value of the column\u2019s name: hurricane_<\/li><li><\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>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).<\/p><cite><a href=\"https:\/\/data.cityofnewyork.us\/Public-Safety\/Hurricane-Evacuation-Zones\/uihr-hn7s\">https:\/\/data.cityofnewyork.us\/Public-Safety\/Hurricane-Evacuation-Zones\/uihr-hn7s<\/a><\/cite><\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Tools<\/strong>: Rayer B. New York Market Overview Data through Feb 28, 2019<br><\/h4>\n\n\n\n<p>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.<br><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Used for: To find out the home prices in NYC<\/li><li>The main value of the column\u2019s name: home_value, y_oy<\/li><li>The quantity of the Data: 173 rows<\/li><li><\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>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).<br><\/p><cite><a href=\"https:\/\/www.zillow.com\/new-york-ny\/home-values\/\">https:\/\/www.zillow.com\/new-york-ny\/home-values\/<\/a><\/cite><\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2. Pre-Design Research &amp; Visualization creation (Back &amp; forth)<\/strong><br><\/h4>\n\n\n\n<p><strong>Tools: <\/strong><a href=\"https:\/\/carto.com\/developers\/styling\/cartocss\/\">https:\/\/carto.com\/developers\/styling\/cartocss\/<\/a><\/p>\n\n\n\n<p>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.<br><\/p>\n\n\n\n<p><strong>Tools: <\/strong><a href=\"https:\/\/www.flaticon.com\/free-icon\/price_1508398#term=home&amp;page=4&amp;position=53\">https:\/\/www.flaticon.com\/free-icon\/price_1508398#term=home&amp;page=4&amp;position=53<\/a><\/p>\n\n\n\n<p>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.<br><\/p>\n\n\n\n<p><strong>Tools: <\/strong><\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video-wrapper\"><span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/NkX3f-V87QU?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span><\/div>\n<\/div><figcaption>Learning CartoCSS with Carto at Youtube<\/figcaption><\/figure>\n\n\n\n<p>Luckily, I found this video titled Learning CartoCSS with CARTO, and Eric Brelsford\u2019s 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.<br><\/p>\n\n\n\n<p><strong>Tools: <\/strong><a href=\"https:\/\/www.w3schools.com\/colors\/colors_picker.asp\">https:\/\/www.w3schools.com\/colors\/colors_picker.asp<\/a><\/p>\n\n\n\n<p>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. <br><\/p>\n\n\n\n<p>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. <br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1112\" height=\"939\" src=\"https:\/\/i1.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/04\/\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba-2019-04-04-\u110b\u1169\u110c\u1165\u11ab-4.38.11.png?fit=840%2C710\" alt=\"\" class=\"wp-image-13432\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/04\/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA-2019-04-04-%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB-4.38.11.png?w=1112&amp;ssl=1 1112w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/04\/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA-2019-04-04-%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB-4.38.11.png?resize=300%2C253&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/04\/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA-2019-04-04-%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB-4.38.11.png?resize=768%2C649&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/04\/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA-2019-04-04-%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB-4.38.11.png?resize=1024%2C865&amp;ssl=1 1024w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/04\/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA-2019-04-04-%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB-4.38.11.png?resize=800%2C676&amp;ssl=1 800w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/04\/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA-2019-04-04-%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB-4.38.11.png?resize=213%2C180&amp;ssl=1 213w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><figcaption><em>Screenshot of the style in home prices dataset<\/em><\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"524\" height=\"521\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/04\/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA-2019-04-09-%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE-8.40.17-2.png?resize=524%2C521\" alt=\"\" class=\"wp-image-13668\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/04\/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA-2019-04-09-%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE-8.40.17-2.png?w=524&amp;ssl=1 524w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/04\/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA-2019-04-09-%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE-8.40.17-2.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/04\/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA-2019-04-09-%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE-8.40.17-2.png?resize=300%2C298&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/04\/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA-2019-04-09-%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE-8.40.17-2.png?resize=181%2C180&amp;ssl=1 181w\" sizes=\"auto, (max-width: 524px) 100vw, 524px\" \/><figcaption>Pop up contains description about each price, post code, and the percentage of changes among month over month, quarter over quarter, year over year.<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>REFLECTION\ufeff<\/strong><\/h2>\n\n\n\n<p>I eventually became a friend with Carto, but every time I faced some difficulties with dataset,  I used to be a \u201chater\u201d 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.<br><\/p>\n\n\n\n<p>Carto is one of the prominent software which I can create an animated map, but I wasn\u2019t able to make my map to be animated. That\u2019s because my dataset is mainly home prices that there\u2019s 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. \u00a0So, later I must use the right dataset to be able to use the animated feature. <br><\/p>\n\n\n\n<p>During the research &#8211; 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. <br><\/p>\n\n\n\n<p><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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.&hellip;<\/p>\n","protected":false},"author":591,"featured_media":13435,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[149,341],"tags":[154,31,401],"coauthors":[379],"class_list":["post-13414","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-labs","category-maps","tag-lab-report","tag-maps","tag-nyc_home_prices"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2019\/04\/ss.png?fit=331%2C331&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paBdcV-3um","_links":{"self":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/13414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/users\/591"}],"replies":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/comments?post=13414"}],"version-history":[{"count":8,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/13414\/revisions"}],"predecessor-version":[{"id":13671,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/13414\/revisions\/13671"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media\/13435"}],"wp:attachment":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media?parent=13414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/categories?post=13414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/tags?post=13414"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/coauthors?post=13414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}