Trends in Aged Care Star Ratings Visualised (Q4 FY23-24 update)

In this article I share interactive graphs that allow readers to explore trends in Australian aged care star ratings for various groups of homes.

Note

The original version of this article was posted on June 25, 2024.

In this article I share interactive graphs that allow readers to explore trends in Australian aged care star ratings grouped by various variables. Most variables are directly taken from the quarterly star rating extracts, but provider size had to be derived, and regionality was modified by grouping MM3-5 and MM6-7. Additionally, service sizes for Q3 FY22-23 were missing, so I imputed these values based on data from the previous and subsequent quarter. I have included a description of each variable in Table 1. When grouped by ‘nothing’, all services are considered as a single group. By default, points are connected with a Catmull–Rom spline.

quarters_in_order = ["Q2 FY22-23", "Q3 FY22-23", "Q4 FY22-23",
  "Q1 FY23-24", "Q2 FY23-24", "Q3 FY23-24", "Q4 FY23-24"];

mutable data_raw = {
  const file = await FileAttachment("data.csv").csv({typed: true});
  return file;
}
mutable data = {
  if(legend.length === 0) {
    const data = data_raw
      .filter(d=>d.variable===category_select.value)
    return data;
  } else {
    const data = data_raw
      .filter(d=>d.variable===category_select.value)
      .filter(d=>legend.map(x=>x.name).includes(d.category));
    return data;
  }
}

categories = [
  {name: "nothing", value: "all"},
  {name: "state/territory", value: "state_territory"},
  {name: "service size", value: "size"},
  {name: "provider size", value: "provider_size"},
  {name: "regionality", value: "mmm_code"},
  {name: "organisation type", value: "purpose"}
]

// Create the Observable input
viewof category_select = Inputs.select(categories, {
  label: "",
  format: (t) => t.name
})

html`
<style>
  .dropdown-container {
    display: inline-block;
    position: relative;
    line-height: 1; /* Adjust line-height to match the text */
  }

  select {
    border: none;
    border-bottom: 2px dotted grey;
    background: none;
    font-size: 1em;
    padding: 0 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    line-height: 1; /* Adjust line-height to match the text */
    vertical-align: baseline;
    text-align: center;
  }

  select:focus {
    outline: none;
  }

  /* Add a small arrow for the dropdown */
  .dropdown-container::after {
    content: '▼';
    font-size: 0.7em;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }

  /* Adjusting padding and margin to align with the text */
  .dropdown-container select {
    padding-right: 20px;
  }
</style>
`

viewof smoother_select = Inputs.select(['smooth', 'straight'])

html`<span style="line-height: 2rem;">Aged care star ratings grouped by &nbsp;<span style="white-space: nowrap;"><span class="dropdown-container" style="width: 10rem;">${viewof category_select}</span>.&nbsp;</span>The categories are&nbsp;<span class="checkbox-styling">${viewof legend}</span>.&nbsp;Click the categories to include or exclude them from the graphs. Points are connected by &nbsp;<span class="dropdown-container" style="width: 5rem;">${viewof smoother_select}</span>&nbsp;lines. Click points to reveal the average star rating and number of services within each category and time period.</span>`

averageNPerCategory = Array.from(
  data.filter(d=>d.rating_category==="overall_star_rating").reduce((acc, { category, n }) => {
    if (!acc.has(category)) acc.set(category, []);
    acc.get(category).push(n);
    return acc;
  }, new Map()),
  ([category, ns]) => ({
    category,
    average_n: ns.reduce((sum, n) => sum + n, 0) / ns.length
  })
);

nice_categories = new Object({
  'overall_star_rating': "Overall",
  'residents_experience_rating': "Residents' Experience",
  'compliance_rating': "Compliance",
  'quality_measures_rating': "Quality Measures",
  'staffing_rating': "Staffing"
});

color_scheme = legendChart.scale("color").domain.map((item,index) => ({
  index: index,
  name: item,
  color: legendChart.scale("color").range[index]
}));
html`
<style>
.checkbox-styling form {
  display: inline; 
  white-space: normal;
}

.checkbox-styling form > div {
  display: inline; 
}

.checkbox-styling input[type="checkbox"] {
  display: none;
}

.checkbox-styling > form > div > label {
  margin-right: 10px;
}

.checkbox-styling > form > div > label:last-child {
  margin-right: 0px;
}

.checkbox-styling .checkbox-option {
  display: inline-block; /* Changed to inline-block to allow height to take effect */
  height: 1.5rem; /* Set the fixed height */
  line-height: 1.5rem; /* Center the text vertically */
  padding: 0px 2px;
  margin: .25rem 0px;
  margin-right: 0px;
  cursor: pointer;
  border: none;
  border-radius: 3px; /* Add rounded corners */
  box-shadow: none;
  transition: border 0.3s, box-shadow 0.3s, opacity 0.3s;
}

/* Styling for deselected options */
.checkbox-styling input[type="checkbox"]:not(:checked) + .checkbox-option {
  opacity: 0.5;
  text-decoration: line-through;
}
</style>`

html`<style>${color_scheme.map(t => `.cat${t.index} { background: ${t.color}; color: white;}`).join('\n')}</style>`

viewof legend = Inputs.checkbox(color_scheme, {
  label: "",
  format: (t) => html`<span class="checkbox-wrapper checkbox-option cat${t.index}">${['MM1','MM2','MM3-5','MM6-7'].includes(t.name)?Object({'MM1':'Metropolitan (MM1)','MM2':'Regional centres (MM2)','MM3-5':'Rural (MM3-5)','MM6-7':'Remote (MM6-7)'})[t.name]:t.name}</span>`,
  value: color_scheme.filter((t) => !['NT','ACT','TAS'].includes(t.name))
});

grouping_categories = Array.from(new Set(data_raw.filter(d=>d.variable===category_select.value).map(d => d.category)));
colorScheme = {
  if (category_select.value === "mmm_code") {
    return {
      domain: grouping_categories,
      scheme: "Tableau10"
    };
  } else {
    return {
      domain: grouping_categories
    };
  }
}

legendChart = Plot.plot({
  color: { 
    legend: false, 
    ...colorScheme  // Apply the color scheme
  },
  marks: [
    Plot.dot(data_raw, {stroke: "category"})
  ],
  height: 10
});

tippy = require("tippy.js");

// Create faceted charts without legends
rating_categories = Object.keys(nice_categories);
facetCharts = rating_categories.map(rating_category => {
  const categoryData = data.filter(d => d.rating_category === rating_category);
  let facet = Plot.plot({
    marks: [
      Plot.line(categoryData, {x: "qi_quarter", y: "mean_rating", 
        stroke: "category", curve: (smoother_select==="smooth"?"catmull-rom":"linear")}),
      Plot.dot(categoryData, {
      x: "qi_quarter", 
      y: "mean_rating", 
      stroke: "category", 
      title: (d) => `
<div class="tippycat cat${color_scheme.find(t => t.name === d.category).index}">
    ${d.category}
    </div>
    <div style="padding: 5px 0;">
        <div style="display: flex; justify-content: space-between; border-top: 1px solid white;">
          <span style="order: 1;">&#9733;&nbsp;&nbsp;</span>
          <span style="order: 2; text-align: right;">
              ${d3.format(".2f")(d.mean_rating)}
          </span>
        </div>
        <div style="display: flex; justify-content: space-between; border-top: 1px solid white;">
          <span style="order: 1;">n&nbsp;&nbsp;</span>
          <span style="order: 2; text-align: right;">
              ${d.n}
          </span>
        </div>
    </div>`, fill: "#00000000", r: 4})
    ],
    x: {label: "Quarter", domain: quarters_in_order},
    y: {label: `Average Star Rating`, grid: true},
    color: {legend: false, ...colorScheme},
    facet: {
      data: categoryData,
      y: `${nice_categories[rating_category]}`
    },
    height: 200
  });
  
  let dots = d3.select(facet).selectAll("circle");
  dots
    .each(function (d) {
      let t = d3.select(this).select("title").text();
      let current_stroke = d3.select(this).attr("stroke");
      tippy(this, {
        content: t,
        trigger: 'click',
        allowHTML: true,
        interactive: true,
        appendTo: () => document.body,
        onShow(instance) {
          instance.popper.querySelector('.tippy-box').style.backgroundColor = current_stroke;
          instance.popper.querySelector('.tippy-arrow').style.color = current_stroke;
          instance.popper.querySelector('.tippy-box').style.borderRadius = "6px";
        }
      });
    })
    .selectAll("title")
    .remove();
    
  return facet;
});

html`<style>
.tippycat {
  text-align: center;
  font-weight: 700;
  margin: 0px;
  padding: 0px;
}
</style>`

{
  if(legend.length&&legend.length>0) {
    return html`${facetCharts.map(chart => chart)}${bar_chart}`;
  } else {
    return html`Select at least one category.<div style="display: none;">${facetCharts.map(chart => chart)}${bar_chart}</div>`;
  }
}

sortedCategories = averageNPerCategory.sort((a, b) => b.average_n - a.average_n).map(d => d.category);

bar_chart = Plot.plot({
  marks: [
    Plot.barY(averageNPerCategory, {
      x: "category",
      y: "average_n",
      fill: d => color_scheme.find(k => d.category === k.name).color
    }),
    Plot.text(averageNPerCategory.filter(d => d.average_n > 100), {
      x: "category",
      y: "average_n",
      text: d => d.average_n.toFixed(1), // Display average_n on each bar
      dy: 10, // Adjust position of text above the bar
      fill: "white", // White text for higher values
      textAnchor: "middle",
      fontSize: 14,
      fontWeight: "bold"
    }),
    Plot.text(averageNPerCategory.filter(d => d.average_n <= 100), {
      x: "category",
      y: "average_n",
      text: d => d.average_n.toFixed(1),
      dy: -10,
      fill: "black",
      textAnchor: "middle",
      fontSize: 14,
      fontWeight: "bold"
    })
  ],
  x: {
    label: "Category",
    domain: sortedCategories  // Set the domain to the sorted categories
  },
  y: {
    label: "Average n"
  },
  width: 700,
  height: 200
});

Table 1: A description of the available variables.

Category	Description
State/Territory
NSW	New South Wales
VIC	Victoria
QLD	Queensland
WA	Western Australia
SA	South Australia
TAS	Tasmania
ACT	Australian Capital Territory
NT	Northern Territory
Service Size
Small	60 or fewer estimated number of clients
Medium	Between 61 and 100 estimated number of clients
Large	Greater than 100 estimated number of clients
Provider Size1
Small	Provider with 1-4 services
Medium	Provider with 5-19 services
Large	Provider with 20+ services
Regionality2
MM1	Metropolitan (MM1)
MM2	Regional centres (MM2)
MM3-5	Rural (MM3-5)
MM6-7	Remote (MM6-7)
Organisation Type
Government	Government
Not for profit	Not for profit
For profit	For profit
1 Provider size is based on the number of services with the same provider name in the star rating extract.
2 Regionality definitions are based on the Modified Monash Model (MMM).