Population Projections across CYMH Service Areas, 2016-2041

Population Projections

Recently the Ministry of Finance updated its population projections for Ontario, 2016 – 2041. These population projections are organized into 4 different datasets:

  • projections for the whole province
  • projections for each census division
  • projections for each Local Health Integration Network (LHIN)
  • projections for each Ministry of Children and Youth Services’ Service Delivery Division (SDD) region

Each dataset includes population projections by age and gender.

From the population projections for each census division (CD), we have derived the population projections (summing projections for Males and Females) for each of the CYMH Service Areas, 2016 – 2041.

The result of our work is presented in one spreadsheet, that includes six worksheets:

  • Ages x Year (Base): Population projections for each Age between 0 – 24 years by Year
  • 0-18 x Year: Population projections for the total number of 0 – 18 year old children and youth by Year
  • 0-24 x Year: Population projections for the total number of 0 – 24 year old children and youth by Year
  • 0-18 x Age Group x Year: Population projections for children and youth grouped into 5 year spans (0-4, 5-9, 10-14, and 15-18 years old)
  • 0-24 x Age Group x Year: Population projections for children and youth grouped into 5 year spans (0-4, 5-9, 10-14, 15-19, and 20-24 years old)
  • 0-24 x Life Cycle x Year: Population projections for children and youth grouped into two Life Cycle spans (Child, 0 – 14 years old and Youth, 15 – 24 years old)

Population Density

We have also calculated the land area of the individual CYMH Service Areas in order to derive their respective projected population densities. We will soon provide a speadsheet with these projections as well.

For now, let’s use the worksheet containing the projections of population and population densities for 0 – 18 year olds to add some (non-geospatial) data finally to our visualization of the CYMH Service Areas. Our illustration of two mapping techniques – proportional symbol representation (for the population projections) and choropleth (for the projected population densities) – will be illustrative only.

Proportional Symbol Representation of Population Projections

We may represent the projected number of 0 – 18 year olds across all CYMH Service Areas in a given year by combining geospatial data (in the familiar TopoJSON file format) with demographic data (in .csv format):

Proportional Symbol representation of projected population of 0-18 year olds screenshot
Figure 1. Proportional symbol representation of projected population of 0 – 18 year olds across the CYMH Service Areas in 2020.

[Interactive page – try hovering the mouse over a bubble]

Choropleth Representation of Projected Population Densities

We may also represent the projected density of 0 – 18 year olds across all CYMH Service Areas in a given year by combining geospatial data (in the familiar TopoJSON file format) with demographic data (in .csv format):

Choropleth Population Density 0-18 year olds screenshot
Figure 2. Choropleth representation of projected population density of 0 – 18 year olds across the CYMH Service Areas in 2020.

[Interactive page – try hovering the mouse over a CYMH Service Area]

Next time: We’ll look at increasing user interaction with choropleths and proportional symbol representations – including animation!

Geospatial Features of the MCYS Integrated Service Regions

Preamble

This article was originally posted on May 14, 2016 and revised on July 28, 2016 to take account of changes in the geospatial representation of Children and Youth Mental Health Service Areas in Ontario. For more details, see … and then there were 33.

In 2014-15, the Ministry of Children and Youth Services (MCYS) defined two administrative views of mental health services for children and youth in Ontario:

The provincial government has published geospatial data for the MCYS’s Integrated Service Regions (ISRs) and Children and Youth Mental Health Service Areas (CYMHSAs) in Shapefile format. Here, we’ll work only with the geospatial data for the ISRs.

Shapefile format

The Shapefile archive for the ISRs (mcys_integrated_regions.zip) contains four files:

  • mcys_integrated_regions.shp — shape format
  • mcys_integrated_regions.shx — shape index format
  • mcys_integrated_regions.dbf — attribute format
  • mcys_integrated_regions.prj — projection format: the coordinate system and projection information, expressed in well-known text format

For ease of reference, we rename the four mcys_integrated_regions.* files isrs.*.

Converting Shapefiles to GeoJSON format

To use d3.geo to visualize the ISRs, we first convert the Shapefiles to GeoJSON format files, using ogr2ogr. There are three steps:

  1. Determine the Spatial Reference System (SRS) used by the Shapefile
  2. Set the -t_srs switch in ogr2ogr to output the GeoJSON file using this SRS
  3. Rename variables for ease of use

The projection format file for the ISRs specifies:

GEOGCS["GCS_North_American_1983",DATUM["D_North_American_1983",SPHEROID["GRS_1980",6378137,298.257222101]],PRIMEM["Greenwich",0],UNIT["Degree",0.017453292519943295]]

We use Prj2EPSG, a simple online service to convert the projection information contained in the .prj file into standard EPSG codes for the corresponding spatial reference system. From this we determine that the specification contained in isrs.prj corresponds to EPSG 4269 – GCS_North_American_1983.

We now use the -t_srs switch in ogr2ogr to transform the output using the spatial reference system specified in isrs.prj:

ogr2ogr -t_srs EPSG:4269 -f GeoJSON isrs_geo.json isrs.shp

The GeoJSON format file is isrs_geo.json.

Finally, we use a text editor to give more meaningful names to a few variables in the GeoJSON files and to express them in all lowercase letters:

Original variable Modified variable
Region region_name
Order order

Converting GeoJSON files to TopoJSON format

We use topojson to convert the GeoJSON file isrs_geo.json to a TopoJSON format file:

topojson -o isrs_topo.json --id-property region_name --properties -- isrs_geo.json

The --id-property switch in topojson is used to promote the feature property "region_name" to geometry id status in the TopoJSON file isrs_topo.json.

We may now visualize the MCYS Integrated Service Regions by applying d3.geo to isrs_topo.json.

Visualizing the MCYS Integrated Service Regions Using d3.geo

Preamble

This article was originally posted on May 14, 2016 and revised on July 28, 2016 to take account of changes in the geospatial representation of Children and Youth Mental Health Service Areas in Ontario. For more details, see … and then there were 33.

Introduction

In the past few years, a wide variety of free and open source software (FOSS) tools for visualizing geospatial data have become available.  For many people like me who work in human services, coming to know how to use these tools even in rudimentary ways represents a steep learning-curve. Here, I illustrate the use of one of these tools, d3.geo, to visualize a geospatial view of children and youth services in Ontario. 1

In 2014-15 the Ministry of Children and Youth Services (MCYS) defined two administrative views of Ontario:

The five Integrated Service Regions (ISRs) combined nine previous Service Delivery Division regions and four Youth Justice Services Division regions. The ISRs are integrated with the five regional boundaries of the Ministry of Community and Social Services (MCSS).

The thirty-four thirty-three Children and Youth Mental Health Service Areas (CYMHSAs) were defined after a thorough review, including an assessment of Statistics Canada’s census divisions and projected population and children and youth.

The Ontario government has published two Shapefile archives – mcys_integrated_regions.zip and cymh_shapefile.zip and cymh_service_areas_after_march_9_2015.zip – that define the geospatial boundaries of the ISRs and the CYMHSAs, respectively. For now, we’re going to work only with the Shapefile archive for the ISRs.

Before we can visualize the ISRs using d3.geo, we need to convert the Shapefile format archive – mcys_integrated_regions.zip - to a TopoJSON format file – isrs_topo.json. (For more details of converting geospatial data from one file format to another, see Geospatial Features of the MCYS Integrated Service Regions).

A Simple Map

So, let’s use d3.geo to visualize the MCYS Integrated Service Regions in Ontario.

HTML template

In the same directory as the isrs_topo.json file, we create a file – isrs01.html – using the following template:


<!DOCTYPE html>
<meta charset="utf-8">
<style>

/* CSS goes here */

</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src= "//d3js.org/topojson.v1.min.js"></script>

/*                                                           */
<script>
/* JavaScript for reading and rendering data goes here */
</script>

d3 supports the two main standards for rendering two-dimensional geometry in a browser: SVG and Canvas. We prefer SVG because you can style SVG using CSS, and declarative styling is easier.

There are several steps involved in reading and rendering our data in SVG:

  1. Define the width and height (in pixels) of the canvas
  2. Create an (empty) root SVG element
  3. Define the projection, beginning with a “unit projection” with .scale(1) and .translate([0,0])
  4. Define the path generator
  5. Open the d3.json callback
    1. Load the TopoJSON data file
    2. Convert the TopoJSON data back to GeoJSON format
    3. Calculate new values for .scale() and .translate() to resize and centre the projection
    4. Bind the GeoJSON data to the path element and use selection.attr to set the “d” attribute to the path data
  6. Maybe do some other stuff
  7. Close the d3.json callback

If we modify our template – isrs01.html – by adding the Javascript to load and render isrs_topo.json in SVG, we obtain:


<!DOCTYPE html>
<meta charset="utf-8">
<style>

/* CSS goes here */

</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src= "//d3js.org/topojson.v1.min.js"></script>

<script>

/* 1. Set the width and height (in pixels) of the canvas */
var width = 960,
    height = 1160;
 
/* 2. Create an empty root SVG element */

var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height);

/* 3. Define the Unit projection to project 3D spherical coordinates onto the 2D Cartesian plane - HERE we use the Albers equal-area conic projection. */
var projection = d3.geo.albers()
    .scale(1)
    .translate([0, 0]);

/* 4. Define the path generator - to format the projected 2D geometry for SVG */
var path = d3.geo.path()
    .projection(projection);

/* 5.0 Open the d3.json callback, and
/* 5.1 Load the TopoJSON data file. */

d3.json("isrs_topo.json", function(error, isrs_topo) {
if (error) return console.error(error);

/* 5.2 Convert the TopoJSON data back to GeoJSON format */

  var regions_var = topojson.feature(isrs_topo, isrs_topo.objects.isrs_geo);
/* 5.2.1 Calculate new values for scale and translate using bounding box of the service areas */
 
var b = path.bounds(regions_var);
var s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height);
var t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

/* 5.2.2 New projection, using new values for scale and translate */
projection
   .scale(s)
   .translate(t);

/* 5.3 Bind the GeoJSON data to the path element and use selection.attr to set the "d" attribute to the path data */

svg.append("path")
.datum(regions_var)
.attr("d", path);

/* 6 - 8 Some other stuff TBD later */

/* 9. Close the d3.json callback */

});

</script>

… which gives us this sort of basic rendering of the MCYS Integrated Service Regions [actual rendering]:

Figure 1. Basic rendering of the MCYS Integrated Service Regions.
Figure 1. Basic rendering of the MCYS Integrated Service Regions.

There are a few obvious improvements we can make. First, let’s draw the boundaries of the MCYS ISRs:


/* CSS goes here */

/* Define the boundary of an ISR as a 1.5 px wide white line, with a round line-join */
.isr_boundary {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5px;
  stroke-linejoin: round;
}

...

/* Javascript for reading and rendering data in SVG */

...

/* 6. Draw the boundaries of the ISRs */
  svg.append("path")
      .datum(topojson.mesh(isrs_topo, isrs_topo.objects.isrs_geo, function(a, b) { return a !== b; }))
      .attr("class", "isr_boundary")
      .attr("d", path);

… giving us this sort of map [actual rendering]:

MCYS Integrated Service Regions with boundaries
Figure 2. Rendering of the MCYS Integrated Service Regions with boundaries.

… and then let’s label and colour the MCYS ISRs using the colour-scheme adopted by the MCYS:


/* CSS goes here */

/* fill the ISRs using the MCYS colour scheme */
.isrs_geo.Toronto { fill: #bd3f23; }
.isrs_geo.Central { fill: #fcb241; }
.isrs_geo.East { fill: #a083a7; }
.isrs_geo.West { fill: #e3839e; }
.isrs_geo.North { fill: #8dc73d; }

/* switch the colour of the ISR boundaries to black */
.isr_boundary {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
  stroke-linejoin: round;
}

/* style the Region label */

.region-label {
 fill: #000;
 fill-opacity: .9;
 font-size: 12px;
 text-anchor: middle;
}

...

/* Javascript for reading and rendering data in SVG */

...

/* 7 Colour the ISRs */

  svg.selectAll(".isrs_geo")
      .data(topojson.feature(isrs_topo, isrs_topo.objects.isrs_geo).features)
      .enter().append("path")
      .attr("class", function(d) { return "isrs_geo " + d.id; })
      .attr("d", path);

/* 8 Label the Integrated Service Regions */

 svg.selectAll(".region-label")
 .data(topojson.feature(isrs_topo, isrs_topo.objects.isrs_geo).features)
 .enter().append("text")
 .attr("class", function(d) { return "region-label " + d.id; })
 .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
 .attr("dy", ".35em")
 .text(function(d) { return d.properties.region_name; });

giving us this sort of map [actual rendering]:

Figure 3. Labelling and rendering of the MCYS Integrated Service Regions in colour.
Figure 3. Labeling and rendering of the MCYS Integrated Service Regions in colour.

Wrap-Up

In this post, we use d3.geo – a free and open source software tool – to visualize a publicly-available geospatial dataset related to children and youth services in five regions across Ontario. Next time, we will use another dataset to visualize children and youth services at the level of thirty-four service areas in the province.

  1. Accessing d3.geo is easy – you simply include a single call to d3 in the body of an .html web page. Installing and using some of the tools for converting geospatial data from one format to another (in order to use d3.geo) is more complicated. For some more technical details, see  Installing tools for d3.geo – 20160306.