Public transport access in the Indo-Pacific

cities = FileAttachment("/data/pt-access-ap.csv").csv({ typed: true })

zoomToSelection = selectedCities.length > 0 &&
  zoomOptions.includes("Zoom")

activeData = zoomToSelection ?
  cities.filter(
    d => selectedCities
      .map(d => d.city.toLowerCase())
      .includes(d.city.toLowerCase())) :
  cities

textSize = 18
maxWidth = 500
excessWidth = Math.max(0, width - 800)

// until we hit 800px, keep the max bubble radius at 12 (unless zooming)
baseMaxRadius = 25
zoomMaxRadius = 30

// after that, add radius scale according to excess with
extraMaxRadius = d3.scaleLinear([0, 900], [0, 7]).clamp(true)

Plot.plot({
  marks: [
    Plot.dot(activeData, Plot.dodgeX("middle", {
      y: "pct_pt_access",
      fill: "pct_pt_access",
      r: "population",
      opacity: d =>
        selectedCities.length > 0 &&
          (!selectedCities
            .map(d => d.city.toLowerCase())
            .includes(d.city.toLowerCase())) ?
        0.1 :
        1,
    })),
    Plot.tip(activeData, Plot.pointer(Plot.dodgeX("middle", {
      y: "pct_pt_access",
      r: "population",
      channels: {
        "City": "city",
        "Country": "country_name",
        "Access": "pct_pt_access"
      },
      format: {
        // "x": d => d.toFixed(1) + "%",
        "y": false,
        "City": true,
        "Country": true,
        "r": true,
        "Access": d => d.toFixed(1) + "% of people"
      }
    })))
  ],
  y: {
    label: "Access to public transport",
    grid: true,
    tickFormat: d => d.toFixed(0) + "%",
    // axis: "top",
    domain: [0, 100],
    fill: "grey"
  },
  color: {
    reverse: true,
    domain: [0, 100]
  },
  r: {
    label: "Population",
    range: zoomToSelection ?
      [0.25, zoomMaxRadius] :
      [0.15, baseMaxRadius + extraMaxRadius(excessWidth)]
  },
  height: zoomToSelection ? 500 : 600,
  width: maxWidth + excessWidth,
  marginLeft: 50,
  marginTop: 80,
  style: {
    fontFamily: "Roboto Condensed",
    fontSize: width < maxWidth * 0.6 ?
      textSize * 1.5 :
      textSize
  }
})

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