├── examples ├── kenmore_0.png ├── kenmore_1.png ├── kenmore_2.png ├── southlakeunion_0.png ├── southlakeunion_1.png ├── southlakeunion_2.png ├── southlakeunion_3.png ├── southlakeunion_4.png └── tool.png ├── fts_commute_visualizer.html └── readme.md /examples/kenmore_0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forrestthewoods/fts_commute_visualizer/e79243d067ce084acf29065b493e6f61ede7079e/examples/kenmore_0.png -------------------------------------------------------------------------------- /examples/kenmore_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forrestthewoods/fts_commute_visualizer/e79243d067ce084acf29065b493e6f61ede7079e/examples/kenmore_1.png -------------------------------------------------------------------------------- /examples/kenmore_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forrestthewoods/fts_commute_visualizer/e79243d067ce084acf29065b493e6f61ede7079e/examples/kenmore_2.png -------------------------------------------------------------------------------- /examples/southlakeunion_0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forrestthewoods/fts_commute_visualizer/e79243d067ce084acf29065b493e6f61ede7079e/examples/southlakeunion_0.png -------------------------------------------------------------------------------- /examples/southlakeunion_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forrestthewoods/fts_commute_visualizer/e79243d067ce084acf29065b493e6f61ede7079e/examples/southlakeunion_1.png -------------------------------------------------------------------------------- /examples/southlakeunion_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forrestthewoods/fts_commute_visualizer/e79243d067ce084acf29065b493e6f61ede7079e/examples/southlakeunion_2.png -------------------------------------------------------------------------------- /examples/southlakeunion_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forrestthewoods/fts_commute_visualizer/e79243d067ce084acf29065b493e6f61ede7079e/examples/southlakeunion_3.png -------------------------------------------------------------------------------- /examples/southlakeunion_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forrestthewoods/fts_commute_visualizer/e79243d067ce084acf29065b493e6f61ede7079e/examples/southlakeunion_4.png -------------------------------------------------------------------------------- /examples/tool.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forrestthewoods/fts_commute_visualizer/e79243d067ce084acf29065b493e6f61ede7079e/examples/tool.png -------------------------------------------------------------------------------- /fts_commute_visualizer.html: -------------------------------------------------------------------------------- 1 | 14 | 15 | 16 | 17 | 18 | 19 | Forrestthewoods's Commute Visualizer 20 | 21 | 22 | 23 | 24 | 307 | 308 | 309 | 310 |
311 |
312 |

ForrestthewoodsCommute Visualizer

313 | Blog Post // Source Code // About Author 314 |
315 | 316 |
317 |

Travel Mode

318 |
319 |
    320 |
  • 321 |
  • 322 |
  • 323 |
  • 324 |
  • 325 |
326 |
327 |
328 | 329 |
330 |

Direction

331 |
332 |
    333 |
  • 334 |
  • 335 |
336 |
337 |
338 | 339 |
340 |
341 | 342 | 343 |
344 | 345 |
346 | 438 |
439 |
440 | 441 |
442 |

Hexagon Radius (in meters)

443 | 444 |
445 |
446 | 447 | 448 |
449 | 450 |
451 |
452 | 470 |
471 | 472 | 473 |
474 | 475 | 1556 | 1557 | 1560 | 1561 | 1562 | 1563 | 1564 | 1605 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | fts_commute_visualizer 2 | === 3 | 4 | Build visualizations to see how far you can commute based on transportation mode and real world traffic. 5 | 6 | ## Blog Post 7 | 8 | For additional information read my extensive [blog post](https://blog.forrestthewoods.com/visualizing-commute-times-378009330ffa). 9 | 10 | ## Features 11 | 12 | * Visualize commute times and range both from home or to a destination 13 | * See commute times for walking, bicycling, public transit, or driving. 14 | * See commute time **with traffic* (driving only) 15 | * Specify driving traffic conditions: Best Guess, Optimistic, Pessimistic 16 | * Works in any city for which Google Maps has data 17 | 18 | 19 | ## Installation 20 | 21 | [fts_commute_visualizer.html](fts_commute_visualizer.html) is the only file you need. It contains all HTML, CSS, and JS. It can be run locally. There is no build system. You don't need a webserver. 22 | 23 | 24 | ### Google Maps API Key 25 | 26 | You will need your own API key. Creating a new one is free and easy. 27 | 28 | 1. Enable [Google Dev Console](https://console.developers.google.com) with a Google account. 29 | 2. Create a new project. 30 | 3. Enable Google Maps Javascript API 31 | 4. Enable Google Maps Distance Matrix API 32 | 5. Enable Google Maps Time Zone API 33 | 6. Replace "YOUR_API_KEY" with your API key. 34 | 35 | The Google cloud free tier is limited to 2500 requests per day. Each hexagon counts as 1 request. After reaching your daily limit Google Maps API calls are heavily throttled. 36 | 37 | If you give Google your credit card and sign up for a [free trial](https://cloud.google.com/free/?hl=en_US&_ga=1.18292089.1130590081.1487912420) you can get $300 in free credits. Curiously I'm still not being charged for Distance Matrix queries. I am still throttled, but it's significantly faster. I strongly recommend doing this if you're building large maps or many maps. 38 | 39 | ## Using the Tool 40 | 41 | This is, ahem, a bit of a programmer tool. There are several gotchas and silent errors. Here's what the tool looks like. 42 | 43 | ![](/examples/tool.png?raw=true) 44 | 45 | ### Drawing 46 | 47 | On the bottom of the map there's a draw button. (It says 'Clear' in the image above). You want to click that then click and drag on the map. This lets you draw an arbitrary outline for the area you wish to search. 48 | 49 | ### Advanced Search 50 | 51 | When performing an advanced search you must search for a time in the future. If you specify a time in the past it will silently fail. I need to add error messaging. 52 | 53 | ### Transit 54 | 55 | When doing a transit search you almost always want to do an advanced search. Otherwise you will search for routes with a time of "now". Which if you're doing this at home at 8pm is probably not very many routes! 56 | 57 | In hindsight I should have made those settings mandatory and always on. It'd prevent a lot of confusion. 58 | 59 | ### Secret Options 60 | 61 | If you open [fts_commute_visualizer.html](fts_commute_visualizer.html) and go to [line 452](https://github.com/forrestthewoods/fts_commute_visualizer/blob/master/fts_commute_visualizer.html#L452) you should see the following line. 62 | 63 | ``` 64 |