3e:null 3f:["$","title",null,{"children":"The Great Migration | Will Donnell | Observable"}] 45: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"} } } )46: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) `47: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] }, ] } ])48: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; }49: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) }4a: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); }4b:[{"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}] 43:{"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","bio":""},"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,"bio":""}],"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":{"titling":"auto","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.

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.

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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"md`## Technical Stuff`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"md `#### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1362,"value":"namedMigrants = migrantPaths.filter(x => x.name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"md`#### Title Map Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1173,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"md `#### Slope Chart Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"slopeChartColumns = [1910, 1930]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"formatOccNumber = (n) => Math.round(n) + \"%\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"md` #### Vega Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"vegaWidth = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1080,"value":"md `#### Heatmap setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"md `#### Style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"styles = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`#### Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"_ = require(\"lodash\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"vegalite = require('@observablehq/vega-lite')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 44:"$43:body"