Changing climate, changing risks

allData = FileAttachment("/data/agestd-allsex-allcause-pollutiontemp-sev-byrisk.csv")
  .csv({ typed: true })

sortedData = d3.sort(allData, (a, b) => d3.ascending(a.year, b.year))
filteredData =
  d3.groups(sortedData, d => d.country)
    .map(([key, data]) => ({
      Country: key,
      floor: d3.min([
        ...data.map(d => d.val_lowtemp),
        ...data.map(d => d.val_hightemp),
        ...data.map(d => d.val_pollution)
      ]),
      ceiling: d3.max([
        ...data.map(d => d.val_lowtemp),
        ...data.map(d => d.val_hightemp),
        ...data.map(d => d.val_pollution)
      ]),
      "Low temperature": data.map(d => ({ year: d.year, val: d.val_lowtemp })),
      "High temperature": data.map(d => ({ year: d.year, val: d.val_hightemp })),
      "Air pollution": data.map(d => ({ year: d.year, val: d.val_pollution }))
    }))

sparkarea = function(data, colour = "#333", floor = 0, ceiling = 100) {
  return Plot.plot({
    marks: [
      Plot.areaY(data, {
        x: "year",
        y: "val",
        fill: colour,
        fillOpacity: 0.2
      }),
      Plot.line(data, {
        x: "year",
        y: "val",
        stroke: colour,
        size: 2
      }),
      Plot.text(data, Plot.selectFirst({
        x: "year",
        y: "val",
        text: d => d3.format(".1f")(d.val),
        fill: colour,
        stroke: "white",
        strokeWidth: 7,
        dx: -10,
        textAnchor: "start",
        fontSize: 32
      })),
      Plot.text(data, Plot.selectLast({
        x: "year",
        y: "val",
        text: d => d3.format(".1f")(d.val),
        fill: colour,
        stroke: "white",
        strokeWidth: 7,
        fontWeight: "bold",
        dx: 10,
        textAnchor: "end",
        fontSize: 32
      })),
    ],
    y: {
      domain: [floor, ceiling]
    },
    marginLeft: 10,
    marginRight: 10,
    marginTop: 10,
    marginBottom: 40,
    axis: null,
    height: 100,
    style: {
      background: "transparent",
      fontFamily: "Roboto Condensed"
    }
  })
}

viewof searchResults = Inputs.search(filteredData)

isWide = width > 500

viewTable = Inputs.table(searchResults, {
    columns: ["Country", "Low temperature", "High temperature", "Air pollution"],
    width: {
      "Country": 25
    },
    sort: "country",
    height: 400,
    format: {
      "Country": c => md`**${c.replaceAll(" ", "<br>")}**`,
      "Low temperature": (data, i) => sparkarea(
        data,
        "#0570b0",
        filteredData[i].floor,
        filteredData[i].ceiling),
      "High temperature": (data, i) => sparkarea(
        data,
        "#e31a1c",
        filteredData[i].floor,
        filteredData[i].ceiling),
      "Air pollution": (data, i) => sparkarea(
        data,
        "#222",
        filteredData[i].floor,
        filteredData[i].ceiling)
    }
  })

viewList = html`
  <div class="list-view">${searchResults.map(c => html`
    <div class="list-card">
      <h3>${c.Country}</h3>
      <h4>Low temperature</h4>
      <p>${sparkarea(c["Low temperature"], "#0570b0", c.floor, c.ceiling)}</p>
      <h4>High temperature</h4>
      <p>${sparkarea(c["High temperature"], "#e31a1c", c.floor, c.ceiling)}</p>
      <h4>Air pollution</h4>
      <p>${sparkarea(c["Air pollution"], "#222", c.floor, c.ceiling)}</p>
    </div>
  `)}</div>`

// use either a table or list depending on screen width
isWide ? html`${viewTable}` : html`${viewList}`

micro = require("[email protected]")
micro.init({
  awaitOpenAnimation: true,
  awaitCloseAnimation: true
});