Shrinking sea ice

seaiceNorth = FileAttachment("https://raw.githubusercontent.com/360-info/tracker-seaice/main/data/seaice-annual-north.csv").csv({ typed: true})
seaiceSouth = FileAttachment("https://raw.githubusercontent.com/360-info/tracker-seaice/main/data/seaice-annual-south.csv").csv({ typed: true})

seaiceAnnual = hemisphere == "north" ? seaiceNorth : seaiceSouth

Plot.plot({
  marks: [
    Plot.line(seaiceAnnual, {
      x: "year",
      y: statistic,
      strokeWidth: width < 300 ? 2.5 : 1.5,
      stroke: "royalblue",
      opacity: 0.5
    }),
    Plot.dot(seaiceAnnual, {
      x: "year",
      y: statistic,
      r: 3,
      fill: "royalblue",
      stroke: "white"
    }),
    // post-2016
    hemisphere == "south" ?
      Plot.ruleX([2015.5], {
        stroke: "grey",
        strokeDasharray: "2"
      }) : null,
    hemisphere == "south" ?
      Plot.text(["Sea ice began to shrink in 2016"], {
        x: 2015.7,
        y: minValue + 0.965 * (maxValue - minValue),
        textAnchor: "start",
        lineWidth: 10,
        fill: "grey"
      }) : null
  ],
  x: {
    label: "Year →"
  },
  y: {
    label: "↑ Sea ice extent (M sq. km)"
  },
  marginTop: 40,
  marginBottom: 40,
  style: {
    fontSize: 14,
    fontWeight: "bold",
    fontFamily: "Roboto Condensed"
  }
})

viewof statistic = Inputs.radio(
  new Map([
    ["Summer minimum", "min"],
    ["Average", "mean"],
    ["Winter maximum", "max"]
  ]), {
    value: "mean"
  })
viewof hemisphere = Inputs.radio(
  new Map([
    ["Arctic (north)", "north"],
    ["Antarctic (south)", "south"]
  ]), {
    value: "south"
  })

// get the max extent for positioning text annotation
maxValue = Math.max(...seaiceAnnual.map(d => d[statistic]))
minValue = Math.min(...seaiceAnnual.map(d => d[statistic]))

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