Here’s how today compares…

import { aq, op } from "@uwdata/arquero"

bucket_base = "https://d33173dkfxwa5x.cloudfront.net/"
bucket_www = bucket_base + "www/"
bucket_processed = bucket_base + "2-processed/"

FA = FileAttachment

mutable myLocation = null
mutable geolocateStatus = "default"

getLocation = {
  yield null

  yield navigator.geolocation.getCurrentPosition(
    pos => {
      mutable myLocation = {
        lat: pos.coords.latitude,
        lon: pos.coords.longitude
      }
      mutable geolocateStatus = "granted"
    },
    e => {
      console.log("Geolocation error", e),
      mutable geolocateStatus = "error"
    },
    {
      enableHighAccuracy: false
    })
}

geolocateStatus == "default" ?
  md`Allow location to see local station` :
    geolocateStatus == "error" ?
      md`Problem getting location` :
      md``

myLocation != null ?
  md`Location is lat: ${myLocation.lat}, lon: ${myLocation.lon}` :
  md`Location permission not granted`

// on the home page, get station id from:
//   * _geolocator.qmd's myLocation, plus
//   * _map.qmd's statsAll

stationId = {
  
  // fallback to sydney?
  if (myLocation == null) {
    return "023000"
  }

  // otherwise, find closest station on statsAll
  const closestStation = aq.from(statsAll)
    .params({
      currentLat: myLocation.lat,
      currentLon: myLocation.lon,
    })
    .derive({
      dist: (d, $) => Math.sqrt(
        ($.currentLat - d.isit_lat) ** 2 + ($.currentLon - d.isit_lon) ** 2)
    })
    .orderby("dist")
    .slice(0, 1)
    .array("id")

  return closestStation[0]
}

statsPlace = FA(bucket_www + "stats/stats_" + stationId + ".json").json()

Is it hot in right now?

answers = [
  { message: "Hell no!",   color: "white",   fill1: "#5287d1", fill2: "#2166ac", size: 1 },
  { message: "No!",        color: "white",   fill1: "#a2cdeb", fill2: "#67a9cf", size: 3 },
  { message: "Nope",       color: "#333333", fill1: "#d1e5f0", fill2: "#d1e5f0", size: 4 },
  { message: "Not really", color: "#333333", fill1: "#f7f7f7", fill2: "#ebebeb", size: 4 },
  { message: "Yup",        color: "#333333", fill1: "#fddcca", fill2: "#f7cfb7", size: 4 },
  { message: "Yeah!",      color: "white",   fill1: "#de7b49", fill2: "#fc946a", size: 3 },
  { message: "Hell yeah!", color: "white",   fill1: "#d1231d", fill2: "#b2182b", size: 1 }
]

// lookup by message, for spots that just want "the answer" (eg. statsPlace.isit_answer)
answersByMessage = new Map(answers.map(d => [d.message, d]))

answerColors = answers.flatMap(d => Array.from({ length: d.size }, () => d.fill1))

html`
<div class="answer-icon-and-label">
  <span class="answer-icon" style="background-color: ${answersByMessage.get(statsPlace.isit_answer).fill2};">
  </span>
  <span>${statsPlace.isit_answer}</span>
</div>`

md`${statsPlace.isit_comment}`

datefns = import("https://cdn.skypack.dev/date-fns@3.3.1?min")
tmaxWhen = new Date(Date.parse(statsPlace.isit_maximum_dt || null))
tminWhen = new Date(Date.parse(statsPlace.isit_minimum_dt || null))

tmaxWhenFriendly = isFinite(tmaxWhen) ?
  datefns.formatRelative(tmaxWhen, new Date()) : ""
tminWhenFriendly = isFinite(tminWhen) ?
  datefns.formatRelative(tminWhen, new Date()) : ""

percentRating = statsPlace.isit_average.toFixed(1) + "%"

md`${statsPlace.isit_minimum} °C  `

md`${tminWhenFriendly}`

md`${statsPlace.isit_maximum} °C  `

md`${tmaxWhenFriendly}`

html`
<div class="answer-icon-and-label">
  <span class="answer-icon" style="background-color: ${answersByMessage.get(statsPlace.isit_answer).fill2};"></span>
  <span>${statsPlace.isit_current.toFixed(1)} °C</span>
</div>`

md`Average so far<br>hotter than **${percentRating}** of days for this time of year.`

d3regression = require("d3-regression@1.3.10")

hist_path = `${bucket_processed}historical_${stationId}.txt`
historical = FA(hist_path).csv({typed: true})

plotCaption = "© isithotrightnow.com"

// same domain/range Plot's own colour scale below will build, so breakpoints
// line up exactly with the dots' colours. answerColors is 20 equal-sized
// (5%-wide) buckets, so the first/last breakpoints ARE the 5th/95th percentiles.
tavgQuantileScale = d3.scaleQuantile()
  .domain(historical.map(d => d.Tavg))
  .range(answerColors)

tavgBreaks = tavgQuantileScale.quantiles()
tavg05 = tavgBreaks[0]
tavg95 = tavgBreaks[tavgBreaks.length - 1]


// date formatting
today = ({
  Date: new Date(Math.max(
    new Date(statsPlace.isit_maximum_dt),
    new Date(statsPlace.isit_minimum_dt))),
  Tavg: statsPlace.isit_current
})

dayMonthOptions = ({
  month: 'long',
  day: 'numeric'
})

dayMonthLabel = today.Date.toLocaleDateString("en-AU", dayMonthOptions)

// fit against the raw timestamp; .a (the slope) is in °C/ms, used below for
// the trend label. Map the two fitted endpoints back to Date objects so
// Plot.line reads them on the same time x-scale as the dots
tavgFit = d3regression.regressionLinear()
  .x(d => d.Date.getTime())
  .y(d => d.Tavg)
  (historical)
tavgTrend = tavgFit.map(([x, y]) => ({ Date: new Date(x), Tavg: y }))
tavgTrendPerCentury = tavgFit.a * 1000 * 60 * 60 * 24 * 365.25 * 100

leftmostDate = d3.min(historical, d => d.Date)

Plot.plot({
  marks: [
    // historical data
    Plot.dot(historical, {
      x: "Date",
      y: "Tavg",
      fill: "Tavg",
      // labels live on channels (tip's `format` only takes formatters), so the
      // default x/y/fill entries are suppressed in favour of these two
      channels: {
        date: { value: "Date", label: "" },
        temperature: { value: "Tavg", label: "Daily temperature" }
      },
      tip: {
        format: {
          date: d => d3.utcFormat("%B %-d %Y")(d),
          temperature: d => `${d.toFixed(1)}°C`,
          x: false,
          y: false,
          fill: false
        }
      },
      r: 2
    }),
    // extreme percentiles
    Plot.ruleY([tavg05, tavg95], {
      stroke: "#333333",
      strokeDasharray: "4,2"
    }),
    Plot.text([
      { y: tavg05, text: `5th percentile: ${tavg05.toFixed(1)}°C` },
      { y: tavg95, text: `95th percentile: ${tavg95.toFixed(1)}°C` }
    ], {
      x: leftmostDate,
      y: "y",
      text: "text",
      textAnchor: "start",
      dy: -15,
      dx: 10,
      fill: "#3333333",
      stroke: "#eeeeee",
      strokeWidth: 5,
    }),
    // trend
    Plot.line(tavgTrend, {
      x: "Date",
      y: "Tavg",
      stroke: "black",
      strokeWidth: 2
    }),
    Plot.text(
      [
        { text: `Trend: ${tavgTrendPerCentury >= 0 ? "+" : ""}${tavgTrendPerCentury.toFixed(1)}°C/century` }
      ], {
      x: tavgTrend[0].Date,
      y: tavgTrend[0].Tavg,
      text: "text",
      textAnchor: "start",
      dy: -21,
      dx: 10,
      fill: "#3333333",
      stroke: "#eeeeee",
      strokeWidth: 5,
    }),
    // today
    Plot.dot([today], {
      x: "Date",
      y: "Tavg",
      fill: tavgQuantileScale(today.Tavg),
      stroke: "#333333",
      r: 6,
    }),
    Plot.text([today], {
      x: "Date",
      y: "Tavg",
      text: () => "TODAY",
      fill: "#333333",
      stroke: "#eeeeee",
      strokeWidth: 5,
      dy: -20
    }),
    Plot.text([today], {
      x: "Date",
      y: "Tavg",
      text: d => `${d.Tavg.toFixed(1)}°C`,
      fill: "#333333",
      stroke: "#eeeeee",
      strokeWidth: 3,
      dy: 20
    }),
    // plot frame
    Plot.frame({
      stroke: "#333333",
      strokeWidth: 3,
      anchor: "bottom"
    }),
    Plot.frame({
      stroke: "#333333",
      strokeWidth: 3,
      anchor: "left"
    })
  ],
  color: {
    type: "quantile",
    range: answerColors
  },
  style: {
    fontFamily: "Roboto Condensed",
    fontWeight: "bold",
    fontSize: 14
  },
  title: `${statsPlace.isit_label} daily average temperatures for the two weeks around ${dayMonthLabel}`,
  caption: plotCaption
})

This is the distribution of temperatures typical for this time of year, which we’ve defined as a seven day window either side of today. Just like a bell curve, the plot is higher at more common temperatures and lower at rare temperatures.

gaussianKernel = u => Math.exp(-0.5 * u * u) / Math.sqrt(2 * Math.PI)

// port of R's bw.nrd0(): d3.quantile() uses the same R-7 interpolation as
// R's default quantile(), and d3.deviation() is the same sample sd as R's sd()
bwNrd0 = function(x) {
  const n = x.length
  const hi = d3.deviation(x)
  const iqr = (d3.quantile(x, 0.75) - d3.quantile(x, 0.25)) / 1.34
  let lo = Math.min(hi, iqr)
  if (lo === 0) lo = hi !== 0 ? hi : (Math.abs(x[0]) !== 0 ? Math.abs(x[0]) : 1)
  return 0.9 * lo * Math.pow(n, -0.2)
}

kde = function(bandwidth, grid, data) {
  const n = data.length
  return grid.map(x => [
    x,
    d3.sum(data, d => gaussianKernel((x - d) / bandwidth)) / (n * bandwidth)
  ])
}

historical_tavg = historical.map(d => d.Tavg)
bandwidth = bwNrd0(historical_tavg)

// from/to are passed explicitly in the lambda's stat_density_ridges() call as
// the data's min/max (rather than stats::density()'s default of extending
// 3 bandwidths past each end), and n (grid points) is left at its default of 512
gridFrom = d3.min(historical_tavg)
gridTo = d3.max(historical_tavg)
grid = d3.range(512).map(i => gridFrom + (gridTo - gridFrom) * i / 511)

historical_density = kde(bandwidth, grid, historical_tavg)

// tavg05/tavg95 come from the ts block's tavgQuantileScale (same breaks as
// the colour bands here); tavg50 is the plain median of the same data
tavg50 = d3.median(historical_tavg)

Plot.plot({
  marks: [
    Plot.areaY(historical_density, {
      x: d => d[0],
      y: d => d[1],
      // fill colour by temperature's answer-quantile bucket, using the same
      // scale as the ts plot above so the two match; z: null keeps this a
      // single contiguous area (no gaps at the colour boundaries) rather
      // than splitting into separate non-touching series per colour - see
      // https://observablehq.com/plot/marks/area#varying-color
      fill: d => tavgQuantileScale(d[0]),
      z: null,
      curve: "basis"
      }),
    // today marker
    Plot.ruleX([today.Tavg], {
      stroke: "#333333",
      strokeWidth: 2
    }),
    Plot.text([
      { text: `TODAY: ${today.Tavg.toFixed(1)}°C` }
    ], {
      x: () => today.Tavg,
      text: "text",
      frameAnchor: "top",
      lineAnchor: "middle",
      textAnchor: "end",
      rotate: 270,
      dy: 6,
      dx: -10,
      fill: "#333333",
      stroke: "#eeeeee",
      strokeWidth: 5
    }),
    // 5th/50th/95th percentile labels
    Plot.text([
      { x: tavg05, text: `5th percentile: ${tavg05.toFixed(1)}°C` },
      { x: tavg50, text: `Median: ${tavg50.toFixed(1)}°C` },
      { x: tavg95, text: `95th percentile: ${tavg95.toFixed(1)}°C` }
    ], {
      x: "x",
      text: "text",
      frameAnchor: "bottom",
      lineAnchor: "middle",
      textAnchor: "start",
      rotate: -90,
      dy: -6,
      fill: "#333333",
      stroke: "#eeeeee",
      strokeWidth: 5
    }),
  ],
  y: {
    axis: null
  },
  x: {
    tickFormat: d => `${d}°C`,
    label: "Daily average temperature",
  },
  style: {
    fontFamily: "Roboto Condensed",
    fontWeight: "bold",
    fontSize: 16
  },
  height: 320,
  marginBottom: 50,
  title: `${statsPlace.isit_label} daily average temperatures for the two weeks around ${dayMonthLabel}`,
  caption: plotCaption
})

… and the rest of the year.

We’ve compared every day this year at to similar times of year in the past. Red days were hot compared to records; blue days were cold.

heatmapYear = (new Date()).toLocaleString("en-US", {timeZone: "Australia/Melbourne", year: "numeric"})
heatmapData = FA(bucket_processed + stationId + "-" + heatmapYear + ".csv").csv({ typed: true })

monthOrder = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
month3 = d3.timeFormat("%b")

heatmapPrepped = heatmapData.map(d => ({
  ...d,
  month: month3(d.date),
  day: d.date.getDate()
}))

// cumulative 5%-multiples of each answer tier's `size`, eg [0,5,20,40,60,80,95,100] -
// the lambda's createHeatmapPlot() uses these same breaks (0.05,0.2,0.4,0.6,0.8,0.95)
// for its image()/colkey() call, so cell shading and legend bands line up with it
answerBreaks = answers.reduce((acc, d) => {
  acc.push(acc[acc.length - 1] + d.size * 5)
  return acc
}, [0])

percentileColorScale = d3.scaleThreshold()
  .domain(answerBreaks.slice(1, -1))
  .range(answers.map(d => d.fill1))

// contrasting text colour per tier (white on the dark blue/red extremes,
// dark grey on the light middle tiers) - reusing answers' own `color` field,
// which already exists for exactly this purpose in the answer banner above
percentileTextColorScale = d3.scaleThreshold()
  .domain(answerBreaks.slice(1, -1))
  .range(answers.map(d => d.color))


md`### ${statsPlace.isit_label} percentiles for ${heatmapYear}`

heatmapIsNarrow = width < 768
heatmapIsVeryNarrow = width < 450
heatmapHeight = heatmapIsNarrow ? 2100 : 425
heatmapFontSize = heatmapIsNarrow ? 20 : 12

heatmapStyle = ({
  fontFamily: "Roboto Condensed",
  fontWeight: "bold",
  fontSize: heatmapFontSize
})

heatmapPlot = Plot.plot({
  marginLeft: 40,
  marginTop: 30,
  marginBottom: 10,
  x: heatmapIsNarrow ? {
    domain: monthOrder,
    label: null,
    axis: "top",
    tickSize: 0,
    tickFormat: d => d.charAt(0),
    padding: 0
  } : {
    domain: d3.range(1, 32),
    label: null,
    axis: "top",
    tickSize: 0,
    padding: 0
  },
  y: heatmapIsNarrow ? {
    domain: d3.range(1, 32),
    label: null,
    tickSize: 0,
    padding: 0
  } : {
    domain: monthOrder,
    label: null,
    tickSize: 0,
    padding: 0
  },
  marks: [
    Plot.cell(heatmapPrepped, {
      x: heatmapIsNarrow ? "month" : "day",
      y: heatmapIsNarrow ? "day" : "month",
      fill: d => percentileColorScale(d.percentile),
      inset: 0
    }),
    heatmapIsVeryNarrow ? null : Plot.text(heatmapPrepped, {
      x: heatmapIsNarrow ? "month" : "day",
      y: heatmapIsNarrow ? "day" : "month",
      text: d => Math.round(d.percentile),
      fill: d => percentileTextColorScale(d.percentile),
      fontSize: heatmapFontSize
    }),
    Plot.frame({ stroke: "#333333", strokeWidth: 1 })
  ],
  height: heatmapHeight,
  width: 900,
  style: heatmapStyle,
  caption: plotCaption
})

// vertical colour-bar legend: a single stacked column, one rect per answer
// tier, with height proportional to the tier's width (matching the lambda's
// colkey() bands) rather than 7 equal-height swatches - Plot's built-in
// legends don't support this (threshold color legends only render as a
// horizontal ramp), so it's built by hand from the same answerBreaks
answerBands = answers.map((d, i) => ({
  y1: answerBreaks[i],
  y2: answerBreaks[i + 1],
  fill: d.fill1
}))

heatmapLegend = Plot.plot({
  marginLeft: 6,
  marginRight: 34,
  marginTop: 30,
  marginBottom: 10,
  x: {
    axis: null,
    domain: [0, 1]
  },
  y: {
    domain: [0, 100],
    ticks: answerBreaks,
    label: null,
    axis: "right"
  },
  marks: [
    Plot.rect(answerBands, { x1: 0, x2: 1, y1: "y1", y2: "y2", fill: "fill" }),
    Plot.frame({ stroke: "#333333", strokeWidth: 1 })
  ],
  width: 80,
  height: heatmapHeight,
  marginRight: 50,
  style: heatmapStyle
})

html`<div style="display: flex; align-items: flex-start;">
  <div style="flex: 1 1 auto; min-width: 0;">${heatmapPlot}</div>
  ${heatmapLegend}
</div>`

Here’s how the rest of Australia looks today so far.

nowHour = (new Date()).getUTCHours()
nowHour >= 10 && nowHour <= 22 ?
  md`Some places may still be cooling off as the night continues.` :
  md`Some places may still be heating up as the day continues.`

statsAllRaw = FA(bucket_www + "stats/stats_all.json").json()

// statsAllRaw is an object with keys by station id, but we
// need an array with an id field. let's move the ids in
statsAll = {
  const statsArray = []
  Object.keys(statsAllRaw).map(k => statsArray.push({...statsAllRaw[k], id: k}))
  const tidiedStats = aq.from(statsArray)
    .derive({
      lat: d => op.parse_float(d.isit_lat),
      lon: d => op.parse_float(d.isit_lon),
      isit_average: d => op.parse_float(d.isit_average),
      // current? (that's the actual avg temp)
      isit_maximum: d => op.parse_float(d.isit_maximum),
      isit_minimum: d => op.parse_float(d.isit_minimum),
      max_when: d => op.parse_date(d.isit_maximum_dt),
      min_when: d => op.parse_date(d.isit_minimum_dt),
      slug: d =>
        op.replace(
          op.replace(
            op.replace(
              op.lower(d.isit_label),
              /\s-\s/g, "-"),
            /\s/g, "-"),
          /[()]/g, "")
    })
    // mark as stale if latest obs are > 24 hours old
    .derive({
      max_stale:
        d => ((d.max_when - op.now()) / (1000 * 60)) / (24 * 60) > 1,
      min_stale:
        d => ((d.min_when - op.now()) / (1000 * 60)) / (24 * 60) > 1
    })
    .objects()
  return(tidiedStats)
}

currentStats = statsAll.filter(d => (!d.max_stale) && (!d.min_stale))
staleStats = statsAll.filter(d => d.max_stale || d.min_stale)

australia = FileAttachment("/assets/australia.geojson").json()

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

answer_domain = [
  "Hell no!",
  "No!",
  "Nope",
  "Not really",
  "Yup",
  "Yeah!",
  "Hell yeah!"]

Plot.plot({
  projection: {
    type: "equirectangular",
    rotate: [-133, 28],
    domain: d3.geoCircle().center([133, -28]).radius(18)()
  },
  marks: [
    // Plot.graticule(),
    Plot.geo(australia, {
      fill: "#00000009",
      stroke: "#dddddd"
    }),
    // replace stale locations with crosses
    Plot.dot(staleStats, {
      x: "lon",
      y: "lat",
      stroke: "lightgrey",
      r: 6,
      symbol: "times"
    }),
    Plot.dot(currentStats, {
      x: "lon",
      y: "lat",
      fill: "isit_answer",
      stroke: d =>
        d.isit_answer == "Hell no!" || d.isit_answer == "Hell yeah!" ?
        "black" :
        "#00000099",
      strokeWidth: 0.75,
      r: 6,
    }),
    Plot.tip(currentStats, tipTemplate),
    // enlarge dot you're pointing to
    Plot.dot(currentStats, Plot.pointer({
      x: "lon",
      y: "lat",
      fill: "isit_answer",
      stroke: d =>
        d.isit_answer == "Hell no!" || d.isit_answer == "Hell yeah!" ?
        "black" :
        "#00000099",
      strokeWidth: 0.75,
      r: 12,
    })),
    // enlargen clickable areas with invisible voronoi polys
    Plot.voronoi(currentStats, {
      x: "lon",
      y: "lat",
      fill: "transparent",
      stroke: "transparent",
      href: d => "/places/" + d.slug,
    }),

  ],
  color: {
    type: "ordinal",
    domain: answer_domain,
    range: ["#2166acff",
            "#67a9cfff",
            "#d1e5f0ff",
            "#f7f7f7ff",
            "#fddbc7ff",
            "#ef8a62ff",
            "#b2182bff"]
  },
  height: 600
})

// breaking out the pointer layer for readability
// (and in case we decide to customise it later)
tipTemplate = Plot.pointer({
  x: "lon",
  y: "lat",
  channels: {
    place: {
      label: "",
      value: d => d.isit_label,
    },
    label: {
      label: "",
      value: d => d.isit_comment
    },
    separator: {
      label: "",
      value: d => ""
    },
    isit_maximum: {
      label: "Max:",
      value: d => d.isit_maximum + "°C"
    },
    isit_minimum: {
      label: "Min:",
      value: d => d.isit_minimum + "°C"
    }
  },
  fontSize: 20,
  fontFamily: "Roboto Condensed",
  format: {
    x: null,
    y: null
  },
  lineWidth: 20,
  lineHeight: 1.25,
  pointerSize: 0,
  fillOpacity: 0.8,
  strokeOpacity: 0
})

See websites from our international colleagues!

• Hoy extremo?
• Es ist warm?
• Zu heiss heute?
• Is Bochum hot right now?
• Is the UK hot right now?
• Ali je danes vroče?