D3.js/Angular.js | SPRING 2017

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




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.



Mercator Projection of San Francisco boundary and neighborhoods.


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


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



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.


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 .



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.


Zoom and Pan functionality on Map.

Selection of multiple routes.