25:["$","title",null,{"children":"Mapping the Vietnamese Diaspora | Han Vu | Observable"}] 49:T427,## Hypotheses * **(Selected)** **Possible insight 1:** There is the most number of foreign-born Vietnamese immigrants in the United States and high-income countries in Europe, Asia, and Oceania. Neighboring countries in Asia and especially East Asia are also a popular choice due to their share of cultures and geographic proximity. * **Possible insight 2:** Most Vietnamese refugees settled in the United States and neighboring countries in Indochina in the aftermath of the Vietnam War between 1975 - 1997. The number of Vietnamese immigrants in the United States since then has increased steadily through family reunification with previously admitted refugees. For the scope of this homework, I chose to pursue Insight 1, as choosing to include Insight 2 would involve including another [dataset](https://www.unhcr.org/refugee-statistics/) to account for the number of exclusively UNHCR-classified Vietnamese refugees since 1975 (excluding those who obtained citizenship through other means such as green card, etc.) 4a:T2264,// Customized based on: // Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/choropleth function Custom_Choropleth(data, { id = d => d.id, // given d in data, returns the feature id value = () => undefined, // given d in data, returns the quantitative value title, // given a feature f and possibly a datum d, returns the hover text format, // optional format specifier for the title scale = d3.scaleSequential, // type of color scale domain, // [min, max] values; input of color scale range = d3.interpolateBlues, // output of color scale width = 640, // outer width, in pixels height, // outer height, in pixels projection, // a D3 projection; null for pre-projected geometry features, // a GeoJSON feature collection featureId = d => d.id, // given a feature, returns its id borders, // a GeoJSON object for stroking borders outline = projection && projection.rotate ? {type: "Sphere"} : null, // a GeoJSON object for the background unknown = "#ccc", // fill color for missing data fill = "white", // fill color for outline stroke = "white", // stroke color for borders strokeLinecap = "round", // stroke line cap for borders strokeLinejoin = "round", // stroke line join for borders strokeWidth, // stroke width for borders strokeOpacity, // stroke opacity for borders } = {}) { // Compute values. const N = d3.map(data, id); const V = d3.map(data, value).map(d => d == null ? NaN : +d); const Im = new d3.InternMap(N.map((id, i) => [id, i])); const If = d3.map(features.features, featureId); // Compute default domains. if (domain === undefined) domain = d3.extent(V); // Construct scales. const color = scale(domain, range); if (color.unknown && unknown !== undefined) color.unknown(unknown); // Compute titles. if (title === undefined) { format = color.tickFormat(100, format); title = (f, i) => `${f.properties.name}\n${format(V[i])}`; } else if (title !== null) { const T = title; const O = d3.map(data, d => d); title = (f, i) => T(f, O[i]); } // Compute the default height. If an outline object is specified, scale the projection to fit // the width, and then compute the corresponding height. if (height === undefined) { if (outline === undefined) { height = 400; } else { const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline); const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy); projection.scale(projection.scale() * (l - 1) / l).precision(0.2); height = dy; } } const button = restartButton; // Construct a path generator. const path = d3.geoPath(projection); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "width: 100%; height: auto; height: intrinsic;"); if (outline != null) svg.append("path") .attr("fill", fill) .attr("stroke", "currentColor") .attr("d", path(outline)); svg.append("g") .selectAll("path") .data(features.features) .join("path") .attr("fill", (d, i) => color(V[Im.get(If[i])])) .on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave) .attr("fill-opacity", 0.8) .attr("d", path) .append("title") .text((d, i) => title(d, Im.get(If[i]))); // Points // const countries = svg.append("g") // .attr("class", "countries") // The actual points // const country = countries.selectAll("country") // .data(data_map) // .join("g") // .attr('class', 'country') // .attr("transform", d => { // let x = projection([d.destination.long, d.destination.lat])[0] // let y = projection([d.destination.long, d.destination.lat])[1] // return `translate(${x},${y} )` // }) // country.append("circle") // .attr("r", 1.5) // .attr("fill", '#ff0072'); const t = svg.transition().duration(1000); // Lines const routes = svg .append("g") .attr("class", "routes") let route = routes .selectAll("g") .data(data_map) .join("g") route.append('line') .on('mouseenter', mouseEnterLine) .on('mouseleave', mouseLeaveLine) .attr("x1", d => projection([d.origin.long, d.origin.lat])[0]) .attr("x2", d => projection([d.destination.long, d.destination.lat])[0]) .attr("y1", d => projection([d.origin.long, d.origin.lat])[1]) .attr("y2", d => projection([d.destination.long, d.destination.lat])[1]) .transition(t) .style("stroke", routesSelect ? "#ff0072" : 'none') .style("stroke-width", 1.5) .attr("stroke-opacity", .25) // route // .on('mouseenter', mouseEnterLine) // .on('mouseleave', mouseLeaveLine) route.append("circle") .attr("transform", d => { let x = projection([d.destination.long, d.destination.lat])[0] let y = projection([d.destination.long, d.destination.lat])[1] return `translate(${x},${y} )` }) .transition(t) .attr("r", routesSelect ? 1.5 : 0) .attr("fill", '#ff0072'); // Lines // const routes = svg.append("g") // .attr("class", "routes") // let route = routes.selectAll("g") // .data(data_map) // .join("g") // route.append("path") // // .attr("class", "background") // // .attr("style", "fill:none !important") // .transition(t) // .attr("fill", "none") // .attr("stroke-width", 1.5) // .attr("stroke", routesSelect ? '#ff0072' : 'none' ) // .attr("stroke-opacity", .25) // .attr('d', (d) => path({type: "LineString", coordinates: [[d.origin.long, d.origin.lat], [d.destination.long, d.destination.lat]]})) // route.append("circle") // .attr("transform", d => { // let x = projection([d.destination.long, d.destination.lat])[0] // let y = projection([d.destination.long, d.destination.lat])[1] // return `translate(${x},${y} )` // }) // .transition(t) // .attr("r", routesSelect ? 1.5 : 0) // .attr("fill", '#ff0072'); // route // .on('mouseenter', mouseEnterLine) // .on('mouseleave', mouseLeaveLine) function mouseEnter(event, d) { d3.select(this) // .attr("fill", '#ff70b0') // .attr("stroke", "#ff70b0") // .attr("stroke-width", 2) .attr("fill-opacity", 1) .raise() } function mouseLeave(event, d) { d3.select(this) // .attr("fill", (d, i) => color(V[Im.get(If[i])])) .attr("fill-opacity", 0.8) // .attr("stroke", 'none') .lower() } function mouseEnterLine(event, d) { d3.select(this) // .attr("fill", '#ff70b0') // .attr("stroke", "#ff70b0") // .attr("stroke-width", 2) .attr("stroke-opacity", 1) // .attr("stroke-opacity", d3.select(this).attr("stroke-opacity") == .25 ? 1 : .25) // .attr("fill-opacity", d3.select(this).attr("fill-opacity") == .8 ? 1 : .8) .raise() tooltipText.html(`

Vietnam → ${d.country_name}
# Immigrants: ${d3.format(',')(d.value)}

`) const labelWidth = 150; tooltipRect.attr('width', labelWidth); const xPos = event.pageX; const yPos = projection([d.destination.long, d.destination.lat])[1]; // console.log(yPos) tooltip.attr('transform', `translate(${xPos},${yPos})`).attr('visibility', 'visible').raise(); } function mouseLeaveLine(event, d) { d3.select(this) // .attr("fill", (d, i) => color(V[Im.get(If[i])])) .attr("stroke-opacity", .25) // .attr("stroke", 'none') // .attr("stroke-opacity", d3.select(this).attr("stroke-opacity") == 1 ? .25 : 1) // .attr("fill-opacity", d3.select(this).attr("fill-opacity") == 1 ? .8 : 1) .lower() tooltip.attr('visibility', 'hidden'); } const tooltip = svg.append('g') .attr('visibility', 'hidden'); const tooltipRect = tooltip.append('rect') .attr('fill', 'white') .attr('stroke', 'black') // .attr('rx', 5) .attr('height', 50); const tooltipText = tooltip .append("foreignObject") // .attr("width", 400) // .attr("height", 420) .attr("width", 200) .attr("height", 200) .append("xhtml:body") .style("font", "11px 'Helvetica Neue'") if (borders != null) svg.append("path") .attr("pointer-events", "none") .attr("fill", "none") .attr("stroke", stroke) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .attr("d", path(borders)); return Object.assign(svg.node(), {scales: {color}}); }4b:T920,data_links = data.reduce((all, curr) => { if (parseInt(curr[sankeyYearSelected])) { let destCountry = (curr['Destination Country'] && curr['Destination Subregion'] && curr['Destination Region']) || (curr['Destination Country'] && !curr['Destination Subregion'] && curr['Destination Region']) let destSubregion = !curr['Destination Country'] && curr['Destination Subregion'] && curr['Destination Region'] let destRegion = !curr['Destination Country'] && !curr['Destination Subregion'] && curr['Destination Region'] let obj = {}; const arrayEquals = (a, b) => { return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((val, index) => val === b[index]); } if (arrayEquals(sankeyLevelSelected, ["Origin", "Continents", "Sub-continents", "Countries"])) { obj.source = destCountry ? (curr['Destination Subregion'] || curr['Destination Region']) : destSubregion ? curr['Destination Region'] : destRegion ? curr['Origin Country'] : ""; obj.target = destCountry ? curr['Destination Country'] : destSubregion ? curr['Destination Subregion'] : destRegion ? curr['Destination Region'] : ""; obj.value = parseInt(curr[sankeyYearSelected]); } else if (arrayEquals(sankeyLevelSelected, ["Origin", "Continents", "Sub-continents"])) { obj.source = destSubregion ? curr['Destination Region'] : destRegion ? curr['Origin Country'] : ""; obj.target = destSubregion ? curr['Destination Subregion'] : destRegion ? curr['Destination Region'] : ""; obj.value = parseInt(curr[sankeyYearSelected]); } else if (arrayEquals(sankeyLevelSelected, ["Origin", "Continents", "Countries"])) { obj.source = destCountry ? curr['Destination Region'] : destRegion ? curr['Origin Country'] : ""; obj.target = destCountry ? curr['Destination Country'] : destRegion ? curr['Destination Region'] : ""; obj.value = parseInt(curr[sankeyYearSelected]); } else if (arrayEquals(sankeyLevelSelected, ["Origin", "Continents"])) { obj.source = destRegion ? curr['Origin Country'] : ""; obj.target = destRegion ? curr['Destination Region'] : ""; obj.value = parseInt(curr[sankeyYearSelected]); } if (obj.source && obj.target) { all.push(obj); } } return all; }, [])4c:[{"id":"ae697b85ec2ec054db514134ced6cd30f6d5fbadd7bd55257ded309a73f83c5b799d606c3ce011c3014b6e7e54ce4b291cd4e59620a87780fa677e6492a74f9b","href":"https://static.observableusercontent.com/files/ae697b85ec2ec054db514134ced6cd30f6d5fbadd7bd55257ded309a73f83c5b799d606c3ce011c3014b6e7e54ce4b291cd4e59620a87780fa677e6492a74f9b","name":"ims_stock_vietnam_countries@10.csv","type":"text/csv","lastModified":1666127469030.09,"size":10516},{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m.json","type":"application/json","lastModified":1666127469030.09,"size":756420}] 29:{"id":"e74e5e928ea40fdc","slug":null,"title":"Mapping the Vietnamese Diaspora","thumbnail":"35591c579efd238f520a4e4e6775a1ccc6574ff505c1dffeaf020d251af0c57e","access_level":"public","create_time":"$D2022-10-18T21:11:09.030Z","update_time":"$D2022-10-18T21:11:09.030Z","view_time":null,"first_public_time":"$D2022-10-18T21:11:09.030Z","has_unpublished_edits":null,"fork":{"id":"672d968d53fe721a","slug":"mapping-the-vietnamese-diaspora","title":"Mapping the Vietnamese Diaspora","owner":{"id":"70a28fc0926865c6","login":"incakoala","name":"Vy"}},"stars":1,"starred":false,"owner":{"type":"team","id":"7745cdc4339f85a1","login":"hantvu","name":"Han Vu","avatar_url":"https://avatars-next.observableusercontent.com/404a459924a638a8a4ed3fbea9eb6aea430463c3bea37c06748b5283f329c793","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1049,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4cb51c821d003672","login":"hantvu","name":"Han Vu","avatar_url":"https://avatars-next.observableusercontent.com/404a459924a638a8a4ed3fbea9eb6aea430463c3bea37c06748b5283f329c793","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"4cb51c821d003672","login":"hantvu","name":"Han Vu","avatar_url":"https://avatars-next.observableusercontent.com/404a459924a638a8a4ed3fbea9eb6aea430463c3bea37c06748b5283f329c793","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mapping the Vietnamese Diaspora","cells":[{"id":0,"value":"# Mapping the Vietnamese Diaspora\n\n* *Part of NEU's [Data Visualization course](https://johnguerra.co/classes/data_visualization_spring_2022/) by John Alexis Guerra Gómez*\n* [Data source](https://www.un.org/development/desa/pd/content/international-migrant-stock)\n* [Tweet](https://twitter.com/anthuriumcryst/status/1515932566494203910) | [Video](https://www.youtube.com/watch?v=hM5eWy6-MwI)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":847,"value":"After the fall of Saigon in 1975, the United States sponsored the evacuation of an estimated 125,000 Vietnamese refugees, which initiated large-scale immigration from Vietnam to the United States. More refugees and their families were accepted to the United States as the humanitarian crisis and displacement worsened. Since then, the Vietnamese immigrant population around the world has increased dramatically, almost doubling per decade from 1990 to 2000, and continued to increase steadily in the 2000s. Today, the Vietnamese diaspora is among the largest in the world. As I continue to learn about the history of the Vietnamese diaspora and its rich history, it's important to understand the pattern of migration and where the people settled down throughout the years.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":663,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":666,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":670,"value":"## Abstraction\n\n### Users\n* Historians, students, and people who are interested in the Vietnamese diaspora and its migration pattern throughout the years following the Vietnam War and beyond.\n* Descendants of the early generation overseas Vietnamese who wish to better understand their roots and family history.\n\n### Data\n* Data source: [UN International Migrant Stock (2020)](https://www.un.org/development/desa/pd/content/international-migrant-stock)\n* Dataset type: Table - Static\n \n* Attributes:\n \n * **Destination Country** (Categorical)\n * **Destination Region** (Categorical)\n * **Destination Subregion** (Categorical)\n * **Destination Code** (Ordinal)\n * **Origin Country** (Categorical)\n * **Origin Code** (Ordinal)\n * **1990 - 2020** (Ordinal)\n \n* Derived attributes:\n * **Destination Latitude** (Geo / Quantitative-Diverging)\n * **Destination Longitude** (Geo / Quantitative-Diverging)\n * **Origin Latitude** (Geo / Quantitative-Diverging)\n * **Origin Longitude** (Geo / Quantitative-Diverging)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":673,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":677,"value":"## Tasks\n\n**T1.** Present/identify the countries and continents that have the most number of Vietnamese immigrants as of 2020 (Present/Identify, Distribution)\n\n**T2.** Compare the immigration patterns of Vietnamese people over the years since 1990 (Compare, Trends)\n\n**How?**\n* Marks:\n * Geo shapes & lines to represent countries and migration paths (world map)\n * Funnels/lines to represent migration paths (sankey)\n* Channels:\n * Color hue to represent the number of immigrants (world map)\n * Multi-hue color schemes to represent migration paths (sankey)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":680,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":684,"value":"## Insights\n\n* The United States is the top destination for Vietnamese migrants (with 1,403,193 Vietnamese immigrants), followed by Japan (335, 668), China (303,095), Australia (269,812), and Canada (182,265), according to mid-2020 estimates by the United Nations Population Division.\n* The number of Vietnamese immigrants in the United States has increased steadily through the years, most likely through naturalization through family reunification.\n* For sub-continents, Eastern Asia and Western Europe seem to overall attract the most number of Vietnamese immigrants.\n* The rate of Vietnamese immigration to China seemed to flatten by 2005.\n* South Korea has seen a steady increase in the number of Vietnamese immigrants since the 2000s, consistent with the country's rapid economic growth.\n* Most of the top destinations of Vietnamese immigrants are high-income countries.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":692,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":740,"value":"## United States is the most popular destination for Vietnamese immigrants, followed by Japan, China, Australia, and Canada","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"viewof parallel = {\n const form = html``;\n form.oninput = () => form.value = +form.select.value;\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"viewof routesSelect = Inputs.toggle({label: html`Routes`, value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"viewof restartButton = Inputs.button(\"Restart\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"key = Legend(map.scales.color, {title: \"Number of immigrants\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"map = Custom_Choropleth(data_map, {\n id: d => d.country, // country name, e.g. Zimbabwe\n value: d => d.value, // health-adjusted life expectancy\n range: d3.interpolateHcl('#e5eff9', '#145fa6'),\n features: countries,\n // featureId: d => d.properties.name, // i.e., not ISO 3166-1 numeric\n borders: countrymesh,\n projection: d3geo.geoCylindricalEqualArea().parallel(parallel),\n // projection: d3geo.geoNaturalEarth2(),\n // projection: d3geo.geoMercator(),\n width\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"{\n const base = vl\n .markText({ align: \"right\" })\n .encode(\n vl.y().fieldQ(\"2020\").title(\"Number of immigrants\"),\n vl.x().fieldN(\"country\").sort({op: \"sum\", field: \"2020\", order: \"descending\"}).title(\"Destination\")\n // vl.text().average(\"2020\")\n )\n .title({ text: 'Distribution of Vietnamese immigrants worldwide (International Migrant Stock 2020)', anchor: \"start\" })\n \n const bars = base\n .markBar({tooltip: true})\n // .encode(vl.color({ value: \"#145fa6\" }))\n .encode(\n vl.color({legend: null}).fieldQ(\"2020\").scale({scheme: 'purpleblue'}),\n vl.tooltip([{title: \"Country\", field: \"country\"}, {title: \"# Immigrants\", field: \"2020\", format: \",\"}]))\n \n\n return vl\n .layer(bars, base)\n // .data(data.filter(d => !d['Destination Country'] == \"\"))\n .data(data_bar)\n .width(1000)\n .height(500)\n .render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":764,"value":"## North America, East Asia, and Western Europe continue to be the top destinations for Vietnamese immigrants since the 1990s. The rate of immigration to high-income countries has also consistently grown through the years","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"viewof sankeyYearSelected = Inputs.range([1990, 2020], {value: 2020, step: 5, label: \"Year\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"viewof sankeyLevelSelected = Inputs.checkbox([\"Origin\", \"Continents\", \"Sub-continents\", \"Countries\"], {label: \"Nodes\", value: [\"Origin\", \"Continents\", \"Countries\"], disabled: [\"Origin\", \"Continents\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"chart = SankeyChart({\n links: data_links\n}, {\n nodeGroup: d => d.id.split(/\\W/)[0], // take first word for color\n nodeAlign: d3.sankeyJustify, // e.g., d3.sankeyJustify; set by input above\n linkColor: \"source-target\", // e.g., \"source\" or \"target\"; set by input above\n format: (f => d => `${f(d)}`)(d3.format(\",.1~f\")),\n width,\n height: 900\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"## Data Processing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":811,"value":"I cleaned the raw data to keep the needed rows and columns using Excel, as well as manually added the longitude and latitude data of each country. Then, I used JavaScript to format the data for the visualizations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":97,"value":"data_map = data.reduce((all, curr) => {\n if (curr['Destination Country']) {\n let obj = {};\n obj.country = curr['Destination Code'];\n obj.country_name = curr['Destination Country'];\n obj.value = parseInt(curr['2020']);\n obj.origin = {lat: parseInt(curr['Origin Latitude']), long: parseInt(curr['Origin Longitude'])};\n obj.destination = {lat: parseInt(curr['Destination Latitude']), long: parseInt(curr['Destination Longitude'])};\n all.push(obj);\n }\n return all;\n}, [])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"data_bar = data.reduce((all, curr) => {\n if (curr['Destination Country']) {\n let isElemExist = all.findIndex(item => {\n return item['country'] === 'All others';\n })\n if (curr['2020'] >= 50000) {\n let obj = {}\n obj['2020'] = parseInt(curr['2020']) || 0\n obj['country'] = curr['Destination Country']\n all.push(obj)\n } else {\n if (isElemExist === -1) {\n let obj = {}\n obj['2020'] = parseInt(curr['2020']) || 0\n obj['country'] = 'All others'\n all.push(obj)\n } else {\n all[isElemExist]['2020'] += parseInt(curr['2020']) || 0\n }\n }\n }\n \n return all\n}, [])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"data = FileAttachment(\"ims_stock_vietnam_countries@10.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"world = FileAttachment(\"countries-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"countrymesh = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"d3geo = require(\"d3-geo@1\", \"d3-geo-projection@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"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":28,"value":"import {SankeyChart} from \"@d3/sankey\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"import {Legend} from \"@d3/choropleth\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"import { vl } from \"@vega/vega-lite-api-v5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null