Ocean temperatures

import { aq, op } from "@uwdata/arquero"
Plot = import("https://esm.run/@observablehq/plot")

dataPath = "https://raw.githubusercontent.com/" +
  "360-info/tracker-ocean-temperatures/main/data/" +
  "monthly-all.csv"

// get the latest monthly data
allData = aq.loadCSV(dataPath, {
  parse: {
    temperature: Number,
    date: op.parse_date
  }
})

function regionFormatter(str) {  
    return str
      .replaceAll("_", " ")
      .replace(/\w\S*/g,  
        function (txt) {  
            return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();  
        })
      .replaceAll("60s To 60n", "(excl. polar regions)")
      .replaceAll("Of", "of")
      .replaceAll("And ", "and ")
}

// get a map of unique region names in the data for the dropdown menu
// (remove a few that we don't want to show in this version)
allRegions = allData
  .select("region")
  .dedupe()
  .array("region")
  .filter(d => !(["global_85s_to_85n", "iod_east", "iod_west", "nino1", "nino2",
    "nino3", "nino3_4", "nino4"].includes(d)))

allRegionsMap = new Map(allRegions.map(d => [regionFormatter(d), d]))

defaultRegion = {
  const pageURL = new URL(window.location.href)
  const regionChoice = pageURL.searchParams.get("region")
  return allRegions.includes(regionChoice) ? regionChoice : "global_60s_to_60n"
}

viewof selectedRegion = Inputs.select(allRegionsMap, {
  value: defaultRegion
})

calendarMonths = [
  "January", "February", "March", "April", "May", "June", "July", "August",
  "September", "October", "November", "December"]
possibleMonths = new Map([
  ["Yearly average", 0], ...calendarMonths.map((d, i) => [d, i + 1])])

previousMonth = (new Date()).getMonth()

// has someone provided a default month via a URL parameter?
// test it against the period list, defaulting to global
defaultMonth = {
  const pageURL = new URL(window.location.href)
  const monthChoice = parseInt(pageURL.searchParams.get("month"))
  return Array.from(possibleMonths, d => d[1]).includes(monthChoice) ?
    monthChoice :
    (previousMonth) == 0 ?
      12 :
      previousMonth
}

viewof selectedPeriod = Inputs.select(possibleMonths, {
  value: defaultMonth
})

// this feels overwrought
selectedPeriodLabel = selectedPeriod >= 1 ?
  calendarMonths[selectedPeriod - 1] :
  "Yearly average"

baselineStart = 1986
baselineEnd = 2015

// extract month and year, then filter on user selections
regionData = allData
  .params({
    selectedPeriod: selectedPeriod,
    selectedRegion: selectedRegion,
    baselineStart: baselineStart,
    baselineEnd: baselineEnd
  })
  .filter(d => d.region == selectedRegion)
  .derive({
    month: d => op.month(d.date) + 1,
    year: d => op.year(d.date)
  })
  .groupby("month")
  .derive({
    baselineYearTemp: d =>
      (d.year >= baselineStart && d.year <= baselineEnd) ?
        d.temperature : null
  })
  .derive({
    anomaly: d => d.temperature - op.mean(d.baselineYearTemp)
  })
  .derive({
    anomalySign: d => d.anomaly >= 0
  })
  .ungroup()

filteredData = regionData.filter(d => selectedPeriod == d.month)

// separately calculate annual data if that's selected
// (drop incomplete years, and calculate a baseline if the data allows)
annualTemps = regionData
  .params({
    baselineStart: baselineStart,
    baselineEnd: baselineEnd
  })
  .groupby("year")
  .derive({
    ob_number: op.row_number()
  })
  .rollup({
    temperature: op.mean("temperature"),
    n_obs: d => op.max(d.ob_number),
  })
  .ungroup()
  .filter(d => d.n_obs == 12)
  .derive({
    date: d => op.parse_date(d.year + "-07-01T00:00:00Z"),
    baselineYearTemp: d =>
      (d.year >= baselineStart && d.year <= baselineEnd) ?
        d.temperature : null
  })
  .derive({
    anomaly: d => d.temperature - op.mean(d.baselineYearTemp)
  })
  .derive({
    anomalySign: d => d.anomaly >= 0
  })

selectedSeries = selectedPeriod == 0 ? annualTemps : filteredData

// window size in _years_
windowSize = 15

Plot.plot({
  marks: [
    Plot.text(selectedSeries, Plot.selectMaxX({
      x: "date",
      y: "anomaly",
      text: d => `${d.year.toFixed(0)}\n${d3.format("+.2f")(d.anomaly)} °C`,
      dx: 10,
      lineAnchor: "top",
      textAnchor: "start",
      fontWeight: "bold",
      fontSize: 11,
      fill: "#d73027",
      stroke: "white"
    })),
    Plot.ruleY([0]),
    Plot.rectY(selectedSeries, {
      x: "date",
      y: "anomaly",
      fill: "anomalySign",
      interval: d3.utcYear,
      tip: true,
      title: d => `${selectedPeriodLabel} ${d.year}\n${d3.format("-.2f")(d.temperature)} °C\n\n${d3.format("+.2f")(d.anomaly)} °C compared to\n1986-2015 baseline`,
      ariaDescription: d => `For ${selectedPeriodLabel} ${d.year}, the temperature was ${d3.format("-.2f")(d.temperature)} °C, or ${d3.format("+.2f")(d.anomaly)} °C compared to the 1986-2015 baseline.`
    })
  ],
  y: {
    label: `Temperature\n(compared to 1986–2015 average)`,
    labelArrow: "none",
    tickFormat: (d) =>  `${d3.format("+.1f")(d)} °C`
  },
  x: {
    label: "Year",
    labelArrow: "none"
  },
  color: {
    domain: [true, false],
    range: ["#d73027", "#4575b4"]
  },
  marginLeft: 62,
  marginRight: 55,
  marginBottom: 40,
  marginTop: 40,
  style: {
    fontSize: 14
  }
})

micro = require("micromodal@0.4.10")
micro.init({
  awaitOpenAnimation: true,
  awaitCloseAnimation: true
});