Visualizing Spatial Distribution of SARS in Carto

by Cheuk Ying Lee (Damita)
Geovis Project Assignment @RyersonGeo, SA8905, Fall 2019

Project Link: https://c14lee.carto.com/builder/5ebe8c01-fb32-40bf-9cae-3b5f7326d02b/embed

Background
In 2003, there was a SARS (Severe Acute Respiratory Syndrome) outbreak in Southern China. The first cases were reported in Guangdong, China and quickly spread to other countries via air travel. I experienced all the preventive measures taken and school suspension, yet too young to realize the scale of the outbreak worldwide.

Technology
CARTO is used to visualize the spatial distribution of SARS cases by countries and by time. CARTO is a software as a service cloud computing platform that enables analysis and visualization of spatial data. CARTO requires a monthly subscription fee, however, a free account is available for students. With CARTO, a dashboard (incorporating interactive maps, widgets, selective layers) can be created.

Data
The data were obtained from World Health Organization under SARS (available here). Two datasets were used. The first dataset was compiled, containing information in the number of cumulative cases and cumulative deaths of each affected country, listed by dates, from March 17 to July 11, 2003. The second dataset was a summary table of SARS cases by countries, containing total SARS cases by sex, age range, number deaths, number of recovery, percentage of affected healthcare worker etc. The data were organized and entered into a spreadsheet in Microsoft Excel. Data cleaning and data processing were performed using text functions in excel. This is primarily done to removing the superscripts after the country names such that the software can recognize, as well as changing the data types from string to numbers.

Figure 1. Screenshot of the issues in the country names that have to be processed before uploading it to CARTO.

After trials of connecting the database to CARTO, it was found that CARTO only recognized “Hong Kong”, “Macau” and “Taiwan” as country names, therefore unnecessary characters have to be removed. After cleaning the data, the two datasets were then uploaded and connected to CARTO. If the country names can be recognized, the datasets will then automatically contain spatial information. The two datasets now in CARTO appear as follows:

Figure 2. Screenshot of the dataset containing the cumulative number of cases and deaths for each country by date.

Figure 3. Screenshot of the dataset containing the summary of SARS cases for each affected country.

Figure 4. Screenshot of the page to connect datasets to CARTO. A variety of file formats are accepted.

METHOD
After datasets have been connected to CARTO, layers and widgets can be added. First, layers were added simply by clicking “ADD NEW LAYER” and choosing the datasets. After the layer was successfully added, data were ready to be mapped out. To create a choropleth map of the number of SARS cases, choose the layer and under STYLE, specify the polygon colour to “by value” and select the fields and colour scheme to be displayed.

Figure 5. Screenshot showing the settings of creating a choropleth map.

Countries are recognized as polygons in CARTO. In order to create a graduated symbol map showing number of SARS cases, centroids of each country has to be computed first. This was done by adding a new analysis of “Create Centroids of Geometries”. After that, under STYLE, specify the point size and point colour to “by value” and select the field and colour scheme.

Figure 6. Sets of screenshots showing steps to create centroids of polygons. Click on the layer and under ANALYSIS, add new analysis which brings you to a list of available analysis.


Animation was also created to show SARS-affected countries affected by dates. Under STYLE, “animated” was selected for aggregation. The figure below shows the properties that can be adjusted. Play around with the duration, steps, trails, and resolution, these will affect the appearance and smoothness of the animation.


Figure 7. Screenshot showing the settings for animation.

Figure 8. Screenshot showing all the layers used.

Widgets were added to enrich the content and information, along with the map itself. Widgets are interactive tools for users where displayed information can be controlled and explored by selecting targeted filters of interest. Widgets were added simply by clicking “ADD NEW WIDGETS” and selecting the fields to be presented in the widget. Most of them were chosen to be displayed in category type. For each category type widget, data has to be configured by selecting the field that the widget will be aggregated by, for most of them, they are aggregated by country, showing the information of widget by countries. Lastly, the animation was accompanied by a time series type widget.

Figure 9. Sets of screenshots showing the steps and settings to create new widgets.

Figure 10. A screenshot of some of the widgets I incorporated.

FINAL PROJECT

The dashboard includes an interactive map and several widgets where users can play around with the different layers, pop-up information, widgets and time-series animation. Widgets information changed along with a change in the map view. Widgets can be expanded and collapsed depending on the user’s preference.

LIMITATION
For the dataset of SARS accumulated cases by dates, some dates were not available, which can affect the smoothness of the animation. In fact, the earliest reported SARS cases happened before March 17 (earliest date of statistics available on WHO). Although the statistics still included information before March 17, the timeline of how SARS was spread before March 17 was not available. In addition, there were some inconsistencies in the data. The data provided at earlier dates contain less information, including only accumulated cases and deaths of each affected country. However, data provided at later dates contain new information, such as new cases since last reported date and number of recovery, which was not used in the project in order to maintain consistency but otherwise could be useful in illustrating the topic and in telling a more comprehensive story.

CARTO only allows a maximum of 8 layers, which is adequate for this project, but this may possibly limit the comprehensiveness if used for other larger projects. The title is not available at the first glance of the dashboard and it is not able to show the whole title if it is too long. This could cause confusion since the topic is not specified clearly. Furthermore, the selective layers and legend cannot be minimized. This obscures part of the map, affecting users perception because it is not using all of its available space effectively. Lastly, the animation is only available for points but not polygons, which would otherwise be able to show the change in SARS cases (by colour) for each country by date (time-series animation of choropleth map) and increase functionality and effectiveness of the animation.

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.

Automobile Collisions Involving TTC Vehicles

Eric Lum
SA8905 Geovis Project, Fall 2019

Toronto is the largest metropolis in Canada, attracting people from far and wide. As such, there are many forms of transportation that pass through the city including cars, bicycles, public transit, regional trains and many more. The Toronto Transit Commission (TTC) is one of the main methods that people rely on, as millions ride their services each and every day. All of these forms of transportation must share the roads, and from time to time collisions occur. This project aims to animate collisions between TTC surface vehicles such as a bus or streetcar, with another form of transportation (not including pedestrians). This visualization will be on the web-mapping service Carto, where a time series map will be produced on the various TTC related collisions.

The collision data for this project was obtained from the Toronto Police open data portal. The “TTC Municipal Vehicle” dataset that was used is a subset of the “Killed and Seriously Injured” dataset, as these are the specific types of collisions that were collected. The data is available for the years 2008-2018, but only the past five years from 2014-2018 were used for the sample size of the project. Information on the collisions provided in the dataset include the latitude, longitude, intersection, vehicle collision type, time, date, year and neighbourhood it occurred in.

The first step of getting the time series web map to work is to create a map and import the data into Carto. The collisions data was downloaded from the Toronto Police as a .csv file, which can easily be uploaded to Carto. Other supporting data used for this map includes the City of Toronto boundary file retrieved from the City of Toronto open data portal and the TTC routes which were retrieved from Scholars Geoportal. In order for these shapefiles to be imported into Carto, they must either be uploaded as .ZIP files or converted to another supported format such as JSON file. Once all the data was ready, it was uploaded through the “Connect Dataset” label shown below.

The next step was to geocode the collision locations with the latitude and longitude provided in the collisions .csv file. This was done through Carto’s geocode feature shown below. To do this, the layer with the data was selected and the geocode option was chosen under the “Analysis” tab. The fields for latitude and longitude were then input.

Once geocoded, the “Aggregation” method for the data needed to be chosen. As this is a visualization project over a span of years, the time series option was chosen. The “Style” also needed to be set, referring to how the points would be displayed. The dataset contained information on the different vehicle types that were involved in the collisions, so the “point colour” was made different for each vehicle. These functions are both shown below.

The same “Style” method for visualization was also applied to the TTC Routes layer, as each type of transportation should be shown with a unique colour. The last part in animating the data is to choose the field for which the timer series is to be based on. The date field in the collisions .csv file was used in the “Widgets” function on Carto. This allows for all the data to be shown on a histogram for the entire time span.

To finalize the map, a legend and basemap were selected. Once happy with my map, I made it public by enabling the “Publish” option at the bottom of the interface. This generated a shareable link for anyone to view.

A snapshot of the final time series map is shown below.

Thank you for viewing my blog post!

To access the full web map on Carto, the link is provided here:

https://ericlum24.carto.com/builder/00c16070-d0b8-4efd-97db-42ad584b9e14/embed

Map Animation of Toronto’s Watermain Breaks (2015)

Audrey Weidenfelder
Geovis Project Assignment @RyersonGeo, SA8905, Fall 2016
mymap

For my geo-viz project, I wanted to create a map animation.  I decided to use CARTO, a web mapping application.

CARTO

CARTO is an open source web application software built on PostGIS and PostgreSQL open source spatial databases.  Users can manage data, run spatial analysis and design custom maps.  Within CARTO, there is an interface where SQL can be used to manipulate data, and a CartoCSS editor (a cartography language) to symbolize data.

CARTO has a tool called Torque that allows you to ‘bring your data to life’.  It’s good for mapping large data sets that have a time and/or date reference.  CARTO is well documented, and they offer guides and tutorials to assist users in their web mapping projects.  You can sign up for a free account here.  The free account is limited to 250Mb of storage after which charges apply.

The Process:  Connect to data, create new data set, add new column, symbolize

To create a map animation, simply connect to your data set either by dragging and dropping or browsing to your file.  If you don’t have data, you can search CARTO’s data library.  I had a file that I downloaded from the Toronto Open Data Catalogue.  I wanted to test CARTO’s claim that it can ‘bring large data sets to life’.  The file contained over 35,000 records of the city’s watermain breaks from 1990 to 2015.  I brought it into CARTO through the file browser, and in about 40 seconds all 35,000 point locations appeared in the map viewer.  From here, I explored the data, experimented with all the different visualization tools, and practised with CartoCSS to symbolize the data.

I decided to animate the 1,353 watermain breaks for 2015.  I had to filter the data set using a SQL statement to create a new data set containing only the 2015 breaks.  It’s easy to do using SQL.  You select from your table and column:

Select * from Breaks where Break_Year = 2015

CARTO asks if you wish to create a new data set from your selection – select ‘Yes’.  A new data set is created.  It will transfer your selected data into a new table along with the attributes associated with the selection.  You can keep the default table name or change the name of your table.  I re-named the table to ‘Watermain Breaks 2015’

From here, I wanted to organize the data by the seasons:  Spring, Summer, Winter and Fall.  This required creating a new column, selecting data according to the months and days of the season, entering the selected data into the column, and reassigning it a new name.

In data view, select ‘Add Column’ from the table designer, give it a name and a data type.  In this case I called it ‘Season’ and selected ‘String’ as the data type for text.  The next step was to update the column ‘Season’ based on values from the ‘Break_Date’ column that contained the dates of all breaks.  This was accomplished through the SQL Query editor, as so:

Update Watermain_Breaks _2015 set Season = ‘Spring’
where Break_Date >= ‘2015-03-21’ and Break_Date <= ‘2015-06-20’

The value of ‘Spring’ replaced the selected date range in the new column.  This was repeated for summer, fall and winter, substituting the appropriate date range for each season.

I then switched to the Category Wizard to symbolize this map layer.  Here you select the column you wish to symbolize.  I wasn’t pleased with the CARTO default symbolization, and there are were few options to choose from, so I used the CartoCSS editor to modify:

/** category visualization */
#breaks {
Marker-fill-opacity: 0.9;
Marker-placement: point;
Marker-type: ellipse;
Marker-width: 8;
Marker-allow-overlap: true;
}

#breaks[season=”Fall”] {
Marker-fill: #FF9900;
Marker-line-color: #FF9900
}

#breaks[season=”Spring”] {
Marker-fill: #229A00;
Marker-line-color: #229A00;
}

And so on …

To make the map layer interactive, I used the Infowindow designer in map view.  Here you can create pop-up windows based on a column in the table.  Options are available for a hover window or a clickable window.

Adding Layers

To add more interest to the map, I added the City of Toronto Neighbourhood boundaries so that the number of breaks per neighbourhood could be viewed.  I downloaded the shapefile from Toronto Open Data, connected the data set to my map and added it as a second layer.  I added info pop-ups, and changed the default symbolization with CartoCSS editor:

/** simple visualization */  #neighbourhoods_wgs84{
Polygon-fill: #FF6600;
Polygon-opacity: 0;
Line-color: #000000;
Line-width: 0.5;
Line-opacity: 1;
}

Animation

CARTO only allows animation on one map layer, and it does not permit info windows.  You also cannot copy a layer.  As such, I added a new layer by connecting to the watermain breaks data table, and then used the Torque Cat Wizard to animate the layer.

Animation is based on the column that contains either a date or time.  I selected the Break_Date column, and used CartoCSS editor to set the number of frames, duration of the animation, data aggregation to cumulative so that the points remained on the map, and then symbolized the data points to match the original watermain breaks layer.  A legend was then added to this layer.

CARTO has the option to add elements such as title, text boxes and images.  I added a title and a text box containing some facts about the city’s watermain breaks and pipe distribution.

The map animation can be viewed here .  Zoom in, pan around, find your neighbourhood, move the date slider, and select from the visible layers.

Note:  CARTO does not function well in Microsoft Edge