Heatwave exposure

exposureCountries = exposureAll
  .select("location_type", "iso2", "country", "region", "continent")

allCountries = daysAll
  .select("location_type", "iso2", "country", "region", "continent")
  .union(exposureCountries)
  // exclude iso2 null but country defined
  .filter(d => d.location_type != "country" || d.iso2 !== null)
  .derive({ location: d => d.country || d.region || d.continent })
  // make 
  .derive({ location_key: d => op.replace(op.lower(d.location), /\s,\./, "-") })
  .orderby("location")
  .objects()

selectedFlag =
  selectedCountry[0].location_type == "country" ?
  html`<img class="header-flag" aria-hidden="true" src="https://hatscripts.github.io/circle-flags/flags/${selectedCountry[0].iso2.toLowerCase()}.svg">` :
  html``

defaultLocation = {
  const pageURL = new URL(window.location.href)
  const locationChoice = pageURL.searchParams.get("location")
  const filteredLocation = allCountries
    .filter(d => d.location_key == locationChoice)

  console.log("Location key:", locationChoice)
  console.log("Found:", filteredLocation)

  return filteredLocation.length == 1 ? filteredLocation[0].location : "Global"
}


viewof selectedCountry = Inputs.search(allCountries, {
  placeholder: "for a country or region",
  datalist: allCountries.map(d => d.location),
  format: d => "",
  label: "🔍 Search",
  // exact matches only (as some regions are similar to country names)
  filter: q => (d => d.location == q),
  required: false,
  query: defaultLocation
})

html`<span id="results-${selectedCountry.length == 1 ? "on" : "off"}"></span>`

html`<h2>${selectedFlag} ${selectedCountry[0].location.toUpperCase()}</h2>`

countryDays = daysAll
  .params({ selectedCountry: selectedCountry[0] })
  .derive({ location: d => d.country || d.region || d.continent })
  .filter(d => d.location == selectedCountry.location)
  .objects()

countryExposure = exposureAll
  .params({ selectedCountry: selectedCountry[0] })
  .derive({ location: d => d.country || d.region || d.continent })
  .filter(d => d.location == selectedCountry.location)
  .filter(d => d.measure == "Excess deaths per 10M residents")
  .filter(d => d.population == "Country-specific age standardisation")

daysSeries = [
  { period: "1980-\n1989", days: countryDays[0]["1980-1989"] },
  { period: "1990-\n1999", days: countryDays[0]["1990-1999"] },
  { period: "2000-\n2009", days: countryDays[0]["2000-2009"] },
  { period: "2010-\n2019", days: countryDays[0]["2010-2019"] }
]

daysUp = countryDays[0]["Change_per_decade"] > 0

daysChangeMessage = html`<span class="${daysUp ? "increase" : "decrease"}">${daysUp ? "▲" : "▼"} ${countryDays[0]["Change_per_decade"]} days per decade</span>`

Heatwave days per year

Plot.plot({
  marks: [
    Plot.barY(daysSeries, {
      x: "period",
      y: "days",
      fill: "lightpink",
      rx: 5,
      ry: 5,
      tip: true 
    })
  ],
  x: {
    label: null
  },
  y: {
    label: null
  },
  height: 100,
  width: 200,
  style: {
    fontFamily: "Roboto Condensed"
  }
})

deathrateChange = countryExposure
  .filter(d => d.statistic == "Pct change per decade")
  .objects()
  .map(d => d.central)

rateUp = deathrateChange > 0

deathrateChangeMessage =
  html`<span class="${rateUp ? "increase" : "decrease"}">${rateUp ? "▲" : "▼"} ${deathrateChange}% per decade</span>`

countrySeries = countryExposure
  .filter(d => op.match(d.statistic, /\d{4}-\d{4}/))
  .derive({ statistic: d => op.replace(d.statistic, "-", "-\n")})
  .objects()

Excess deaths per 10M residents per year

Plot.plot({
  marks: [
    Plot.barY(countrySeries, {
      x: "statistic",
      y: "central",
      fill: "lightblue",
      rx: 5,
      ry: 5,
      tip: true
    })
  ],
  x: {
    label: null
  },
  y: {
    label: null
  },
  height: 100,
  width: 200,
  style: {
    fontFamily: "Roboto Condensed"
  }
})

Heatwave exposure

Look for a country or region above to see heatwave data

Heatwave days per year

Excess deaths per 10M residents per year

Get this map