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

bucket_base = "https://d33173dkfxwa5x.cloudfront.net/www/"

FA = FileAttachment

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

bucket_base = "https://d33173dkfxwa5x.cloudfront.net/www/"

FA = ƒ(name)

// get the station id from the page <head>, injected by populate-places.qmd
stationId = document
  .querySelector("meta[name=isithotrightnow-station]")
  .getAttribute("data-station")

stationId = "087031"

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

OJS Error

TypeError: Failed to fetch

Is it hot in

OJS Runtime Error

Failed to fetch

right now?

answers = ({
  "Hell no!":   {color: "white",   fill1: "#5287d1", fill2: "#2166ac" },
  "No!":        {color: "white",   fill1: "#a2cdeb", fill2: "#67a9cf" },
  "Nope":       {color: "#333333", fill1: "#f5f8fa", fill2: "#d1e5f0" },
  "Not really": {color: "#333333", fill1: "#f7f7f7", fill2: "#ebebeb" },
  "Yup":        {color: "#333333", fill1: "#fddcca", fill2: "#f7cfb7" },
  "Yeah!":      {color: "white",   fill1: "#de7b49", fill2: "#fc946a" },
  "Hell yeah!": {color: "white",   fill1: "#d1231d", fill2: "#b2182b" }
})

html`
<div class="answer-icon-and-label">
  <span class="answer-icon" style="background-color: ${answers[statsPlace.isit_answer].fill2};">
  </span>
  <span>${statsPlace.isit_answer}</span>
</div>`

answers = Object {Hell no!: Object, No!: Object, Nope: Object, Not really: Object, Yup: Object, Yeah!: Object, Hell yeah!: Object}

OJS Runtime Error

Failed to fetch

md`${statsPlace.isit_comment}`

OJS Runtime Error

Failed to fetch

Here’s how today compares…

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) + "%"

datefns = Module {add: ƒ(t, c), addBusinessDays: ƒ(o, e), addDays: ƒ(e, r), addHours: ƒ(t, r), addISOWeekYears: ƒ(e, r), addMilliseconds: ƒ(t, r), addMinutes: ƒ(o, s), addMonths: ƒ(o, r), addQuarters: ƒ(o, r), addSeconds: ƒ(t, d), addWeeks: ƒ(o, r), addYears: ƒ(o, r), areIntervalsOverlapping: ƒ(n, o, f), clamp: ƒ(o, t), closestIndexTo: ƒ(s, N), closestTo: ƒ(e, u), compareAsc: ƒ(r, f), compareDesc: ƒ(r, f), constructFrom: ƒ(t, e), daysToWeeks: ƒ(e), …}

OJS Runtime Error

Failed to fetch

OJS Runtime Error

Failed to fetch

OJS Runtime Error

Failed to fetch

OJS Runtime Error

Failed to fetch

OJS Runtime Error

Failed to fetch

md`${statsPlace.isit_minimum} °C  `

OJS Runtime Error

Failed to fetch

md`${tminWhenFriendly}`

OJS Runtime Error

Failed to fetch

md`${statsPlace.isit_maximum} °C  `

OJS Runtime Error

Failed to fetch

md`${tmaxWhenFriendly}`

OJS Runtime Error

Failed to fetch

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

OJS Runtime Error

Failed to fetch

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

OJS Runtime Error

Failed to fetch

md`![](${bucket_base + "plots/timeseries/timeseries-" + stationId + ".png"})`

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.

md`![](${bucket_base + "plots/distribution/distribution-" + stationId + ".png"})`

… and the rest of the year.

We’ve compared every day this year at

OJS Runtime Error

Failed to fetch

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"})
md`![](${bucket_base + "plots/heatmap/heatmap-" + stationId + "-" + heatmapYear + ".png"})`

heatmapYear = "2025"

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.`

nowHour = 8

Some places may still be heating up as the day continues.

statsAllRaw = FA(bucket_base + "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)
}

statsAllRaw = Object {066214: Object, 067105: Object, 063005: Object, 048245: Object, 086338: Object, 087031: Object, 070351: Object, 094029: Object, 040842: Object, 015590: Object, 014015: Object, 023000: Object, 009021: Object, 004032: Object, 091311: Object, 060168: Object, 076031: Object, 017043: Object, 039128: Object, 039083: Object, …}

statsAll = Array(54) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, …]

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

currentStats = Array(54) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, …]

staleStats = Array(0) []

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
})

australia = Object {type: "FeatureCollection", name: "australia", crs: Object, features: Array(1)}

Plot = Module {Area: class, Arrow: class, BarX: class, BarY: class, Cell: class, Contour: class, Density: class, Dot: class, Frame: class, Geo: class, Hexgrid: class, Image: class, Line: class, Link: class, Mark: class, Raster: class, Rect: class, RuleX: class, RuleY: class, Text: class, …}

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

// 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
})

tipTemplate = Object {x: "lon", y: "lat", channels: Object, fontSize: 20, fontFamily: "Roboto Condensed", format: Object, lineWidth: 20, lineHeight: 1.25, pointerSize: 0, fillOpacity: 0.8, strokeOpacity: 0, render: ƒ(n, r, o, i, l, s)}

See websites from our international colleagues