Unpaid work across Asia-Pacific

allData = FileAttachment("/data/geah2021-hrs-domestic-care.csv")
  .csv({ typed: true });
allCountries = Array.from(new Set(allData.map(d => d.geography)));

// fix up 0 values not getting stringified, and
// assign facets for manual wrapping
timeUse = allData
  .filter(d => d.gender != "Combined")
  .map(d => ({ ...d,
    response_category: d.response_category.toString() + " hrs",
    fx: allCountries.indexOf(d.geography) % 2,
    fy: Math.floor(allCountries.indexOf(d.geography) / 2)
  }));

// define for stacking order
timeUseLevels =
  ["0 hrs", "<1 hrs", "1-2 hrs", "2-3 hrs", "3-4 hrs", "4-5 hrs", "5-7 hrs",
   "7-9 hrs", "9-11 hrs", ">11 hrs"];

// need country names and facet indices de-duplicated too for labels
// (pinched from https://stackoverflow.com/a/36744732/3246758 to avoid using aq)
countryLabels =
  timeUse.filter((value, index, self) =>
    index === self.findIndex(t => (t.geography === value.geography)));

viewof facetChoice = Inputs.radio(
  ["On gender", "On country"], {
    value: "On gender"
  });

// channels used in plot depend on selection
channels = ({
  "On gender":  { y: "geography", fx: "gender", fy: null },   
  "On country": { y: "gender",    fx: "fx",     fy: "fy" }
})

Plot = import("https://esm.run/@observablehq/[email protected]")

Plot.plot({
  marks: [
    Plot.barX(timeUse, {
      y: channels[facetChoice].y,
      x: "value",
      fx: channels[facetChoice].fx,
      fy: channels[facetChoice].fy,
      fill: "response_category",
      order: timeUseLevels,
      ariaLabel: d =>
        "Rectangle: " +
        d.value + "% of " + d.gender.toLowerCase() + " respondents in " + d.geography +
        " reported " + d.response_category + " per day."
    }),
    // label country facets manually
    facetChoice == "On country" ?
      Plot.text(countryLabels, {
        ariaHidden: true,
        fx: "fx",
        fy: "fy",
        frameAnchor: "top-left",
        dy: -16,
        text: "geography",
        fontWeight: "bold"
      }) : null,
    // add facet axis marks for country comparison to remove default facet label
    facetChoice == "On country" ? Plot.axisFx({
      color: "transparent"
    }) : null,
    facetChoice == "On country" ? Plot.axisFy({
      color: "transparent"
    }) : null,
    // draw grid on top
    Plot.gridX({
      ariaHidden: true,
      interval: 20,
      stroke: "white",
      strokeOpacity: 0.75,
      strokeDasharray: "2"
    }),
    Plot.tip(timeUse, Plot.pointer(Plot.stackX({
      ariaHidden: true,
      y: channels[facetChoice].y,
      x: "value",
      fx: channels[facetChoice].fx,
      fy: channels[facetChoice].fy,
      fill: "response_category",
      fillOpacity: 0.9,
      strokeOpacity: 0,
      order: timeUseLevels,
      channels: {
        "Response": {
          label: "Response",
          value: d => d.response_category + " hours per day"
        },
        "Share": {
          label: "Share",
          value: d => d.value + "% of respondents"
        }
      },
      format: {
        fx: false,
        fy: false,
        x: false,
        y: false,
        fill: false
      },
    })))
  ],
  color: {
    legend: true,
    swatchHeight: 25,
    swatchWidth: 25,
    style: {
      fontFamily: "Roboto Condensed",
      fontSize: "90%",
    },
    columns: 5,
    type: "ordinal",
    scheme: "BuRd",
    domain: timeUseLevels
  },
  x: {
    label: null,
    ticks: 6,
    tickFormat: d => d + "%"
  },
  y: {
    label: null
  },
  fx: {
    label: null,
    padding: 0.2
  },
  fy: {
    label: null,
    padding: 0.3
  },
  style: {
    fontSize: 16,
    fontFamily: "Roboto Condensed",
    // fontWeight: "bold"
  },
  marginLeft: 110,
  height: 600,
  ariaLabel: "Stacked bar chart", 
  ariaDescription: "Stacked bar chart showing the percentage of men and women in different Asia-Pacific countries reporting various amounts of unpaid domestic or care work. The chart is currently grouped " + facetChoice.toLowerCase() + ".",
});

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