Geovis Project Assignment @RyersonGeo, SA8905, Fall 2021
Introduction/ background
Every city has zoning bylaws that dictate land use. Most cities, including the City of Toronto, have zoning bylaws that set building height limits for different zoning areas. Sometimes, buildings are built above the height limit, either due to development agreements or grandfathering of buildings (when a new zoning by-law doesn’t apply to existing buildings). The aim of this project is to provide a visualization tool for assessing which buildings in Toronto are within the zoning height limits and which are not.
Data and Processing
3D Buildings
The 3D building data was retrieved from Toronto Open Data and derived using the following methods:
LiDAR (2015)
Site Plans – building permit site plan drawings
Oblique Aerials – oblique aerial photos and “street view” photos accessible in Pictometry, Google Earth, and Google Maps.
3DMode – digital 3D model provided by the developer
Zoning Bylaws
Two zoning Bylaw shapefiles were used (retrieved from Toronto Open Data as well):
Building Heights Limits – spatially joined (buildings within zoning area) to the 3D buildings to create the symbology shown on the map. Categories were calculated using the max average building height (3D data) and zoning height limit (zoning bylaws).
Zoning Categories – used to gain additional information and investigate how or why buildings went over the zoning height limit.
Geovisualization
ArcGIS experience builder was used to visualize the data. A local scene with the relevant data was uploaded as a web scene and chosen as the data source for the interactive map in the “Experience”. The map includes the following aspects: Legend showing the zoning and height categories, a layer list allowing users to toggle the zoning category layer on to for further exploration of the data, and a “Filter by Height Category” tool that allows users to view buildings within a selected height category. Pop-ups are enabled for individual buildings and zones for additional information. Some zones include bylaw expectations which may explain why some of the buildings within them are allowed to be above the zoning height limit (only an exception code is provided, a google search is required to gain a better understanding). instructions and details about the map are provided to the user as well.
Limitations
The main limitation of this project is insufficient data – a lack of either building height or zoning height results in a category of “No data” which are displayed as grey buildings. Another limitation is possibly the accuracy of the data, as LiDAR data can sometimes be off and provide wrong estimates of building height. Inaccuracies within 1m were solved by adding an additional category, but there may be some inaccuracies beyond
This index seeks to delineate areas within the Greater Toronto Area that are characterized as being in close proximity to greenery and wellness entities.
From Green Trees With Red Line, by Justin, June 28th 2021. https://www.pexels.com/photo/food-wood-landscape-nature-8771130/
In this model, greenery and wellness entities are considered as those that are wooded, in some cases recreational, and offer potentially efficient transportation opportunities. Here, distance metrics are created and joined to census geography to create a novel planning tool for planners and interested researchers.
ArcGIS Dashboard – Toronto Greenery & Transit Wellness Index
Data Sources
The variables chosen for this model are spatial statistics that are available for an area the size of the Greater Toronto Area. More nuanced spatial databases are available at the city level, though, anecdotally, it can prove difficult to find similar data sets across the municipalities’ open data portals.
Greater Toronto Area (GTA)
created by DMTI Spatial Inc. on August 15th, 2012.
Federal Electoral Districts (FEDs)
created by Statistics Canada on November 16th, 2016.
clipped to the GTA boundary
Land Use Cover
created by DMTI Spatial Inc. on September 15th, 2020.
‘Park’s and Recreation’ vectors selected and exported.
Transit Line
created by DMTI Spatial Inc. on September 15th, 2020.
detailed polylines of all available transit options in the GTA.
Wooded Area
created by the Ontario Ministry of Natural Resources on September 1st, 2006.
a woodland data set.
Trails Line
created by DMTI Spatial Inc. on April 1st, 2015.
polylines of walking, hiking, and biking trails.
Methodology
The methodology for this analysis is quite straightforward. Firstly, Distance Accumulation is used in ArcGIS’s toolbox – an improved version of Euclidean Distance that is now found in ArcGIS Pro.
A Distance Accumulation raster is created for each of the spatial entities.
The resulting Distance Accumulation raster.
After the process, the cells of each raster are converted into points so that they may be normalized to a range of 0 to 1.
Raster to Point Geoprocessing tool.
The resulting Raster to Points layer.
Lastly, the FED cartographic boundary file is clipped to the GTA boundary file, and then the values of these points are spatially joined to the vectors. Ultimately, the mean values of the points contained within each polygon are retained.
Proximity to wooded areas is weighted 50%,
parks and recreational areas – 25%,
trails – 15%,
and public transit lines – 10%.
The variables are weighted and combined linearly in the final Greenery and Transit Wellness Index. The dashboard allows the user to select and view the Greenery and Transit wellness statistics of any FED within the GTA. On the left side of the window one can see a graph of each factor grouped by FED.
Zooming into, or selecting any FED on the map, or list on the right side of the screen changes the features of the graph. Finally, on the bottom right of the dashboard, a legend with the choropleth’s colour classification scheme can be found in the first tab . The second tab details the statistics of user selected FED’s, while the third lists this project’s data sources.
Literature
The methodology of this assignment is based off the following literature where links between access to green space and health outcomes are explored.
Markevych, I., Schoierer, J., Hartig, T., Chudnovsky, A., Hystad, P., Dzhambov, A. M., de Vries, S., Triguero-Mas, M., Brauer, M., Nieuwenhuijsen, M. J., Lupp, G., Richardson, E. A., Astell-Burt, T., Dimitrova, D., Feng, X., Sadeh, M., Standl, M., Heinrich, J., & Fuertes, E. (2017). Exploring pathways linking greenspace to health: Theoretical and methodological guidance. Environmental Research, 158, 301-317. https://doi.org/10.1016/j.envres.2017.06.028
Twohig-Bennett, C., & Jones, A. (2018). The health benefits of the great outdoors: A systematic review and meta-analysis of greenspace exposure and health outcomes. Environmental Research, 166, 628-637. https://doi.org/10.1016/j.envres.2018.06.030
O’Regan, A. C., Hunter, R. F., & Nyhan, M. M. (2021). “Biophilic cities”: Quantifying the impact of google street view-derived greenspace exposures on socioeconomic factors and self-reported health. Environmental Science & Technology, 55(13), 9063-9073. https://doi.org/10.1021/acs.est.1c01326
Roberts, M., Irvine, K. N., & McVittie, A. (2021). Associations between greenspace and mental health prescription rates in urban areas. Urban Forestry & Urban Greening, 64, 127301. https://doi.org/10.1016/j.ufug.2021.127301
Data Bibliography
Greater Toronto Area (GTA) Boundary
DMTI Spatial Inc. (2012, Aug 15). Greater Toronto Area (GTA) Boundary. Scholar’s Geoportal. http://geo.scholarsportal.info.ezproxy.lib.ryerson.ca/#r/details/_uri@=41643035
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 finished basemap in Mapbox Studio
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!
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.
Geovis Project Assignment @RyersonGeo, SA8905, Fall 2021
Introduction
The crime rate for the city of Chicago is significantly higher than the US average. In 2016, Chicago was responsible for nearly half of the homicides increase in the US.
A time series interactive dashboard will be used to visualize and analyze the distribution of homicides across Chicago for the last two decades. We will create this dashboard using Tableau Desktop, which is an interactive data visualization and analytical tool. In addition to the dashboard, we will create two visualizations: treemap and line chart. Treemap will be used to visualize aggregated homicides across police districts. The line chart will visualize the number of homicides per month.
Data
The data used to produce the Interactive Dashboard was obtained from the Chicago Data Portal. The dataset consists of 7,424,694 crimes between 2001 to 2021. However, since our crime is focused on homicides, the data was filtered by setting the field Prime Type to be equal to HOMICIDE and then the data was downloaded as a CSV file.
I will go through the step-by-step process of creating the time-series interactive dashboard, the dashboard can be viewed here for reference.
Creating the Interactive Dashboard
To get started on creating the interactive dashboard and the visualizations. We will first import the data, since our dataset is in a CSV format we will select the Text File under the To a File Option. After opening the data, you will see a screen showing all the fields in the CSV file and on the bottom left beside Data Source, you will see a tab called Sheet 1 (highlighted in orange), we will click on it to begin the process of creating the dashboard. The Worksheet tabs will be used to create the map and visualizations and the Dashboard tab will be used to create the dashboard.
In order to create a dot density map showing homicides across Chicago, we need to plot the latitude and longitude coordinates for each homicide. We do this by dragging the Longitude field into the Columns tab and the Latitude field into the Rows tab. We then set both fields to Dimension, by right-clicking on the fields. A map will automatically be created however, there are two minor issues with the map, shown below.
Our map shows 1 null point (displayed on the bottom right of the map) and there is a random point in Missouri.
In order to fix these issues, we will first remove the null point by clicking on 1 null and selecting the Filter Data. To remove the random point located in Missouri, we will right-click on the point and select Exclude. This will remove the point from the map, and our map extent will automatically zoom to the Chicago area.
Creating Time-series Map
To create the time-series map, we will drag the Year field into the Pages card. This will create a time slider that will allow you to view the dot density map for any chosen year. The time slider also allows the user to animate the map, by clicking on the loop button and the animation can be paused at any time.
For our dot density map, we will show specific attributes for each homicide location on the map. This can be accomplished by dragging the fields into the Marks card. For our map, we will show the following fields: Block, Description, District, Location Description, and Date.
To make our map look aesthetic, we will change the theme of our map to Dark. This can be done by going to the header Map, hovering over to Background Map, and selecting Dark. To better visualize the locations of the data points, we will add zip code boundaries to the map. To do this, we will go to the header Map and from there we will choose Map Layers and then select the Zip Code Boundaries under the Map Layers pane (this will appear on the left side of the sheet). Lastly, we are going to change the colour and size of the data points. This can be done by going to the Marks card and selecting the Color and Size option.
Visualizations
Treemap
We will now create the visualizations to better understand the distribution of homicides in Chicago. To begin the process, we will create a new Worksheet and we will name it Treemap. To create a treemap, we will first drag the Year field into the Page card, as we are creating a time-series interactive map. Since we want to see how homicides vary across police districts, we will drag the District field into the Marks card. To show the homicides, we will drag the Primary Type field onto both the Color and Size options in the Marks card. We will then set the Primary Type field to Measure and choose Count, as we want to show aggregated homicides. The final step is to make our worksheet transparent, so we could add it to our interactive map. This is done by going to the header Format and selecting Shading. In the Formatting pane, we will set the Worksheet and Pane background colour to None.
Line Chart
We will create a new Worksheet and name it chart. Our data does not contain the month the incident occurred, but we have the Date when the incident occurred. So, in order to extract just the month, we will need to create a new field. This can be done by going to the Analysis header and choosing Create Calculated Field. We will give the field an appropriate name, change the name Calculation1 to MonthOfIncident. To extract the month we first need to truncate the Date field, as it contains both the date and time. We will use the LEFT function which allows us to truncate a string type specified by the length. The date consists of 10 characters (dd/mm/yyyy), so our query would be LEFT([Date], 10). Next, we need to extract the month from the truncated string, so we will use the built-in function, called MONTH, which returns a number representing the month. However, the MONTH function requires its parameter data type to be a date. So we need to convert our truncated string date to date, we can do this by applying the DATE function on the LEFT function and finally applying the MONTH function on the entire expression. Thus our expression for finding the month is:
Now, we can finally begin the process of creating the line chart. As we are making a time-series interactive map, we will also need to make a time-series line chart. So, we will drag the Year field into the Pages card, as this will be part of our time-series interactive map. Next, we will drag the MonthOfIncident field into the Columns tab and Primary Type into the Rows tab. Since we want to show the total number of homicides, we will set the Primary Type field to Measure and select Count. We will make this worksheet transparent as well, so we will go to the header Format and select Shading. In the Formatting pane, we will set the Worksheet and Pane background colour to None.
Creating the Dashboard
To create our dashboard, we will click on the Dashboard tab, right beside the Worksheet tab. In the dashboard, we can add all the worksheets we have created. We will first add the interactive map followed by the visualizations. To display the visualizations on top of the map, we need to make them float. So, we will select one of the visualizations and hover over to More Options (shown as a downward arrow) and click on Floating, repeat this process for the other visualization. You can also change the size of the dashboard by going to the Size pane, the default size is Desktop Browser (1000 x 800), we will change it to Generic Desktop (1366 x 788). Last but not least, we will publish this dashboard, by going to the Server -> Tableau Public -> Save to Tableau Public As. Tableau Public allows anyone to view the dashboard and allow anyone to download it and specific permissions for the dashboard can be applied.
Limitations and Future Goals
One of the main limitations that occurred during the process of creating the dashboard was gathering the data. First, I had downloaded the entire CSV file containing all different types of crimes. However, when I filtered the Primary Type to HOMICIDE in the Filters card, a huge amount of data for homicides was missing. So, I then decided to directly connect the dataset to Tableau using ODATA Server. It took me a couple hours to connect to the server, just to run into the same issue. I then tried exporting the data through SODA API from the portal, I was able to find raw data for homicides however, it contained partial data. After a while, I figured out I had to directly filter the table in the Chicago Data Portal in order to download the entire data for Chicago homicides.
Another limitation I faced with the data was creating the visualizations. Originally I intended on creating a highlight table to show how homicides varied across police districts and community areas. However, due to the data having null values for community areas, the visualization couldn’t be created. Furthermore, I was only able to create basic visualizations, as the data did not have any interesting variables to help analyze the homicide distribution. For instance, if each homicide incident included a Zip Code, it could have been used to explain the spatial pattern much better rather than using police districts to show how homicides vary across it.
If I was to expand on this project, I would try to incorporate all different crime incidents from 2001-2021 to see Chicago’s overall crime history. In addition to this, I would find demographic data for Chicago such as population, education, and average family income to help understand the spatial pattern for the distribution of crimes.
