Mapbox – Master of Spatial Analysis

Visualizing 2013 Cyclist Collisions in Ottawa with Mapbox

Author: Ben Kennedy

Geovis Project Assignment @RyersonGeo, SA8905, Fall 2021

Data referenced contains information licensed under the Open Government Licence – City of Ottawa.

Initial Concept

Early on, when thinking about the project, I decided I wanted to choose a technology I had little to no exposure to and really dive deep into how it worked and what it was capable of. I looked through several different technologies and eventually decided on Mapbox as a result of William Davis’ site and the vast array of cool interactive projects using it as their platform. Mapbox is a platform specifically for web or application maps that gives the user an incredible degree of control over the appearance of all aspects of a map. It does this by providing a studio interface (GUI) where a user can customise a basemap by importing shape files, geojson files, image files, etc. Once you’ve edited this basemap to your satisfaction you can export the map as a url and link it directly into an html document.

My initial idea was to use time series data with a slider to visualize bike accidents in my home city (Ottawa) over a number of years. However, because of how Mapbox methods and functions work (more on this later) I chose to use a slider to run through the numbers of accidents by intersection from a particular year. With this in mind I began the construction of my website (and more tutorials on Mapbox methods than I care to remember)…

Webmap Construction

I will admit quite frankly that I know absolutely nothing about html and CSS, both essential components in website design. However, I do have some javascript experience and since mapbox methods are built on node.js this proved invaluable. The first step in the map construction thankfully involved only graphical tweaking of the openstreetmap basemap that Mapbox provides as an editable style. Keeping in mind those important cartographic principles, I chose to change all the major components on this map into shades of navy blue. I also gave the labels a larger white halo to allow them to stand out and hid those I didn’t think would be very useful.

The next step was to upload a shapefile of the accident points from 2013, obtained from the City of Ottawa open data portal, to Mapbox. Mapbox acts as a host for shape files, geojson, etc. that you upload to it, and converts all these formats into tilesets that you can call in your map by referencing a url. You can also add these tilesets directly into your basemap, however this makes them harder to work with when you eventually switch over to code. For this map, I chose to add a shapefile of the City of Ottawa neighbourhoods directly to my basemap since I had no interest in making this layer interactive. I also uploaded a shapefile containing the cycling network for the City to my basemap just out of personal interest. The file containing the accident points and information was left as a tileset and not added to the basemap so we could easily call it when developing our interactive elements.

The tileset and all of its fields referenced in the final map

Now that I had my data uploaded and my basemap complete it was time to move into a code editor and put together my webmap.

A Daunting Amount of Code

Now, when you first look at the code for this webmap it can appear quite daunting, I certainly felt that way when I first tried to figure it out. You’ll need a few things to actually start editing your html page: 1. You need to go download the node.js repository, this is what Mapbox methods and fuctions run on. 2. You’ll need a good editor/compiler and a live server of some sort so you can see your changes in real time. I used Atom as my editor and then a free live server called “atom-live-server” which is available through atoms tools library. I also played around with creating a python local server – hosted from my PC, but this is quite complicated and it’s much easier to use the available tools.

Once you’ve got all this together it’s time to start putting together your webpage. You can either code it entirely from scratch or base it on a pre-existing project. Since I had little to no experience with html and CSS I chose to take one of Mapbox’s example projects and edit it using my own maps and functions. What this means is that the basics of the page itself were already set up, however none of the information was present. So, for example, the slider element was in the webpage, but none of the information you could scroll through was present, nor was there a method linking the slider to a filter for that information.

Some of the basic HTML and CSS that I edited

So, on to Mapbox and it’s various methods and functions. First off was to add the basemap as the “map element” on our webpage. This was done by plugging the url into the “style” field of the map element. This essentially imports the full style that you’ve created in the GUI. When doing this it’s also important to set your starting zoom and centre point. If you don’t do this, Mapbox will default to a full world zoomout and place you at the projection centre. Here I chose a starting zoom of 9.1, which gives a good overview of the City of Ottawa and a centre sitting smack in the middle of the City.

Next, we call the tileset containing the collision points. I have to admit it took me a full week of work to get this part right. Mapbox has a ton of different ways of styling these layers that you can play with directly in the code. However, ashamed as I am to admit it, my major issue here was not adding the “mapbox://” before my tileset id. This is very important, without this your map will just appear blank, as you are adding a layer that for all intents and purposes does not exist to Mapbox. Once I had eventually figured this out I went ahead and added the layer with a few style options worked out. The three major things I chose to style with the layer were: 1. I set the circle radius to grow with the number of cyclist collisions per point. This was done using a “get” function on the “2013_CYCLI” field that was part of the collisions shapefile. 2. Next, I interpolated the colour of the points, again on the number per intersection, just to give a little more distinction. 3. Finally, and this is a very important step, I set a filter on the “2013_CYCLI” field that would ensure only points with cyclist collisions would be added to the map.

The basic building blocks of my webmap, including the layer calls and styling options

Let’s Add Some Interactivity

Our next step was to link the slider element of our html page to a function that would allow it to filter data. I used a very simple setup for this that would run through the “2013_CYCLI” field and filter the intersections by position on the slider. To do this, I created a variable that stored the slider position as an integer. I then used a “filter” function to go through the layer and pull all accidents with that value or higher. So now the slider would let you go through all the accidents in 2013 and look at all collisions involving cyclists, locations with 2 or more cyclist collisions, and locations with 3 or more cyclist collisions. Essentially, you can see which intersections in Ottawa are the most dangerous for cyclists.

The slider function with the final layer call to re-add the streets to the map

The final touch was to call another layer from openstreetmap and overlay it so you were able to see the road network. With this done, the webmap was complete and ready to be shared.

Oh Github

To share the map I chose to use Github pages. The process is relatively simple once you get going. The first thing to do is to ensure that your html file is called “index” – this is the root file for a github pages site as you are able to add several different pages to any site you create. As we were just sharing the single page, calling it index ensures that it’s always displayed when you load the site. Next you upload the html file to Github, or you link the folder on your machine to github through the github desktop app, I found this super useful as Atom (the code editor I was using) has github desktop integration. And voila, once you’ve enable the pages option in your github repository settings, you can share the link with whomever you’d like!

And here, in fact, is the link to the final product: https://benken97.github.io/SA8905Final/

I do think it would be remiss not to mention a few of the issues I had: 1. The major one was the lack of tutorials for Mapbox. While there is a lot of examples and their API and style reference is exhaustive, a lot of the issues I ran into could have been solved very easily if a solid online tutorial library focused on the basics (they do have one but it’s not that helpful for beginners) existed. The second major issue was my complete lack of knowledge when it came to html and CSS. I was able to learn a fair bit as I went but in the end there are a few portions that I wish I could polish up. Specifically, adding tickmarks and a legend to the slider would have been a very useful feature and I spent hours trying to figure that one out. Unluckily not every browser supports tickmarks and/or legends so I ended up just giving the range by the title. Finally, I do wish that the data I was dealing with had been limited to cycling incidents, as the inclusion of all collisions forced me to filter by cyclist collision rather than year.

Greta Thunberg’s Journey, Mapped

Sahil Parikh
Geovis Project Assignment @RyersonGeo, SA8905, Fall 2019

Introduction

Climate change continues to grow in severity, and the younger generations are noticeably taking a stand. Among them is Greta Thunberg, a 16-year-old environmental activist from Sweden, who first made headlines in 2018 when she played a pivotal role in organizing the School Strike for Climate movement. Her decision to refrain from attending school and protest outside Swedish parliament for stronger climate change action inspired millions to follow suit around the world.

But Greta wasn’t done there. She received an invitation to speak at the 2019 UN Climate Action Summit in New York City, and decided to attend. Greta opted not to fly in order to promote her pro-environmental stance on reducing carbon emissions. The Malizia II sailing yacht crew offered to bring both her and her father across the Atlantic Ocean. Greta agreed, and the boat sailed from Plymouth, England, to New York City on a carbon-neutral trip that once again rocked headlines worldwide.

Once she arrived in New York City, Greta proceeded with her plan to speak at the Summit, but also made small trips all around North America before getting ready for the 2019 United Nations Climate Change Conference (COP25) in Santiago, Chile. Due to national protests, Chile backed out from hosting COP25, and the conference has now been moved to Madrid, Spain. Having completed her tour of North America, Greta set sail again, this time from Hampton, Virginia, to return to Europe and eventually attend COP25.

The focus of this geovisualization project is on Greta Thunberg’s voyage from Europe to North America, from August 2019 to the present. Her voyage is visually communicated through an interactive web map.

Technology

The interactive web map was built using two main technology platforms: Mapbox and OpenStreetMap. Mapbox is an open source mapping platform that allows the user to build custom web maps and applications. It has a very generous free-to-use pricing tier based on map loads that most users will be able to get by with. Mapbox also provides the GL JS library, which is a JavaScript library that can render interactive maps from Mapbox and vector basemap tiles. Its API can be accessed using a token and style URL. Two specific API method examples were used in this web map: displaying a pop-up on click and flying to a location.

Mapbox’s API documentation can be found here for more information.

OpenStreetMap (OSM) is an open source, collaborative global mapping project that provides vector basemap tiles. It typically has to be accessed using a style URL, but Mapbox automatically references an OSM vector tile, so no additional code was required.

The web map was launched with the aid of two additional platforms: Sublime Text and GitHub. Sublime Text is a text editor that allows the user to edit and save HTML, JavaScript, and CSS. It was used to write and save the web map as an HTML file. GitHub is a popular software development platform that allows for code storage using repositories, version control, and minimal web hosting. It was used to externally host the web map through the GitHub Pages feature.

Note: a general knowledge of HTML, JavaScript, and CSS is recommended if attempting to replicate this project.

Data

Greta Thunberg’s voyage was widely documented by the media, but unfortunately not in one single place since multiple publications were reporting on her activities. Therefore, the data for this map had to be manually obtained. A general scan of the major news publications was conducted to determine her location on a given date and what she was doing in that location. Then, that group of locations was inputted into LatLong.net to obtain their individual geographic coordinates in decimal degrees.

Additionally, brief summaries of Greta’s activities were written up with the intention of displaying them in a pop-up textbox at each location.

How to Build the Web Map

The first step in building this web map is to ensure that you have access to all required technologies. Create accounts for Mapbox and GitHub, and download Sublime Text or some other text editor that will allow you to edit and save HTML/JavaScript/CSS.

Next, you need to obtain a Mapbox access token. This token will allow you to use the GL JS methods. Create a new HTML file in your text editor (use w3schools’s HTML tutorial on how to do this if you haven’t already). and follow Mapbox’s instructions with regard to placing these code snippets into your file:

Next, copy the code from Mapbox’s pop-up example into your HTML file. You’ll see multiple pop-up entries under map.addLayer. Replace the coordinates within the [ ] brackets with the ones you’ve obtained from LatLong.net and the descriptions of Greta’s activities, ideally in chronological order as you move down the file. Here’s an example:

The pop-up code does have built-in map markers, but I recommend adding custom markers to the map since they’re more versatile. Use Mapbox’s Custom Markers tutorial to do this.

The next step is to enable the functionality of flying to a location with the click of a button. Mapbox does have an example, but I used a modified example that allows the user to loop through a series of coordinates. Once again, copy the code into your file. Once again, replace the coordinates with the ones you’ve obtained, this time within the arrayOfCoordinates:

Create a title textbox by creating a div element, adding text using HTML formatting, and then adding the two buttons that will allow the user to fly back and forth between locations:

The basic functionality is now built into your web map! What’s left is to add styling to the map, the title textbox, the location pop-up textboxes, and the location map markers. Styling can be changed using CSS, and w3schools’s tutorial is a good place to start. Here’s an example of my CSS for the fly buttons:

Play around with the styling until you’re satisfied with the map’s visual appeal.

Open the HTML file in a web browser to test its functionality. Click both buttons to fly back and forth between the locations that Greta visited. Click on the map markers to display pop-ups at each location with a description of when Greta was there and what she did.

The final step is to make the HTML file publicly accessible. Create a new Public repository in GitHub and upload your file to it by dragging it in. For example, I named my repository “geovis”. Make sure your file is called “index.html”:

Next, click on “Settings” at the top right, scroll down to the bottom section called “GitHub Pages”. This feature will allow you to host your file as a web map page from your repository.

Choose the “master branch” as the Source, and the page should refresh, now displaying a URL at the top where your page is now published:

You’re done! Click on the URL and it should open in your browser, displaying the web map you just created?

Hopefully this post was informative and helpful. If you have any questions about the map and the process I used, don’t hesitate to email me at s5parikh@ryerson.ca.

Greta Thunberg’s Voyage, Mapped: https://s5parikh.github.io/geovis/

GeoVis: Mapdeck Package in R

Gregory Huang
Geovisualization Project, @RyersonGeo, Fall 2019

Introduction

This project is a demonstration of the abilities of the mapdeck package in R, including its shiny interactive app compatibility.

Mapdeck is an R package created by David Cooley. Essentially, it integrates some of mapbox’s functionality into the R environment. Mapbox is a popular web-based mapping service that is community-driven and provides some great geovisualization functionalities. Strava’s global heat map is one example.

I am interested in looking at flight routes across global hubs and see if there are destination overlaps for these routes. Since the arc layer provided by mapdeck has impressive visualization capabilities of the flight routes, I’ve chosen to use mapdeck to visualize some flight route data around the world.

Example of a map generated by mapdeck: arcs, text, lines, and scatterplots are all available. Perspective changes can be done by pressing down Ctrl and clicking. The base maps are customizable with a massive selection of both mapbox and user-generated maps. This map is one of the results from longest_flights.R, which uses the “decimal” basemap.

The Map has some level of built-in interactivity: Here is an example of using a “tooltip” where if a user hovers over an arc, the arc highlights and shows information about that particular route. Note that mapdeck doesn’t want to draw flight routes across the Pacific – so if accuracy is key, do keep this in mind.

Software Requirements

To replicate this project, you’ll need your own mapbox access token. It is free as long as you have a valid email address. Since the code is written in R, you’ll also need R and R Studio downloaded on your machine to run the code.

Tl;dr…

Here’s the Shiny App

The code I created and the data I used can also be found on my GitHub repository, Geovis. To run them on your personal machine, simply download the folder and follow the instructions on the README document at the bottom of the repository page.

Screenshot of the shiny app: The slide bar will tell the map which flights to show, based on the longitudes of the destinations. All flights depart out of YYZ/KEF/AMS/FRA/DXB.

Details: Code to Generate a Map

The code I’ve written contained 2 major parts, both utilizing flight route data. The first part is done with longest_flights.R, demonstrating the capabilities of the mapdeck package using data I curated for the longest flights in the world. The second part is done with yyz_fra.R and shinyApp.R to demonstrate the shiny app compatibility and show how the package handles larger datasets (hint – very well). The shinyApp uses flight route data from 5 airports: Toronto, Iceland-Keflavik, Amsterdam, Frankfurt, and Dubai, pulled from openflights.org.

For the flight route data for the 5 airports, in particular, the data needed cleaning to make the data frame useable to mapdeck. This involved removing empty rows, selecting only the relevant data, and merging the tables.

Code snippet for cleaning the data. After the for loop completes, the flight route data downloaded from openflights.org becomes available to be used for mapdeck.

Once the data were cleaned, I began using the mapdeck functions to map out the routes. The basic parts of the mapdeck() function are to first declare your key, give it a style, and assign it a pitch if needed. There are many more parameters you can customize, but I just changed the style and pitch. Once the mapdeck map is created, use the “pipe” notion (%>%) to add any sort of layers to your map. For example, add_arc() to add the arcs seen in this post. Of course, there are many parameters that you can set, but the most important are the first three: Where your data come from, and where the origin/destination x-y coordinates are.

An example creating an arc on a map. In addition to the previously mentioned parameters, tooltip generates the little chat boxes when you hover over a layer entry, and layer_id is important when there are multiple layers on the same map.

Additional details on creating all different types of layers, including heatmaps, can be found on the documentation page HERE.

Details: Code to make a “Shiny” app

On top of the regular interactive functionalities of mapdeck, incorporating a mapdeck map into shiny can add more layers of interactivity to the map. In this particular instance, I added a slider bar in Shiny where the user can indicate the longitudes of the destinations they want to see. For example, I can filter to see just the flights going to East Asia by using that slider bar. Additional functions of shiny include using drop-menus to select specific map layers, and checkboxes as well.

The shiny code can roughly be broken down into three parts: ui, server, and shinyApp(ui, server). The ui handles the user interface and receives data from the server, while the server decides what map to produce by the input given by the user in ui. shinyApp(ui,server) combines the two to generate a shiny app.

Mapdeck integrates into the shiny app environment by mapdeckOutput() in ui to specify the map to display, and by renderMapdeck() and mapdeck_update() in server to generate the map (rendeerMapdeck) and appropriate layers to display (mapdeck_update).

Below is the code used to run the shiny app demonstrated in this blog post. Note the ui and server portions of the code bode. To run the shiny app after that, simply run shinyApp(ui,server) to generate the app.

Snippet of the Server creation section. Note that the code listens to what the UI says with reactive() and observeEvent().

This concludes my geovis blog post. If you have any questions, please feel free to email me at gregory.huang@ryerson.ca.

Here is the link to my GitHub repository again: https://github.com/greghuang8/Geovis

New York City Automobile Collisions

Creating An Interactive Web Map

By: Joshua Ali

Geovis project Assignment @RyersonGeo, SA8905, Fall 2018

Data

The data used for this map was retrieved from New York City Open Data (https://opendata.cityofnewyork.us/) and automobile collisions data set, it has information on collision from 2011 to present. This will have all information needed for the map.

Using Mapbox

The interactive map will be using map box GeoLibrary JavaScript, so an account must be created with map box. This is a free sign up and a pay as you go account (pretty much if you use it a lot you have to pay) (https://www.mapbox.com/signup).

Creating the Base Map

The next step is to create the base map that was used to display my data. To write the code I used a text writing software. The two I switched between using is Sublime (https://www.sublimetext.com) and Codepen, (https://codepen.io) they are both free software’s that can be used. Now you will need to write a html doc that will be used to display your map. The doc was written below for optimal settings and will be built upon with more code later to customize the map.

Now that the setting style for the map functions have been in place, the map needs to be linked with a mapbox access token that is created from my account. By doing this the html doc will be linked to my account.

A script was created using the var function to create a new map that will use as style option that is linked to your account. In my case I decided to use the dark map background as my style for the map. Also, in the script below the latitude and longitude was selected so when the map is opened it will be looking at New York City.

With all the current script within the text editor this document can be opened with chrome browser to show the base map. The image below shows what would come up.

Customizing the Base Map

Now that the base map of the map is created, I can begin adding and customizing NYC automobile collisions to the map. To connect the data downloaded to the map created they first need to be in the same project folder as the base map html doc made above.

To do this a local server has to be made on the computer so the base map made can draw information from the NYC database to be projected. The api also needs this to continuously update the projected data to the interactive tool that will be added later. This was done by downloading python and running Python’s SimpleHTTPServer. Using the command control panel, the local server was run on my laptop. This is useful because changes made in the coding on the text editor of the map can be seen immediately on the html map doc since the local host is constantly updating the files.

To connect the collision data to the base map, a map load function was used to link the id called collisions along with the data file url and the settings to display the collisions on the map as circles. Also the circle radius based on 0 to 5 was linked with their own selected colours and circle-opacity to 0.8 so depending on how many casualties occur they will have their own colour and partially transparent so they will not bock each other.

With the data now linked to the base map, a legend was created in the code by making a div section inside of the console. Additionally, to this some CSS was added to style the colour gradient so it matches the colours of the circles.

This is what the map will look like with the data and legend.

Adding Time Slider and Interactivity

To add a time slider the slide bar function was added as a div to the body of the html document. This will pull information of the time of accidents and display them on the map. To add the interactive a filter was added to obtain the time of collisions from the database. The coding will be shown below along with a screen shot of the functional map.

Final Touches

The map is almost complete, the last function that was added to it was a filter that looks at the automobile collisions that occurred during the week compared to during the weekend. To create this an if function was added to the text editor so that if a collision occurred on a Saturday it would be false, true. This allows the data to show for week days compared to weekends. This is seen in the coding below. To add the function that allows you to decide on what part of the data to look at another div class session was added to filter the days.

The below script shows the div class session that created the slider bar and button selection for the final map legend.

Final Map

Below is screen shots different settings selected for the interactive map.

Earthquake Browser Web Application for the Country of Iran

Author: Atanaz Dorrani Arab
GeoVis Project Assignment @ RyersonGeo, SA 8905, Fall 2018

The website of Iranian Seismological Center (ISC) is popular not only among the geologist, geophysicist and seismotectonics specialists, but also the general public. When an earthquake happens, people who felt the temblor tend to know its location and magnitude in the shortest time possible. The ISC website is the quickest way to obtain information regarding the latest earthquake. It gives details of time and location of the earthquakes and visualizes earthquakes spatial distribution across the country. However, the website is not user-friendly and provides date and time location for a limited number of earthquakes and maps the location of earthquakes for a period of only 24 hours.

The Earthquake Browser is an effort to make a user-friendly web app, which is easy to use and can serve both the general public and seismotectonics specialists.

The web app is designed to have three main section:

A section to display the spatial distribution of the earthquakes on map
A section that provides a list of earthquakes, which provides detailed information regarding each earthquake including magnitude, location, longitude, latitude, time.
A section which visualizes the frequency distribution of earthquakes by year in form of a vertical bar chart. This part is more beneficial to the specialists, as this chart can give general information about the seismic structure of earth within political borders of Iran.

To use this app users need to enter a time period for which they want to obtain information about the occurred earthquakes. They can also narrow down their search by selecting a magnitude range.

The earthquakes data are being retrieved online from U.S. Geological Survey (USGS) website each time a user select a time period and a magnitude range.

HTML, JavaScript and CSS are the markup, programming and style languages that are used to create the earthquake browser web application. HTML is used to describe the structure of information on the web application; CSS is used for controlling the appearance; and the functionality is programmed by JavaScript. Four libraries were utilized in designing this web application:

Mapbox GL JS used for the web mapping tool, due to the variety of visually pleasant map designs.
D3.js used for the dynamic data visualization in the chart section of the app.
jQuery used for sending Ajax request to USGS server.
Font-Awesome Library used for adding icon fonts which are displayed in the sidebar of the web app. Icon fonts are just fonts. But, instead of containing letters, they contain symbols and glyphs. They give the web app a more graphic design.

Welcome to the app

When a user opens the web application on the browser, a map centered to the Iran’s political border would be displayed. A side bar with three icon fonts designed on the left side of the app let user to navigate to different sections of the web application. Each icon font presents one of the web app’s sections and its functionality.

The hamburger menu directs users to the place where the time period and the magnitude range should be inputted. The date-time field is set on the current local date-time of the user’s time zone as the default date-time in the app. The web app also requests user to not to enter dates prior to January 01, 1900; since there is no instrumental record of the earthquakes before the year 1900.

It is probable that users made some mistakes in filling up the fields of this section, such as entering a start date greater than the end date, entering maximum magnitude smaller than minimum magnitude, entering a date exceeding the current data-time, or entering a date prior to January 01, 1900.

When a user submits the request containing any of these mistakes, an alert with an appropriate message, which corresponds to the specific occurred error pops up and warn the users to correct it. Aside from the alerts, when users input a date-time which exceeds the current date-time or is prior to 1900, the box around the field of date-time changes from solid black line to dashed orange line to let the user know that something is not right before submitting a request. The figure below shows examples of these alerts and how they look on screen.

Additionally, another alert is also designed to notify user when there is no earthquake occurred for the selected time period and magnitude range. When no data received from USGS server this alert would pop up.

USGS provided a web API for access to its earthquake data and sending requests to its server. When a user fills out the date-time and magnitude fields, a URL based on the parameters defined by the USGS API documentation and the values entered by the user will be created and will be sent to the USGS server.

In that URL request, an area which matches the Iranian borders needed to be defined; so the USGS only sends data for earthquakes that occurred in Iran. The area needs to be defined by a rectangular extent, a boundary box defined by 4 lats & longs, which contains the country of Iran. Although when USGS sends earthquake data the, information contains the country names in the location parameter; there is no way to narrow down the URL request based on the name of the countries. Thus, the received earthquakes data from USGS contains earthquakes that occurred out of the borders of the country.

After receiving the data form USGS server in the GeoJSON format, the data will be filtered by the name of country available in the location parameter. Those earthquakes which does not include the name “Iran” in their location will be removed from the data.

Then, user can view the spatial distribution of the earthquakes on map based on the filtered data. User is able to zoom in to places where there are many events occurred. A legend is also displaying on bottom right corner of the map to help reader get an idea of the earthquakes’ magnitude. A color is assigned to each magnitude with a round number (the magnitude ranges from 2 to 8). The color selection is inspired by USGS color scheme for earthquakes magnitudes. The color of the points representing earthquakes changes relative to the magnitude and changes within the range of selected colors. Earthquakes with greater magnitudes are also have larger points. This helps making the larger earthquakes, which are kind of more important, more visible. The figure below show the map after the earthquakes data had been received, filtered, and displayed on map.

The exact magnitude of the earthquake can be found by clicking on the its point on the map. In addition to the magnitude, user can find a row number, which corresponds to the row number in the earthquakes’ list section.

By going to the list section, user can find extra information about that exact earthquake. This list is also beneficial when user is just looking for the latest earthquakes in order to find out the earthquake exact location and magnitude.

In the chart section of the app, a vertical bar chart is showing the frequency of events by year for the selected time period and magnitude range. The Y axis shows the earthquakes frequency and the X axis shows the years. For making this chart, the earthquakes data received from USGS will be categorized by year. The years will be displayed on the X axis and the count of earthquakes in each category will be displayed on the Y axis. When the user places the mouse on each bar of the chart, the exact number of earthquakes in that year will be displayed. This makes the chart more readable when the X axis includes a wide range of years.

NHL Travel Web App

by Luke Johnson
Geovis Project Assignment @RyersonGeo, SA8905, Fall 2017

Context

I’ve been a Toronto Maple Leaf and enthusiastic hockey fan my whole life, and I’ve never been able to intersect my passion for the sport with my love of geography. As a geographer, I’ve been looking for ways to blend the two together for a few years now, and this geovis project finally provided me the opportunity! I’ve always been interested in the debate about how teams located on the west cost travel more than teams located centrally or on the east coast, and that they had a way tougher schedule because of the increased travel time. For this project, I decided to put that argument to rest, and allow anybody to compare two teams for the 2016/2017 NHL season, and visualize all the flights that they take throughout the year, as well as view the accumulated number of kilometres traveled at any point during the season and display the final tally. I thought this would be a neat way to show hockey fans the grueling schedule the players endure throughout the year, without the fan having to look at a boring table!

It all started with the mockup above. I had brainstormed and created a few different interfaces, but this is what I came up with to best illustrate travel routes and cumulative kilometres traveled throughout the year. The next step was deciding on the what data to use and which technology would work best to put it all together!

Data

First of all, all NHL teams were compiled along with the name of their arena and the arena location (lat/long). Next, a pre-compiled csv of the NHL schedule was downloaded from left wing lock, which saved me a lot of time not having the scrape the NHL website, and compile the schedule myself. Believe it or not, that’s all the data I needed to figure out the travel route and kilometres traveled for each team!

Methods

All of this data mentioned above was put into a SQLite database with 3 tables – a Team table, Arena table, and a Schedule table. The Arena table could be joined with the Team table, to get information on which team played at what arena, and where that arena is located. The Team table can also be joined with the Schedule table, to get information regarding which teams play on what day, and the location of the arena that they are playing.

Because I wanted to allow the user to select any unique combination of teams, it would have been very difficult to pre-process all of the unique combinations (435 unique combinations to be exact). For this reason, I decided to build a very lightweight Application Programming Interface (API) that would act as a mediator between the database and the web application. API’s are a great resource for controlling how the data from the database is delivered, and simplifies the combination process. This API was programmed in Python using the Flask framework. The following screenshot shows a small exert from the Flask python code, where a resource is set up to allow the web application to query all of the arenas, and will get back a geojson which can be displayed on the map.

After the Flask python API was configured, it was time to build the front end code of the application! Mapbox was chosen as the web mapping tool in the front end, mainly because of its ease of use and vast sample code available online. For a smaller number of users, it’s completely free! To create the chart, I decided to use an open source charting library called Chart.js. It is 100% free, and again has lots of examples online. Both the mapbox map and Chart.js chart were created using javascript, and wrapped within HTML and CSS, to create one main webpage.

To create the animation, the web application sends a request to the API to query the database for each team chosen to compare. The web application then loops through the schedule for each team, refreshing the page rapidly to make a seamless animation of the 2 airplane’s moving. At the same time the distance between two NHL arenas is calculated, and a running total is appended to the chart, and refreshed after each game in the schedule. The following snippet of code shows how the team 1 drop down menu is created.

Results

After everything was compiled, it was time to demo the web app! The video below shows a demo of the capability of the web application, comparing the Toronto Maple Leafs to the Edmonton Oilers, and visualizing their flights throughout the year, as well as their total kilometres traveled.

To get a more in depth understanding of how the web application was put together, please visit my Github page where you can download the code and build the application yourself!