Student immigration

countryList =
  await FileAttachment("/data/country-list.csv")
  .csv({ typed: true });

viewof basisSelect = Inputs.search(countryList.map(d => d.name), {
  label: "Country",
  query: "Australia",
  datalist: countryList.map(d => d.name),
  sort: true,
  unique: true,
  format: n => ""
});

selectedCountry = basisSelect.length == 1 ?
  basisSelect[0] : null

viewof yearSelect = Inputs.range([1998, 2022],
  {
    step: 1,
    label: "Year",
    value: 2022
  });

popOrigins =
  await FileAttachment("/data/popular-origins-by-destination.csv")
  .csv({ typed: true })
popDestinations =
  await FileAttachment("/data/popular-destinations-by-origin.csv")
  .csv({ typed: true })

originByCountry = popOrigins.filter(function(row) {
  return row.dest_country_name == selectedCountry
})
destinationByCountry = popDestinations.filter(function(row) {
  return row.origin_country_name == selectedCountry
})

// compute a fixed x range for a given country across all years, in and out
countryMax = d3.max([
  d3.max(originByCountry, d => d.value_lumped),
  d3.max(destinationByCountry, d => d.value_lumped)
]);

// further filter data by selected year
filteredPopularOrigins = originByCountry.filter(function(row) {
  return row.year == yearSelect
})
filteredPopularDestinations = destinationByCountry.filter(function(row) {
  return row.year == yearSelect
})

commaFormat = d3.format(",.0f")

selectedCountry == null ?
  html`<h4 class="textcenter faded">Search for a country</h4>` : html``

popOriginPlot =
  selectedCountry == null ? html`` :
    filteredPopularOrigins.length == 0 ?
    html`<div style="width:100%;height:280px;padding-top:25px;display:flex;"><p style="margin:auto;">No data for student flows <strong>into ${selectedCountry}</strong> in <strong>${yearSelect}</strong>.</p><div>` :
    Plot.plot({
      marks: [
        Plot.barX(filteredPopularOrigins, {
          y: "origin_country_lumped",
          x: "value_lumped",
          fill: "value_lumped",
          sort: {y: "x", reverse: true},
          ariaLabel: "origin_country_lumped",
          ariaDescription: d => `${d.origin_country_lumped} sent ${d.value_lumped} students.`,
          title: d => `${d.origin_country_lumped}: ${d.value_lumped} students`
        }),
        Plot.text(filteredPopularOrigins, {
          y: "origin_country_lumped",
          x: "value_lumped",
          text: d => d3.format(".3~s")(d.value_lumped),
          fill: "grey",
          fontSize: 12,
          textAnchor: "start",
          dx: 4,
          ariaHidden: true
        })
      ],
      x: {
        label: "Number of incoming students →",
        tickFormat: ".3~s",
        ariaLabel: "X axis",
        ariaDescription: "Horizontal axis: number of incoming students, increasing to the right`",
        labelOffset: 45,
        domain: [0, countryMax],
        axis: "top"
      },
      y: {
        label: "",
        ariaLabel: "Y axis",
        ariaDescription: `Vertical axis: top 10 origin countries, ordered by popularity. All other origin countries sending students to ${selectedCountry} are lumped together as 'other countries'`
      },
      color: { scheme: "ylgnbu", type: "sqrt" },
      width: 450,
      marginLeft: 175,
      marginRight: 65,
      marginBottom: 15,
      style: {
        fontFamily: "Roboto Condensed",
        fontSize: "16px"
      }
    });

popDestinationPlot =
  selectedCountry == null ? html`` :
    filteredPopularDestinations.length == 0 ?
    html`<div style="width:100%;height:280px;padding-top:25px;display:flex;"><p style="margin:auto;">No data for student flows <strong>out of ${selectedCountry}</strong> in <strong>${yearSelect}</strong>.</p><div>` :
    Plot.plot({
      marks: [
        Plot.barX(filteredPopularDestinations, {
          y: "dest_country_lumped",
          x: "value_lumped",
          fill: "value_lumped",
          sort: {y: "x", reverse: true},
          ariaLabel: "dest_country_lumped",
          ariaDescription: d => `${d.origin_country_lumped} received ${d.value_lumped} students.`,
          title: d => `${d.origin_country_lumped}: ${d.value_lumped} students`
        }),
        Plot.text(filteredPopularDestinations, {
          y: "dest_country_lumped",
          x: "value_lumped",
          text: d => d3.format(".3~s")(d.value_lumped),
          fill: "grey",
          fontSize: 12,
          textAnchor: "start",
          dx: 4,
          ariaHidden: true
        })
      ],
      x: {
        label: "Number of outgoing students →",
        tickFormat: ".3~s",
        ariaLabel: "X axis",
        ariaDescription: "Horizontal axis: number of outgoing students, increasing to the right",
        labelOffset: 45,
        domain: [0, countryMax],
        axis: "top"
      },
      y: {
        label: "",
        ariaLabel: "Y axis",
        ariaDescription: `Vertical axis: top 10 destination countries, ordered by popularity. All other destination countries receiving students from ${selectedCountry} are lumped together as 'other countries'`
      },
      color: { scheme: "ylorrd", type: "sqrt" },
      width: 450,
      marginLeft: 175,
      marginRight: 65,
      marginBottom: 15,
      style: {
        fontFamily: "Roboto Condensed",
        fontSize: "16px"
      }
    });

micro = require("[email protected]")
micro.init({
  awaitOpenAnimation: true,
  awaitCloseAnimation: true
});