viewof selected_la = 
Inputs.select(
  traffic_rates_by_council_council_names, 
  {value: "selected_la", label: "Select a council"})


traffic_rates_by_council_pivoted_without_total_aq = aq.from(transpose(traffic_rates_by_council_new_tidy))

council_data_filtered = traffic_rates_by_council_pivoted_without_total_aq
  .filter(aq.escape(d => d['Council'] === selected_la))

//council_data_filtered = traffic_rates_by_council_pivoted_without_total_aq
//  .filter(aq.escape(d => (d['Council area'] === "All" ? d['Council area'] )))

formatLargeNum = 
  new Intl.NumberFormat("en-GB", {
    style: "decimal",
    notation: "standard",
    compactDisplay: "short",
    minimumFractionDigits: 0,
    maximumFractionDigits: 1,
  }).format

Plot.plot({
  width: Math.max(width, 550),
  marginLeft: 125,
  marginTop: 50,
  marginBottom: 50,
  style: {
  overflow: "visible",
  fontSize: 14,
  ariaLabel: "Interactive graphic for council-level car traffic data from 1995 to 2023.",
  ariaDescription: "An interactive line and area plot showing car traffic levels in every council area in Scotland. The graph shows the traffic level in 'millions of vehicle kilometers', from the year 1995 to 2023 for each council. The data shows that all councils have recorded an increase in car kilometers driven.",
},
  x: {grid: true, tickFormat: ""},
  y: {grid: true, domain: [0, 3000], tickFormat: formatLargeNum},
  marks: [
    Plot.ruleY([0]),
    Plot.areaY(council_data_filtered, {
      x: "Year",
      y: "Million vehicle kilometers",
      stroke: "Council",
      marker: true,
      color: "steelblue",
      fill: "#006B8D",
      fillOpacity: 0.8
    }),
    Plot.lineY(council_data_filtered, {
      x: "Year",
      y: "Million vehicle kilometers",
      stroke: "Council",
      tip: {format: {x: "d", y: formatLargeNum}},
      marker: true,
      color: "steelblue",
    }),
    Plot.axisY({label: "Million vehicle kilometers", tickFormat: formatLargeNum}),
  ]
  
  
})