T.Orientation: Colouring the Grids of Toronto

By Boris Gusev, Geovis Course Assignment, SA8905, Fall 2015 (Rinner)


The way in which we settle the land around us can paint a rich picture of how our cities have developed over years.  By the turn of the 19th century, urban planners generally agreed that grid-like patterns were the optimal solution and held the most promise for the future of transit. Physical planning led to the development of automotive cities like Los Angeles, Chicago and Detroit. Toronto’s history of growth can also be traced through its sprawling grid of roads.

In this visualization, a MapZen extract of OpenStreetMap road network was used to represent the compass-heading-based orientation of  Toronto roads. Streets that are orthogonal, meaning that they intersect at a right angle, are assigned the same colours. At a 90 degree angle, the streets are coloured with the darkest shades of orange or blue, decreasing in intensity as the intersection angle becomes more obtuse.

Follow the link to take a look at: Toronto Streets by Orientation


More exciting details and a DIY guide under the cut. Kudos to Stephen Von Worley at Data Pointed for the inspiration and Mathieu Rajerison at Data & GIS Tips for the script and a great how-to.


Map legend, showing colours based on oroentation
Map legend, showing colours based on orientation

In the online version of this project, use the buttons at the top left to activate/deactivate the orientation layer, centre the map extent on Toronto and add street and area labels. The legend at the bottom right represent the colours each street was assigned based on its orientation in space.

Follow the step by step guide below if you want to add some colour to your own city. To replicate this project, a handful of software packages will need to be used. Having access to an ArcGIS license, I chose to run some of the processes in ArcMap, but those can also be performed using open-source software at no cost to the user. However, be prepared to at the very least use QGIS, an R interface of your choosing, as well as GDAL and a webmapping engine if you want to make your results interactive.

And so, without further ado:

(1) Download the data. MapZen’s Metro Extracts is where my data comes from, but any shapefile of a road network will do.

(2) Install R and its accompanying libraries, get an interface (RStudio is a great free option) and run the script at the bottom of this page. I suggest ending the code after the #VECTOR section and proceeding with a desktop solution. Take a moment to read through the whole post for a great discussion of what the script does and why we’ll be using this specific color ramp.

Use this section of the script
Use this section of the script
Interpolated ang values, mosaiced from 9 tiles
Interpolated ang values, mosaiced from 9 tiles

(3) The output of the script loses its geographic reference, and needs to have its coordinate system redefined to be the same as the input.

(4) Interpolate the line features you got from last step based on the ang values. I used Topo to Raster tool in Arc, but in the absence of such, Interpolation plugin in QGIS will also work. Note that  depending on the size of your geography, you may want to split the road network into tiles for faster processing.

(5) Import the roads shapefile and your interpolated raster into QGIS to superimpose the layers.  Put the raster over top of a gray-coloured road vector and set your project background to near black (it is important for another step that the RGB values for your background are at least 1,1,1). Set the blending mode to overlay for the raster and decrease its brightness, add outer glow and blur draw effects for the vector.

Feel free to use your own colours
Feel free to use your own colours

(6) Select a colour scheme you want to create. Classifying your raster using an even number of equal intervals is easiest, but you can also manually set the breaks. Your color scheme should look something like this, with the colors diverging exactly at the midpoint of your values.

(7) Use the print composer to export the resulting layer composition as a referenced image. Use the highest dpi setting you can, without hitting memory overflow (I was able to export this image at 2000dpi).

(8) Congratulations! You now have a ready to print map. Follow further along for webmap integration.

(9) The resulting image should be a fairly large raster, so to efficiently display it in a web browser we will tile the image according to TMS standards. Download GDAL in case you didn’t get it with QGIS. Install an instance of Python into the OSGEO4W64 folder to get the correct bindings ( C:\OSGeo4W64\apps\Python27  in my case). Open the OSGEO4W Shell, change your working directory and type in the following command:

gdal2tiles.py -r antialias -z 0-15 -a 0,0,0 raster.tif

where -z is the zoom range you want the tiles to be created for and raster.tif is the name of the image you want to tile. For full usage of gdal2tiles refer to this documentation.


(10) Use a mapping engine of your choice to display the tiles. In case you don’t have any experience with HTML or Java, Gdal2tiles also produces an overview of the tiles you created, which can be used as a simple locally hosted webmap.


Enjoy your results! Print the map and hang it over your couch for a great conversation starter or share it with your friends and colleagues by creating a web app.