31:T502,md`Here, we use [OD maps](https://openaccess.city.ac.uk/537/) to investigate county-county migration in 19th century Ireland (from work published [here](https://openaccess.city.ac.uk/id/eprint/8483/), [here](http://openaccess.city.ac.uk/2052/), [this poster](https://openaccess.city.ac.uk/id/eprint/1312/) and [this video](https://vimeo.com/71454100)). The data were collected by [Mary Kelly](https://www.kingston.ac.uk/staff/profile/dr-mary-kelly-975/) from census data from the table below and this is joint work with her, [me](https://www.staff.city.ac.uk/~sbbb717/) and [Jason Dykes](https://www.city.ac.uk/about/people/academics/jason-dykes). Most Irish migration in the 19th Century has focussed on emigration, but here, we consider internal migration.

Note that the data do not explicitly record migration; they report county of birth and county of residence when the census was taken. We are using this as a proxy for migration. This "notebook" **contains all the data and codes required to produce these images and do the analysis** that was used in the published work. If you specify your [data in the same format](#cell-2108), you might be able to replicate this for other areas and contexts. `32:Tbc3,{ const screenW = 600; const screenH = 300; const mapW = 300; const colourScale = d3.scaleSequential(d3.interpolatePuRd); const maxColour = Math.max( d3.max( Object.values(population_data), (d) => Number(d["1911MalePop"]) + Number(d["1911FemalePop"]), d3.max( Object.values(population_data), (d) => Number(d["1911MalePop"]) + Number(d["1911FemalePop"]) ) ) ); //create svg let svg = d3.select(DOM.svg(screenW, screenH)).attr("viewbox", "0 0 100 100"); const tooltip = new Tooltip(); for (let year = 0; year <= 1; year++) { let projection = d3 .geoIdentity() .reflectY(true) .fitSize([mapW, screenH], countyBoundaries); const svgPath = d3.geoPath().projection(projection); var line = d3 .line() .curve(d3.curveLinear) .x(function (d) { return projection(d)[0]; }) .y(function (d) { return projection(d)[1]; }); svg .append("g") .selectAll("path") .data(countyBoundaries.features) .enter() .append("path") .attr("fill", (d) => colourScale( year == 0 ? (Number(population_data[d.properties.NAME]["1851MalePop"]) + Number(population_data[d.properties.NAME]["1851FemalePop"])) / Number(maxColour) : (Number(population_data[d.properties.NAME]["1911MalePop"]) + Number(population_data[d.properties.NAME]["1911FemalePop"])) / Number(maxColour) ) ) .attr("stroke", "#0000") .attr("stroke-width", "1") .attr("d", svgPath) .attr("transform", "translate(" + year * mapW + ",0)") .attr("class", function (d) { return "county"; }) .attr("id", function (d) { return d.properties.NAME; }) .attr("year", year) .on("mouseover", function (ev, d) { d3.select(this).style("stroke", "black"); tooltip.show( d.properties.NAME, this.getBBox().x + this.getBoundingClientRect().width / 2 + d3.select(this).attr("year") * mapW, this.getBBox().y + this.getBoundingClientRect().height / 2 ); }) .on("mouseleave", function (ev, d) { d3.selectAll(".county").style("stroke", "#0000"); tooltip.hide(); }); svg.selectAll(".county").sort((a, b) => { return -( Number(population_data[a.properties.NAME]["1851MalePop"]) + Number(population_data[a.properties.NAME]["1851FemalePop"]) - (Number(population_data[b.properties.NAME]["1851MalePop"]) + Number(population_data[a.properties.NAME]["1851FemalePop"])) ); }); svg .append("text") .attr("text-anchor", "center") .attr("x", 0) .attr("y", 15) .attr("transform", "translate(" + year * mapW + ",0)") .text(year == 0 ? "1851" : "1911"); svg.append(() => tooltip.node); } return svg.node(); }33:T129e,{ const screenW = 700; const screenH = 300; const popColourScale = d3.scaleSequential(d3.interpolatePuRd); const migColourScale = d3 .scaleSequentialPow(d3.interpolateYlGn) .exponent(0.3); const calcPopColourValues1851 = (key) => Number(population_data[key]["1851MalePop"]) + Number(population_data[key]["1851FemalePop"]); const calcPopColourValues1911 = (key) => Number(population_data[key]["1911MalePop"]) + Number(population_data[key]["1911FemalePop"]); const maxColour = Math.max( d3.max(Object.keys(population_data), (d) => calcPopColourValues1851(d)), d3.max(Object.keys(population_data), (d) => calcPopColourValues1911(d)) ); //create svg let svg = d3.select(DOM.svg(screenW, screenH)).attr("viewbox", "0 0 100 100"); const tooltip = new Tooltip(); for (let year = 0; year <= 1; year++) { let projection = d3 .geoIdentity() .reflectY(true) .fitSize([screenW / 2, screenH - 18], countyBoundaries); const svgPath = d3.geoPath().projection(projection); svg .append("g") .selectAll("path") .data(countyBoundaries.features) .enter() .append("path") .attr("fill", (d) => { return popColourScale( year == 0 ? calcPopColourValues1851(d.properties.NAME) / Number(maxColour) : calcPopColourValues1911(d.properties.NAME) / Number(maxColour) ); }) .attr("stroke", "#0000") .attr("stroke-width", "1") .attr("d", svgPath) .attr("transform", "translate(" + (year * screenW) / 2 + ",15)") .attr("class", "county" + year) .on("mouseover", function (ev, d) { let originKey = d.properties.NAME; mutable originCounty = originKey; for (let year = 0; year <= 1; year++) { svg .selectAll(".county" + year) .style("stroke", "#0000") .attr("fill", (d) => { let destKey = d.properties.NAME; let calcColourValues1851 = (key) => migration_data[key] !== undefined ? Number(migration_data[key]["male1851"]) + Number(migration_data[key]["female1851"]) : 0; let calcColourValues1911 = (key) => migration_data[key] !== undefined ? Number(migration_data[key]["male1911"]) + Number(migration_data[key]["female1911"]) : 0; const maxColour = Math.max( d3.max(Object.keys(migration_data), (d) => calcColourValues1851(d) ), d3.max(Object.values(migration_data), (d) => calcColourValues1911(d) ) ); return migColourScale( year == 0 ? calcColourValues1851(originKey + "-" + destKey) / Number(maxColour) : calcColourValues1911(originKey + "-" + destKey) / Number(maxColour) ); }); d3.select(this).style("stroke", "black"); // tooltip.show(d.properties.NAME, ev.offsetX, ev.offsetY); d3.select("#label" + year).text( "Outward " + (year == 0 ? "1851" : "1911") + " migration from " + originKey ); } }) .on("mouseleave", function (ev, d) { mutable originCounty = undefined; for (let year = 0; year <= 1; year++) { svg .selectAll(".county" + year) .style("stroke", "#0000") .attr("fill", (d) => { const maxColour = Math.max( d3.max(Object.keys(population_data), (d) => calcPopColourValues1851(d) ), d3.max(Object.keys(population_data), (d) => calcPopColourValues1911(d) ) ); return popColourScale( year == 0 ? calcPopColourValues1851(d.properties.NAME) / Number(maxColour) : calcPopColourValues1911(d.properties.NAME) / Number(maxColour) ); }); d3.select("#label" + year).text( "Population in " + (year == 0 ? "1851" : "1911") ); } }); svg .append("text") .attr("text-anchor", "center") .attr("x", 0) .attr("y", 15) .attr("transform", "translate(" + (year * screenW) / 2 + ",0)") .attr("id", "label" + year) .text("Population in " + (year == 0 ? "1851" : "1911")); svg.append(() => tooltip.node); } return svg.node(); }34:Te72,{ showGridLayout; const screenW = 600; const screenH = 300; const mapW = 300; const colourScale = d3.scaleSequential(d3.interpolatePuRd); const maxColour = Math.max( d3.max( Object.values(population_data), (d) => Number(d["1911MalePop"]) + Number(d["1911FemalePop"]), d3.max( Object.values(population_data), (d) => Number(d["1911MalePop"]) + Number(d["1911FemalePop"]) ) ) ); //create svg let svg = d3.select(DOM.svg(screenW, screenH)).attr("viewbox", "0 0 100 100"); const tooltip = new Tooltip(); for (let year = 0; year <= 1; year++) { let projection = d3 .geoIdentity() .reflectY(true) .fitSize([mapW, screenH], countyBoundaries); const svgPath = d3.geoPath().projection(projection); var line = d3 .line() .curve(d3.curveLinear) .x(function (d) { return projection(d)[0]; }) .y(function (d) { return projection(d)[1]; }); svg .append("g") .selectAll("path") .data(countyBoundaries.features) .enter() .append("path") .attr("fill", (d) => colourScale( year == 0 ? (Number(population_data[d.properties.NAME]["1851MalePop"]) + Number(population_data[d.properties.NAME]["1851FemalePop"])) / Number(maxColour) : (Number(population_data[d.properties.NAME]["1911MalePop"]) + Number(population_data[d.properties.NAME]["1911FemalePop"])) / Number(maxColour) ) ) .attr("stroke", "#0000") .attr("stroke-width", "1") .attr("d", svgPath) .attr("transform", "translate(" + year * mapW + ",0)") .attr("class", function (d) { return "county"; }) .attr("id", function (d) { return d.properties.NAME; }) .attr("year", year) .on("mouseover", function (ev, d) { d3.select(this).style("stroke", "black"); tooltip.show( d.properties.NAME, this.getBBox().x + this.getBoundingClientRect().width / 2 + d3.select(this).attr("year") * mapW, this.getBBox().y + this.getBoundingClientRect().height / 2 ); }) .on("mouseleave", function (ev, d) { d3.selectAll(".county").style("stroke", "#0000"); tooltip.hide(); }) //animation .transition() .delay((a, b) => { return b * 10; }) .duration(1000) .attrTween("d", (d) => { return d3.interpolatePath( line(polyGridTweens[d.properties.NAME].geoCoords), line(polyGridTweens[d.properties.NAME].gridCoords), null ); }) .transition() .delay((a, b) => { console.log(b); return b * 10; }) .duration(1000) .attrTween("d", function (d) { return d3.interpolatePath( d3.select(this).attr("d"), line(polyGridTweens[d.properties.NAME].geoCoords), null ); }); svg.selectAll(".county").sort((a, b) => { return -( Number(population_data[a.properties.NAME]["1851MalePop"]) + Number(population_data[a.properties.NAME]["1851FemalePop"]) - (Number(population_data[b.properties.NAME]["1851MalePop"]) + Number(population_data[a.properties.NAME]["1851FemalePop"])) ); }); svg .append("text") .attr("text-anchor", "center") .attr("x", 0) .attr("y", 15) .attr("transform", "translate(" + year * mapW + ",0)") .text(year == 0 ? "1851" : "1911"); svg.append(() => tooltip.node); } return svg.node(); }35:T48d,{ let calcColourValues1 = (key) => (Number(migration_data[key]["male1851"]) + Number(migration_data[key]["female1851"])) / (Number(population_data[key.split("-")[0]]["1851MalePop"]) + Number(population_data[key.split("-")[0]]["1851FemalePop"])); let calcColourValues2 = (key) => (Number(migration_data[key]["male1911"]) + Number(migration_data[key]["female1911"])) / (Number(population_data[key.split("-")[0]]["1911MalePop"]) + Number(population_data[key.split("-")[0]]["1911FemalePop"])); let max = Math.max( d3.max(Object.keys(migration_data), (d) => calcColourValues1(d)), d3.max(Object.keys(migration_data), (d) => calcColourValues2(d)) ); console.log(max); return drawODCharts(350, 350, [ { mapLabel: "1851", shape1: "odMap", colourMax: max, colourScale: d3.scaleSequentialPow(d3.interpolateYlOrBr).exponent(0.3), calcColourValues: calcColourValues1 }, { mapLabel: "1911", shape1: "odMap", colourMax: max, colourScale: d3.scaleSequentialPow(d3.interpolateYlOrBr).exponent(0.3), calcColourValues: calcColourValues2 } ]); }36:T7fb,{ let calcColourValues1 = (key) => { let totalMigrants = Number(migration_data[key]["male1851"]) + Number(migration_data[key]["female1851"]); let totalPop = Number(population_data[key.split("-")[0]]["1851MalePop"]) + Number(population_data[key.split("-")[0]]["1851FemalePop"]); let expectedMaleMigrants = (Number(population_data[key.split("-")[0]]["1851MalePop"]) / totalPop) * totalMigrants; let differenceMaleMigrants = Number( migration_data[key]["male1851"] - expectedMaleMigrants ); let propExpectedMaleMigrants = differenceMaleMigrants / totalPop; return propExpectedMaleMigrants; }; let calcColourValues2 = (key) => { let totalMigrants = Number(migration_data[key]["male1911"]) + Number(migration_data[key]["female1911"]); let totalPop = Number(population_data[key.split("-")[0]]["1911MalePop"]) + Number(population_data[key.split("-")[0]]["1911FemalePop"]); let expectedMaleMigrants = (Number(population_data[key.split("-")[0]]["1911MalePop"]) / totalPop) * totalMigrants; let differenceMaleMigrants = Number( migration_data[key]["male1911"] - expectedMaleMigrants ); let propExpectedMaleMigrants = differenceMaleMigrants / totalPop; return propExpectedMaleMigrants; }; let max = Math.max( d3.max(Object.keys(migration_data), (d) => Math.abs(calcColourValues1(d))), d3.max(Object.keys(migration_data), (d) => Math.abs(calcColourValues2(d))) ); return drawODCharts(350, 350, [ { mapLabel: "1851", shape1: "odMap", colourMax: max, colourScale: d3 .scaleDivergingPow(d3.interpolateRdBu) .domain([-1, 0, 1]) .exponent(0.3), calcColourValues: calcColourValues1 }, { mapLabel: "1911", shape1: "odMap", colourMax: max, colourScale: d3 .scaleDivergingPow(d3.interpolateRdBu) .domain([-1, 0, 1]) .exponent(0.3), calcColourValues: calcColourValues2 } ]); }37:T574,{ let calcColourValues = (key) => { let totalMigrants = Number(migration_data[key]["male1851"]) + Number(migration_data[key]["female1851"]); let totalPop = Number(population_data[key.split("-")[0]]["1851MalePop"]) + Number(population_data[key.split("-")[0]]["1851FemalePop"]); let expectedMaleMigrants = (Number(population_data[key.split("-")[0]]["1851MalePop"]) / totalPop) * totalMigrants; let differenceMaleMigrants = Number( migration_data[key]["male1851"] - expectedMaleMigrants ); let propExpectedMaleMigrants = differenceMaleMigrants / totalPop; return propExpectedMaleMigrants; }; let max = d3.max(Object.keys(migration_data), (d) => Math.abs(calcColourValues(d)) ); return drawODCharts(350, 350, [ { mapLabel: "1851", shape1: "polyMap", shape2: "odMap", colourMax: max, colourScale: d3 .scaleDivergingPow(d3.interpolateRdBu) .domain([-1, 0, 1]) .exponent(0.3), calcColourValues: calcColourValues, tweenAmt: odsTweenAmt }, { mapLabel: "1851", shape1: "odMatrix", shape2: "odMap", colourMax: max, colourScale: d3 .scaleDivergingPow(d3.interpolateRdBu) .domain([-1, 0, 1]) .exponent(0.3), calcColourValues: calcColourValues, tweenAmt: odsTweenAmt } ]); }38:Tb15,function drawODChart(context, inputProps) { let props = { mapLabel: "", width: 1000, height: 300, xOffset: 0, colourMax: undefined, colourScale: d3.scaleSequentialPow(d3.interpolateYlGn).exponent(0.3), calcColourValues: (key) => Number(migration_data[key]["male1911"]) + Number(migration_data[key]["female1911"]), shape1: "polyMap", shape2: undefined, tweenAmt: 0, showLabel: true }; props = { ...props, ...inputProps }; let projection = d3 .geoIdentity() .reflectY(true) .fitSize([props.width, props.height], countyBoundaries); //calc max from colourfunction if not already set const maxColour = props.colourMax !== undefined ? props.colourMax : d3.max( Object.keys(migration_data), (key) => +props.calcColourValues(key) ); context.save(); context.translate(props.xOffset, 0); context.clearRect(0, 0, props.width, props.height); context.fillStyle = "#000"; context.font = "16px Times"; context.fillText(props.mapLabel, 0, 15); for (let key of Object.keys(polyGridTweens)) { if (key.includes("-")) { let shape = polyGridTweens[key]; if (key.split("-")[0] == key.split("-")[1]) { context.strokeStyle = "black"; context.fillStyle = "white"; } else { context.strokeStyle = "#0000"; context.fillStyle = props.colourScale( +props.calcColourValues(key) / +maxColour ); } context.beginPath(); let coords; if (props.shape2 === undefined) coords = shape[props.shape1].map((d) => projection(d)); else coords = getTweenedShape( shape[props.shape1], shape[props.shape2], projection, props.tweenAmt ); for (let coord of coords) { context.lineTo(coord[0], coord[1]); } context.fill(); context.stroke(); } } if (props.showLabel) { if ( (props.shape1 == "odMatrix" && props.tweenAmt < 0.5) || (props.shape2 == "odMatrix" && props.tweenAmt > 0.5) ) { } else { for (let key of Object.keys(polyGridTweens)) { if (!key.includes("-")) { let parentSquare = polyGridTweens[key.split("-")[0]].gridCoords; let textX = parentSquare[0][0] + (parentSquare[2][0] - parentSquare[0][0]) / 2; let textY = parentSquare[0][1] + (parentSquare[2][1] - parentSquare[0][1]) / 2; context.fillStyle = "#0006"; context.textAlign = "center"; context.font = "9px Times"; context.fillText( key.split("-")[0], projection([textX, textY])[0], projection([textX, textY])[1] ); } } } } context.restore(); //return context.canvas; }39:T11e5,function generatePolyGridTweens( names, geometries, gridXs, gridYs, borderInGeoUnits ) { let morphBoundaries = {}; let xCoords = []; let yCoords = []; for (let geometry of geometries) { let geometryCoords = geometry.type === "Polygon" ? [geometry.coordinates] : geometry.coordinates; for (let part of geometryCoords) for (let ring of part) for (let coords of ring) { xCoords.push(coords[0]); yCoords.push(coords[1]); } } const minGeoX = d3.min(xCoords); const maxGeoX = d3.max(xCoords); const minGeoY = d3.min(yCoords); const maxGeoY = d3.max(yCoords); const geoW = maxGeoX - minGeoX; const geoH = maxGeoY - minGeoY; const maxGridX = Number(d3.max(gridXs)) + 1; const maxGridY = Number(d3.max(gridYs)) + 1; for (let i = 0; i < geometries.length; i++) { const shape1 = moveOriginToTopLeft( getBiggestRing(geometries[i].coordinates) ); let gridCoordinates = []; gridCoordinates.push([ minGeoX + gridXs[i] * (geoW / maxGridX), maxGeoY - gridYs[i] * (geoH / maxGridY) ]); gridCoordinates.push([ minGeoX + gridXs[i] * (geoW / maxGridX) + geoW / maxGridX, maxGeoY - gridYs[i] * (geoH / maxGridY) ]); gridCoordinates.push([ minGeoX + gridXs[i] * (geoW / maxGridX) + geoW / maxGridX, maxGeoY - gridYs[i] * (geoH / maxGridY) - geoH / maxGridY ]); gridCoordinates.push([ minGeoX + gridXs[i] * (geoW / maxGridX), maxGeoY - gridYs[i] * (geoH / maxGridY) - geoH / maxGridY ]); gridCoordinates.push([ minGeoX + gridXs[i] * (geoW / maxGridX), maxGeoY - gridYs[i] * (geoH / maxGridY) ]); const shape2 = gridCoordinates; morphBoundaries[names[i]] = { name: names[i], geoCoords: shape1, gridCoords: shape2 }; } //NOW DO OD PAIRS //get the names let countyNames = Object.keys(morphBoundaries); //now do OD matrix let sortedNames = countyNames.sort(); for (let originKey of countyNames) { let originGrid = morphBoundaries[originKey].gridCoords; let minXScreenOrigin = originGrid[0][0] + borderInGeoUnits; let maxXScreenOrigin = originGrid[2][0] - borderInGeoUnits; let minYScreenOrigin = originGrid[0][1] + borderInGeoUnits; let maxYScreenOrigin = originGrid[2][1] - borderInGeoUnits; let projectionDest = d3 .geoIdentity() .translate(minXScreenOrigin, minYScreenOrigin) .fitSize( [ Math.abs(maxXScreenOrigin - minXScreenOrigin) - 3, Math.abs(maxYScreenOrigin - minYScreenOrigin) - 3 ], countyBoundaries ); // .translate(minXScreenOrigin, minYScreenOrigin); for (let destKey of countyNames) { let gridCoords = []; let destGrid = morphBoundaries[destKey].gridCoords; for (let coord of destGrid) gridCoords.push(projectionDest(coord)); console.log("1", destGrid); gridCoords = gridCoords.map((d) => [ d[0] + minXScreenOrigin, d[1] + maxYScreenOrigin ]); console.log("2", destGrid); let destGeo = morphBoundaries[destKey].geoCoords; let geoCoords = []; for (let coord of destGeo) geoCoords.push(projectionDest(coord)); geoCoords = geoCoords.map((d) => [ d[0] + minXScreenOrigin, d[1] + maxYScreenOrigin ]); //do OD matrix let row = sortedNames.indexOf(originKey); let col = sortedNames.indexOf(destKey); let odMatrixCoords = []; odMatrixCoords.push([ minGeoX + col * (geoW / sortedNames.length), maxGeoY - row * (geoH / sortedNames.length) ]); odMatrixCoords.push([ minGeoX + col * (geoW / sortedNames.length) + geoW / sortedNames.length, maxGeoY - row * (geoH / sortedNames.length) ]); odMatrixCoords.push([ minGeoX + col * (geoW / sortedNames.length) + geoW / sortedNames.length, maxGeoY - row * (geoH / sortedNames.length) - geoH / sortedNames.length ]); odMatrixCoords.push([ minGeoX + col * (geoW / sortedNames.length), maxGeoY - row * (geoH / sortedNames.length) - geoH / sortedNames.length ]); odMatrixCoords.push([ minGeoX + col * (geoW / sortedNames.length), maxGeoY - row * (geoH / sortedNames.length) ]); morphBoundaries[originKey + "-" + destKey] = { name: originKey + "-" + destKey, polyMap: geoCoords, odMap: gridCoords, odMatrix: odMatrixCoords }; } } return morphBoundaries; }3a:[{"id":"e5339be89ec645b9481df0a858f1ad409099ee5af707becfb1bccef40c43e63fdcca08e5869bbc5e221963d8e6dc80d72d6310503a31ffe720078af0537bab1e","href":"https://static.observableusercontent.com/files/e5339be89ec645b9481df0a858f1ad409099ee5af707becfb1bccef40c43e63fdcca08e5869bbc5e221963d8e6dc80d72d6310503a31ffe720078af0537bab1e","name":"county_grid.tsv","type":"text/tab-separated-values","lastModified":1631874112642.769,"size":391},{"id":"0c52998d08ca59cd3a66c1c316929ed5747da50dcb7d79a5f6fde4d2c235d7414b2fd742e9cf5ed74028de14578a8bf05a7f859fb412518e4bd1dc0e23fd34ab","href":"https://static.observableusercontent.com/files/0c52998d08ca59cd3a66c1c316929ed5747da50dcb7d79a5f6fde4d2c235d7414b2fd742e9cf5ed74028de14578a8bf05a7f859fb412518e4bd1dc0e23fd34ab","name":"county_migration.tsv","type":"text/tab-separated-values","lastModified":1631874112890.802,"size":29175},{"id":"263be67c986037ac1af36f18a06a80f04207a5a89ed0c68bf4df9f88459c7598c59e200dfb45b17ccd4620317f2232af963228e96b7b2e0ead71438d65b4f643","href":"https://static.observableusercontent.com/files/263be67c986037ac1af36f18a06a80f04207a5a89ed0c68bf4df9f88459c7598c59e200dfb45b17ccd4620317f2232af963228e96b7b2e0ead71438d65b4f643","name":"county_polys.geojson","type":"application/geo+json","lastModified":1631874544674.049,"size":102508},{"id":"ca8239d7076ecf05fceb544cc56838916fca357cb619351494467b89f4102ea17e2aa7f5ce7b2f6d5103be64f7d6d0a335ba4a77ce9396af28eb74ac5ce5a4fc","href":"https://static.observableusercontent.com/files/ca8239d7076ecf05fceb544cc56838916fca357cb619351494467b89f4102ea17e2aa7f5ce7b2f6d5103be64f7d6d0a335ba4a77ce9396af28eb74ac5ce5a4fc","name":"county_population.tsv","type":"text/tab-separated-values","lastModified":1631874112804.818,"size":1103},{"id":"ce413e8db9b59dd514649ff37bf8c9418aae6815c493b9887d00b9dade39fda49459c699ebfe331526b9f973aed038933de74b584482f23b5ede4219251cc710","href":"https://static.observableusercontent.com/files/ce413e8db9b59dd514649ff37bf8c9418aae6815c493b9887d00b9dade39fda49459c699ebfe331526b9f973aed038933de74b584482f23b5ede4219251cc710","name":"irishcensus@1.png","type":"image/png","lastModified":1632214909474.225,"size":346370}] 2f:{"title":"Using OD maps to study historical county-county in Ireland","cells":[{"id":10,"value":"md`# Using OD maps to study historical county-county in Ireland`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1608,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"md`## County Population`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1616,"value":"{\n let pop1851 = 0;\n let pop1911 = 0;\n for (let row of Object.values(population_data)) {\n pop1851 += +row[\"1851MalePop\"];\n pop1851 += +row[\"1851FemalePop\"];\n pop1911 += +row[\"1911MalePop\"];\n pop1911 += +row[\"1911FemalePop\"];\n }\n return md`As a result of continued post-famine emigration, Ireland's population dropped from around ${d3.format(\n \",.2r\"\n )(pop1851)} in 1851 to ${d3.format(\",.2r\")(\n pop1911\n )} in 1911. Rural areas, as well as provincial towns, suffered most in terms of population losses. However, both Dublin and Belfast, and their hinterlands, did experience population growth.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2028,"value":"md`## Migration flows\n\nThe maps below show resident population like the maps above, but if you **move the mouse over the counties**, you'll see how many and where they migrated.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2171,"value":"mutable originCounty = undefined","pinned":false,"hidden":false,"mode":"ojs"},{"id":1925,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2038,"value":"md`Only being able to consider flows from one origin is rather limited. Subsequent graphics will help us get an overview.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1655,"value":"md`## Spatial small multiples for studying migration flow\n\n**Click the button** to see how these countries relate to a spatially-arranged grid of counties. *This will help you interpret the upcoming graphics*.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2382,"value":"viewof showGridLayout = Inputs.button(\"Show grid layout\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2379,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2100,"value":"county_grid","pinned":false,"hidden":false,"mode":"ojs"},{"id":1871,"value":"md`*This gridded layout (data above) was created by hand, but it [can be done automatically](https://observablehq.com/@jwolondon/gridmap-allocation)*.\n\nThese (below) are spatially ordered sets of small-multiple destination maps. As with the interactive maps, they show county-county migration using **absolute** numbers of people who have moved from the labelled county. They give a better overview than the interactive map (two maps before) because they given an over of all migration at the same time, enabling destination patterns to be compared by origin. The most obvious pattern is (unsurprisingly) that most **migration is quite local**. *Colour scaling is non-linear (cubed root) and is the same in both maps.*\n\n**Move the slider** to see how this relates to an \"OD map\" which shows all counties with equal salience.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1861,"value":"viewof odMapTweenAmt = Inputs.range([0, 1], {\n value: 0,\n step: 0.01,\n label: \"tween\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1660,"value":"{\n let calcColourValues1 = (key) =>\n Number(migration_data[key][\"male1851\"]) +\n Number(migration_data[key][\"female1851\"]);\n let calcColourValues2 = (key) =>\n Number(migration_data[key][\"male1911\"]) +\n Number(migration_data[key][\"female1911\"]);\n let max = Math.max(\n d3.max(Object.keys(migration_data), (d) => calcColourValues1(d)),\n d3.max(Object.keys(migration_data), (d) => calcColourValues2(d))\n );\n\n return drawODCharts(350, 350, [\n {\n mapLabel: \"1851\",\n shape1: \"polyMap\",\n shape2: \"odMap\",\n colourMax: max,\n colourScale: d3.scaleSequentialPow(d3.interpolateYlGn).exponent(0.3),\n calcColourValues: calcColourValues1,\n tweenAmt: odMapTweenAmt\n },\n {\n mapLabel: \"1911\",\n shape1: \"polyMap\",\n shape2: \"odMap\",\n colourMax: max,\n colourScale: d3.scaleSequentialPow(d3.interpolateYlGn).exponent(0.3),\n calcColourValues: calcColourValues2,\n tweenAmt: odMapTweenAmt\n }\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1751,"value":"md`These (below) are **proportions of people** who have moved from the labelled county, relative to the origin county. Here, we have switched to the \"OD map\" as this shows all counties with equal saliance. *Colour scaling is non-linear (cubed root) and is the same in both maps.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1715,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1847,"value":"md`These (below) indicates the **gender imbalance** (as a proportion of population) with respect to gender balance of population at the orgin. Red indicates that more women migrated than expected; blue indicates that more men migrated. In 1851, women tended to migrate more locally than men (red around the 'home cell'). In 1911, the local female migration pattern persists in the north of the island, but migration is dominated by woman and this is particularly true of Dublin and Antrim (Belfast) migration. *Colour scaling is non-linear (cubed root) and is the same in both maps.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1764,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1891,"value":"md`Just taking the 1851 migration gender balance (below) and locally colour-scaling, **move the slider** to see how the spatial small multiple destination maps, OD maps and OD matrix relate.\n\nIn the OD matrix, the countries are alphabetically ordered in the rows (origin) and columns (destinations) in a way that do not indicate the spatial relationships between them. You will see that an OD maps is simply a spatial reordering of an OD matrix.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1885,"value":"viewof odsTweenAmt = Inputs.range([0, 1], {\n value: 0,\n step: 0.01,\n label: \"tween\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1879,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":2061,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2108,"value":"md`### Data\n\nThe data used for this notebook is specified here and attached to this notebook. *If replace with your own data, you might be about to replicate the analysis and graphics for your context.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"migration_data = {\n let migration_data = {};\n let data = d3.tsvParse(await FileAttachment(\"county_migration.tsv\").text());\n for (let row of data) {\n migration_data[row.origin + \"-\" + row.dest] = row;\n }\n return migration_data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"population_data = {\n let data = d3.tsvParse(await FileAttachment(\"county_population.tsv\").text());\n let population_data = {};\n for (let row of data) population_data[row.County] = row;\n\n return population_data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"county_grid = {\n let data = d3.tsvParse(await FileAttachment(\"county_grid.tsv\").text());\n let county_grid = {};\n for (let row of data) county_grid[row.country] = row;\n return county_grid;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"countyBoundaries = JSON.parse(\n await FileAttachment(\"county_polys.geojson\").text()\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2119,"value":"md`### Code\n\nCode used by this notebook`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1538,"value":"function drawODCharts(height, wSubChart, inputProps) {\n const context = DOM.context2d(width, height);\n let xOffset = 0;\n for (let props of inputProps) {\n props.xOffset = xOffset;\n props.width = wSubChart;\n props.height = height;\n drawODChart(context, props);\n xOffset += wSubChart;\n }\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1477,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1002,"value":"polyGridTweens = {\n let names = countyBoundaries.features.map(\n (feature) => feature.properties.NAME\n );\n let geometries = countyBoundaries.features.map((feature) => feature.geometry);\n\n let gridXs = [];\n for (let name of names) {\n gridXs.push(county_grid[name].gridX);\n }\n let gridYs = [];\n for (let name of names) {\n gridYs.push(county_grid[name].gridY);\n }\n return generatePolyGridTweens(names, geometries, gridXs, gridYs, 3000);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":995,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1118,"value":"function getTweenedShape(shape1, shape2, projection, amt) {\n var line = d3\n .line()\n .curve(d3.curveLinear)\n .x(function (d) {\n return projection(d)[0];\n })\n .y(function (d) {\n return projection(d)[1];\n });\n let svgString = d3.interpolatePath(line(shape1), line(shape2))(amt);\n let commands = svgString.split(/(?=[LMC])/);\n let coordPairs = [];\n for (let command of commands) {\n let coords = command.substring(1).split(\",\");\n for (let i = 0; i < coords.length; i += 2)\n coordPairs.push([+coords[i], +coords[i + 1]]);\n }\n return coordPairs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"function drawChoroplethCanvas(countryBoundaries, screenW, screenH) {\n let bb = getBB(countyBoundaries);\n\n bb = scaleBBToViewport(bb, screenW, screenH);\n const scaleX = d3\n .scaleLinear()\n .domain([bb.minX, bb.maxX])\n .range([0, screenW]);\n const scaleY = d3\n .scaleLinear()\n .domain([bb.minY, bb.maxY])\n .range([screenH, 0]);\n\n const context = DOM.context2d(screenW, screenH);\n context.clearRect(0, 0, screenW, screenH);\n\n for (const geoBoundary of countryBoundaries.features) {\n const coordinates =\n geoBoundary.geometry.type === \"Polygon\"\n ? [geoBoundary.geometry.coordinates]\n : geoBoundary.geometry.coordinates;\n for (const part of coordinates) {\n context.beginPath();\n context.strokeStyle = \"#ccc\";\n for (const ring of part) {\n for (const coord of ring) {\n context.lineTo(scaleX(coord[0]), scaleY(coord[1]));\n }\n }\n context.stroke();\n }\n }\n context.restore();\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"function scaleBBToViewport(bb, screenW, screenH) {\n const screenRatio = screenW / screenH;\n const coordRatio = (bb.maxX - bb.minX) / (bb.maxY - bb.minY);\n if (screenRatio > coordRatio) {\n var oldW = bb.maxX - bb.minX;\n var newW = (bb.maxY - bb.minY) * screenRatio;\n bb.minX -= (newW - oldW) / 2;\n bb.maxX += (newW - oldW) / 2;\n //console.log(\"option1\");\n } else {\n var oldH = bb.maxY - bb.minY;\n var newH = (bb.maxX - bb.minX) / screenRatio;\n bb.minY -= (newH - oldH) / 2;\n bb.maxY += (newH - oldH) / 2;\n //console.log(\"option2\");\n }\n return bb;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"function getBB(boundaries) {\n let bb = {\n minX: Number.MAX_VALUE,\n maxX: Number.MIN_VALUE,\n minY: Number.MAX_VALUE,\n maxY: Number.MIN_VALUE\n };\n for (const geoBoundary of boundaries.features) {\n const coordinates =\n geoBoundary.geometry.type === \"Polygon\"\n ? [geoBoundary.geometry.coordinates]\n : geoBoundary.geometry.coordinates;\n for (const part of coordinates) {\n for (const ring of part) {\n for (const coord of ring) {\n bb.minX = Math.min(bb.minX, coord[0]);\n bb.maxX = Math.max(bb.maxX, coord[0]);\n bb.minY = Math.min(bb.minY, coord[1]);\n bb.maxY = Math.max(bb.maxY, coord[1]);\n }\n }\n }\n }\n return bb;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"function getBBCoords(coords) {\n let bb = {};\n bb.minX = d3.min(coords, (d) => d[0]);\n bb.maxX = d3.max(coords, (d) => d[0]);\n bb.minY = d3.min(coords, (d) => d[1]);\n bb.maxY = d3.max(coords, (d) => d[1]);\n return bb;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"d3 = require(\"d3@v6\", \"d3-interpolate-path@v2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":489,"value":"function moveOriginToTopLeft(shape) {\n //find bbs\n const bb = getBBCoords(shape);\n //Find index of coordinate nearest to top left corner for shape1\n const topLeft = [bb.minX, bb.maxY];\n let minDist = Number.MAX_VALUE;\n let minDistIdx = 0;\n for (let i = 0; i < shape.length; i++) {\n let dist = Math.sqrt(\n Math.pow(topLeft[0] - shape[i][0], 2) +\n Math.pow(topLeft[1] - shape[i][1], 2)\n );\n if (dist < minDist) {\n minDist = dist;\n minDistIdx = i;\n }\n }\n //split the path accordingly\n return shape.slice(minDistIdx).concat(shape.slice(0, minDistIdx));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"function getBiggestRing(coordinates) {\n // console.log(\"coordinatesBefore\", coordinates);\n coordinates =\n Array.isArray(coordinates[0][0][0]) === false ? [coordinates] : coordinates;\n // console.log(\"coordinatesAfter\", coordinates);\n let maxArea = 0;\n let maxAreaRing = [];\n let i = 0;\n for (const part of coordinates) {\n // for (const ring of part) {\n let area = d3.polygonArea(part[0]);\n // console.log(\"part[0]\", part[0]);\n // console.log(\"area\", area, part[0]);\n if (area > maxArea) {\n maxArea = area;\n maxAreaRing = part[0];\n }\n i++;\n }\n return maxAreaRing;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2031,"value":"class Tooltip {\n constructor() {\n this._text = svg``;\n this._rect = svg``;\n this.node = svg`\n ${this._rect}\n ${this._text}\n`;\n }\n show(label, x, y) {\n this.node.removeAttribute(\"display\");\n this.node.setAttribute(\"transform\", `translate(${x},${y})`);\n this._text.textContent = label;\n this._rect.setAttribute(\"width\", this._text.getBBox().width);\n this._rect.setAttribute(\"height\", this._text.getBBox().height);\n }\n hide() {\n this.node.setAttribute(\"display\", \"none\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}