No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Capital Bikeshare Data Visualization - A FCC Fedex Day project



  • Download Capital Bikeshare Trip History Data for year 2012 as CSV
  • run this script to load the csv to Postgres
  • Download bike station and other DC GIS files from DC GIS Data Clearinghouse/Catalog as Shape files
  • Convert Shape files to GeoJSON using QGIS
  • Convert GeoJSON files to TopoJSON using command line. (note TopoJSON can take shape file as input, but there seems to be a bug for multiPolygon features)

Live Demo


  • TopoJSON is incredible powerful for compressing GIS data for client side mapping. The DC boundaries files used in this project(city boundary, neighborhood and water) is 7 MB as GeoJSON, but only 740k as TopoJSON without losing any precision.
  • D3's selection.transition method sophiscated, powerful but make you intend to abuse. Appropriate usage can vastly improve the apps visual appeal.
  • D3's mapping component is powerful, especially useful when mapping larger geographies, such as at national and state level. It has limitations when the map needs detailed features and more sophiscated cartography. Combining D3 with other Javascript-based mapping technology(such as Leaflet and Mapbox) might be a good approach. The tile layer used in the application is created by MapBox's Chris Herwig which shows detailed 3D buildings in DC.

Left to do

  • continue explore interaction between D3 and Leaflet
  • finish the legend component using the Reusable Chart pattern
  • visualize another dataset which shows bike usage by hour

#Many thanks to Mike and Eric for organizing this event... Also to my little Eva for allowing me sleeping during the night.