{"id":2042,"date":"2016-02-28T04:42:48","date_gmt":"2016-02-28T09:42:48","guid":{"rendered":"http:\/\/www.rexfeng.com\/blog\/?p=2042"},"modified":"2016-02-28T04:42:48","modified_gmt":"2016-02-28T09:42:48","slug":"la-commute-visualization","status":"publish","type":"post","link":"https:\/\/www.rexfeng.com\/blog\/2016\/02\/la-commute-visualization\/","title":{"rendered":"LA Commute Visualization"},"content":{"rendered":"<p>This month, I chose to visualize LA commutes.\u00a0The data is visualized &amp; published here: \u00a0<a href=\"http:\/\/xta.github.io\/la_commute\/\">http:\/\/xta.github.io\/la_commute\/<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-2045\" src=\"http:\/\/www.rexfeng.com\/blog\/wp-content\/uploads\/2016\/02\/la_commute_ss-540x346.png\" alt=\"la_commute_ss\" width=\"540\" height=\"346\" srcset=\"https:\/\/www.rexfeng.com\/blog\/wp-content\/uploads\/2016\/02\/la_commute_ss-540x346.png 540w, https:\/\/www.rexfeng.com\/blog\/wp-content\/uploads\/2016\/02\/la_commute_ss-150x96.png 150w, https:\/\/www.rexfeng.com\/blog\/wp-content\/uploads\/2016\/02\/la_commute_ss-300x192.png 300w, https:\/\/www.rexfeng.com\/blog\/wp-content\/uploads\/2016\/02\/la_commute_ss-768x493.png 768w, https:\/\/www.rexfeng.com\/blog\/wp-content\/uploads\/2016\/02\/la_commute_ss-624x400.png 624w, https:\/\/www.rexfeng.com\/blog\/wp-content\/uploads\/2016\/02\/la_commute_ss.png 1049w\" sizes=\"auto, (max-width: 540px) 100vw, 540px\" \/><\/p>\n<p>For the starting locations, I chose a mix based on\u00a0highly populated areas and places of interest to me. I wanted to get a good distribution throughout the greater LA area. I realize that most people wouldn&#8217;t commute nearly two hours a day, but the sad reality is that people do have these long or even longer commutes.<\/p>\n<p>For the destinations, I chose\u00a0three popular, work-concentrated areas (Santa Monica, Century City, and Downtown Los Angeles). I realize that many people do not work in these 3 locations, but these locations help visualize a horizontal slice across central LA.<\/p>\n<p>My workflow was\u00a0running a\u00a0local Ruby script multiple times a day throughout the past few weeks. I have both morning &amp; evening commute data, but I think morning commutes are more interesting. I may be wrong, but I&#8217;m assuming\u00a0that morning commutes are more consistent (people leave for work around 7 to 8am, and they leave work anywhere from 3 to 9pm).<\/p>\n<p>Once I had the data, I loaded my csv file(s) into Google Sheets. With Google Sheets, I did basic sorting and aggregating of the commute times. I output my data in a specific format so that I could easily consume it with my JS code.<\/p>\n<p>Loading the data into Leaflet.js markers wasn&#8217;t too bad. The hardest part was styling &amp; displaying the commute data properly. Originally, I wanted to draw labelled lines between the different locations to the destination, but labelling lines appears to be really difficult with web map libraries. I also didn&#8217;t want to hide all the data behind a tooltip that had to be clicked.<\/p>\n<p>Overall, I&#8217;m pleased with my\u00a0basic workflow and the power of Leaflet.js. Collecting\u00a0traffic data was the most difficult part.<\/p>\n<p><em>Mapping library used is\u00a0<a href=\"http:\/\/leafletjs.com\">Leaflet.js<\/a>. Map &amp; map data are from\u00a0<a href=\"http:\/\/www.openstreetmap.org\/\">OpenStreetMap<\/a>\u00a0contributors.\u00a0Map tiles are from\u00a0<a href=\"https:\/\/cartodb.com\/\">CartoDB<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This month, I chose to visualize LA commutes.\u00a0The data is visualized &amp; published here: \u00a0http:\/\/xta.github.io\/la_commute\/ For the starting locations, I chose a mix based on\u00a0highly populated areas and places of interest to me. I wanted to get a good distribution throughout the greater LA area. I realize that most people wouldn&#8217;t commute nearly two hours [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[1270,1271,1221,1269,1170,1111,891,1273,1272],"class_list":["post-2042","post","type-post","status-publish","format-standard","hentry","category-tech","tag-commute","tag-destination","tag-drive","tag-gis","tag-la","tag-leaflet","tag-map","tag-visualization","tag-work"],"_links":{"self":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts\/2042","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/comments?post=2042"}],"version-history":[{"count":6,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts\/2042\/revisions"}],"predecessor-version":[{"id":2049,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts\/2042\/revisions\/2049"}],"wp:attachment":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/media?parent=2042"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/categories?post=2042"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/tags?post=2042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}