My Slides from HTML5DevConf, Now with 100% More Browsing (and Photos)

let's do this

My slides from HTML5DevConf are now up for viewing on Github pages, so you don’t even need to type node web-server.js to view them. There’s one hitch where svgz files aren’t rendering, but I’m not going to worry about that right now. If, in the interim, you really want to see that image, you can grab it from the repo.

There should be video at some point in the future. When there is, I will be sure to let you all know.

I’m also going to be giving this talk at the Boston Front End Developers meetup in May. I’ll be sure to share that as well, once the meetup announcement is online.

I presented in twin peaks

ready to go

Sure, It’s 5 Months Too Late for the Contest, BUT.. I Finally Did Something with the Hubway Data

hubway-static

The Hubway Data Visualization Challenge was a contest run using the data released by the local bike share. I really wanted to do something for the contest and even started a project in October to try to do something with it.

You know how that turned out

Anyway, between finding myself with a life that I can fill occasionally with fun programming and the need to do some cool visualizations for my presentation at HTML5 Developer Conference, I resurrected the project and managed to finish the thing over a weekend.

What did I do?

The image above shows a snapshot of the final output. What does it show?

  • The top ten Hubway departure points mapped against their top ten destinations.
  • Google is queried for each departure/arrival pair to create a “bike-friendly” route between the two points.
  • This is then plotted on the map using one color for each departure station. The size of the line is directly proportional to the number of trips for each departure and arrival pair.
  • Every line is 40% opaque, so the darker the path on a particular road, the more different trips pass over that road.
  • The bicycling layer is turned on, to show bicycle infrastructure. So basically, thick dark lines on top of a bike path = a good match for usage and infrastructure*.

*Theoretically. As the following table shows, the “bike friendly” route is not always the most direct. What I did here was calculate the correlation between the distance between the two latitude and longitude points in a straight line and the distance as calculated by the Google directions service. As you can see, some of the routes are 2x as far as the flying crow when approached on a bike-friendly route.

Boston Public Library – 700 Boylston St. The Esplanade – Beacon St. at Arlington St. 2.13
Boylston St. at Arlington St. Charles Circle – Charles St. at Cambridge St. 2.04
Boylston St. at Arlington St. TD Garden – Legends Way 1.98
Charles Circle – Charles St. at Cambridge St. TD Garden – Legends Way 1.93
Lewis Wharf – Atlantic Ave. Aquarium Station – 200 Atlantic Ave. 1.87
TD Garden – Legends Way Boylston St. at Arlington St. 1.85
Boston Public Library – 700 Boylston St. Charles Circle – Charles St. at Cambridge St. 1.83
Charles Circle – Charles St. at Cambridge St. Boston Public Library – 700 Boylston St. 1.83
Charles Circle – Charles St. at Cambridge St. The Esplanade – Beacon St. at Arlington St. 1.75
Charles Circle – Charles St. at Cambridge St. Stuart St. at Charles St. 1.74
Kenmore Square / Comm Ave Boylston St. at Arlington St. 1.66
Charles Circle – Charles St. at Cambridge St. Boylston St. at Arlington St. 1.57
Kenmore Square / Comm Ave Newbury St / Hereford St. 1.57
TD Garden – Legends Way Post Office Square 1.56
Kenmore Square / Comm Ave Charles Circle – Charles St. at Cambridge St. 1.51
Kenmore Square / Comm Ave The Esplanade – Beacon St. at Arlington St. 1.5
Boylston St. at Arlington St. Boston Public Library – 700 Boylston St. 1.49
Newbury St. / Hereford St. Charles Circle – Charles St. at Cambridge St. 1.47
Lewis Wharf – Atlantic Ave. TD Garden – Legends Way 1.46
Lewis Wharf – Atlantic Ave. Fanueil Hall – Union St. at North St. 1.46
Beacon St. / Mass Ave. Boylston St. at Arlington St. 1.45
Lewis Wharf – Atlantic Ave. Post Office Square 1.45
Newbury St. / Hereford St. Washington St. at Rutland St. Boston 1.45
South Station TD Garden 1.44
Newbury St. / Hereford St. Yawkey Way at Boylston St. 1.44
Back Bay / South End Station Prudential Center / Belvidere 1.43
Boylston St. at Arlington St. Kenmore Sq. /Comm Ave 1.42
Lewis Wharf – Atlantic Ave. South Station – 700 Atlantic Ave. 1.4
South Station Seaport Hotel 1.39
TD Garden – Legends Way South Station – 700 Atlantic Ave. 1.38
TD Garden – Legends Way Faneuil Hall – Union St. at North St. 1.38
Boylston St. at Arlington St. Mayor Thomas M. Menino – Government Center 1.38
Back Bay / South End Station Christian Science Plaza 1.38
Boston Public Library – 700 Boylston St. Fanueil Hall – Union St. at North St. 1.36
Back Bay / South End Station Boston Medical Center – 721 Mass. Ave 1.36
Lewis Wharf – Atlantic Ave. Rowes Wharf – Atlantic Ave 1.36
Boston Public Library – 700 Boylston St. Beacon St. / Mass Ave 1.35
Beacon St. / Mass Ave. Boston Public Library – 700 Boylston St. 1.35
Back Bay / South End Station Washington St. at Rutland St. Boston 1.34
Boston Public Library – 700 Boylston St. Tremont St. / West St. 1.33
Beacon St. / Mass Ave. TD Garden – Legends Way 1.33
TD Garden – Legends Way Aquarium Station – 200 Atlantic Ave. 1.32
South Station Cross St. at Hanover St. 1.31
South Station Boylston St. at Arlington St. 1.31
Newbury St. / Hereford St. Landmark Centre 1.31
TD Garden – Legends Way Summer St. / Arch St. 1.3
Newbury St. / Hereford St. Kenmore Sq / Comm Ave. 1.29
Charles Circle – Charles St. at Cambridge St. Beacon St / Mass Ave 1.28
Back Bay / South End Station Stuart St. at Charles St. 1.28
Beacon St. / Mass Ave. Charles Circle – Charles St. at Cambridge St. 1.28
South Station Boylston St. / Berkeley St. 1.27
Lewis Wharf – Atlantic Ave. Congress / Sleeper 1.26
Back Bay / South End Station Tremont St / W Newton St. 1.25
Lewis Wharf – Atlantic Ave. Seaport Square – Seaport Blvd. at Boston Wharf 1.25
Boston Public Library – 700 Boylston St. Stuart St. at Charles St. 1.22
Boylston St. at Arlington St. Rowes Wharf – Atlantic Ave. 1.22
Back Bay / South End Station Washington St. at Waltham St. 1.22
Charles Circle – Charles St. at Cambridge St. Kenmore Sq / Comm Ave 1.22
Beacon St. / Mass Ave. The Esplanade – Beacon St. at Arlington St. 1.22
Kenmore Square / Comm Ave Boston Public Library – 700 Boylston St. 1.21
South Station Boston Public Library – 700 Boylston St. 1.2
Boston Public Library – 700 Boylston St. Newbury St. / Hereford St. 1.19
Newbury St. / Hereford St. Boston Public Library – 700 Boylston St. 1.19
South Station Lewis Wharf – Atlantic Ave 1.17
South Station Aquarium Station – 200 Atlantic Ave. 1.17
TD Garden – Legends Way Rowes Wharf – Atlantic Ave. 1.17
Lewis Wharf – Atlantic Ave. Chinatown Gate Plaza – Surface Rd. at Beach St. 1.17
Charles Circle – Charles St. at Cambridge St. Cross St. at Hanover St. 1.16
TD Garden – Legends Way Congress/Sleeper 1.15
Newbury St. / Hereford St. Stuart St. at Charles St. 1.15
Boylston St. at Arlington St. Tremont St. / West St. 1.13
TD Garden – Legends Way Seaport Square – Seaport Blvd. at Boston Wharf 1.11
Back Bay / South End Station Columbus Ave. at Mass Ave. 1.11
Charles Circle – Charles St. at Cambridge St. Mayor Thomas M. Menino – Government Center 1.11
Beacon St. / Mass Ave. Boylston / Mass Ave 1.11
Newbury St. / Hereford St. Packard’s Corner – Comm Ave. at Brighton Ave. 1.11
Kenmore Square / Comm Ave Landmark Centre 1.09
South Station Rowes Wharf – Atlantic Ave. 1.08
Back Bay / South End Station Roxbury Crossing Station 1.07
Beacon St. / Mass Ave. MIT at Mass Ave / Amherst St. 1.07
Newbury St. / Hereford St. Boylston St. at Arlington St. 1.07
Boston Public Library – 700 Boylston St. South Station – 700 Atlantic Ave. 1.06
Boston Public Library – 700 Boylston St. Boylston St. at Arlington St. 1.06
Boylston St. at Arlington St. Newbury St. / Hereford St. 1.06
Boylston St. at Arlington St. South Station – 700 Atlantic Ave. 1.04
Beacon St. / Mass Ave. Christian Science Plaza 1.02
Beacon St. / Mass Ave. Kenmore Sq. / Comm Ave 1.01
Kenmore Square / Comm Ave Agganis Arena – 925 Comm. Ave. 1
Kenmore Square / Comm Ave B.U. Central – 725 Comm Ave 1
Kenmore Square / Comm Ave Packard’s Corner – Comm. Ave at Brighton Ave. 1

The intent is to highlight where bicycle infrastructure can be improved in the city- especially for the presumably inexperienced cyclists on Hubway machines.

I’ll follow up with a post on the technical implementation shortly. In the interim, check out the code on Github