Open data for water, sanitation and hygiene

actions = transpose(actions_data)

// width of the chart column, so the text keeps its size on every screen
chartWidth = Generators.observe((notify) => {
  const el = document.querySelector(".owd-dotm-chart");
  const report = () => notify(Math.max(280, el.clientWidth));
  const observer = new ResizeObserver(report);
  observer.observe(el);
  report();
  return () => observer.disconnect();
})

// chart-1, chart-3, chart-2 and a neutral grey from openwashdata/brand
palette = ["#8a3a8a", "#CF9E40", "#b04208", "#b9b9b9"]

Plot.plot({
  width: chartWidth,
  height: 400,
  marginLeft: chartWidth < 420 ? 170 : 200,
  marginRight: 36,
  marginTop: 4,
  marginBottom: 36,
  style: {fontFamily: "Atkinson Hyperlegible Next, sans-serif", fontSize: 13, background: "transparent"},
  ariaLabel: "Bar chart of improvement actions recommended for groundwater monitoring wells in Malawi",
  ariaDescription: "62 percent of wells need a trained gauge reader, 61 percent a manual dipper, 46 percent a replaced level logger and 42 percent repaired civil works.",
  x: {label: "% of wells", labelAnchor: "center", domain: [0, 70], grid: true, ticks: 4},
  y: {label: null, domain: actions.map((d) => d.label)},
  color: {
    domain: ["People", "Equipment", "Structure", "Replace or retire"],
    range: palette,
    legend: true
  },
  marks: [
    Plot.barX(actions, {
      y: "label",
      x: "share",
      fill: "group",
      tip: true,
      title: (d) => `${d.label}\n${d.n} of ${n_plans} wells (${d.share}%)\n${d.group}`
    }),
    Plot.text(actions, {y: "label", x: "share", text: (d) => `${d.share}%`, textAnchor: "start", dx: 4, fill: "#1e1e1e"}),
    Plot.ruleX([0])
  ]
})