Skip to content

Instantly share code, notes, and snippets.

@lyaunzbe

lyaunzbe/README.md

Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lyaunzbe/9857296 to your computer and use it in GitHub Desktop.
Save lyaunzbe/9857296 to your computer and use it in GitHub Desktop.
Download ZIP
Bay Area Bike Share Stacked Bar Chart
Raw
README.md

Bay Area Bike Share

A snapshot of Bay Area Bike Share data visualized as a stacked bar chart, by city. Shows # of available bikes, # of available docks, and from that you can naturally figured out the total number of bikes in circulation in each city.

Raw
data.json
{
"collection": [
{
"executionTime": "2014-03-23 08:25:02 PM",
"stationBeanList": [
{
"id": 2,
"stationName": "San Jose Diridon Caltrain Station",
"availableDocks": 10,
"totalDocks": 27,
"latitude": 37.329732,
"longitude": -121.901782,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 17,
"stAddress1": "San Jose Diridon Caltrain Station",
"stAddress2": "",
"city": "San Jose",
"postalCode": "",
"location": "Crandall Street",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Jose"
},
{
"id": 3,
"stationName": "San Jose Civic Center",
"availableDocks": 4,
"totalDocks": 15,
"latitude": 37.330698,
"longitude": -121.888979,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 11,
"stAddress1": "San Jose Civic Center",
"stAddress2": "",
"city": "San Jose",
"postalCode": "",
"location": "W San Carlos Street",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Jose"
},
{
"id": 4,
"stationName": "Santa Clara at Almaden",
"availableDocks": 9,
"totalDocks": 11,
"latitude": 37.333988,
"longitude": -121.894902,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 2,
"stAddress1": "Santa Clara at Almaden",
"stAddress2": "",
"city": "San Jose",
"postalCode": "",
"location": "W Santa Clara Street",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Jose"
},
{
"id": 5,
"stationName": "Adobe on Almaden",
"availableDocks": 6,
"totalDocks": 19,
"latitude": 37.331415,
"longitude": -121.8932,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 13,
"stAddress1": "Adobe on Almaden",
"stAddress2": "",
"city": "San Jose",
"postalCode": "",
"location": "Almaden Boulevard",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Jose"
},
{
"id": 6,
"stationName": "San Pedro Square",
"availableDocks": 3,
"totalDocks": 15,
"latitude": 37.336721,
"longitude": -121.894074,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 12,
"stAddress1": "San Pedro Square",
"stAddress2": "",
"city": "San Jose",
"postalCode": "",
"location": "N San Pedro Street",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Jose"
},
{
"id": 7,
"stationName": "Paseo de San Antonio",
"availableDocks": 8,
"totalDocks": 15,
"latitude": 37.333798,
"longitude": -121.886943,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 7,
"stAddress1": "Paseo de San Antonio",
"stAddress2": "",
"city": "San Jose",
"postalCode": "",
"location": "Paseo de San Antonio",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Jose"
},
{
"id": 8,
"stationName": "San Salvador at 1st",
"availableDocks": 7,
"totalDocks": 15,
"latitude": 37.330165,
"longitude": -121.885831,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 8,
"stAddress1": "San Salvador at 1st",
"stAddress2": "",
"city": "San Jose",
"postalCode": "",
"location": "E San Salvador Street",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Jose"
},
{
"id": 9,
"stationName": "Japantown",
"availableDocks": 8,
"totalDocks": 15,
"latitude": 37.348742,
"longitude": -121.894715,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 7,
"stAddress1": "Japantown",
"stAddress2": "",
"city": "San Jose",
"postalCode": "",
"location": "N 5th Street",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Jose"
},
{
"id": 10,
"stationName": "San Jose City Hall",
"availableDocks": 10,
"totalDocks": 15,
"latitude": 37.337391,
"longitude": -121.886995,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 5,
"stAddress1": "San Jose City Hall",
"stAddress2": "",
"city": "San Jose",
"postalCode": "",
"location": "S 4th Street",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Jose"
},
{
"id": 11,
"stationName": "MLK Library",
"availableDocks": 12,
"totalDocks": 19,
"latitude": 37.335885,
"longitude": -121.88566,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 7,
"stAddress1": "MLK Library",
"stAddress2": "",
"city": "San Jose",
"postalCode": "",
"location": "E San Fernando Street",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Jose"
},
{
"id": 12,
"stationName": "SJSU 4th at San Carlos",
"availableDocks": 10,
"totalDocks": 19,
"latitude": 37.332808,
"longitude": -121.883891,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 9,
"stAddress1": "SJSU 4th at San Carlos",
"stAddress2": "",
"city": "San Jose",
"postalCode": "",
"location": "S 4th Street",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Jose"
},
{
"id": 13,
"stationName": "St James Park",
"availableDocks": 7,
"totalDocks": 15,
"latitude": 37.339301,
"longitude": -121.889937,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 8,
"stAddress1": "St James Park",
"stAddress2": "",
"city": "San Jose",
"postalCode": "",
"location": "N 3rd Street",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Jose"
},
{
"id": 14,
"stationName": "Arena Green / SAP Center",
"availableDocks": 9,
"totalDocks": 19,
"latitude": 37.332692,
"longitude": -121.900084,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 10,
"stAddress1": "Arena Green / SAP Center",
"stAddress2": "",
"city": "San Jose",
"postalCode": "",
"location": "N Autumn Street",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Jose"
},
{
"id": 16,
"stationName": "SJSU - San Salvador at 9th",
"availableDocks": 9,
"totalDocks": 15,
"latitude": 37.333955,
"longitude": -121.877349,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 6,
"stAddress1": "SJSU - San Salvador at 9th",
"stAddress2": "",
"city": "San Jose",
"postalCode": "",
"location": "S 9th Street",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Jose"
},
{
"id": 21,
"stationName": "Franklin at Maple",
"availableDocks": 6,
"totalDocks": 15,
"latitude": 37.481758,
"longitude": -122.226904,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 9,
"stAddress1": "Franklin at Maple",
"stAddress2": "Franklin Street",
"city": "Redwood City",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "Redwood City"
},
{
"id": 22,
"stationName": "Redwood City Caltrain Station",
"availableDocks": 11,
"totalDocks": 27,
"latitude": 37.486078,
"longitude": -122.232089,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 16,
"stAddress1": "Redwood City Caltrain Station",
"stAddress2": "Broadway",
"city": "Redwood City",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "Redwood City"
},
{
"id": 23,
"stationName": "San Mateo County Center",
"availableDocks": 8,
"totalDocks": 15,
"latitude": 37.488501,
"longitude": -122.231061,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 7,
"stAddress1": "San Mateo County Center",
"stAddress2": "Winslow Street",
"city": "Redwood City",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "Redwood City"
},
{
"id": 24,
"stationName": "Redwood City Public Library",
"availableDocks": 6,
"totalDocks": 15,
"latitude": 37.484219,
"longitude": -122.227424,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 9,
"stAddress1": "Redwood City Public Library",
"stAddress2": "Middlefield Road",
"city": "Redwood City",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "Redwood City"
},
{
"id": 25,
"stationName": "Broadway at Main",
"availableDocks": 7,
"totalDocks": 15,
"latitude": 37.486725,
"longitude": -122.225551,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 8,
"stAddress1": "1900 Broadway",
"stAddress2": "Broadway",
"city": "Redwood City",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "Redwood City"
},
{
"id": 26,
"stationName": "Redwood City Medical Center",
"availableDocks": 6,
"totalDocks": 15,
"latitude": 37.487682,
"longitude": -122.223492,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 9,
"stAddress1": "Redwood City Medical Center",
"stAddress2": "Marshall Street",
"city": "Redwood City",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "Redwood City"
},
{
"id": 27,
"stationName": "Mountain View City Hall",
"availableDocks": 11,
"totalDocks": 15,
"latitude": 37.389218,
"longitude": -122.081896,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 4,
"stAddress1": "Mountain View City Hall",
"stAddress2": "Castro Street",
"city": "Mountain View",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "Mountain View"
},
{
"id": 28,
"stationName": "Mountain View Caltrain Station",
"availableDocks": 9,
"totalDocks": 23,
"latitude": 37.394358,
"longitude": -122.076713,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 14,
"stAddress1": "Mountain View Caltrain Station",
"stAddress2": "Evelyn Avenue",
"city": "Mountain View",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "Mountain View"
},
{
"id": 29,
"stationName": "San Antonio Caltrain Station",
"availableDocks": 9,
"totalDocks": 23,
"latitude": 37.40694,
"longitude": -122.106758,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 14,
"stAddress1": "San Antonio Caltrain Station",
"stAddress2": "Showers Drive",
"city": "Mountain View",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "Mountain View"
},
{
"id": 30,
"stationName": "Evelyn Park and Ride",
"availableDocks": 6,
"totalDocks": 15,
"latitude": 37.390277,
"longitude": -122.066553,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 9,
"stAddress1": "Evelyn Park and Ride",
"stAddress2": "Evelyn Avenue",
"city": "Mountain View",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "Mountain View"
},
{
"id": 31,
"stationName": "San Antonio Shopping Center",
"availableDocks": 6,
"totalDocks": 15,
"latitude": 37.400443,
"longitude": -122.108338,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 9,
"stAddress1": "San Antonio Shopping Center",
"stAddress2": "Latham Street",
"city": "Mountain View",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "Mountain View"
},
{
"id": 32,
"stationName": "Castro Street and El Camino Real",
"availableDocks": 5,
"totalDocks": 11,
"latitude": 37.385956,
"longitude": -122.083678,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 6,
"stAddress1": "Castro Street and El Camino Real",
"stAddress2": "Castro Street",
"city": "Mountain View",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "Mountain View"
},
{
"id": 33,
"stationName": "Rengstorff Avenue / California Street",
"availableDocks": 8,
"totalDocks": 15,
"latitude": 37.400241,
"longitude": -122.099076,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 7,
"stAddress1": "Rengstorff Avenue / California Street",
"stAddress2": "Rengstorff Avenue",
"city": "Mountain View",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "Mountain View"
},
{
"id": 34,
"stationName": "Palo Alto Caltrain Station",
"availableDocks": 6,
"totalDocks": 23,
"latitude": 37.443988,
"longitude": -122.164759,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 17,
"stAddress1": "Palo Alto Caltrain Station",
"stAddress2": "Alma Street",
"city": "Palo Alto",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "Palo Alto"
},
{
"id": 35,
"stationName": "University and Emerson",
"availableDocks": 10,
"totalDocks": 11,
"latitude": 37.444521,
"longitude": -122.163093,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 1,
"stAddress1": "University and Emerson",
"stAddress2": "University Avenue",
"city": "Palo Alto",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "Palo Alto"
},
{
"id": 36,
"stationName": "California Ave Caltrain Station",
"availableDocks": 8,
"totalDocks": 15,
"latitude": 37.429082,
"longitude": -122.142805,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 7,
"stAddress1": "California Ave Caltrain Station",
"stAddress2": "Park Boulevard",
"city": "Palo Alto",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "Palo Alto"
},
{
"id": 37,
"stationName": "Cowper at University",
"availableDocks": 8,
"totalDocks": 11,
"latitude": 37.448598,
"longitude": -122.159504,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 3,
"stAddress1": "Cowper at University",
"stAddress2": "Cowper Street",
"city": "Palo Alto",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "Palo Alto"
},
{
"id": 38,
"stationName": "Park at Olive",
"availableDocks": 10,
"totalDocks": 15,
"latitude": 37.4256839,
"longitude": -122.1377775,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 5,
"stAddress1": "Park at Olive",
"stAddress2": "Park Boulevard",
"city": "Palo Alto",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "Palo Alto"
},
{
"id": 39,
"stationName": "Powell Street BART",
"availableDocks": 7,
"totalDocks": 19,
"latitude": 37.783871,
"longitude": -122.408433,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 12,
"stAddress1": "Powell Street BART",
"stAddress2": "Market",
"city": "San Francisco",
"postalCode": "",
"location": "San Francisco",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francsico"
},
{
"id": 41,
"stationName": "Clay at Battery",
"availableDocks": 9,
"totalDocks": 15,
"latitude": 37.795001,
"longitude": -122.39997,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 6,
"stAddress1": "Clay at Battery",
"stAddress2": "Clay Street",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 42,
"stationName": "Davis at Jackson",
"availableDocks": 10,
"totalDocks": 15,
"latitude": 37.79728,
"longitude": -122.398436,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 5,
"stAddress1": "Davis at Jackson",
"stAddress2": "Davis Street",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 45,
"stationName": "Commercial at Montgomery",
"availableDocks": 10,
"totalDocks": 15,
"latitude": 37.794231,
"longitude": -122.402923,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 5,
"stAddress1": "Commercial at Montgomery",
"stAddress2": "San Francisco",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 46,
"stationName": "Washington at Kearney",
"availableDocks": 7,
"totalDocks": 15,
"latitude": 37.795425,
"longitude": -122.404767,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 8,
"stAddress1": "Washington at Kearney",
"stAddress2": "Washington Street",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 47,
"stationName": "Post at Kearney",
"availableDocks": 14,
"totalDocks": 19,
"latitude": 37.788975,
"longitude": -122.403452,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 5,
"stAddress1": "Post at Kearney",
"stAddress2": "Post Street",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 48,
"stationName": "Embarcadero at Vallejo",
"availableDocks": 7,
"totalDocks": 15,
"latitude": 37.799953,
"longitude": -122.398525,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 8,
"stAddress1": "Embarcadero at Vallejo",
"stAddress2": "Embarcadero",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 49,
"stationName": "Spear at Folsom",
"availableDocks": 15,
"totalDocks": 19,
"latitude": 37.789625,
"longitude": -122.390264,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 4,
"stAddress1": "Spear at Folsom",
"stAddress2": "Spear Street",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 50,
"stationName": "Harry Bridges Plaza (Ferry Building)",
"availableDocks": 5,
"totalDocks": 23,
"latitude": 37.795392,
"longitude": -122.394203,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 18,
"stAddress1": "Harry Bridges Plaza (Ferry Building)",
"stAddress2": "Embarcadero",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 51,
"stationName": "Embarcadero at Folsom",
"availableDocks": 8,
"totalDocks": 19,
"latitude": 37.791464,
"longitude": -122.391034,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 11,
"stAddress1": "Embarcadero at Folsom",
"stAddress2": "Embarcadero",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 54,
"stationName": "Embarcadero at Bryant",
"availableDocks": 8,
"totalDocks": 15,
"latitude": 37.787152,
"longitude": -122.388013,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 7,
"stAddress1": "Embarcadero at Bryant",
"stAddress2": "Embarcadero",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 55,
"stationName": "Temporary Transbay Terminal (Howard at Beale)",
"availableDocks": 12,
"totalDocks": 23,
"latitude": 37.789756,
"longitude": -122.394643,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 11,
"stAddress1": "Temporary Transbay Terminal (Howard at Beale)",
"stAddress2": "Howard Street",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 56,
"stationName": "Beale at Market",
"availableDocks": 15,
"totalDocks": 19,
"latitude": 37.792251,
"longitude": -122.397086,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 4,
"stAddress1": "Beale at Market",
"stAddress2": "Beale Street",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 57,
"stationName": "5th at Howard",
"availableDocks": 6,
"totalDocks": 15,
"latitude": 37.781752,
"longitude": -122.405127,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 9,
"stAddress1": "5th at Howard",
"stAddress2": "5th Street",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 58,
"stationName": "San Francisco City Hall",
"availableDocks": 9,
"totalDocks": 19,
"latitude": 37.77865,
"longitude": -122.418235,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 10,
"stAddress1": "San Francisco City Hall",
"stAddress2": "Carlton B. Goodlet",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 59,
"stationName": "Golden Gate at Polk",
"availableDocks": 15,
"totalDocks": 23,
"latitude": 37.781332,
"longitude": -122.418603,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 8,
"stAddress1": "Golden Gate at Polk",
"stAddress2": "Golden Gate Avenue",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 60,
"stationName": "Embarcadero at Sansome",
"availableDocks": 7,
"totalDocks": 15,
"latitude": 37.80477,
"longitude": -122.403234,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 8,
"stAddress1": "Embarcadero at Sansome",
"stAddress2": "Embarcadero",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 61,
"stationName": "2nd at Townsend",
"availableDocks": 15,
"totalDocks": 27,
"latitude": 37.780526,
"longitude": -122.390288,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 12,
"stAddress1": "2nd at Townsend",
"stAddress2": "2nd Street",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 62,
"stationName": "2nd at Folsom",
"availableDocks": 12,
"totalDocks": 19,
"latitude": 37.785299,
"longitude": -122.396236,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 7,
"stAddress1": "2nd at Folsom",
"stAddress2": "2nd Street",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 63,
"stationName": "Howard at 2nd",
"availableDocks": 11,
"totalDocks": 19,
"latitude": 37.786978,
"longitude": -122.398108,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 8,
"stAddress1": "Howard at 2nd",
"stAddress2": "Howard Street",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 64,
"stationName": "2nd at South Park",
"availableDocks": 8,
"totalDocks": 15,
"latitude": 37.782259,
"longitude": -122.392738,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 7,
"stAddress1": "2nd at South Park",
"stAddress2": "2nd Street",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 65,
"stationName": "Townsend at 7th",
"availableDocks": 5,
"totalDocks": 15,
"latitude": 37.771058,
"longitude": -122.402717,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 10,
"stAddress1": "Townsend at 7th",
"stAddress2": "Townsend Street",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 66,
"stationName": "South Van Ness at Market",
"availableDocks": 11,
"totalDocks": 19,
"latitude": 37.774814,
"longitude": -122.418954,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 8,
"stAddress1": "South Van Ness at Market",
"stAddress2": "Van Ness Avenue",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 67,
"stationName": "Market at 10th",
"availableDocks": 19,
"totalDocks": 27,
"latitude": 37.776619,
"longitude": -122.417385,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 8,
"stAddress1": "Market at 10th",
"stAddress2": "Market Street",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 68,
"stationName": "Yerba Buena Center of the Arts (3rd @ Howard)",
"availableDocks": 13,
"totalDocks": 19,
"latitude": 37.784878,
"longitude": -122.401014,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 6,
"stAddress1": "Yerba Buena Center of the Arts (3rd @ Howard)",
"stAddress2": "Howard Street",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 69,
"stationName": "San Francisco Caltrain 2 (330 Townsend)",
"availableDocks": 10,
"totalDocks": 23,
"latitude": 37.776377,
"longitude": -122.39607,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 13,
"stAddress1": "San Francisco Caltrain 2 (330 Townsend)",
"stAddress2": "Townsend Street",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 70,
"stationName": "San Francisco Caltrain (Townsend at 4th)",
"availableDocks": 7,
"totalDocks": 19,
"latitude": 37.776317,
"longitude": -122.395569,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 12,
"stAddress1": "San Francisco Caltrain (Townsend at 4th)",
"stAddress2": "Townsend Street",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 71,
"stationName": "Powell at Post (Union Square)",
"availableDocks": 13,
"totalDocks": 19,
"latitude": 37.788446,
"longitude": -122.408499,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 6,
"stAddress1": "Powell at Post (Union Square)",
"stAddress2": "Powell Street",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 72,
"stationName": "Civic Center BART (7th at Market)",
"availableDocks": 7,
"totalDocks": 23,
"latitude": 37.780356,
"longitude": -122.412919,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 16,
"stAddress1": "Civic Center BART (7th at Market)",
"stAddress2": "Market Street",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 73,
"stationName": "Grant Avenue at Columbus Avenue",
"availableDocks": 5,
"totalDocks": 15,
"latitude": 37.798522,
"longitude": -122.407245,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 10,
"stAddress1": "Grant at Columbus",
"stAddress2": "Grant Street",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 74,
"stationName": "Steuart at Market",
"availableDocks": 13,
"totalDocks": 23,
"latitude": 37.794139,
"longitude": -122.394434,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 10,
"stAddress1": "Steuart at Market",
"stAddress2": "Steuart Street",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 75,
"stationName": "Mechanics Plaza (Market at Battery)",
"availableDocks": 15,
"totalDocks": 19,
"latitude": 37.7913,
"longitude": -122.399051,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 4,
"stAddress1": "Mechanics Plaza (Market at Battery)",
"stAddress2": "Market Street",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 76,
"stationName": "Market at 4th",
"availableDocks": 11,
"totalDocks": 19,
"latitude": 37.786305,
"longitude": -122.404966,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 8,
"stAddress1": "Market at 4th",
"stAddress2": "Market Street",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 77,
"stationName": "Market at Sansome",
"availableDocks": 21,
"totalDocks": 27,
"latitude": 37.789625,
"longitude": -122.400811,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 6,
"stAddress1": "Market at Sansome",
"stAddress2": "Market Street",
"city": "San Francisco",
"postalCode": "",
"location": "",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 80,
"stationName": "San Jose Government Center",
"availableDocks": 8,
"totalDocks": 15,
"latitude": 37.352601,
"longitude": -121.905733,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 7,
"stAddress1": "San Jose Government Center",
"stAddress2": "",
"city": "San Jose",
"postalCode": "",
"location": "San Jose Government Center",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Jose"
},
{
"id": 82,
"stationName": "Broadway St at Battery St",
"availableDocks": 8,
"totalDocks": 15,
"latitude": 37.798541,
"longitude": -122.400862,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 7,
"stAddress1": "Broadway St at Battery St",
"stAddress2": "Broadway St",
"city": "San Francisco",
"postalCode": "",
"location": "San Francisco",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "San Francisco"
},
{
"id": 83,
"stationName": "Mezes Park",
"availableDocks": 6,
"totalDocks": 15,
"latitude": 37.491269,
"longitude": -122.236234,
"statusValue": "In Service",
"statusKey": 1,
"availableBikes": 9,
"stAddress1": "Mezes Park",
"stAddress2": "Standish St",
"city": "Redwood City",
"postalCode": "",
"location": "Mezes Park",
"altitude": "",
"testStation": false,
"lastCommunicationTime": null,
"landMark": "Redwood City"
}
]
}
]
}
Raw
index.html
<!DOCTYPE html>
<html class="no-js" style="height:100%;">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
.legend{
fill:transparent;
}
.legend-items text{
fill:black;
margin-top:10px;
}
svg{
margin-top: -38px;
margin-left: 70px;
}
</style>
<body style="height:100%;">
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
</body>
</html>
Raw
main.js
$(function(){
d3.legend = function(g) {
g.each(function() {
var g= d3.select(this),
items = {},
svg = d3.select(g.property("nearestViewportElement")),
legendPadding = g.attr("data-style-padding") || 100,
lb = g.selectAll(".legend-box").data([true]),
li = g.selectAll(".legend-items").data([true])
lb.enter().append("rect").classed("legend-box",true)
li.enter().append("g").classed("legend-items",true)
svg.selectAll("[data-legend]").each(function() {
var self = d3.select(this)
items[self.attr("data-legend")] = {
pos : self.attr("data-legend-pos") || this.getBBox().y,
color : self.attr("data-legend-color") != undefined ? self.attr("data-legend-color") : self.style("fill") != 'none' ? self.style("fill") : self.style("stroke")
}
})
items = d3.entries(items).sort(function(a,b) { return a.value.pos-b.value.pos})
li.selectAll("text")
.data(items,function(d) { return d.key})
.call(function(d) { d.enter().append("text")})
.call(function(d) { d.exit().remove()})
.attr("y",function(d,i) { return (i*1.7)+"em"})
.attr("x","1em")
.text(function(d) { ;return d.key})
li.selectAll("circle")
.data(items,function(d) { return d.key})
.call(function(d) { d.enter().append("circle")})
.call(function(d) { d.exit().remove()})
.attr("cy",function(d,i) { return (i-0.25)*1.7+"em"})
.attr("cx",0)
.attr("r","0.4em")
.style("fill",function(d) { console.log(d.value.color);return d.value.color})
// Reposition and resize the box
var lbbox = li[0][0].getBBox()
lb.attr("x",(lbbox.x-legendPadding))
.attr("y",(lbbox.y-legendPadding))
.attr("height",(lbbox.height+2*legendPadding))
.attr("width",(lbbox.width+2*legendPadding))
})
return g
}
d3.select("body").append("svg");
d3.json("../data.json", function(err, json){
if(err) console.log(err);
var data = json.collection[0].stationBeanList;
var n = 2,
stack = d3.layout.stack();
var labels = data.map(function(d){
return d.city;
});
labels = labels.reverse().filter(function (e, i, arr) {
return arr.indexOf(e, i+1) === -1;
}).reverse();
var data_clean = {};
labels.forEach(function(d){
data_clean[d] = {
val1: 0,
val2: 0
};
});
data.forEach(function(d){
data_clean[d.city].val1 += d.availableBikes;
data_clean[d.city].val2 += d.availableDocks;
})
layers = stack(d3.range(n).map(function(d) {
var a = [];
var index = 0;
$.each(data_clean, function(i,v){
a[index] = {x: index, y: data_clean[i]['val' + (d+1)]};
index++;
});
return a;
}));
var m = labels.length;
yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
//the largest stack
yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });
var margin = {top: 40, right: 0, bottom: 20, left: 120},
width = 677 - margin.left - margin.right,
height = 533 - margin.top - margin.bottom;
var y = d3.scale.ordinal()
.domain(d3.range(m))
.rangeRoundBands([2, height], .08);
var x = d3.scale.linear()
.domain([0, yStackMax])
.range([0, width]);
var color = d3.scale.linear()
.domain([0, n - 1])
.range(["#aad", "#556"]);
var svg = d3.select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var legend = true;
var layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) { return color(i); })
.attr("data-legend",function(d) { legend = !legend; if(legend){return 'Availible Bikes' }else{ return 'Availible Docks'}})
layer.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("y", function(d) { return y(d.x); })
.attr("x", function(d) { return x(d.y0); })
.attr("height", y.rangeBand())
.attr("width", function(d) { return x(d.y); });
var yAxis = d3.svg.axis()
.scale(y.domain(labels))
.tickSize(1)
.tickPadding(10)
.orient("left");
var xAxis = d3.svg.axis()
.scale(x)
.tickSize(1)
.ticks(10)
.orient("bottom");
legend = svg.append("g")
.attr("class","legend")
.attr("transform","translate(400,30)")
.style("font-size","16px")
.call(d3.legend)
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(-1,"+height+")")
.call(xAxis);
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment