cawolfkreo / sanfrancisco-distance-buses

A small visualization of the distance between buses on San Francisco routes

San Francisco distance between busses

Description

This project is a web based visualization of the distance between buses on all the bus routes from San Francisco and additionally, you can check the bus farthest away from the one before, that's creative. To made this small project it was necessary to use this tools:

• NextBus API : To get the real time data from the buses.
• Meteor.js: To work as a backend and create the server of the application.
• React.js: To make the user interface.
• D3.js: To Make the visualization from the NextBus data.

Motivation

Based on John Guerra's stack visualization of the distance between two buses from the same route in San Francisco. The final exam of webdevelopment class on the university of Los Andes was conceived.

The idea of the exam is to implement the visualization mentioned before on a website using the tools learned from the semester. There are some requirements like fetching the data the applications needs from NextBus every 10 seconds, adding the option to make comments and allow user to login and create accounts, and also deploy on heroku.

There are some changes from the original code of the visualization made by John. One of wich is a small fix to make the visualization more useful and organized. One can say that such a small change could be the fix to a potential bug in the original D3 code from John Guerra 💯 .

The creative addition is showing the farthest away bus from a route picked by the user.

Getting Started

If you want to see this project in action you can do so by going here. But, if you want to deploy and test it yourself you will need to install Meteor.js first. There are different ways to do it and they are all explained on Meteor.js website.

Once you have installed Meteor on your machine download this repo on a folder. I suggest using git for that.

Deployment

Now that you have Meteor and this project, the next step is to download some other files necessary for the project before you can deploy. To do this you will need to open a console on the folder where ou have downloaded this repo and then type:
$ meteor npm install
That way npm download and install all of the needed files for you. The next step is finally deploy the application. Use your terminal again and run:
$ meteor
This final part can take a few minutes to complete but after is done you will se a message like this:
=> App running at: http://localhost:3000/
At this point you can just open your Web Browser and type that url, hit enter and the application will load.

Authors

• Camilo Zambrano Votto

Contributing

If anyone wants to give me any help or ideas, you can by making new Issues or Pull requests.

License

This repository has the standard MIT license. You can find it here.