Global education

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

viewof basisSelect = Inputs.select(countryList.map(d => d.name), {
  label: "Country",
  value: "Australia",
  sort: true,
  unqiue: true
});
viewof yearSelect = Inputs.range([1998, 2021],
  {
    step: 1,
    label: "Year",
    value: 2019
  });

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

// first filter data by selected country
originByCountry = popOrigins.filter(function(row) {
  return row.dest_country_name == basisSelect;
});
destinationByCountry = popDestinations.filter(function(row) {
  return row.origin_country_name == basisSelect;
});

// 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");

popOriginPlot =
  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 ${basisSelect}</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`
      }),
      // label for value on left
      // Plot.text(filteredPopularOrigins, {
      //   y: "origin_country_lumped",
      //   x: "value_lumped",
      //   // add conditions to value label if required
      //   text: d => {
      //     if (d.cond_all == "----") { 
      //       commaFormat(d.value_lumped)
      //     } else {
      //       commaFormat(d.value_lumped) + " (" + d.cond_all + ")"
      //     }
      //   },
      //   dx: -25
      // }),
    ],
    x: {
      label: "Number of incoming students →",
      tickFormat: ".1s",
      ariaLabel: "X axis",
      ariaDescription: "Horizontal axis: number of incoming students, increasing to the right`",
      labelOffset: 45,
      domain: [0, countryMax]
    },
    y: {
      label: "",
      ariaLabel: "Y axis",
      ariaDescription: `Vertical axis: top 10 origin countries, ordered by popularity. All other origin countries sending students to ${basisSelect} are lumped together as 'other countries'`
    },
    color: { scheme: "ylgnbu", type: "sqrt" },
    width: 450,
    marginLeft: 175,
    marginRight: 65,
    marginBottom: 45,
    style: {
      fontFamily: "'Public Sans'",
      fontSize: "16px"
    }
  });

popDestinationPlot = 
  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 ${basisSelect}</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`
      }),
      // label for value on right
      // Plot.text(filteredPopularDestinations, {
      //   y: "dest_country_lumped",
      //   x: "value_lumped",
      //   // add conditions to value label if required
      //   text: d => {
      //     if (d.cond_all == "----") { 
      //       commaFormat(d.value_lumped)
      //     } else {
      //       commaFormat(d.value_lumped) + " (" + d.cond_all + ")"
      //     }
      //   },
      //   dx: 25
      // })
    ],
    x: {
      label: "Number of outgoing students →",
      tickFormat: ".1s",
      ariaLabel: "X axis",
      ariaDescription: "Horizontal axis: number of outgoing students, increasing to the right",
      labelOffset: 45,
      domain: [0, countryMax]
    },
    y: {
      label: "",
      ariaLabel: "Y axis",
      ariaDescription: `Vertical axis: top 10 destination countries, ordered by popularity. All other destination countries receiving students from ${basisSelect} are lumped together as 'other countries'`
    },
    color: { scheme: "ylorrd", type: "sqrt" },
    width: 450,
    marginLeft: 175,
    marginRight: 65,
    marginBottom: 45,
    style: {
      fontFamily: "'Public Sans'",
      fontSize: "16px"
    }
  });

micro = require("micromodal@0.4.10")
micro.init({
  awaitOpenAnimation: true,
  awaitCloseAnimation: true
});