Tag: Choropleth

Creating a Toronto City Ward Model Using Laser Cut Acrylic

by Selasi Dorkenoo

SA8905 Cartography and Geovisualization Fall 2018

To better understand characteristics of the new municipal electoral wards in the City of Toronto, the new 25-ward boundary shapefile provided by the City of Toronto was converted to vector format and laser cut into five translucent sheets of acrylic. Each piece is engraved with the ward ID. Laser cutting allows the puzzle to not only fit together with precision, but also visualized the demographic census data using redundant symbology: opacity (lightness) and height.

Ward boundaries were retrieved from Toronto Open Data Catalogue and imported into ArcGIS Desktop. The model was designed to be cut into 16 in x 8.5 in sheets of 3mm acrylic, including legend items and a scale bar. Features in black (below) represent pieces that were laser cut and features in red represent laser engraving on a piece. Using layout view, the design was exported as a vector (.ai) file and sent to Hot Pop Factory for their laser cutting services.

Once the acrylic was cut, a magnet was super-glued to each piece below the engraved ward IDs. The magnets used were about 6mm in diameter and 2mm in thickness. Magnets were also attached to the scale bar and legend items. Using a magnetic white board as a base for the model, the pieces were stacked and the model itself was complete.


Demographic data at the ward level was retrieved from Toronto Open Data Catalogue as well. Once joined to the ward boundary file, a set of choropleth maps including population density, visible minorities, unemployment rate and average personal income were created. A maximum of five bins can be used to classify the data in each map since only five sheets of acrylic were laser cut for the model.

A catalogue of these maps was printed and packaged with the ward model. Users can browse through the catalogue and select which variable they wish to map. Using dry erase markers they can write the necessary cartographic elements on the mapped area (i.e. legend labels and title).

Building Visualizations Using D3

By Jessica Whitehead, Geovis Course Assignment, SA8905, Fall 2015 (Rinner)

“D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.” 

d3js.org

OVERVIEW: D3 has a steep learning curve and for someone who has only dabbled in html and css, it did not come easy. Fortunately there is a growing community of D3 and javascript geniuses online, allowing relatively inexperienced programmers, like myself, to piece together chunks of code and create something (surprisingly) visually-pleasing and informative.

THE DATA

I decided to stick with a simple dataset. The World Food Programme (WFP) maintains an online database of international food aid deliveries that can generate reports and tables based on the variables chosen by the user. For this project I looked at food aid deliveries in the year 2012 and produced 3 separate tables that would translate well into data visualizations.

  1. The first table was an overview of international food aid deliveries. It provided the total amount delivered for the the year, as well as breaking it down by food aid types and delivery modes.
  2. The second table summarized all recipient countries, the metric tons received, and for which food aid type. I reduced the dataset by focusing on the top 15 recipient countries.
  3. The third table summarized all donor countries, the metric tons donated, and to which countries it was delivered. I reduced the dataset by focusing on the top 15 donor countries and amalgamating the recipient countries into regions using categories specified on the WFP website.*

*As this project had a geospatial focus, I did not include donors that were not countries, such as the UN or private organizations.

THE CREATIVE PROCESS

So, back to D3. Looking at my data tables, I started exploring the wide array of examples available on the D3.org and GitHub websites. It was important that I found codes that could incorporate my data, either within the code or through .csv file.

Dancing BubblesEventually I found the “dancing bubbles” example and thought this would be an interesting way to show the different types of food aid and delivery modes. I was able to download the code off GitHub, however, it included hundreds of additional files that were unnecessary. As a D3 novice, I did not realize most of the files were irrelevant for a long time.
Source code: http://vallandingham.me/bubble_charts_in_d3.html

To show dashboardthe top 15 recipients I liked the idea of an interactive dashboard. This would allow the user to hover over a country and see a breakdown by food category. For example, North Korea received 372,555 mt of food in 2012 and all deliveries were for emergency purposes.
Source code: http://bl.ocks.org/NPashaP/96447623ef4d342ee09b

mapitTo show the top 15 donors I wanted to create a choropleth map that would produce a donut graph of receiving regions when hovering over each donor country. This proved to be very difficult, so for this project I ended up creating  the map and donut infographic separately.
Source code: http://bl.ocks.org/mbostock/3888852

THE CODING

interactivedatacoverA very useful resource I found was a book called Interactive Data Visualization for the Web written by Scott Murray and is available online for free at Interactive Data Visualization Text

It provides you with all the information required to get started with D3, explaining everything from web fundamentals to D3 setup and creating a web server. Most browsers have issues when interpreting D3 on your local computer, so it is necessary to set up a local web server to view your output.

A very brief look at how D3 works

Essentially you have to download the D3 library and store in a “js” javascript folder in the home directory of your website. Screen Shot 2015-11-18 at 4.34.46 AM Here you will also have folders for css (the style code that makes your visualizations look cool), data (the csv and GeoJson files that give meaning to your visualizations and shape your maps), and index html file (home page of your website).Screen Shot 2015-11-18 at 4.43.24 AM

You start off with a simple index html file and reference the D3 library in the head of your html. Your actual script will go in the body so that it can append items into the Document Object Model (DOM). The DOM is essentially the structure of your html document. D3 uses javascript to then bind your csv and Json files to SVG elements in the DOM. These SVG objects can range from simple rectangles forming bar charts to extremely complicated interactive visualizations.

TOP 3 THINGS ABOUT D3

  1. Web-based – so people can easily access and view the visualizations you spend so long creating.
  2. You are not limited by pre-built charts – endless room for creativity.
  3. D3 programmers seem to be pretty generous when uploading their codes to the web. There is wide variety of open source codes available online to manipulate.

END PRODUCT

If you would like to see the final product please see below
http://www.jwdataviz.ca/sa8905-geovis/