Lab 6 - Flow map

Overview

In this lab, we will create a flow map to visualize county-to-county migration data in the U.S.

Specifically, we use a Leaflet plugin called Leaflet.Canvas-Flowmap-Layer, which maps the flow of objects from an origin point to a destination point by using a Bezier curve.

Please read the instructions carefully (including the explanations of each step) and complete the assignment in the Deliverables section at the bottom.

Download and Prepare Migration Data

We will map county-to-county migration using data from the U.S. Census Bureau.

Download the lab data. Extract the data to your desired directory. You will use the same dataset to create the final deliverables.
The dataset was prepared from the American Community Survey's County-to-County Migration Flows: 2016-2020. I have preprocessed the data to save time.
Launch QGIS and add the data. You will see a single location (actually many points at the same location) which is the location of Cook County, IL.
Open the attribute table and familiarize yourself with the attributes.
- The table contains In-, Out-, and Net Migration data for Cook County (County_A), Illinois (State_A) between 2016 and 2020.
- The origin/destination county is shown as County_B, State_B.
- GEOID_Aand GEOID_B are the unique identifiers for County A and County B.
- Flow_B2A is the estimate of people moving in from county B to county A (Inflow to Cook County).
- Flow_A2B is the estimate of people moving out from county A to county B (Outflow from Cook County).
- Net_B2A is the net migration from county B to county A (Net inflow to Cook County).
- In addition, there are four coordinate fields which are required for making the flow map. The A_lon and A_lat are the longitude and latitude of County A and they are all the same, i.e., Cook County. The B_lon and B_lat are the longitude and latitude of County B.

We will select a subset of data/flows to map so that the map doesn't look too busy. You may sort the data in the attribute table and select the rows/flows you would like to focus on.
- Please spend some time here and make sure you fully understand the data, which can be confusing with the two way flows and both positive and negative numbers.
- For example, I will map the top 10 net migration to Cook County so I sort the NetB2A column DESCENDINGLY and select the the first 10 rows by highlighting them in the attribute table.
In the Layers pane of QGIS, right-click the layer and select Export > Save Selected Features As, export the selection as a GeoJSON file (EPSG:4326 - WGS 84 as the CRS).
Create a new file folder (e.g., lab6) for this lab.
Next, use your code editor to open the GeoJSON file, add the variable definition line at the beginning as we have been doing. Save the changed GeoJSON as cook.js to your lab6 folder.

A Simple Flow Map

We will begin with a simple flow map using the Leaflet.Canvas-Flowmap-Layer plugin. Using Leaflet plugin is basically adding more library files in your HTML document so that you could use their functions for doing specific things.

First, open your code editor and set up the basemap showing the contiguous U.S. in fullscreen mode (review the first step of Lab 4 if in doubt), and save the document as map6.html.
The flow map requires additional libraries: Tween.js and CanvasFlowmapLayer.js that you will need to reference in your HTML document. There is a hosted version of Tween.js but you will need to download and save the CanvasFlowmapLayer.js to your lab 6 map folder and reference it using RELATIVE URL.

Add the lines below to the head section of your map html.

         
<!-- Load animation tweening library requirement for CanvasFlowMapLayer -->
<script src="https://unpkg.com/@tweenjs/tween.js@18.6.4/dist/tween.umd.js"></script>

<!-- Load CanvasFlowMapLayer; change the path (relative URL) if necessary -->
<script src="CanvasFlowmapLayer.js"></script>

Reference the data file in the head section as usual:

     
<script type="text/javascript" src="cook.js"></script>

The flows are added through the L.canvasFlowmapLayer function. Add the following lines BELOW the L.tileLayer part. Read the comments for more explanations and let me know if you have any questions.


L.canvasFlowmapLayer(data, { //data is the variable name I used for defining the cook.js data
  originAndDestinationFieldIds: {
    originUniqueIdField: 'GEOID_B',  //origin ID, use GEOID_A if you want to reverse the flow
    originGeometry: { //origin coordinates 
      x: 'B_lon',
      y: 'B_lat'
    },
    destinationUniqueIdField: 'GEOID_A', //destination ID
    destinationGeometry: { //destination coordinates
      x: 'A_lon',
      y: 'A_lat'
    }
  },

  // Some options to customize the flow map, check out the link below for more
  // https://github.com/jwasilgeo/Leaflet.Canvas-Flowmap-Layer#options-and-property-summary
  pathDisplayMode: 'all',
  animationStarted: true,
  animationEasingFamily: 'Cubic', // Compare the options:
                                  // https://jwasilgeo.github.io/Leaflet.Canvas-Flowmap-Layer/docs/comparison/
  animationEasingType: 'In',
  animationDuration: 2000  // in millisecond, the larger the number the slower
}).addTo(map);

The map shows the flows you have selected and saved (sample code):

flow direction

this link

style example

Customize Flowlines

All the flowlines are displayed in the same style by default. We could further customize the lines by using thicker lines for higher volumn flows, changing colors, etc.

Place the following lines INSIDE the L.canvasFlowmapLayer function, check out the sample code below if in doubt:


canvasBezierStyle: {
//This example demonstrates the use of graduated symbols (class breaks) for the flowlines
//Other options: https://developers.arcgis.com/documentation/common-data-types/renderer-objects.htm
  type: 'classBreaks',
  field: 'Net_B2A', // The field/value to be used for symbolizing the lines

  // Define the classes and symbols below
  classBreakInfos: [{
    classMinValue: 400,  // break values of this class, using field values defined above
    classMaxValue: 433,
    symbol: {  // Define the symbology for this class
               // See an example from the documentation:https://github.com/jwasilgeo/Leaflet.Canvas-Flowmap-Layer/blob/master/docs/class-breaks-symbology/index.html#L94-L137
      strokeStyle: '#AD0755',  // flow line color
      lineWidth: 10,  // flow line width
      lineCap: 'round',  // shape of the stroke end
    }
  }, {  // another class
    classMinValue: 300,
    classMaxValue: 399,
    symbol: {
      strokeStyle: '#B21D63',
      lineWidth: 6,
      lineCap: 'round',
    }
  }, {  // one more class
    classMinValue: 200,
    classMaxValue: 299,
    symbol: {
      strokeStyle: '#CA2070',
      lineWidth: 3.5,
      lineCap: 'round',
    }
  }],
},

The customized map looks like (sample code) - zoom in to see the line width variations:

Add Map Title as a Control Pane

A little extra here, we will try another way of adding map title - with a Leaflet control, as opposed to using the <h> tag. We actually have used this function before for adding the legend.

Place the following lines in the script section (e.g., below L.canvasFlowmapLayer) to add the title as a control pane:


var title = L.control({position: 'topright'}); // position of the title

title.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'title'); // create a div with a class "title"
    this._div.innerHTML = "<h3>TOP 10 Net Migration to Cook County, Illinois</h3>";  // Title text, may use html to customize
    return this._div;
};

title.addTo(map);

The title shows up at the top right corner as the position specifies. We could also add some styles to the title control to make it look nice. Place the following lines in the style tag (the headsection):


.title {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}

If you would like to try some fun fonts, here is a list of Google fonts you could explore, with their Try It examples (remember to reference their library!).
I tried the Acme font and my final map looks like (sample code):

Deliverables

For the deliverables, we use the same migration data. You will create:

A flow map to show the TOP 10 gross INFLOW (NOT the net migration) to Cook County (be careful when you define the origins and destinations in the function). Customize the flow lines (width and color) with the inflow data properly .
Your final map will be graded based on its overall design and accuracy, e.g., proper use of attributes, selection of data, direction of flows, data classification and symbolization, etc.
Host your map via GitHub (Make sure to rename the html file as index.html and upload any associated data files and library file to the repository!!!) and submit the url through D2L.

EXTRA CREDITS (4 pts): Ask yourself a question based on the data, then create a flow map to answer your question. Add a title (on a control pane) to clarify what you are mapping.

Lab 6. Flow Map

Due: 11:59 pm, Wednesday, 11/13