Time Slider – 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.

A Pandemic in Review: a Trajectory of the Novel Coronavirus

Author: Swetha Salian

Geovisualization Project Assignment @SA8905, Fall 2020

Introduction to Covid-19

Covid-19 is a topic at the top of many of our minds right now, and has been the subject of discussion all around the world. There are various sources of information out there, and as with most current issues, while sources of legitimate information exist, there is also a great deal of misinformation that may be disseminated. This has lead me to investigate the topic further, and to explore the patterns of the disease, in an effort to understand what has transpired in the past year and where we may be headed, as we enter into the second year of this pandemic.

Let’s begin with where it started, what the trajectory has looked like over the past year, and where it is currently as the year is coming to a close. Covid-19 is a disease caused by the new Coronavirus called SARS-CoV-2. The first report was of ‘viral pneumonia’ in Wuhan, China on December 31, 2019 and spread to all the continents except Antarctica, causing widespread infections and deaths. Investigations are ongoing, but as with other coronaviruses, it is believed to be spread by large respiratory droplets containing the virus through person-person contact. In January 2020, the total number of cases across the globe numbered 37,907 and within five months, by June 2020, the number rose to 10,182,385. We currently sit at over 6 million cases across 202 countries and territories, as of November 2020. The numbers still appear to be on a rise even with a number of countries taking various initiatives and measures in an effort to curb to spread of the disease. The data, however, shows that the death rate has been declining in the past few weeks, with a total of 1,439,784 deaths globally as of today. This is a ratio of approximately 2% of cumulative deaths to the total number of cases.

Using Tableau desktop 2019.2, I created a time lapse map of weekly reported COVID-19 cases from January 1 to November 15. Additionally, there is a graph displaying weekly reported deaths for the same date range as mentioned earlier.

Link to my Tableau Public map: https://public.tableau.com/profile/swetha8500#!/vizhome/Salian_Swetha_Geoviz/Dashboard1

Data

I chose to acquire data from WHO (World Health Organization) because of the reputable research and their outreach globally. The global literature cited in the WHO COVID-19 database is updated daily from searches of bibliographic databases, hand searching, and the addition of other expert-referred scientific articles.

The data for this project is a .csv file that has a list of new & cumulative cases, new and cumulative deaths, sorted by country and reported date from January 1 through November 15. This list consists of data from 236 countries, territories and areas and a total of 72966 data entries for the year. For my analysis, I had a time lapse map of cases for the year, for which I used Cumulative_cases column. For the graphs representing weekly death count as well as top 10 countries by death count, I used New_deaths column.

Creating a Dashboard in Tableau Desktop

Tableau is a data visualization software which is fairly easy to use with minimum coding skills. It is also a great tool for importing large data and has the option for a variety of data to be imported as shown in the image below.

The .csv file imported opens up on the Data Source tab. There are options to open a New Worksheet and this is where we start creating all the visualizations separately and the last step would be to bring them all into a Dashboard tab.

In the side bar displayed on the left, there are Dimensions and Measures. Tableau is intelligent to generate longitude and latitude by country names. Rows and Columns are automatically filled in with coordinates when Country is added. In the Pages section, drag Date reported and this can be filtered by how you want to display the data, I chose weekly reported. In Marks section, drag and drop Category from Dimensions into Color and Cumulative Cases into Size and change the measure to sum.

By adding Date reported to Pages, it generates a Time Slider, which enables you to automatically play, choose a particular date and also set the speed setting to slow, medium or fast. The Category value generated a range for the number of cases reported weekly, which is what is shown as the changing colors on the map. Highlight country gives you an option to search for a particular country you want to view data for.

Create a new Dashboard and import the sheets that you have worked on and create a visual story. you have the option to add text, borders, background color, etc. to enhance the data.

As shown below, this is the static representation of the dashboard, which displays the weekly reported cases on the map and weekly reported deaths on the graph.

To publish to an online public portal follow the steps as shown below.

Limitations

As I was collecting data from the World Health Organization, I realized I couldn’t find comprehensive data on age groups and gender for cases or deaths. However, with the data I had, I was able to find a narrative for my story.

I had a hiccup while I was trying to publish to Tableau public from desktop. After creating an account online, I was getting an error on the desktop as shown below.

The solution to this is to go to the Data menu, scroll down to your data source, .csv files name in my case, and select Use Extract. Extracts are saved subsets of data that you can use to improve performance or to take advantage of Tableau functionality not available or supported in your original data. When you create an extract of your data, you can reduce the total amount of data by using filters and configuring other limits

Visualizing Toronto Fire Service Response

By: Remmy Zelaya

Geovis Project Assignment @RyersonGeo, SA8905, Fall 2019

CARTO is an online tool to create online maps, dashboards, and perform spatial analysis. Basic membership is free and no coding experience is required to get your maps online. I creating my project on visualizing Toronto Fire Service data entirely in CARTO. The embedded map is below or you can click here to see it in a new tab.

I’ll briefly explain how I created my map and how you can too.

Before we get to CARTO, we’ll need our data. The City of Toronto’s Open Data portal contains lots of free data on city services and life. From the portal I downloaded shapefiles of TFS stations and run areas (catchment areas for fire stations), and a CSV file of fire incidents.

Next create a CARTO account if you don’t already have one. Once logged in, the CARTO home page will have links to “Getting Started”, “New Map”, and “New dataset.” The Getting Started page is an excellent tutorial on CARTO for first time users.

Before we start making a map, we will need to upload our data. Click “new dataset” and follow the prompts. Note, CARTO requires shapefiles to be archived in a ZIP file.

Once that is done, click on “new map” and add your uploaded datasets. CARTO will add your datasets as layers to the map, zoom to layer extent, and automatically create a point layer out of the CSV file.

The map is on the right side of the screen and a control panel with a list of the uploaded layers is on the right. From here we can do a couple of things;

Re-title our map by double clicking on the default title
Rearrange our layers by dragging and dropping. Layer order determines drawing order. Rearrange the layers so that the stations and incidents points are on top of the run area polygon.
Change the base map. I’ve used Positon Lite for a simple and clean look. Note, CARTO has options to import base maps and styles from other site, or to create your own.
Click on the layer card to bring up that layer’s options menu.

Let’s click on the fire stations layer. As with the map we can rename the layer by double clicking on the name. The layer menu has five panes, Data, Analysis, Style, Pop-Up, Legend. The Style pane will be selected by default. The first section of the Style pane is aggregation, which is useful for visualizing dense point layers. We’ll keep the default aggregation of By Point. Section 2 Style controls the appearance of the layer. I’ve changed my point colour to black and increased the size to 12. I need the stations to stand out from the incident points.

Now with the incidents layer, I decided to use the Animation aggregation option. If the point layer has a column representing time, we can use this to create an animation of the points appearing on the map over time. This option creates a time slider widget at the bottom of the map with a histogram representing the amount of fires over time.

With the run areas, I decided to create a choropleth map where run areas with higher amount of incidents would appear darker on the map. To do this, I first need to determine how many incidents points fall into each run area. Go to the run area menu, click on Analysis, then “+Add New Analysis.” CARTO will navigate to a new page with a grid of its spatial analysis options. Click on “Intersect and Aggregate” which finds “overlapping geometries from a second layer and aggregate its values in the current layer.”

CARTO will navigate back to the Analysis pane of the run area menu and display options for the analysis. Run area should already be selected under Base Layer. Choose incidents as the target layer, and under Measure By select count. CARTO will display a message stating new columns have been added to the data, count_vals and count_vals_density.

There will be an option to style the analysis. Click on it. Choose “by value” for Polygon Colour, and choose the new count_vals_density for Column, then select an appropriate colour scheme.

CARTO’s widget feature creates small boxes on the right of the map with useful charts and stats on our data. You click on the Widgets pane to start add new widgets from a grid (as with Analysis) or can add new widgets based on a specific layer from that layer’s Data pane. CARTO has four types of widgets;

Category creates a horizontal bar chart measuring how many features fit into a category. This widget also allows users to filter data on the map by category.
Histogram creates a histogram measuring a selected variable
Formula displays a statistic on the data based on a selected formula
Time Series animates a layers according to its time information.

As with layers, clicking on a widget brings up its option menu. From here you can change the source data layer, the widget type, and configure data values. For my Fires by Run Area widget, I used the incidents layer as the source, aggregated by id_station (fire station ID numbers) using the count operation. This widget counts how many incidents each station responded to and displays a bar chart of the top 5 stations. Clicking on a station in the bar chart will filter the incidents by the associated station. After this, I added four formula based widgets.

We’re nearly done. Click on the “publish” button on the bottom left to publish the map to the web. CARTO will provide a link for other users to see the map and an HTML embed code to add it to a web page. I used the embed code to added the embedded map to the beginning of the post.

Thanks for reading. I hope you’ll use CARTO to create some nice maps of your own. You may be interested in checking out the CARTO blog to see other projects built on the platform or the Help section for my information on building your own maps and applications.

The Cooling Effect of the 1991 Eruption of Mount Pinatubo, Philippines

By Clarisse Reyna

Geovis Course Assignment, SA8905, Fall 2015 (Rinner)

This is a time series map showing interpolated temperature change. Mount Pinatubo is located in the island of Luzon, Philippines. It erupted in 1991, which marked the second largest volcanic eruption in the 20th century. This caused a cooling effect as it released significant amounts of volcanic gases, aerosols and ash that increases albedo. This means that there is an increase in solar radiation being reflected, which decreases the amount of solar radiation reaching the troposphere and the surface. Since there is less solar radiation at the troposphere and the surface, it causes a temperature decrease. This is exactly what took place when Mount Pinatubo erupted in 1991. After the eruption, there was an observed surface cooling that took place in the Northern Hemisphere of around 0.5 to 0.6 degrees Celsius (Self et al. 1999).

In this time series map, interpolated temperatures in the Philippines from 1988 to 1995 is presented. What you should be able to see is that as time passes after the eruption (1991), there is a significant increase in blue areas which indicate lower temperatures. Originally, the years included would have been from 1985 to 1995. However, there are unusually low temperatures in 1987. In fact, the lowest ever recorded temperature in Manila was on February 4, 1987, with a temperature of 15.1 degrees Celsius. As you can see in the picture below, 1987 has large blue areas, indicating low temperatures. This may cause confusion when viewing the final time series visualization, so it was omitted from the final geovisualization project.

The purpose of including temperatures before the eruption in 1991 is so that the viewer is able to see temperature trends before the cooling occurred. This allows viewers to compare temperature trends before the eruption to temperature trends after the eruption. The years included went up to 1995 because this was the last average temperature where it shows decreasing temperatures from 1991 in most of the cities.

The temperature data in this time series geovisualization were taken from a website called Weather Spark. The data taken from this source was yearly temperature averages from 1988 to 1995 in the Philippine cities of Aparri, Batangas, Bohol, Catarman, Coron, Manila, Davao, Lapu Lapu, Pasig, El Nido, Legazpi, and Pagudpud. Temperature data for the city of Boracay was not available so the province of Malay was used in place of it. Another province used was Bulacan. These areas are very spread apart in the Philippines. Therefore this gives a more accurate representation of temperature patterns during interpolation since the data points are spread apart and covers each part of the country. Lastly, the Philippine boundary shapefile was taken from a website called PhilGIS.

The technology used for this time series visualization was Time Slider, which is available in ArcMap (in versions ArcGIS 10.0 and up). For each year, the data taken from Weather Spark for each city or province was interpolated using the Inverse Distance Weighted method. Therefore, a raster was created for every year. Since there are eight years that are being included in this visualization, eight rasters were created. After creating an interpolation raster for each year, a raster catalog was created, and each of these rasters were added onto the raster catalog. After the rasters were added, time was enabled on the raster catalog layer.

When time is enabled on a layer, ArcMap allows you to use the Time Slider tool to create the time series visualization. This time slider tool allows you to preview what the time series visualization will look like. You can then export the time series visualization to an .avi file by clicking on the icon circled in red in the picture below.

References

Country Boundary. (2013). In PhilGIS. Retrieved from http://philgis.org/freegisdata.htm

Historical Weather. In WeatherSpark Beta. Retrieved from https://weatherspark.com/

Self, S., Zhao, J., Holasek, R., Torres, R., & King, A. (1999). The Atmospheric Impact of the 1991 Mount Pinatubo Eruption. U.S. Geological Survey.