Visualizing the MCYS Service Areas within 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.

In a previous posting, we described our method for partitioning the Shapefile archive (cymh_shapefile.zip cymh_service_areas_after_march_9_2015.zip) of the thirty-four thirty-three MCYS Children and Youth Mental Health Service Areas (CYMHSAs) into five groupings, corresponding to the MCYS Integrated Service Regions (ISRs). We also provided the GeoJSON and TopoJSON files for the individual CYMH Service Areas and their groupings into Integrated Service Regions.

Now we’ll illustrate how to use the TopoJSON files and d3.geo to visualize the CYMH Service Areas within their respective Integrated Service Regions.

In the template below,  we’ve highlighted in red any values that relate to the Integrated Service Region of interest and we’ve highlighted in blue any values that relate to the CYMH Service Areas within the Integrated Service Region:

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

/* CSS goes here */

/* fill the Service Areas using colour scheme for their corresponding Integrated Service Region*/
.<ISR>_geo.<ServiceArea-1> { fill: <colour-1>; }
.<ISR>_geo.<ServiceArea-2> { fill: <colour-2>; }
...
.<ISR>_geo.<ServiceArea-n> { fill: <colour-n>; }

/* style the Service Area boundaries */
.sa_boundary {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
  stroke-linejoin: round;
}

/* style the Service Area labels */

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

</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 = 500;
 
/* 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.Note - 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("<ISR>_topo.json", function(error, <ISR>_topo) {
if (error) return console.error(error);

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

  var areas_var = topojson.feature(<ISR>_topo, <ISR>_topo.objects.<ISR>_geo);
/* 5.2.1 Calculate new values for scale and translate using bounding box of the service areas */
 
var b = path.bounds(areas_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(areas_var)
.attr("d", path);

/* 6. Draw the boundaries of the Service Areas */
  svg.append("path")
      .datum(topojson.mesh(<ISR>_topo, <ISR>_topo.objects.<ISR>_geo, function(a, b) { return a !== b; }))
      .attr("class", "sa_boundary")
      .attr("d", path);

/* 7 Colour the Service Areas */

  svg.selectAll(".<ISR>_geo")
      .data(topojson.feature(<ISR>_topo, <ISR>_topo.objects.<ISR>_geo).features)
      .enter().append("path")
      .attr("class", function(d) { return "<ISR>_geo " + d.id; })
      .attr("d", path);

/* 8 Label the Service Areas */

 svg.selectAll(".area-label")
 .data(topojson.feature(<ISR>_topo, <ISR>_topo.objects.<ISR>_geo).features)
 .enter().append("text")
 .attr("class", function(d) { return "area-label " + d.id; })
 .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
 .attr("dy", ".35em")
 .text(function(d) { return d.properties.area_name; });

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

});

</script>

The following table presents the five MCYS Integrated Service Regions and their respective CYMH Service Areas. Drawing upon the resources of ColorBrewer, we’ve assigned a different hue to every Integrated Service Region and a distinctive colour of that hue to every member CYMH Service Area:

Central Region
Service Area Colour
Dufferin/Wellington #fcbba1
Halton #fc9272
Peel #fb6a4a
Simcoe #ef3b2c
Waterloo #fee0d2
York #a50f15
East Region
Service Area Colour
Durham #efedf5
Frontenac/Lennox and Addington #9e9ac8
Haliburton/Kawartha Lakes/Peterborough #dadaeb
Hastings/Prince Edward/Northumberland #bcbddc
Lanark/Leeds and Grenville #807dba
Ottawa #6a51a3
Prescott and Russell #54278f
Renfrew #54278f
Stormont, Dundas and Glengarry #3f007d
North Region
Service Area Colour
Algoma #74c476
Greater Sudbury/Manitoulin/Sudbury #a1d99b
James Bay Coast #238b45
Kenora/Rainy River #00441b
Nipissing/Parry Sound/Muskoka #c7e9c0
Thunder Bay #006d2c
Timiskaming/Cochrane

Cochrane/Timiskaming (including James Bay Coast)

#41ab5d
Toronto Region
Service Area Colour
Toronto #f16913
West Region
Service Area Colour
Brant #08519c
Chatham-Kent #c6dbef
Elgin/Oxford #4292c6
Essex #deebf7
Grey/Bruce #08519c
Haldimand-Norfolk #2171b5
Hamilton #08306b
Huron/Perth #2171b5
Lambton #9ecae1
Middlesex #6baed6
Niagara #4292c6

So, now let’s display the Integrated Service Regions and their member CYMH Service Areas:

Central Region (actual rendering):

MCYS Central Region and Member CYMH Service Areas
Figure 1. MCYS Central Region and Member CYMH Service Areas.

East Region (actual rendering):

MCYS Central Region and Member CYMH Service Areas
Figure 2. MCYS Central Region and Member CYMH Service Areas.

Toronto Region (actual rendering):

MCYS Toronto Region
Figure 3. MCYS Toronto Region.

North Region – 7 Service Areas (actual rendering):

MCYS North Region and Member CYMH Service Areas
Figure 4a. MCYS North Region and 7 Member CYMH Service Areas.

North Region – 6 Service Areas (actual rendering):

CYMH Service Areas in North Region - 33 - screenshot
Figure 4b. MCYS North Region and 6 Member CYMH Service Areas.

West Region (actual rendering):

MCYS West Region and Member CYMH Service Areas
Figure 5. MCYS West Region and Member CYMH Service Areas.

Next time: We’ll add some functionality so that users can interact with our maps.