Googlemaps Data visualizations - Network Data

Google maps Visualizations.

Authors

Live Demo of pins (markers) on Google Maps:
New York City Events

• Currently the pin is displayed only when the zoom level is greater than 8 (default zoom is 6, the alert box helps to get the zoom). So, in order to see the pins on the city, the user has to zoom in more.
• Rightclick mouse event is handled to display the information associated with that location.
• We can display beautiful HTML content in the pop window
• We can display different colored pins for different types of events. Currently red and green are shown

Live Demo of Network Packet Paths:
Paths of Packets for various departments

• A plot on Google Maps to display the traffic originating from a location (United Kingdom).
• Traffic from different department's is color-coded differently to distinguish them from each other.

Live Demo of Timeseries Network Data:
Traffic originating from various departments

• A visualization showing the variation in the network traffic originating from different departments scaled on time.

Live Demo of Network Packet Paths :
Elaborate paths of packets with only selective city data

• Google Maps are created to showcase only the selected labels of the cities or geographical location where the packet either has source or destination.
• The traffic from each department of the organization is color-coded differently to distinguish them from each other.
• Additionally, there is also a provision in the Google Maps API for filtering the labels according to the granularity. For instance, we can simply add a primitive called as administrative.province or administrative.country to show or hide labels of that granularity. I found this API performing way faster than that of coding each label manually. This is shown in the latest visualization on this page.

Live Demo of Traffic Distribution - Multiple Charts:
Pie Chart and Bar Graphs of Traffic Distribution

• To analyze the traffic distribution from different departments in the organization, a pie chart is created showcasing the percentage of traffic originating from respective department.
• When the particular pie of the department is clicked in the pie chart, a bar graph is loaded on the right to showcase day-wise traffic distribution of the department.

Demo of Color coding and label filtering with different granularity:
Displaying only country names with roads and water bodies in Manhattan, New York

• Only the administrative country, or in other words, only the country name labels are displayed on the entire page. This granlarity can be changed easily by specifying that granular geographical location
• Roads are color coded in green, and water bodies in blue. Again, this color is easily configured by altering the particular key value from the feature specified.

Demo of Traffic Distribution at Country Granularity:
Displaying only country names with Traffic Distribution

• The polylines in this example are constructured with the granularity of country.
• Country labels are displayed appropriately.

Other visualizations that I worked on:

Using d3.js, plotting spatial, temporal and distributive data of Eventbrite events

Using d3.js, plotting the geographical distribution of specific products on Ebay