31:T421,{ let width = "700"; let orient = "left"; if (mobilecheck()) { width = 300; orient = "right"; } return vega({ $schema: "https://vega.github.io/schema/vega-lite/v4.json", title: "Top 20 CMAs/CAs in Terms of Migration to/from " + cityIDNameMap[currentArea], description: "", data: { values: chartDataForSelected }, width: width, height: 300, mark: "bar", background: "#FFFFFF", encoding: { y: { field: "chartCity", type: "ordinal", axis: { title: "CMA/CA", orient: orient }, sort: { field: "total", order: "descending" } }, x: { field: "signedValue", type: "quantitative", axis: { title: "Gain/Loss in Population" } }, color: { field: "migrationType", type: "nominal", scale: { range: [hexScale(65), hexScale(-75)] }, legend: { orient: "top", title: null } } }, config: { view: { stroke: null }, axis: { grid: false } } }); }32:T559,getGeolayer = { let onHover = d => { viewof hover.value = d.object; viewof hover.dispatchEvent(new CustomEvent("input")); }; if (mobilecheck()) { onHover = undefined; } return (data, selectedArea, valueMap) => { let layer = new deck.GeoJsonLayer({ id: 'geojson', data: data, opacity: 0.9, stroked: true, filled: true, extruded: false, wireframe: true, getLineWidth: 10, pickable: true, transitions: { getFillColor: { duration: 500, easing: d3.easeCubicInOut, enter: value => [value[0], value[1], value[2], 0] // fade in } }, getFillColor: f => { if (valueMap[f.properties.CMAUID] !== undefined) { return lineScale(valueMap[f.properties.CMAUID], selectedArea); } else if (f.properties.CMAUID === selectedArea) { return [100, 175, 255]; } else { return [100, 100, 100]; } }, updateTriggers: { getFillColor: [selectedArea] }, getLineColor: d => [50, 50, 50], lineWidthMinPixels: 1, pickable: true, onClick: info => { viewof currentArea.value = info.object.properties.CMAUID; viewof currentArea.dispatchEvent(new CustomEvent("input")); }, onHover: onHover }); return layer; }; }33:T52d,chartDataForSelected = { let tallies = {}; let data = chartData .filter(d => { return d.CMAUID === currentArea || d.DEST_CMAUID === currentArea; }) .map(d => { if (d.CMAUID === currentArea) { d.chartCity = d["Geography of destination"]; d.migrationType = "out-migration"; d.signedValue = -1 * Number(d.VALUE); } else { d.chartCity = d["GEO"]; d.migrationType = "in-migration"; d.signedValue = Number(d.VALUE); } if (tallies[d.chartCity] === undefined) { tallies[d.chartCity] = Number(d.VALUE); } else { tallies[d.chartCity] += Number(d.VALUE); } return d; }); let tallyArray = []; for (let i in tallies) { tallyArray.push({ name: i, value: tallies[i] }); } tallyArray.sort((a, b) => { return b.value - a.value; }); let top20 = tallyArray.slice(0, 20); let topMap = {}; for (let i of top20) { topMap[i.name] = i.value; } return data .filter(d => { return ( topMap[d.GEO] !== undefined || topMap[d["Geography of destination"]] !== undefined ); }) .map(d => { d.total = topMap[d.GEO]; if (d.total === undefined) { d.total = topMap[d["Geography of destination"]]; } return d; }); }34:T407,getDataForArea = id => { let areaData = {}; let sourceCentroid = {}; for (let elem of pathData) { if (elem.source === id) { if (areaData[elem.dest] === undefined) { areaData[elem.dest] = { value: 0, destCentroid: elem.destCentroid }; } areaData[elem.dest].value -= elem.value; sourceCentroid = elem.sourceCentroid; } else if (elem.dest === id) { if (areaData[elem.source] === undefined) { areaData[elem.source] = { value: 0, destCentroid: elem.sourceCentroid }; } areaData[elem.source].value += elem.value; sourceCentroid = elem.destCentroid; } } let retArray = []; for (let key in areaData) { if (areaData[key].value >= 1 || areaData[key].value <= -1) { retArray.push({ source: id, dest: key, sourceCentroid: sourceCentroid, destCentroid: areaData[key].destCentroid, value: areaData[key].value }); } } return retArray; }35:T885,mobilecheck = function() { var check = false; (function(a) { if ( /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test( a ) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test( a.substr(0, 4) ) ) check = true; })(navigator.userAgent || navigator.vendor || window.opera); return check; }36:[{"id":"381d7e000f580af8fdd7bcffef45f2bab4c6a5ba470a35376a8f540d0797ae5dd2e1ba21a86706950e716bf0ecebdbc42cf069ab0103d8e70feb463f03e06920","href":"https://static.observableusercontent.com/files/381d7e000f580af8fdd7bcffef45f2bab4c6a5ba470a35376a8f540d0797ae5dd2e1ba21a86706950e716bf0ecebdbc42cf069ab0103d8e70feb463f03e06920","name":"paths@2.json","type":"application/octet-stream","lastModified":1573076506776.913,"size":3468297},{"id":"c1e09a709cb6216f8f580fe19715e54522f9fe275b6d76fa19fb1d2cbd49dc0b5c4117e30f869975fcb8fdd174e3ab93e22e3e121f236758c6556cfdffb54469","href":"https://static.observableusercontent.com/files/c1e09a709cb6216f8f580fe19715e54522f9fe275b6d76fa19fb1d2cbd49dc0b5c4117e30f869975fcb8fdd174e3ab93e22e3e121f236758c6556cfdffb54469","name":"CanadaCMAs4Simplified@1.json","type":"application/json","lastModified":1573174397235.961,"size":746432},{"id":"974329c7fa174ac8fd3b2d608125c900da5e16ba636239c2c0f6e99d12441727764ef1da9096fa58ff21ba7e35e452a9f47cbf5d28aeb66141dff4ea12342fc5","href":"https://static.observableusercontent.com/files/974329c7fa174ac8fd3b2d608125c900da5e16ba636239c2c0f6e99d12441727764ef1da9096fa58ff21ba7e35e452a9f47cbf5d28aeb66141dff4ea12342fc5","name":"17100141Modified.csv","type":"text/csv","lastModified":1573211135206.529,"size":2825423}] 2f:{"title":"Migration to/from Canadian CMAs/CAs for 2016/17","cells":[{"id":0,"value":"md`# Migration to/from Canadian CMAs/CAs for 2016/17`","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"md`This visualization shows the 2016/2017 migration between Canadian cities according to Statistics Canada. It looks at Census Metropolitan Areas (CMAs)/Census Agglomerates (CAs). Choose a CMA/CA using the drop down below or by clicking on the map to see the in-migration and out-migration numbers between the CMAs/CAs.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"viewof currentArea = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"container = {\n let container = html`

`;\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"{\n let maxmin = getMaxmin(currentArea);\n\n return legend({\n color: d3\n .scaleDiverging()\n .domain([maxmin.min, 0, maxmin.max])\n .interpolator(d3.interpolateRdYlGn),\n ticks: 6,\n title:\n \"Net Loss or Gain of Population for \" +\n cityIDNameMap[currentArea] +\n \" from Other CMAs/CAs 2016/2017\"\n //tickFormat: \".0\"\n //tickValues: [0, 15, 30, 45, 60]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"viewof hover = {\n let elem = html`

`;\n elem.value = \"\";\n return elem;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"deckgl = {\n let zoom = 4.8;\n if (mobilecheck()) {\n zoom = 3;\n }\n return new deck.DeckGL({\n container,\n map: mapboxgl,\n mapboxAccessToken: '',\n mapboxApiAccessToken: token,\n mapStyle: 'mapbox://styles/mapbox/dark-v10',\n layers: [\n getArclayer(getDataForArea(originalCity), originalCity),\n getGeolayer(geoData, originalCity, getAreaValueMap(originalCity))\n ],\n longitude: -83.3,\n latitude: 46.2,\n bearing: -34,\n zoom: zoom,\n minZoom: 3,\n maxZoom: 15,\n pitch: 60\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"{\n deckgl.setProps({\n layers: [\n getArclayer(getDataForArea(currentArea), currentArea),\n getGeolayer(geoData, currentArea, getAreaValueMap(currentArea))\n ]\n });\n return \"Update on Switch\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"cityIDNameMap = {\n let retMap = {};\n for (let city of geoData.features) {\n retMap[city.properties.CMAUID] = city.properties.CMANAME;\n }\n return retMap;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"hexScale = d => {\n let maxmin = getMaxmin(currentArea);\n let func = d3\n .scaleDiverging()\n .domain([-100, 0, 100])\n .interpolator(d3.interpolateRdYlGn);\n return d3.color(func(d)).formatHex();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"lineScale = (d, area) => {\n let maxmin = getMaxmin(area);\n let func = d3\n .scaleDiverging()\n .domain([maxmin.min, 0, maxmin.max])\n .interpolator(d3.interpolateRdYlGn);\n\n let hexColor = d3.color(func(d)).formatHex();\n return hexToRgb(hexColor);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"getArclayer = (data, area) =>\n new deck.ArcLayer({\n id: 'arc-layer',\n data: data,\n pickable: true,\n getWidth: 1,\n transitions: {\n getSourceColor: {\n duration: 500,\n easing: d3.easeCubicInOut,\n enter: value => [value[0], value[1], value[2], 0] // fade in\n },\n getTargetColor: {\n duration: 500,\n easing: d3.easeCubicInOut,\n enter: value => [value[0], value[1], value[2], 0] // fade in\n },\n getTargetPosition: {\n duration: 500,\n easing: d3.easeCubicInOut\n }\n },\n getSourcePosition: d => d.sourceCentroid,\n getTargetPosition: d => d.destCentroid,\n getSourceColor: d => lineScale(d.value, area),\n getTargetColor: d => lineScale(d.value, area),\n opacity: 0.5\n //getSourceColor: d => [Math.sqrt(d.inbound), 140, 0],\n //getTargetColor: d => [Math.sqrt(d.outbound), 140, 0],\n //getColor: [255, 255, 255]\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"function hexToRgb(hex) {\n var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result\n ? [\n parseInt(result[1], 16),\n parseInt(result[2], 16),\n parseInt(result[3], 16)\n ]\n : null;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"getMaxmin = area => {\n let data = getDataForArea(area);\n let max = data[0].value;\n let min = data[0].value;\n for (let elem of data) {\n if (max < elem.value) {\n max = elem.value;\n }\n if (min > elem.value) {\n min = elem.value;\n }\n }\n return {\n max: max,\n min: min\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"getAreaValueMap = area => {\n let areas = {};\n\n for (let elem of getDataForArea(area)) {\n areas[elem.dest] = elem.value;\n }\n return areas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"currentAreaValueMap = getAreaValueMap(currentArea)","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"cities = geoData.features\n .map(d => {\n return { id: d.properties.CMAUID, name: d.properties.CMANAME };\n })\n .sort((a, b) => {\n if (a.name < b.name) {\n return -1;\n } else if (a.name > b.name) {\n return 1;\n } else {\n return 0;\n }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"originalCity = \"559\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"chartData = d3.csvParse(await FileAttachment(\"17100141Modified.csv\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"geoData = await FileAttachment(\"CanadaCMAs4Simplified@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"pathData = await FileAttachment(\"paths@2.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"token = {\n // Don't use this token. It will be rotated frequently. Get your own at https://mapbox.com\n return 'pk.eyJ1Ijoiam9obmhhbGRlbWFuIiwiYSI6ImNrMjIxNnBrdTAxN3Mzb3BmbWFzbnV6OGoifQ.HrfAiASrw9EQetZn13xAPg';\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"mapboxgl = require('mapbox-gl@^1.4.1/dist/mapbox-gl.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"deck = require.alias({\n // optional dependencies\n h3: {},\n S2: {}\n})('deck.gl@~7.0.1/dist.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"mobilecheck()","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"vega = require(\"vega-embed@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}