Australian women working without pay

allData = FileAttachment("/data/hilda-unpaid-time-stats.csv").csv({ typed: true })

import { Scrubber } from "@mbostock/scrubber"

// get the years possible for the Scrubber
allYears = Array.from(new Set(allData.map(d => d.year)))
viewof selectedYear = Scrubber(allYears, {
  initial: allYears[0],
  autoplay: true,
  loop: true,
  delay: 300,
  loopDelay: 3000
})

allActivities = Array.from(new Set(allData.map(d => d.activity_long)))
allColors = d3.schemePaired.slice(0, allActivities.length)
allScale = allActivities.map((d, i) => ({
  activity: d,
  color: allColors[i]
}))

// turn categories on and off
viewof selectedActivities = Inputs.checkbox(allScale, {
  value: allScale.filter(d => !d.activity.toLowerCase().includes("paid")),
  format: x => html`<span style="display: inline-block; width: 0.8em; height: 0.8em; border-radius: 0.4em; background-color: ${x.color}; margin-inline-end: 0.3em;"></span><span>${x.activity}</span>`
})

filteredData = allData
  .filter(
    d =>
      selectedActivities.map(d => d.activity).includes(d.activity_long) &&
      d.year == selectedYear &&
      d.units == "Combined")
  .map(d => ({
    ...d,
    age_new: d.age_group
      .replace(",", "-")
      .replace("(", "")
      .replace("]", "")
      .replace("-Inf", "+")
  }))

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

Plot.plot({
  marks: [
    Plot.barY(filteredData, {
      x: "age_new",
      y: "Average",
      fx: "sex",
      fill: "activity_long",
      ariaLabel: d =>
        "Rectangle: " +
        d.sex.toLowerCase() + " respondents aged " + d.age_new +
        " on average reported " + d.Average.toFixed(1) + " hours per week doing " +
        d.activity_long.toLowerCase() + ". There were " + d["Number of people"] + " " +
        d.sex.toLowerCase() + " respondents in the survey age group."
    }),
    Plot.text([selectedYear.toString(), selectedYear.toString()], {
      ariaHidden: true,
      fx: ["Female", "Male"],
      frameAnchor: "top-right"
    }),
    Plot.tip(filteredData, Plot.pointer(Plot.stackY({
      ariaHidden: true,
      x: "age_new",
      y: "Average",
      fx: "sex",
      fill: "activity_long",
      fillOpacity: 0.9,
      strokeOpacity: 0,
      channels: {
        "fill": {
          label: "",
          value: "activity_long"
        },
        "Age": "age_new",
        "value": {
          label: "Avg. hours/week",
          value: d => d.Average.toFixed(1)
        },
        "People in age group": "Number of people"
      },
      format: {
        fx: false,
        x: false,
        y: false
      },
      lineHeight: 1.25
    })))
  ],
  x: {
    label: null,
  },
  y: {
    label: "↑ Average hours per week",
    grid: true
  },
  fx: {
    label: null
  },
  color: {
    domain: allActivities,
    range: allColors
  },
  style: {
    fontSize: 16,
    fontFamily: "Roboto Condensed"
  },
  marginTop: 50,
  insetTop: 20,
  width: 800,
  ariaLabel: "Stacked bar chart",
  ariaDescription: "Stacked bar chart showing the average number of hours Australian women and men spent doing various paid and unpaid forms of work each week in " + selectedYear + "."
})

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

Get this chart