2e:null 2f:["$","title",null,{"children":"The Great Migration | Will Donnell | Observable"}] 34:T423,heatmap = vegalite({ "$schema": "https://vega.github.io/schema/vega-lite/v4.json", title: { text: "Origin and Destination of African American Men Migrating North", fontSize: 20, font: "Garamond", fontWeight: "normal", margin: 100 }, width: 700, height: 420, autosize: "fit", "data": {values: moveState}, "mark": "rect", "encoding": { "x": { "field": "state_1910", "type": "nominal", "title": "Starting Location in 1910", sort: statesSouth, axis: { titleFont: "Garamond", titleFontSize: 17, titleFontWeight: "normal", titlePadding: 10 } }, "y": { "field": "state_1930", "type": "nominal", "title": "Destination By 1930", sort: statesNorth, axis: { titleFont: "Garamond", titleFontSize: 17, titleFontWeight: "normal", titlePadding: 10 } }, "color": {"aggregate": "count", "field": "uniqueid"} }, "config": { "axis": {"grid": false, "tickBand": "extent"} } } )35:T56a,textFootnotes = md `## Footnotes 1. \`William J. Collins & Marianne H. Wanamaker, 2014. "Selection and Economic Gains in the Great Migration of African Americans: New Evidence from Linked Census Data," American Economic Journal: Applied Economics, American Economic Association, vol. 6(1), pages 220-52, January.\` The paper is really great -- you should [check it out](https://www.nber.org/papers/w19124). 1. [The dataset they used can be found here](https://www.openicpsr.org/openicpsr/project/113878/version/V1/view) 1. [The Great Migration: The African American Exodus from The South](https://priceonomics.com/the-great-migration-the-african-american-exodus/) 1. [The Great Migration of Afro-Americans, 1915-40](https://www.bls.gov/opub/mlr/1987/03/art5full.pdf) 1. This chart is based on Table 6 from the Collins & Wanamaker paper. I summed the columns from each profession in 1930 to get the final percent of men in that profession, and simplified the profession names. 1. This chart is based on Table 7 from the Collins & Wanamaker paper. All of the different methods for comparing relative incomes had roughly the same result, but I chose column 3. The value was converted from log points to percent, something your average reader would probably be more familiar with. 1. [America's Great Migrations Project](https://depts.washington.edu/moving1/black_migration.shtml) `36:T4bb,occupationData = ([ // adapted from Table 6 { cohort: "nonMigrant", displayName: "Stayed in The South", occupations: [ { name: "Professoinal/Clerical", values: [1.6, 4.3] }, { name: "Farm", values: [59.1, 58.5] }, { name: "Crafts/Semi-Skill", values: [7.6, 8.5] }, { name: "Non-Ag Laborer/Operative", values: [31.7, 29] } ] }, { cohort: "migrant", displayName: "Migrated North", occupations: [ { name: "Professoinal/Clerical", values: [0.7, 7.1] }, { name: "Farm", values: [43.8, 4.3] }, { name: "Crafts/Semi-Skill", values: [10.3, 19.3] }, { name: "Non-Ag Laborer/Operative", values: [45.2, 69.5] }, ] },{ cohort: "fullSample", display: false, occupations: [ { name: "Professoinal/Clerical", values: [1.5, 3.4] }, { name: "Farm", values: [56.8, 50.1] }, { name: "Crafts/Semi-Skill", values: [8, 10.3] }, { name: "Non-Ag Laborer/Operative", values: [33.8, 35.1] }, ] } ])37:T7ec,mapSvg = { let svg = d3.create("svg") .attr("viewBox", [0, 0, mapConfig.width, mapConfig.height]); const drawTitle = (svgRef, txt, lineNumber) => { svgRef .append('text') .attr('text-anchor', 'middle') .attr("transform", `translate(${mapConfig.width - mapConfig.title.right}, ${mapConfig.title.top + (mapConfig.title.lineHeight * lineNumber)})`) .classed("title-text", true) .text(txt) } // title text drawTitle(svg, "THE", 0); drawTitle(svg, "GREAT", 1); drawTitle(svg, "MIGRATION", 2); const drawMigrantInfo = (svgRef, lineNumber, className) => { svgRef .append('text') .attr('text-anchor', 'middle') .attr("transform", `translate(${mapConfig.width - mapConfig.migrantInfo.right}, ${mapConfig.migrantInfo.top + (mapConfig.migrantInfo.lineHeight * lineNumber)})`) .classed(className, true) .text('') } // migrant info text drawMigrantInfo(svg, 0, "migrant-name"); drawMigrantInfo(svg, 1, "migrant-age"); // arrow marker definition svg.append("svg:defs").append("svg:marker") .attr("id", "triangle-marker") .attr("refX", 7) .attr("refY", 5) .attr("markerWidth", 5) .attr("markerHeight", 5) .attr("orient", "auto") .attr("viewBox", "0 0 10 10") .append("path") .attr("d", "M 0 0 L 10 5 L 0 10 z") .attr("stroke-width", 1) .style("fill", mapConfig.highlightPath.stroke); // draw united states var u = svg.append("g") .selectAll('path') .data(us2.features) .join('path') .attr('d', geoPathGenerator) .style("fill", mapConfig.states.fill) .style("stroke", "white") .style("stroke-width", 1); // append migrant paths svg.selectAll('.migrant-paths') .data(migrantPaths) .join("path") .attr("d", geoPathGenerator) .style("fill", "none") .style("stroke", mapConfig.defaultPath.stroke) .style("stroke-width", mapConfig.defaultPath.strokeWidth) .attr("mid", d => d.id) return svg; }38:T72f,highlightMigrantPath = (migrantPath) => { /* * Highlight one of the migrant paths in the map * * here's the trick - because all these paths are drawn on top of eachother, you can't really * just pick one out and change the color. It's probably covered by some other paths so it won't really * stand out. (And z-index doesn't work for svg, so it's not like you can pull it to the top of the pile) * * So what we do instead is draw an entirely new path directly on top of the one we want to highlight, * then transition it to the highlighted state. */ const transitionTime = 300; // Fade out & remove the previously highlighted path mapSvg.selectAll('.migrant-paths-selected') .attr("class", null) .transition().duration(transitionTime) .ease(d3.easeLinear) .style("stroke", mapConfig.defaultPath.stroke) .style("stroke-width", mapConfig.defaultPath.strokeWidth) .remove() mapSvg.select(".migrant-name") .text(migrantPath.name +"\n") mapSvg.select(".migrant-age") .text(`Age ${migrantPath.age} in 1930`) // draw the new path -- matches the style of the existing path, so it draws directly on top mapSvg.selectAll('.migrant-paths-selected') .data([migrantPath]) .join("path") .attr("d", geoPathGenerator) .style("fill", "none") .style("stroke", mapConfig.defaultPath.stroke) .style("stroke-width", mapConfig.defaultPath.strokeWidth) .attr("class", "migrant-paths-selected") .attr("marker-end", "url(#triangle-marker)") // transition new path to highlighted state mapSvg.selectAll('.migrant-paths-selected') .transition().duration(transitionTime) .ease(d3.easeLinear) .style("stroke", mapConfig.highlightPath.stroke) .style("stroke-width", mapConfig.highlightPath.strokeWidth) }39:T852,function drawSlopeChart(data, index) { const svg = d3.select(this); const width = slopeChartMultiplesBand.bandwidth(); const x = d3.scalePoint() .domain(d3.range(slopeChartColumns.length)) .range([slopeChartConfig.margin.left, width - slopeChartConfig.margin.right]) .padding(0.5) const y = d3.scaleLinear() .domain(d3.extent([0,75])) .range([slopeChartConfig.height - slopeChartConfig.margin.bottom, slopeChartConfig.margin.top + 5]) // + 5 padding for tick marks. Probably a better way to do this const line = d3.line() .x((d, i) => x(i)) .y(y) // draw chart title const chartTitle = svg.append("g") .attr("class", "multiples-title") .append("text") .attr("text-anchor", "middle") .attr("x", `${width/2}`) .attr("y", slopeChartConfig.margin.top / 2) .text(data.displayName); // draw tick marks at the top svg.append("g") .attr("text-anchor", "middle") .selectAll("g") .data(slopeChartColumns) .join("g") .attr("transform", (d, i) => `translate(${x(i)},${slopeChartConfig.margin.top})`) .call(g => g.append("text").text(d => d)) .call(g => g.append("line").attr("y1", 3).attr("y2", 9).attr("stroke", "currentColor")); // draw lines svg.append("g") .attr("fill", "none") .attr("stroke", "currentColor") .selectAll("path") .data(data.occupations) .join("path") .attr("d", d => line(d.values)); svg.append("g") .selectAll("g") .data(slopeChartColumns) .join("g") .attr("transform", (d, i) => `translate(${x(i)}, 0)`) .attr("text-anchor", (d, i) => i === 0 ? "end" : i === slopeChartColumns.length - 1 ? "start" : "middle") .selectAll("text") .data((colDatum, i) => d3.zip( data.occupations.map(i === 0 ? d => `${formatOccupation(d.name)} ${formatOccNumber(d.values[i])}` : d => `${formatOccNumber(d.values[i])} ${formatOccupation(d.name)}`), dodge(data.occupations.map(d => y(d.values[i]))) ) ) .join("text") .attr("y", ([, y]) => y) .attr("dy", "0.35em") .text(([text]) => text); }3a:[{"id":"5bffca711a2b45090494c77bab30bfa36859ecb5a0619c7d93e1da8f8089be61df96021c578b53cfbd2c3f6611e2567183fec5ed9a66876b50bb47123b2c56b9","href":"https://static.observableusercontent.com/files/5bffca711a2b45090494c77bab30bfa36859ecb5a0619c7d93e1da8f8089be61df96021c578b53cfbd2c3f6611e2567183fec5ed9a66876b50bb47123b2c56b9","name":"gz_2010_us_040_00_20m.json","type":"application/json","lastModified":1613276227587.159,"size":1426336},{"id":"5a013516e775124228b457ca82192b222d1d58e44b7995c6996c2f29ebb3a8df35d51a918df92e69dfb5c46fadcb47ff4cd72f9fa12ff7372e72bf1f45d55135","href":"https://static.observableusercontent.com/files/5a013516e775124228b457ca82192b222d1d58e44b7995c6996c2f29ebb3a8df35d51a918df92e69dfb5c46fadcb47ff4cd72f9fa12ff7372e72bf1f45d55135","name":"matchedSampleProcessed.csv","type":"text/csv","lastModified":1613839582813.667,"size":349105}] 32:{"id":"ffba899ed724f1d4","slug":"the-great-migration","title":"The Great Migration","thumbnail":"146a87dea68ab566d96e5e81cccd0ee86fc43a592732a4f409b4218803f3c130","access_level":"public","create_time":"$D2021-02-14T02:58:20.090Z","update_time":"$D2021-03-13T03:17:06.320Z","view_time":null,"first_public_time":"$D2021-02-20T22:46:55.919Z","has_unpublished_edits":null,"fork":false,"stars":19,"starred":false,"owner":{"type":"team","id":"00ff86da9a51042e","login":"wdonnell","name":"Will Donnell","avatar_url":"https://avatars-next.observableusercontent.com/0d3a07c0bb114733ee4342e954dce74434f79f502385fe648be5f8d112bb89e6","tier":"starter_2024"},"version":1815,"publish_version":1815,"role":null,"authored":false,"authors":[{"type":"individual","id":"d8ae7838f8bba879","login":"wdonnell","name":"Will Donnell","avatar_url":"https://avatars-next.observableusercontent.com/0d3a07c0bb114733ee4342e954dce74434f79f502385fe648be5f8d112bb89e6","tier":null}],"members":[{"type":"individual","id":"d8ae7838f8bba879","login":"wdonnell","name":"Will Donnell","avatar_url":"https://avatars-next.observableusercontent.com/0d3a07c0bb114733ee4342e954dce74434f79f502385fe648be5f8d112bb89e6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"306bfc5cc2b913f9","slug":"black-history","title":"Black History","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"The Great Migration","cells":[{"id":0,"value":"textIntro = html`\n

The Great Migration

1915 marked the beginning of the largest domestic migration in American history.

Responding to demand for factory labor during World War I, and seeking to escape the desperate economic conditions and oppressive cruelty of the Jim Crow South, hundreds of thousands of Black Americans began relocating north.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1226,"value":"migrationMap = mapSvg.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"textMap = md `Researchers William Collins and Marianne Wanamaker examined individual census records for thousands of working-age Black men during this time and were able to match their entries from the 1910 and 1930 censuses, letting us examine their geographic movements and eventual economic outcomes^{[[1](#footnotes)]}.\n\nEach line in the map above represents a real person and their migration north, sometime between 1910 and 1930.\n\nDuring this first wave of The Great Migration, around 1.2 million African Americans would leave the South^{[[7](#footnotes)]}.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1038,"value":"textMovingNorth = md `## Moving North\n\nDespite the favorable job market in northern cities, packing up and moving was difficult. It meant leaving the comfort of existing social support networks behind for an unknown environment and uncertain future. Most often, individuals would go alone, with larger groups following later after receiving encouraging letters from those that had resettled^{[[4](#footnotes)]}.\n\nClear migratory patterns began to emerge, largely based on geography. Migrants on the East Coast would head toward cities like Boston, Philadelphia, and New York, while those in the Deep South would head for midwestern cities, such as Chicago, Cleveland, and St. Louis^{[[3](#footnotes)]}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":957,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1066,"value":"textHeatmap = html `

This visualization uses a subset of source and destination states from the men tracked in Collins & Wanamaker's study, so to exclude inter-south migration and a few less-popular destinations, such as out west. Western cities would capture a much larger share of migrants from the South during the second wave of the Great Migration, which began after World War II.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"textOccupationalChanges = md `## Occupational Changes\n\nThe Great Migration had profound effects on employment. Resettling in an urban environment, migrants left agricultural life behind. Typical employment included jobs in foundries, building trades, meatpacking companies, and railroads, or work as servants, porters, janitors, cooks, and cleaners^{[[4](#footnotes)]}.\n\nCompare the change in labor categories between the cohort of men that stayed in the South versus those that chose to move^{[[5](#footnotes)]}:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"slopeChart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, slopeChartConfig.width, slopeChartConfig.height])\n .attr(\"class\", \"slope-chart\");\n \n svg.append(\"g\")\n .attr(\"class\", \"multiples-wrapper\")\n .selectAll(\"g\")\n .data(occupationData.filter(x => x.display !== false))\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${slopeChartMultiplesBand(i)},0)`)\n .call(g => g.attr(\"class\", \"multiple\"))\n .each(drawSlopeChart);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"textEconomicOutcome = md `## Economic Outcome\n\nCollins & Wanamaker also sought to answer the question: did those that moved north see an improvement in economic conditions?\n\nComparing the income of migrants to non-migrants—and controlling for factors including age, literacy, veteran status, geography, and local school attendance—the answer is overwhelmingly yes, even when compensating for the higher cost of living in the more urbanized North^{[[6](#footnotes)]}.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"incomeChart = vegalite({\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.json\",\n width: width,\n autosize: \"fit\",\n title: {\n text: \"Relative Income of African American Men During the Great Migration, 1930\",\n fontSize: 20,\n font: \"Garamond\",\n fontWeight: \"normal\",\n margin: 100\n },\n data: { values: incomeData },\n mark: \"bar\",\n encoding: {\n x: {\n field: \"value\",\n title: \"Relative Earnings\",\n type: \"quantitative\",\n axis: {\n \"format\": \"%\",\n tickCount: 5,\n titleFont: \"Garamond\",\n titleFontSize: 17,\n titleFontWeight: \"normal\",\n titlePadding: 10\n }\n },\n y: {\n field: \"name\",\n title: null,\n type: \"nominal\",\n axis: {\n labelFont: \"Garamond\",\n labelFontSize: 15,\n labelFontWeight: \"normal\",\n labelLimit: 250\n }\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"textConclusion = md `They even looked at pairs of brothers, where one moved north and the other stayed. The results were similar.\n\nTheir conclusion:\n\n> \"Our best estimates suggest that the Great Migration was a key force in driving black-white convergence in economic status in the early 20th century, when regional income gaps were comparatively large and when black economic mobility in the South was severely circumscribed. … It is important to acknowledge that what awaited the early migrants was not a ‘Promised Land.’ The work available to migrants was often drudgery, discrimination was common, and new evidence suggests that the migrants may have paid a price in terms of long-term health outcomes. Nonetheless, for the first waves of those who left the South, the gains we observe were a real and significant step away from slavery’s legacy of poverty.\" ^{[[1](#footnotes)]}\n\n----\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1342,"value":"textFooter = html`

Thanks for reading. To report errors or provide feedback, feel free to email me: wcdfyi (at) gmail.com

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"textAcknowledgements = md`## Acknowledgements\n\n* [Reference code for slope chart](https://observablehq.com/@d3/slope-chart)\n* [GeoJSON file for US map](https://eric.clst.org/tech/usgeojson/)\n* [Understanding log points](https://patrickjuli.us/2016/01/27/how-i-wish-we-measured-percentage-change/)\n* [Reference code for chart multiples](https://observablehq.com/@didoesdigital/30-july-2020-d3-slope-chart-small-multiples)\n* [Vega protips](https://observablehq.com/@tmcw/vega-lite-protips)\n* [Standard-library, for figuring out Promises.tick](https://observablehq.com/@observablehq/standard-library)\n* [Arrowhead marker from MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/marker-end)\n* Conor & John, for proofreading\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1808,"value":"textUpdate = md`## Updates\n3/12/2021 - Named some cells to allow embedding\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"md`## Technical Stuff`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"md `#### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"rawData = { \n // this is a subset of data from the Collins & Wanamaker dataset\n // I linked the MatchedSample file with the 1910 data based on uniqueid or serial and \n // and used this to capture the family name from the namelast_pop_1910 field\n return FileAttachment(\"matchedSampleProcessed.csv\").csv();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"incomeData = ([\n {\n name: \"Stayed in the South\",\n value: 1\n },\n {\n name: \"Migrated North\",\n value: 1.93\n }\n]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"statesSouth = [\"Texas\", \"Louisiana\", \"Arkansas\", \"Missouri\", \"Mississippi\", \"Alabama\", \"Tennessee\", \"Kentucky\", \"Florida\", \"Georgia\", \"South Carolina\", \"North Carolina\", \"Virginia\", \"Maryland\", \"Delaware\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"statesNorth = [\"New Hampshire\", \"Maine\", \"Vermont\", \"New Jersey\", \"New York\", \"Pennsylvania\", \"Ohio\", \"Michigan\", \"Indiana\", \"Illinois\", \"Missouri\"] //\"Massachusetts\", \"Connecticut\", \"Wisconsin\",","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1439,"value":"md `Subset of all migrants, roughly filtered for those that moved north:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"migrantPaths = rawData\n.filter(x => x.state_1910 != x.state_1930 && Number.parseFloat(x.latitude_1930) > 38.307359)\n.map(x => {\n return {type: \"LineString\", coordinates: [[-x.longitude_1910, x.latitude_1910], [-x.longitude_1930, x.latitude_1930]], name: x.familyName, age: x.age_1930}\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1362,"value":"namedMigrants = migrantPaths.filter(x => x.name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"md`#### Title Map Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"us2 = FileAttachment(\"gz_2010_us_040_00_20m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"mapConfig = ({\n height: 800,\n width: 900,\n title: {\n right: 200,\n top: 320,\n lineHeight: 95\n },\n migrantInfo: {\n right: 200,\n top: 590,\n lineHeight: 25\n },\n defaultPath: {\n stroke: '#8c8c8c',\n strokeWidth: .25\n },\n highlightPath: {\n stroke: 'red',\n strokeWidth: 2\n },\n states: {\n fill: \"lightgray\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1165,"value":"geoPathGenerator = {\n let projection = d3.geoAlbers().center([19,42]).scale(1800);\n \n return d3.geoPath().projection(projection);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1173,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1186,"value":"{\n // cycle randomly through migrant paths that have a name\n // and highlight the arrow\n while (true) {\n yield Promises.tick(2000).then(() => {\n highlightMigrantPath(_.sample(namedMigrants))\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"md `#### Slope Chart Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"slopeChartConfig = ({\n height: 300,\n width: 800,\n margin: {top: 70, right: 50, bottom: 30, left: 50},\n padding: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"formatOccupation = (occName) => {\n const occupationDisplayNames = {\n \"Professoinal/Clerical\" : \"Professional\",\n \"Farm\": \"Farm\",\n \"Crafts/Semi-Skill\": \"Semi-Skilled\",\n \"Non-Ag Laborer/Operative\": \"Unskilled Labor\"\n }\n \n return occupationDisplayNames[occName];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"slopeChartColumns = [1910, 1930]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"slopeChartMultiplesBand = d3.scaleBand()\n .domain([0, 1])\n .range([0, slopeChartConfig.width]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"formatOccNumber = (n) => Math.round(n) + \"%\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"/* from https://observablehq.com/@d3/slope-chart */\nfunction dodge(positions, separation = 10, maxiter = 10, maxerror = 1e-1) {\n positions = Array.from(positions);\n let n = positions.length;\n if (!positions.every(isFinite)) throw new Error(\"invalid position\");\n if (!(n > 1)) return positions;\n let index = d3.range(positions.length);\n for (let iter = 0; iter < maxiter; ++iter) {\n index.sort((i, j) => d3.ascending(positions[i], positions[j]));\n let error = 0;\n for (let i = 1; i < n; ++i) {\n let delta = positions[index[i]] - positions[index[i - 1]];\n if (delta < separation) {\n delta = (separation - delta) / 2;\n error = Math.max(error, delta);\n positions[index[i - 1]] -= delta;\n positions[index[i]] += delta;\n }\n }\n if (error < maxerror) break;\n }\n return positions;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"md` #### Vega Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"vegaWidth = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1080,"value":"md `#### Heatmap setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":964,"value":"moveState = rawData.filter(x => statesSouth.includes(x.state_1910) && statesNorth.includes(x.state_1930))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"md `#### Style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"styles = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`#### Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"_ = require(\"lodash\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"vegalite = require('@observablehq/vega-lite')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 33:"$32:body"