md`## Poll results (Respondents: ${respondentCount})`

import { liveGoogleSheet } from "@jimjamslam/live-google-sheet";
import { aq, op } from "@uwdata/arquero";

surveyResults = liveGoogleSheet(
  "https://docs.google.com/spreadsheets/d/e/" +
    "2PACX-1vROCUn2oxvBJiHkMnEWrVT3TtycRzm6xqQKW0zvHXTzRLb4ajeCTShXMaghF3jowbqFvaZwY8r5j5NX/" +
    "pub?gid=1685617065&single=true&output=csv",
  10000, 1, 5); // adjust the last number to select all relevant columns 

respondentCount = surveyResults.length;

countsColour = aq.from(surveyResults)
  .select("colour")
  .groupby("colour")
  .count()
  .derive({ measure: d => "Colours" })

// Calculate the maximum count from your dataset
maxCountCol = Math.max(...countsColour.objects().map(d => d.count));

plotColour = Plot.plot({
  marks: [
    Plot.barY(countsColour, {
      x: "colour",
      y: "count",
      fill: "colour",
      stroke: "black",
      strokeWidth: 1
    }),
    Plot.ruleY([respondentCount], { stroke: "#ffffff99" })
  ],
  color: {
    domain: [
      "red",
      "orange",
      "yellow",
      "green",
      "blue",
      "indigo",
      "violet"
    ],
    range: [
      "#d73027",  // red
      "orange",  // orange
      "#fce803",  // yellow
      "forestgreen",   // green
      "blue",  // blue
      "#4B0082",  // indigo
      "#8F00FF"   // violet
    ]
  },
  marginBottom: 80,
  x: { label: "", tickSize: 2, tickRotate: -45,
    domain: ["red", "orange", "yellow", "green", "blue", "indigo", "violet"]
  },  
  y: {
    label: "",
    tickSize: 10,
    tickFormat: d => d,
    tickValues: Array.from(
      new Set(countsColour.objects().map(d => d.count))
    ).sort((a, b) => a - b),
    domain: [0, maxCountCol]
  },
  facet: { data: countsColour, x: "measure", label: "" },
  marginLeft: 140,
  style: {
    width: 1350,
    height: 500,
    fontSize: 30,
  }
});

function PieChart(data, {
  name = ([x]) => x,  // given d in data, returns the (ordinal) label
  value = ([, y]) => y, // given d in data, returns the (quantitative) value
  title, // given d in data, returns the title text
  width = 640, // outer width, in pixels
  height = 400, // outer height, in pixels
  innerRadius = 0, // inner radius of pie, in pixels (non-zero for donut)
  outerRadius = Math.min(width, height) / 2, // outer radius of pie, in pixels
  labelRadius = (innerRadius * 0.5 + outerRadius * 0.5), // center radius of labels
  format = ",", // a format specifier for values (in the label)
  names, // array of names (the domain of the color scale)
  colors, // array of colors for names
  stroke = innerRadius > 0 ? "none" : "white", // stroke separating widths
  strokeWidth = 1, // width of stroke separating wedges
  strokeLinejoin = "round", // line join of stroke separating wedges
  padAngle = stroke === "none" ? 1 / outerRadius : 0, // angular separation between wedges, in radians
} = {}) {
  // Compute values.
  const N = d3.map(data, name);
  const V = d3.map(data, value);
  const I = d3.range(N.length).filter(i => !isNaN(V[i]));

  // Unique the names.
  if (names === undefined) names = N;
  names = new d3.InternSet(names);

  // Chose a default color scheme based on cardinality.
  if (colors === undefined) colors = d3.schemeSpectral[names.size];
  if (colors === undefined) colors = d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), names.size);

  // Construct scales.
  const color = d3.scaleOrdinal(names, colors);

  // Compute titles.
  if (title === undefined) {
    const formatValue = d3.format(format);
    title = i => `${N[i]}\n${formatValue(V[i])}`;
  } else {
    const O = d3.map(data, d => d);
    const T = title;
    title = i => T(O[i], i, data);
  }

  // Construct arcs.
  const arcs = d3.pie().padAngle(padAngle).sort(null).value(i => V[i])(I);
  const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius);
  const arcLabel = d3.arc().innerRadius(labelRadius).outerRadius(labelRadius);
  
  const svg = d3.create("svg")
      .attr("width", width)
      .attr("height", height)
      .attr("viewBox", [-width / 2, -height / 2, width, height])
      .attr("style", "max-width: 100%; height: auto; height: intrinsic;");

  svg.append("g")
      .attr("stroke", stroke)
      .attr("stroke-width", strokeWidth)
      .attr("stroke-linejoin", strokeLinejoin)
    .selectAll("path")
    .data(arcs)
    .join("path")
      .attr("fill", d => color(N[d.data]))
      .attr("d", arc)
    .append("title")
      .text(d => title(d.data));

  svg.append("g")
      .attr("font-family", "sans-serif")
      .attr("font-size", 100)
      .attr("text-anchor", "middle")
    .selectAll("text")
    .data(arcs)
    .join("text")
      .attr("transform", d => `translate(${arcLabel.centroid(d)})`)
    .selectAll("tspan")
    .data(d => {
      const lines = `${title(d.data)}`.split(/\n/);
      return (d.endAngle - d.startAngle) > 0.25 ? lines : lines.slice(0, 1);
    })
    .join("tspan")
      .attr("x", 0)
      .attr("y", (_, i) => `${i * 1.1}em`)
      .attr("font-weight", (_, i) => i ? null : "bold")
      .text(d => d);

  return Object.assign(svg.node(), {scales: {color}});
}

countsInterest = aq.from(surveyResults)
  // .derive({ interest: d => op.split(d.interest, ", ") }) // not needed here... the interest column contains only a single value per row, but you're treating it as if it could contain multiple values separated by commas. So, when you use op.split(d.interest, ", "), it attempts to split a single value (like "Far-right movements") into an array, which causes incorrect behavior during the plotting process.
  .select("interest")
  // .unroll("interest") // not needed in this poll since multiple options are not allowed --- "This takes the array in the 'interest' field and "unrolls" it. This means that if a person has indicated three interests, this step will create three separate records for that person, each record corresponding to one interest. It effectively flattens the array into individual rows, so you'll have one row per interest per each person.
  .derive({
    interest: d =>
      d.interest === "Far-right parties" ? "parties" :
      d.interest === "Far-right movements" ? "movements" :
      d.interest === "Individuals in the far right" ? "individuals" :
      d.interest === "Studying the far right" ? "studying" :
      d.interest  // fallback in case there are unexpected values
  })
  .groupby("interest")
  .count()
  .derive({ measure: d => "Initial student interests" })
  // .rename({ interest: "part" })

// Calculate the maximum count from your dataset
maxCount = Math.max(...countsInterest.objects().map(d => d.count));

plotInterest = Plot.plot({
  marks: [
    Plot.barY(countsInterest, {
      x: "interest",
      y: "count",
      fill: "interest",
      stroke: "black",
      strokeWidth: 1
    }),
    Plot.ruleY([respondentCount], { stroke: "#ffffff99" })
  ],
  color: {
    domain: [
      "parties", // "Far-right parties",
      "movements", // "Far-right movements",
      "individuals", // "Individuals in the far right",
      "studying" // "Studying the far right"
    ],
    range: [
      "#d73027",  // Far-right parties
      "forestgreen",  // Far-right movements
      "#91bfdb",  // Individuals in the far right
      "#4575b4"   // Studying the far right
    ]
  },
  marginBottom: 105,
  x: { 
    label: "",
    tickSize: 0, 
    tickRotate: -30,
    tickFormat: d => d
  },  
  y: {
    label: "",
    tickSize: 10,
    tickFormat: d => d,
    // tickFormat: d => Math.floor(d), // Round down to the nearest whole number
    tickValues: Array.from({ length: maxCount + 1 }, (_, i) => i), // Array of whole numbers [0, 1, ..., maxCount]
    domain: [0, maxCount]
  },
  facet: { data: countsInterest, x: "measure", label: "" },
  marginLeft: 100,
  style: {
    width: 1350,
    height: 500,
    fontSize: 25,
  }
});