View on GitHub

Project 3: Right Here, Right Now

CS 424 Project

Home Youtube Demo Run the App Project Data Team SourceCode How-To Interesting Findings and Patterns
Download this project as a .zip file Clone This Project

Source Code

Peeking Under the Hood
For this project, we used a variety of libraries, tools, and programs in addition to line upon line of our own original code. This page gives a brief overview of each component and how/why it was used. Let's go ahead and start with the external resources we used in our project.

Leaflet An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps
Our bread and butter. Everything you can see and click in our project exists in one way or another as an extension of Leaflet's core functionality. Each DOM element of our program is a child of a Leaflet DOM element. Similarly, on our back end, every GUI element is plugged into Leaflet's interactivity events and methods. Without Leaflet, everything else in our program is orphaned and useless.

D3.js Data-Driven Documents
Who's Jason and why does he like charts? D3.js was arguably as integral to our project as Leaflet itself. The utility of D3 was two-fold for us; both our front end and back end wouldn't exist without the use of D3. Our graphs exist directly as a result of D3's handy methods for generating DOM elements from data sets of any size. Speaking of data sets and size, we also made heavy use of D3's absolutely invaluable JSON import and parsing functionality; whether a given data set was being graphed or used some other way, all JSON* data was parsed via D3's JSON functions. Our program has the potential to show well over 20,000 markers, each representing a unique data element from our data sets; D3 didn't flinch. Probably the most impressive part about D3's charts is that they can be dynamic. D3 allowed us to chart different data sets (as well as user specified subsets) as needed while the program is running.

*In the interest of full disclosure, all data sets were JSON except CTA as XML and Wikipedia POIs handled in a black-box fashion (discussed below).

JQuery Write less, do more
GUI ex machina. Without JQuery, we would not have been able to realize a significant portion of our GUI design goals. We encountered an abundance of conflicts between our GUI elements/plug-ins and Leaflet's own way of handling the layout of Control objects on the DOM. JQuery came to the rescue, allowing us to tweak and fine tune our GUI layout.

Sidebar-v2 A responsive sidebar for mapping libraries like Leaflet or OpenLayers
Just sweep it under the rug. As mentioned above, we could be dealing with an enormous amount of information on screen at any given time during the use of our project. So what happens when we need more space? We sweep it under the rug and hope mom thinks we cleaned up take advantage of the Sidebar's expand/collapse toggle functionality. We made the Sidebar home to three tabs: a brief description of the team, basic usage instructions, and whatever chart we needed D3 to render at a given time. The user might not always want to see those three pieces of information throughout their use of our program, and the Sidebar allows us to give the user a way to toggle such info.

Leaflet.Draw Vector drawing and editing plugin for Leaflet
Drawing Conclusions. Through this Leaflet plug-in, a user can draw arbitrary polygons over the map to specify exactly which areas of the map they would like to investigate. Each element created via Leaflet.Draw is a Leaflet layer on top of the map. With this plug-in's easy backend access to the drawings it creates, we were able to compare the area under a given polygon to the coordinates of our data points and display relevant markers, data, and charts accordingly.

Leaflet.Locate A useful control to geolocate the user with many options
Where am I? A simple, albeit handy little plug-in we stumbled upon. With the click of a single button, the map will be centered on the user's location. Nothing terribly fancy, but it arguably adds more functionality to the program than effort required to implement it.

Leaflet Panel Layers Leaflet Control Layers extended for more layers and icon legends
So what's there to see around here? Quite possibly the team's favorite GUI element. Sitting on the right hand border of the screen, this is the primary control for the program. By taking the SVG icons we used for our markers and converting them to an icon font (via IcoMoon), we were able to make the panel serve double duty as a way to manipulate the program and as a basic legend.

GeoJSON Utilities for JavaScript JavaScript helper functions for manipulating GeoJSON
"GeoJSON" just rolls off the tongue, doesn't it? This set of utilities is the driving magic behind how Leaflet.Draw interaction results in markers on the map. With these clutch functions, we can find out which of our data points exist within any arbitrary polygon a user may create via Leaflet.Draw.

Leaflet.dbpediaLayer Leaflet plugin adding a layer with POIs from DBpedia.
Wikipedia is an academic source, right? This Leaflet plug-in was an instant hit with the team. It provided us a very hassle-free way to add a data set to our program which encompasses a staggering variety and amount of information. There is a downside, however: this plug in functions as a bit of a black box. In other words, there was no easily-implemented way for us to customize how data was shown, and thus we couldn't wrangle Wikipedia markers into polygons like all other data.