The changing fire season

import { aq, op } from "@uwdata/arquero"
seasons = aq.loadCSV("/data/ffdi-firegions-seasonal-thenandnow.csv", {
  parse: {
    DIST_NO: Number,
    DIST_NAME: String,
    slug: String,
    month: String,
    n_gte_90_1970_1994: Number,
    n_gte_90_1995_2019: Number,
    p_gte_90_1970_1994: Number,
    p_gte_90_1995_2019: Number
  }
})

regions = seasons
  .select("LGA_NAME23", "slug")
  .dedupe("LGA_NAME23", "slug")
  .orderby("LGA_NAME23")
  .column("LGA_NAME23")
  .data

viewof regionSelect = {
  const defaultCouncil = "Murrindindi"
  const menu = html`
  <label for="region-select">Council</label>
  <input list="region-list" id="region-select" name="region-select"
      placeholder="Enter your council area..." value="${defaultCouncil}"/>
    <datalist id="region-list"">
      ${regions.map(d => html`<option value="${d}"></option>`)}
    </datalist>
    `
  let results = []
  menu.value = defaultCouncil
  menu.onsubmit = (event) => event.preventDefault()

  // update the value of the input when things change
  menu.onchange = (event) => {
    const value = event.target.value;
    menu.value = regions.find(d => d == value) || "";
    // input.blur(); // removes keyboard focus from the element upon submission
    menu.dispatchEvent(new CustomEvent("input"));
  }

  return menu  
}

filteredData = seasons
  .params({ regionSelect: regionSelect })
  .filter(d => d.LGA_NAME23 == regionSelect)
  .derive({
      navg_then: d => d.n_1970_1995 / 25,
      navg_now: d => d.n_1995_2020 / 25,
  })

Plot = import("https://esm.run/@observablehq/plot")

fullMonths = ({
  "Jan": "January",
  "Feb": "February",
  "Mar": "March",
  "Apr": "April",
  "May": "May",
  "Jun": "June",
  "Jul": "July",
  "Aug": "August",
  "Sep": "September",
  "Oct": "October",
  "Nov": "November",
  "Dec": "December"
})

Plot.plot({
  marks: [
    // patterns: stripes up (for more risk now) or down (for less risk)
    () => svg`
      <linearGradient id="stripes-more" gradientTransform="rotate(90)">
        <stop offset="15%" stop-color="red" />
        <stop offset="25%" stop-color="orangered" />
        <stop offset="85%" stop-color="rgba(247, 184, 12, 0.25)" />
      </linearGradient>`,
    () => svg`
      <linearGradient id="stripes-less" gradientTransform="rotate(90)">
        <stop offset="15%" stop-color="rgba(247, 184, 12, 0.25)" />
        <stop offset="75%" stop-color="orangered" />
        <stop offset="100%" stop-color="red" />
      </linearGradient>`,
    Plot.ruleY([0]),
    Plot.barY(filteredData, {
      x: "month",
      y1: "navg_then",
      y2: "navg_now",
      fill: d => d.navg_now > d.navg_then ?
        "url(#stripes-more)" :
        "url(#stripes-less)",
      fillOpacity: 0.9
    }),
    Plot.dot(filteredData, {
      x: "month",
      y: "navg_then",
      fill: "rgba(247, 184, 12, 0.25)",
      stroke: "black",
      r: 9
    }),
    Plot.dot(filteredData, {
      x: "month",
      y: "navg_now",
      fill: "orangered",
      stroke: "black",
      r: 9
    }),
    Plot.arrow(filteredData, {
      x: "month",
      y1: "navg_then",
      y2: "navg_now",
      inset: 20,
      stroke: "black",
      strokeWidth: 1
    }),
    Plot.tip(filteredData, Plot.pointer({
      x: "month",
      y1: "navg_then",
      y2: "navg_now",
      channels: {
        Then: d => `Average ${d3.format("0.1f")(d.navg_then)} ${fullMonths[d.month]} days a year`,
        Now: d => `Average ${d3.format("0.1f")(d.navg_now)} ${fullMonths[d.month]} days a year`
      },
      format: {
        Then: true,
        Now: true,
        x: false,
        y: false,
      },
      lineHeight: 1.5,
      stroke: "none",
      fillOpacity: 0.85,
      pointerSize: 0
    }))
  ],
  x: {
    label: null,
    domain: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep",
      "Oct", "Nov", "Dec"],
    padding: 0.71
  },
  y: {
    label: "Average days per year",
    grid: true
  },
  insetTop: 15,
  marginTop: 30,
  marginBottom: 30,
  style: {
    fontSize: 20,
    fontFamily: "Roboto Condensed"
  },
  width: 900,
    height: 600
})

GET THIS CHART