MUNI

D3.js/Angular.js | SPRING 2017

A 2D visualization mapping real-time positions and direction of MUNI transit vehicles in San Francisco.

 CODE 
FEATURES

PROCESS

main

I spent the Summer of 2016 in Sunnyvale, California interning at Liquid Robotics. During the weekends I used to set out to explore the mesmerizing city of San Francisco and the most convenient way to move around were the MUNIs.

Then I came across the challenge of plotting and exploring MUNI’s real time position on the San Francisco city map, and it became a little more special to build this visualization. At the same time I was constrained in terms of the time I had, and the technology I utilized for the first time. This project helped me reinforce my ability to learn a new technology ( Angular.js ) and implement it, in a span of a single week.


Features

STATIC FEATURES

Mercator Projection of San Francisco boundary and neighborhoods.

sfmap

Color coded Routes ( Inbound ) of all MUNIs in San Francisco.

routes

The stops in a MUNI route are marked with black dots on the route.

stops

DYNAMIC FEATURES

Interactive selection of MUNIs and route highlighting on the projection. The square buttons on the left of every vehicle information are the selectors. The details of the selected MUNI are also highlighted not the MAP.

interactiveselection

Dynamic Real Time Vehicle Position and Heading on vehicle selection. Every vehicle is depicted using a isosceles triangle, the odd vertex indicating the heading of the vehicle at that time.

Screen Shot 2017-04-13 at 3.35.03 PM

Hovering over a vehicle shows up a tool tip with the vehicle ID on it .

tooltip


Process 

Mercator Projection of SF: I used the GeoJSON file for San Francisco and the projection function of d3 to plot the boundary and neighborhoods.

Plotting the MUNI routes: This was a little challenging as the data available for the muni paths was organized well and was presented in a shuffled manner. Sorting this was a problem statement of its own. Instead, I plotted the MUNI routes utilizing the direction and MUNI stops Data.

Plotting Real Time MUNI Data: Muni locations and heading are requested using AJAX API call to NextBus URL depending on which vehicle information is requested by the user.


Future Work

Addition of an interactive Marey’s Diagram for SF Muni System depending on selection.

marey_diagram

Zoom and Pan functionality on Map.

Selection of multiple routes.