Audrey Weidenfelder
Geovis Project Assignment @RyersonGeo, SA8905, Fall 2016
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