@cosla/sensemaking-report-builder 0.1.0

package/src/script.js

@@ -0,0 +1,1251 @@
+/**
+ * @fileoverview Visualization logic for the report.
+ */
+
+/**
+ * Represents a single Opinion within a Topic.
+ * Generated by the 'groupOpinions' function in the processing script.
+ * @typedef {Object} Opinion
+ * @property {string} text - The text content of the opinion.
+ * @property {number} count - The number of quotes assigned to this opinion.
+ * @property {string} countFormatted - Comma-separated count string.
+ * @property {string} fullID - Unique ID (topicSlug-opinionSlug) used to look up raw quotes.
+ * @property {boolean} [viewAllQuotes] - Flag indicating if there are more quotes than the sample.
+ * @property {string[]} [sampleQuotes] - A subset of quotes used for previews (if available).
+ * @property {string} [topicText] - Parent topic text (injected during frontend flattening).
+ * @property {string} [topicId] - Parent topic ID (injected during frontend flattening).
+ * @property {number} [_startIndex] - Calculated index for stacked bar visualization.
+ * @property {number} [_startCount] - Calculated offset for stacked bar visualization.
+ */
+
+/**
+ * Represents a high-level Topic containing multiple opinions.
+ * @typedef {Object} Topic
+ * @property {string} topicID - Slugified ID for the topic.
+ * @property {string} text - The display title of the topic.
+ * @property {string} [summary] - Summary text for the topic.
+ * @property {number} rawQuoteCount - Total sum of quotes across all opinions in this topic.
+ * @property {string} quoteCountFormatted - Formatted unique quote count.
+ * @property {number} quoteCount - Count of unique representative IDs (participants).
+ * @property {number} opinionCount - Number of distinct opinions in this topic.
+ * @property {Opinion[]} opinions - Array of opinion objects.
+ */
+
+/**
+ * Represents a DemographicItem
+ * @typedef {Object} DemographicItem
+ * @property {string} value - The display value of the demographic item group.
+ * @property {number} count - The count of demographic item.
+ * @property {number} [_startIndex] - Calculated index for stacked bar visualization.
+ * @property {number} [_startCount] - Calculated offset for stacked bar visualization.
+ * @property {number} [_pct] - Calculated percentage of the total demographic count.
+ */
+
+/**
+ * Represents a Demographic breakdown
+ * @typedef {Object} Demographic
+ * @property {string} label - The display label of the demographic.
+ * @property {DemographicItem[]} values - Array of demographic key/values.
+ */
+
+/**
+ * Represents the raw Quote object structure stored in quotes.json or payload.
+ * @typedef {Object} RawQuote
+ * @property {string} id - Matches the 'fullID' of an Opinion.
+ * @property {string} quote - The actual text of the user quote.
+ */
+
+/**
+ * The global data payload injected by the build process.
+ * Handles both "inline" (all data in one file) and "static" (fetches quotes separately) modes.
+ * @type {{ topics: Topic[], demographics: [Demographic[]] quotes?: RawQuote[], options: { logo: string, overviewChart: string, hasToggle: boolean, sampleQuoteCount: number, topOpinionCount: number, topicColors: string[] } }}
+ */
+window.PAYLOAD = window.PAYLOAD || {};
+// console.log(window.PAYLOAD);
+
+const i18n = window.PAYLOAD.i18n || {};
+const numberFormatter = new Intl.NumberFormat(i18n.locale || "en");
+const percentFormatter = new Intl.NumberFormat(i18n.locale || "en", {
+  style: "percent",
+  maximumFractionDigits: 1,
+});
+
+/**
+ * Formats a number according to the active locale.
+ * @param {number} num
+ * @returns {string}
+ */
+function formatNumber(num) {
+  return numberFormatter.format(num);
+}
+
+/**
+ * Formats a value as a localized percentage string.
+ * @param {number|string} value
+ * @returns {string}
+ */
+function formatPercent(value) {
+  if (value == null || value === "") return "";
+  const num = Number(value);
+  if (isNaN(num)) return "";
+  const ratio = num > 1 ? num / 100 : num;
+  return percentFormatter.format(ratio);
+}
+
+/**
+ * Formats a count into a localized quotes string (e.g. "3 Quotes" or "3 citas").
+ * @param {number|string} count
+ * @returns {string}
+ */
+function formatQuotes(count) {
+  const formattedCount =
+    typeof count === "number" ? formatNumber(count) : count;
+  return (i18n.sections?.quotesCount || "{count} Quotes").replace(
+    "{count}",
+    formattedCount,
+  );
+}
+
+/**
+ * Default color palette used for visualizing different topics.
+ * @constant {string[]}
+ */
+const TOPIC_PALETTE = window.PAYLOAD.options.topicColors || ["#333"];
+const DEMOGRAPHIC_PALETTE = window.PAYLOAD.options.demographicColors || [
+  "#333",
+];
+
+/**
+ * Default number of top opinions to display in the Opinion Chart view.
+ * @constant {number}
+ */
+const NUM_TOP_OPINIONS = window.PAYLOAD.options.topOpinionCount || 10;
+
+/**
+ * Overview chart type
+ * @constant {string}
+ */
+const OVERVIEW_CHART_TYPE = window.PAYLOAD.options.overviewChart || "toggle";
+
+/**
+ * Quote threshold for warning
+ * @constant {number}
+ */
+let lowSampleThreshold = window.PAYLOAD.options.lowSampleThreshold || 30;
+
+/**
+ * Global modal opinion ID
+ * @constant {string}
+ */
+let currentDrawerId = "";
+/** @type {{ key: string, value: string }[]} */
+let currentDrawerFilters = [];
+
+/** @type {Opinion[]} */
+let flatOpinions = [];
+/** @type {Map<string, RawQuote[]>} */
+let quoteMap;
+/** @type {{ key: string, value: string }[][]} */
+let compareGroups = [[]];
+let activeOverviewChart = "topics";
+
+function renderOverviewChart() {
+  if (activeOverviewChart === "opinions") createOpinionChart();
+  else createTopicChart();
+}
+
+/**
+ * Renders a demographic chart.
+ * Displays each demographic breakdown as a stacked horizontal bar using SVG.
+ * Each segment represents a demographic value, sized by its share of participants.
+ */
+
+function createDemographicChart({ id, data }) {
+  /** @type {Demographic[]} */
+  const svgHeight = 16;
+  const borderRadius = 4;
+  const containerSel = d3.select(`#${id}`);
+  const render = () => {
+    containerSel.html("");
+
+    const containerNode = containerSel.node();
+    const containerWidth = containerNode
+      ? containerNode.getBoundingClientRect().width
+      : 800;
+
+    data.forEach((demographic) => {
+      const otherCategory = (
+        i18n.chart?.otherCategory || "Other"
+      ).toLowerCase();
+      const isOther = (val) =>
+        val.toLowerCase() === "other" || val.toLowerCase() === otherCategory;
+      const sortedValues = [...demographic.values].sort((a, b) => {
+        if (isOther(a.value)) return 1;
+        if (isOther(b.value)) return -1;
+        return d3.ascending(a.value.toLowerCase(), b.value.toLowerCase());
+      });
+
+      // Total count across all values for this demographic (denominator for %)
+      const totalCount = d3.sum(sortedValues, (d) => d.count);
+
+      // Calculate cumulative offsets for the stacked bar effect
+      let currentAccumulator = 0;
+      const processedValues = sortedValues.map((d, i) => {
+        const startVal = currentAccumulator;
+        currentAccumulator += d.count;
+        return {
+          ...d,
+          _startIndex: i,
+          _startCount: startVal,
+          _pct: Math.round((d.count / totalCount) * 100),
+        };
+      });
+
+      const top = processedValues[0];
+
+      const wrapper = containerSel
+        .append("div")
+        .attr("class", "demographic-wrapper");
+
+      wrapper
+        .append("div")
+        .attr("class", "demographic-header")
+        .text(demographic.label);
+
+      const svg = wrapper
+        .append("svg")
+        .attr("class", "demographic-svg")
+        .attr("width", "100%")
+        .attr("height", svgHeight);
+
+      const gapSize = containerWidth > 600 ? 4 : 2;
+
+      const totalRowGapPixels = Math.max(
+        0,
+        (processedValues.length - 1) * gapSize,
+      );
+
+      svg
+        .selectAll("rect")
+        .data(processedValues)
+        .enter()
+        .append("rect")
+        .attr("class", "demographic-rect")
+        .attr("y", 0)
+        .attr("height", svgHeight)
+        .attr("x", (d) => {
+          const startRatio = d._startCount / totalCount;
+          const shiftRight = d._startIndex * gapSize;
+          const shiftLeft = startRatio * totalRowGapPixels;
+
+          return `calc(${startRatio * 100}% + ${shiftRight - shiftLeft}px)`;
+        })
+        .attr("width", (d) => {
+          const ratio = d.count / totalCount;
+          const shrinkPixels = ratio * totalRowGapPixels;
+          return `calc(${ratio * 100}% - ${shrinkPixels}px)`;
+        })
+        .attr("rx", borderRadius)
+        .attr(
+          "fill",
+          (d, i) => DEMOGRAPHIC_PALETTE[i % DEMOGRAPHIC_PALETTE.length],
+        );
+
+      const legend = wrapper.append("div").attr("class", "demographic-legend");
+
+      processedValues.forEach((d, i) => {
+        const item = legend.append("div").attr("class", "legend-item");
+        item
+          .append("span")
+          .attr("class", "legend-color")
+          .style(
+            "background",
+            DEMOGRAPHIC_PALETTE[i % DEMOGRAPHIC_PALETTE.length],
+          );
+        item
+          .append("span")
+          .attr("class", "legend-text")
+          .html(`<strong>${d.value}</strong> ${formatPercent(d._pct)}`);
+      });
+    });
+  };
+
+  render();
+
+  let resizeTimer;
+  const onResize = () => {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(render, 250);
+  };
+  window.addEventListener("resize", onResize);
+  return () => window.removeEventListener("resize", onResize);
+}
+
+/**
+ * Returns an array of groups, each with a label and topics array.
+ * When no compare groups are active, returns a single group for all participants.
+ * @returns {{ label: string, topics: Topic[] }[]}
+ */
+function getTopicData() {
+  const GROUP_LABELS = ["A", "B", "C", "D"];
+
+  const groupDescription = (group) =>
+    group.length === 0
+      ? "All Participants"
+      : group
+          .map(
+            (f) => `<div class="topic-group-item">${f.key}: ${f.value}</div>`,
+          )
+          .join("");
+
+  if (compareGroups.length === 1 && compareGroups[0].length === 0) {
+    return [
+      {
+        label: "",
+        description: groupDescription(compareGroups[0]),
+        topics: window.PAYLOAD.topics,
+      },
+    ];
+  }
+
+  // loop through each group and filter opinions based on the group's demographic filters. Then aggregate quote counts for each opinion and topic, and return a new structured array that maps to the original topic structure.
+  return compareGroups.map((group, i) => {
+    const topics = window.PAYLOAD.topics
+      .map((topic) => {
+        const filteredOpinions = topic.opinions
+          .map((opinion) => {
+            const allQuotes = quoteMap?.get(opinion.fullID) ?? [];
+            const matched =
+              group.length === 0
+                ? allQuotes
+                : allQuotes.filter((q) =>
+                    group.every(({ key, value }) => q[key] === value),
+                  );
+            return {
+              ...opinion,
+              count: matched.length,
+              countFormatted: formatNumber(matched.length),
+            };
+          })
+          .filter((o) => o.count > 0);
+
+        const rawQuoteCount = d3.sum(filteredOpinions, (o) => o.count);
+        return {
+          ...topic,
+          opinions: filteredOpinions,
+          opinionCount: filteredOpinions.length,
+          rawQuoteCount,
+          quoteCount: rawQuoteCount,
+          quoteCountFormatted: formatNumber(rawQuoteCount),
+        };
+      })
+      .filter((t) => t.rawQuoteCount > 0);
+
+    const groupPrefix = i18n.filterModal?.groupLabelPrefix || "Group";
+    return {
+      label: `${groupPrefix} ${GROUP_LABELS[i]}`,
+      description: groupDescription(group),
+      topics,
+    };
+  });
+}
+
+/**
+ * Renders the primary "Conversation Overview" chart.
+ * Displays topics as rows of stacked horizontal bars using SVG.
+ * When multiple compare groups are active, each topic shows one bar per group
+ * at half height; a single group uses full height.
+ */
+function createTopicChart() {
+  const groups = getTopicData();
+  const svgHeight = 32;
+  const barHeight = groups.length > 1 ? svgHeight / 2 : svgHeight;
+  const borderRadius = groups.length > 1 ? 2 : 4;
+  const containerSel = d3.select(`#conversation-overview-chart`);
+
+  const render = () => {
+    containerSel.html("");
+
+    const containerNode = containerSel.node();
+    const containerWidth = containerNode
+      ? containerNode.getBoundingClientRect().width
+      : 800;
+
+    const gapSize = containerWidth > 600 ? 4 : 2;
+
+    const maxCount = d3.max(
+      groups.flatMap((g) => g.topics),
+      (d) => d.rawQuoteCount,
+    );
+
+    const sortedTopicIDs = [...groups[0].topics]
+      .sort((a, b) => d3.descending(a.rawQuoteCount, b.rawQuoteCount))
+      .map((t) => t.topicID);
+
+    sortedTopicIDs.forEach((topicID, topicIdx) => {
+      const refTopic = groups[0].topics.find((t) => t.topicID === topicID);
+      if (!refTopic) return;
+
+      const topicColor = TOPIC_PALETTE[topicIdx % TOPIC_PALETTE.length];
+      const hoverColor = d3.color(topicColor).darker(0.8);
+
+      const wrapper = containerSel.append("div").attr("class", "topic-wrapper");
+
+      const opinionsCountText = (
+        i18n.chart?.opinionsMeta || "({count} opinions)"
+      ).replace("{count}", formatNumber(refTopic.opinionCount));
+
+      wrapper
+        .append("div")
+        .attr("class", "topic-header")
+        .html(
+          `${refTopic.text} <span class="topic-meta">${opinionsCountText}</span>`,
+        );
+
+      groups.forEach(({ label, topics, description }) => {
+        const topic = topics.find((t) => t.topicID === topicID);
+        if (!topic) return;
+
+        const sortedOpinions = [...topic.opinions].sort((a, b) =>
+          d3.descending(a.count, b.count),
+        );
+
+        let currentAccumulator = 0;
+        const processedOpinions = sortedOpinions.map((d, i) => {
+          const startVal = currentAccumulator;
+          currentAccumulator += d.count;
+          return { ...d, _startIndex: i, _startCount: startVal };
+        });
+
+        const totalRowGapPixels = Math.max(
+          0,
+          (processedOpinions.length - 1) * gapSize,
+        );
+
+        const groupRow = wrapper.append("div").attr("class", "topic-group");
+
+        groupRow
+          .append("div")
+          .attr("class", "topic-group-label")
+          .attr(
+            "data-tippy-content",
+            `<div class="topic-group-label">${label}</div><div class="topic-group-description">${description}</div>`,
+          )
+          .text(label);
+
+        const svg = groupRow
+          .append("svg")
+          .attr("class", "topic-svg")
+          .attr("width", "100%")
+          .attr("height", barHeight);
+
+        svg
+          .selectAll("rect")
+          .data(processedOpinions)
+          .enter()
+          .append("rect")
+          .attr("class", "opinion-rect")
+          .attr("y", 0)
+          .attr("height", barHeight)
+          .attr("x", (d) => {
+            const startRatio = d._startCount / maxCount;
+            const shiftRight = d._startIndex * gapSize;
+            const shiftLeft = startRatio * totalRowGapPixels;
+            return `calc(${startRatio * 100}% + ${shiftRight - shiftLeft}px)`;
+          })
+          .attr("width", (d) => {
+            const ratio = d.count / maxCount;
+            const shrinkPixels = ratio * totalRowGapPixels;
+            return `calc(${ratio * 100}% - ${shrinkPixels}px)`;
+          })
+          .attr("fill", topicColor)
+          .on("mouseover", function () {
+            d3.select(this).attr("fill", hoverColor);
+          })
+          .on("mouseout", function () {
+            d3.select(this).attr("fill", topicColor);
+          })
+          .attr("rx", borderRadius)
+          .attr("data-tippy-content", (d) => {
+            return `
+              <div class="topic-text">${topic.text}</div>
+              <div class="quote-count">${formatQuotes(d.count)}</div>
+              <div class="opinion-text">${d.text}</div>
+            `;
+          })
+          .style("cursor", "pointer");
+
+        const quotesLabel = formatQuotes(
+          topic.quoteCountFormatted || formatNumber(topic.quoteCount),
+        );
+        const lowSampleText = i18n.chart?.lowSampleSize || "Low sample size";
+
+        groupRow
+          .append("div")
+          .attr("class", "topic-group-count")
+          .html(
+            `${quotesLabel}${topic.quoteCount < lowSampleThreshold ? `<img src="svg/exclamation.svg" alt="" role="presentation" data-tippy-content="<div class='low-sample'>${lowSampleText}</div>" />` : ""}`,
+          );
+      });
+    });
+
+    tippy(".opinion-rect", {
+      allowHTML: true,
+      animation: "fade",
+      theme: "light",
+      maxWidth: 280,
+      delay: 0,
+      duration: 0,
+      followCursor: true,
+    });
+
+    tippy(".topic-group-label", {
+      allowHTML: true,
+      animation: "fade",
+      theme: "light",
+      delay: 0,
+      duration: 0,
+    });
+
+    tippy(".topic-group-count img", {
+      allowHTML: true,
+      animation: "fade",
+      theme: "light",
+      delay: 0,
+      duration: 0,
+    });
+  };
+
+  render();
+
+  let resizeTimer;
+  window.addEventListener("resize", () => {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(render, 250);
+  });
+}
+
+/**
+ * Renders the "Participant Overview" chart.
+ */
+function createParticipantChart() {
+  /** @type {Demographic[]} */
+  const data = window.PAYLOAD.demographics;
+  const id = "participant-overview-chart";
+  createDemographicChart({ id, data });
+}
+
+/**
+ * Renders the alternative "Top Opinions" view.
+ * Flattens the nested data structure (Topic -> Opinions) into a single list
+ * to display the most popular opinions regardless of topic.
+ */
+function createOpinionChart() {
+  const groups = getTopicData();
+  const borderRadius = groups.length > 1 ? 2 : 4;
+  const barHeight = 24;
+  const actualBarHeight = groups.length > 1 ? barHeight / 1.5 : barHeight;
+  const gapSize = 12;
+  const containerSel = d3.select(`#conversation-overview-chart`);
+
+  // Color lookup keyed by topicID, using original payload order for consistency
+  const topicIndexMap = new Map();
+  window.PAYLOAD.topics.forEach((topic, i) =>
+    topicIndexMap.set(topic.topicID, i),
+  );
+  const topicColor = (topicId) => {
+    const idx = topicIndexMap.get(topicId) ?? 0;
+    return TOPIC_PALETTE[idx % TOPIC_PALETTE.length];
+  };
+
+  // Per-group flat map of fullID -> opinion (with injected topic metadata)
+  const groupOpinionMaps = groups.map(({ topics }) => {
+    const map = new Map();
+    topics.forEach((topic) => {
+      topic.opinions.forEach((op) => {
+        map.set(op.fullID, {
+          ...op,
+          topicText: topic.text,
+          topicId: topic.topicID,
+        });
+      });
+    });
+    return map;
+  });
+
+  // Top N opinion IDs ranked by the reference group (group 0)
+  const topOpinionIDs = [...groupOpinionMaps[0].values()]
+    .sort((a, b) => d3.descending(a.count, b.count))
+    .slice(0, NUM_TOP_OPINIONS)
+    .map((o) => o.fullID);
+
+  const render = () => {
+    containerSel.html("");
+
+    const maxCount = d3.max(
+      topOpinionIDs.flatMap((id) =>
+        groups.map((_, gi) => groupOpinionMaps[gi].get(id)?.count ?? 0),
+      ),
+    );
+
+    // Legend: topics represented in the top opinions
+    const topicIDsInTop = new Set(
+      topOpinionIDs
+        .map((id) => groupOpinionMaps[0].get(id)?.topicId)
+        .filter(Boolean),
+    );
+    const legend = containerSel.append("div").attr("class", "opinion-legend");
+    window.PAYLOAD.topics.forEach((topic) => {
+      if (!topicIDsInTop.has(topic.topicID)) return;
+      const item = legend.append("div").attr("class", "legend-item");
+      item
+        .append("span")
+        .attr("class", "legend-color")
+        .style("background-color", topicColor(topic.topicID));
+      item.append("span").attr("class", "legend-text").text(topic.text);
+    });
+
+    const listContainer = containerSel
+      .append("div")
+      .attr("class", "opinion-list-container");
+
+    topOpinionIDs.forEach((fullID) => {
+      const refOp = groupOpinionMaps[0].get(fullID);
+      if (!refOp) return;
+
+      const color = topicColor(refOp.topicId);
+      const hoverColor = d3.color(color).darker(0.8);
+
+      const opinionRow = listContainer
+        .append("div")
+        .attr("class", "opinion-row")
+        .style("margin-bottom", `${gapSize}px`);
+
+      opinionRow.append("div").attr("class", "opinion-label").text(refOp.text);
+
+      groups.forEach(({ label, description }, gi) => {
+        const op = groupOpinionMaps[gi].get(fullID);
+        const count = op?.count ?? 0;
+        const countFormatted = op?.countFormatted ?? "0";
+        const quotesLabel = formatQuotes(countFormatted);
+        const lowSampleText = i18n.chart?.lowSampleSize || "Low sample size";
+
+        const groupRow = opinionRow.append("div").attr("class", "topic-group");
+
+        groupRow
+          .append("div")
+          .attr("class", "topic-group-label")
+          .attr(
+            "data-tippy-content",
+            `<div class="topic-group-label">${label}</div><div class="topic-group-description">${description}</div>`,
+          )
+          .text(label);
+
+        const barWrapper = groupRow
+          .append("div")
+          .attr("class", "opinion-bar-wrapper");
+
+        barWrapper
+          .append("div")
+          .attr("class", "opinion-bar")
+          .style("height", `${actualBarHeight}px`)
+          .style("width", `${(count / maxCount) * 100}%`)
+          .style("background-color", color)
+          .style("border-radius", `${borderRadius}px`)
+          .style("cursor", "pointer")
+          .attr(
+            "data-tippy-content",
+            `
+            <div class="topic-text">${refOp.topicText}</div>
+            <div class="quote-count">${quotesLabel}</div>
+            <div class="opinion-text">${refOp.text}</div>
+          `,
+          )
+          .on("mouseover", function () {
+            d3.select(this).style("background-color", hoverColor);
+          })
+          .on("mouseout", function () {
+            d3.select(this).style("background-color", color);
+          });
+
+        groupRow
+          .append("div")
+          .attr("class", "topic-group-count")
+          .html(
+            `${quotesLabel}${count < lowSampleThreshold ? `<img src="svg/exclamation.svg" alt="" role="presentation" data-tippy-content="<div class='low-sample'>${lowSampleText}</div>" />` : ""}`,
+          );
+      });
+    });
+
+    tippy(".opinion-bar", {
+      allowHTML: true,
+      animation: "fade",
+      theme: "light",
+      maxWidth: 280,
+      delay: 0,
+      duration: 0,
+      followCursor: true,
+    });
+
+    tippy(".topic-group-label", {
+      allowHTML: true,
+      animation: "fade",
+      theme: "light",
+      delay: 0,
+      duration: 0,
+    });
+
+    tippy(".topic-group-count img", {
+      allowHTML: true,
+      animation: "fade",
+      theme: "light",
+      delay: 0,
+      duration: 0,
+    });
+  };
+
+  render();
+
+  let resizeTimer;
+  window.addEventListener("resize", () => {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(render, 250);
+  });
+}
+
+/**
+ * Renders a Donut Chart for a specific topic.
+ * @param {Topic} topicData - The topic data object.
+ * @param {number} index - The index of the topic (used for consistent coloring).
+ */
+function createDonutChart(topicData, index) {
+  const containerSel = d3.select(
+    `#topic-${topicData.topicID} .donut-chart-content`,
+  );
+
+  const gapSizeAngle = 0.025;
+  const cornerRadius = 2;
+  const thicknessRatio = 0.375;
+
+  const render = () => {
+    containerSel.html("");
+
+    const containerNode = containerSel.node();
+    const containerWidth = containerNode
+      ? containerNode.getBoundingClientRect().width
+      : 200;
+
+    const width = containerWidth;
+    const height = containerWidth;
+    const radius = Math.min(width, height) / 2;
+
+    const sortedOpinions = [...topicData.opinions].sort(
+      (a, b) => b.count - a.count,
+    );
+
+    const svg = containerSel
+      .append("svg")
+      .attr("class", "donut-svg")
+      .attr("width", width)
+      .attr("height", height)
+      .append("g")
+      .attr("transform", `translate(${width / 2},${height / 2})`);
+
+    const pie = d3
+      .pie()
+      .value((d) => d.count)
+      .sort(null)
+      .padAngle(gapSizeAngle);
+
+    const arc = d3
+      .arc()
+      .innerRadius(radius * (1 - thicknessRatio))
+      .outerRadius(radius)
+      .cornerRadius(cornerRadius);
+
+    const baseColor = TOPIC_PALETTE[index % TOPIC_PALETTE.length];
+    const hoverColor = d3.color(baseColor).darker(0.8);
+
+    svg
+      .selectAll("path")
+      .data(pie(sortedOpinions))
+      .enter()
+      .append("path")
+      .attr("class", "opinion-segment")
+      .attr("d", arc)
+      .attr("fill", baseColor)
+      .attr("stroke", "none")
+      .on("mouseover", function () {
+        d3.select(this).attr("fill", hoverColor);
+      })
+      .on("mouseout", function () {
+        d3.select(this).attr("fill", baseColor);
+      })
+      .style("cursor", "pointer")
+      .attr("data-tippy-content", (d) => {
+        const opinion = d.data;
+        return `
+					<div class="topic-text">${topicData.text}</div>
+					<div class="quote-count">${formatQuotes(opinion.countFormatted || opinion.count)}</div>
+					<div class="opinion-text">${opinion.text}</div>
+        `;
+      });
+  };
+
+  const initTooltips = () => {
+    tippy(`#topic-${topicData.topicID} .opinion-segment`, {
+      allowHTML: true,
+      animation: "fade",
+      theme: "light",
+      maxWidth: 280,
+      delay: 0,
+      duration: 0,
+      followCursor: true,
+    });
+  };
+
+  render();
+  initTooltips();
+}
+
+/**
+ * Initializes donut charts for all available topics.
+ */
+function createDonutCharts() {
+  const topics = window.PAYLOAD.topics;
+  topics.forEach(createDonutChart);
+}
+
+/**
+ * Populates and opens the modal to display all quotes.
+ * @param {Object} params
+ * @param {string[]} params.quotes - Array of quote strings.
+ * @param {string} params.text - The opinion text used as the header.
+ */
+function renderQuotesDrawer({ quotes, text }) {
+  const drawerSel = d3.select("#drawer");
+  const quoteCount = formatNumber(quotes.length);
+  drawerSel.select(".drawer-quote-count").text(quoteCount);
+  drawerSel.select(".drawer-opinion").text(text);
+  const quotesList = drawerSel.select(".drawer-quotes");
+  quotesList.html("");
+
+  if (!quotes.length) {
+    const noQuotesText =
+      i18n.drawer?.noQuotes || "No quotes for the selected filters.";
+    quotesList.html(`<li>${noQuotesText}</li>`);
+  } else {
+    // const demoProps = window.PAYLOAD.demographics.map((d) => d.label);
+    quotes.forEach((q) => {
+      // const demoHtml = demoProps
+      //   .map((prop) => `<span class="demographics--value">${q[prop]}</span>`)
+      //   .join("");
+      quotesList.append("li").html(`<span class="text">${q.quote}</span>`);
+    });
+  }
+  drawerSel.classed("is-open", true);
+  quotesList.node().scrollTop = 0;
+
+  // focus on close button for accessibility
+  drawerSel.select(".button-close").node().focus();
+}
+
+/**
+ * Filters quotes for the current drawer opinion by `currentDrawerFilters` and re-renders.
+ * Call this whenever `currentDrawerId` or `currentDrawerFilters` changes.
+ */
+function updateQuotesDrawer() {
+  const unknownOpinionText = i18n.drawer?.unknownOpinion || "Unknown Opinion";
+  const match = flatOpinions.find((o) => o.fullID === currentDrawerId);
+  const text = match?.text || unknownOpinionText;
+  const quotesRaw = quoteMap.get(currentDrawerId);
+  const quotes =
+    currentDrawerFilters.length === 0
+      ? quotesRaw
+      : quotesRaw.filter((d) =>
+          currentDrawerFilters.every(({ key, value }) => d[key] === value),
+        );
+  renderQuotesDrawer({ quotes, text });
+}
+
+function createQuotesDrawerParticipantChart() {
+  const id = "drawer-demographics-chart";
+  const unknownOpinionText = i18n.drawer?.unknownOpinion || "Unknown Opinion";
+  const match = flatOpinions.find((o) => o.fullID === currentDrawerId);
+  const text = match?.text || unknownOpinionText;
+  const quotesRaw = quoteMap.get(currentDrawerId);
+
+  const data = window.PAYLOAD.demographics.map(({ label }) => {
+    const counts = new Map();
+    quotesRaw.forEach((q) => {
+      const val = q[label];
+      if (val !== undefined && val !== null && val !== "") {
+        counts.set(val, (counts.get(val) || 0) + 1);
+      }
+    });
+    let values = Array.from(counts, ([value, count]) => ({ value, count }))
+      .filter(({ value, count }) => count > 0 && value !== "0")
+      .sort((a, b) => b.count - a.count);
+
+    if (values.length > 6) {
+      const otherCount = values.slice(5).reduce((acc, v) => acc + v.count, 0);
+      const otherText = i18n.chart?.otherCategory || "Other";
+      values = [...values.slice(0, 5), { value: otherText, count: otherCount }];
+    }
+    return { label, values };
+  });
+
+  return createDemographicChart({ id, data });
+}
+
+/**
+ * Loads quote data based on the build strategy.
+ * 1. Checks `window.PAYLOAD.quotes` (Inline strategy used in `data-inline.json`).
+ * 2. If missing, fetches `quotes.json` (Static strategy used in `data-static.json`).
+ *
+ * It transforms the flat quote list into a Map keyed by `fullID` (topicSlug-opinionSlug).
+ *
+ * @returns {Promise<Map<string, string[]>>} Map where Key = fullID, Value = Array of quote strings.
+ */
+async function loadQuotesData() {
+  let quotes = window.PAYLOAD.quotes;
+  if (!quotes) {
+    try {
+      const response = await fetch("quotes.json");
+      if (!response.ok) throw new Error(`status: ${response.status}`);
+      quotes = await response.json();
+    } catch (error) {
+      console.error("Could not load quotes.json:", error);
+      return new Map();
+    }
+  }
+
+  // Create lookup map for quick access by opinion.fullID
+  quoteMap = new Map();
+  quotes.forEach((q) => {
+    if (!quoteMap.has(q.id)) {
+      quoteMap.set(q.id, []);
+    }
+    quoteMap.get(q.id).push({ ...q });
+  });
+}
+
+/**
+ * Initializes the Quotes Modal logic.
+ * Binds click events to ".button-quotes" to look up quotes via the Opinion's `fullID`.
+ */
+async function createQuotesDrawer() {
+  // Flatten opinions to find metadata by ID easily
+  flatOpinions = window.PAYLOAD.topics.map((topic) => topic.opinions).flat();
+  await loadQuotesData();
+
+  let cleanupDemographicChart = null;
+
+  const closeModal = () => {
+    d3.select("#drawer").classed("is-open", false);
+    cleanupDemographicChart?.();
+    cleanupDemographicChart = null;
+  };
+
+  // event listeners
+  d3.select("#drawer .button-close").on("click", closeModal);
+
+  d3.selectAll(".button-quotes").on("click", function () {
+    currentDrawerId = d3.select(this).attr("data-id"); // matches opinion.fullID
+    updateQuotesDrawer();
+    cleanupDemographicChart?.();
+    cleanupDemographicChart = createQuotesDrawerParticipantChart();
+  });
+
+  // keyup event listener for escape key to close modal
+  document.addEventListener("keyup", (event) => {
+    if (event.key === "Escape") {
+      const drawerSel = d3.select("#drawer");
+      if (drawerSel.classed("is-open")) closeModal();
+    }
+  });
+
+  d3.selectAll(".drawer-quotes-filters select").on("change", function () {
+    const key = d3.select(this).attr("data-key");
+    const value = this.value;
+    currentDrawerFilters = currentDrawerFilters.filter((f) => f.key !== key);
+    if (value) currentDrawerFilters.push({ key, value });
+    updateQuotesDrawer();
+  });
+}
+
+/**
+ * Initializes the Filter Compare logic.
+ * Binds click events to ".button-filter-compare" to launch the moda.
+ */
+async function createFilterCompare() {
+  const GROUP_LABELS = ["A", "B", "C", "D"];
+  const demographics = window.PAYLOAD.demographics;
+  const modalSel = d3.select("#filter-compare");
+
+  const closeModal = () => modalSel.classed("is-open", false);
+
+  const renderGroups = () => {
+    const groupsSel = modalSel.select(".filter-compare-groups");
+    groupsSel.html("");
+
+    compareGroups.forEach((group, gi) => {
+      const card = groupsSel.append("div").attr("class", "filter-group-card");
+
+      const header = card.append("div").attr("class", "filter-group-header");
+
+      const groupPrefix = i18n.filterModal?.groupLabelPrefix || "Group";
+      header
+        .append("span")
+        .attr("class", "filter-group-label")
+        .text(`${groupPrefix} ${GROUP_LABELS[gi]}`);
+
+      const deleteGroupText = i18n.filterModal?.deleteGroup || "Delete group";
+      header
+        .append("button")
+        .attr(
+          "class",
+          `ghost button-delete-group${compareGroups.length <= 1 ? " is-hidden" : ""}`,
+        )
+        .html(
+          `<img src="svg/trash.svg" alt="" role="presentation"> ${deleteGroupText}`,
+        )
+        .on("click", () => {
+          compareGroups.splice(gi, 1);
+          renderGroups();
+        });
+
+      // const summaryText =
+      //   group.length === 0
+      //     ? "All Participants"
+      //     : group.map((f) => `${f.key}: ${f.value}`).join(", ");
+      // card
+      //   .append("div")
+      //   .attr("class", "filter-group-summary")
+      //   .text(summaryText);
+
+      const grid = card.append("div").attr("class", "filter-group-selects");
+
+      demographics.forEach(({ label, values }) => {
+        const currentVal = group.find((f) => f.key === label)?.value || "";
+        const slugLabel = label
+          .toLowerCase()
+          .replace(/\W+/g, "-")
+          .replace(/^-|-$/g, "");
+        const selectId = `filter-group-${gi}-${slugLabel}`;
+        const wrapper = grid
+          .append("div")
+          .attr("class", "filter-select-wrapper");
+        wrapper.append("label").attr("for", selectId).text(label);
+        const sel = wrapper
+          .append("select")
+          .attr("id", selectId)
+          .attr("data-key", label);
+        const anyOptionText = i18n.filterModal?.anyOption || "Any";
+        sel.append("option").attr("value", "").text(anyOptionText);
+        values.forEach(({ value }) => {
+          sel
+            .append("option")
+            .attr("value", value)
+            .text(value)
+            .property("selected", value === currentVal);
+        });
+        sel.on("change", function () {
+          const key = d3.select(this).attr("data-key");
+          const val = this.value;
+          compareGroups[gi] = compareGroups[gi].filter((f) => f.key !== key);
+          if (val) compareGroups[gi].push({ key, value: val });
+          const allParticipantsText =
+            i18n.filterModal?.allParticipants || "All Participants";
+          const updated =
+            compareGroups[gi].length === 0
+              ? allParticipantsText
+              : compareGroups[gi].map((f) => `${f.key}: ${f.value}`).join(", ");
+          card.select(".filter-group-summary").text(updated);
+        });
+      });
+    });
+
+    modalSel
+      .select(".button-add-group")
+      .classed("is-hidden", compareGroups.length >= GROUP_LABELS.length);
+  };
+
+  renderGroups();
+
+  d3.select("#filter-compare .button-close").on("click", closeModal);
+  d3.select("#filter-compare .filter-compare-bg").on("click", closeModal);
+
+  d3.selectAll(".button-filter-compare").on("click", () => {
+    modalSel.classed("is-open", true);
+  });
+
+  d3.select("#filter-compare .button-add-group").on("click", () => {
+    if (compareGroups.length < GROUP_LABELS.length) {
+      compareGroups.push([]);
+      renderGroups();
+    }
+  });
+
+  d3.select("#filter-compare .button-reset-groups").on("click", () => {
+    compareGroups = [[]];
+    renderGroups();
+  });
+
+  d3.select("#filter-compare .button-apply-groups").on("click", () => {
+    renderOverviewChart();
+    closeModal();
+  });
+
+  document.addEventListener("keyup", (event) => {
+    if (event.key === "Escape" && modalSel.classed("is-open")) closeModal();
+  });
+}
+
+/**
+ * Initializes Share functionality (Copy Link).
+ * Generates deep links using the element's ID.
+ */
+function createShare() {
+  const shareSel = d3.select("#share");
+  shareSel.select(".button-close-share").on("click", () => {
+    shareSel.classed("is-open", false);
+  });
+
+  // copy button
+  shareSel.select(".button-copy").on("click", function () {
+    const input = shareSel.select(".share-url input").node();
+    const inputText = input.value;
+    navigator.clipboard
+      .writeText(inputText)
+      .then(() => {
+        console.log("copied");
+      })
+      .catch((err) => {
+        console.error("Failed to copy text: ", err);
+      });
+    d3.select(this).classed("is-copied", true);
+    setTimeout(() => {
+      d3.select(this).classed("is-copied", false);
+    }, 2000);
+  });
+
+  d3.selectAll(".button-share").on("click", function () {
+    const id = d3.select(this).attr("data-id");
+    const text = d3.select(this).attr("data-text");
+    const url = `${window.location.origin}${window.location.pathname}#${id}`;
+    shareSel.select(".share-url input").property("value", url);
+    shareSel.select(".share-title span").text(text);
+    shareSel.classed("is-open", true);
+  });
+}
+
+/**
+ * Initializes the sidebar menu toggle.
+ */
+function createMenu() {
+  const sidebar = d3.select(".sidebar");
+  const button = d3.select("header .button-menu");
+
+  button.on("click", () => {
+    const isOpen = sidebar.classed("is-open");
+    sidebar.classed("is-open", !isOpen);
+  });
+
+  d3.selectAll(".sidebar a").on("click", () => {
+    sidebar.classed("is-open", false);
+  });
+}
+
+/**
+ * Initializes print listeners.
+ * Ensures `<details>` elements are expanded when printing and collapsed after.
+ */
+function createPrint() {
+  window.addEventListener("beforeprint", () => {
+    document.querySelectorAll("details:not([open])").forEach((el) => {
+      el.setAttribute("open", "");
+      el.dataset.wasClosed = "true";
+    });
+  });
+
+  window.addEventListener("afterprint", () => {
+    document.querySelectorAll("details[data-was-closed]").forEach((el) => {
+      el.removeAttribute("open");
+      delete el.dataset.wasClosed;
+    });
+  });
+}
+
+/**
+ * Initializes toggle inputs to switch between Topic and Opinion views.
+ */
+function createToggle() {
+  const toggleInputs = document.querySelectorAll('input[name="toggleView"]');
+  toggleInputs.forEach((input) => {
+    input.addEventListener("change", (e) => {
+      activeOverviewChart = e.target.value;
+      renderOverviewChart();
+    });
+  });
+}
+
+/**
+ * Initializes the Full Report / Predicted Agreement content toggle.
+ */
+function createContentToggle() {
+  const btns = document.querySelectorAll(".content-toggle-btn");
+  btns.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const target = btn.dataset.target;
+
+      btns.forEach((b) => d3.select(b).classed("is-active", false));
+      d3.select(btn).classed("is-active", true);
+      document
+        .querySelectorAll("#full-report, #predicted-agreement")
+        .forEach((el) => {
+          d3.select(el).classed("is-visible", el.id === target);
+        });
+
+      d3.selectAll(".sidebar-inner").classed("is-active", false);
+      d3.select(`.sidebar-inner--${target}`).classed("is-active", true);
+    });
+  });
+}
+
+/**
+ * Initializes the Quotes / Demographics content toggle.
+ */
+function createDrawerToggle() {
+  const btns = document.querySelectorAll(".drawer-toggle-inner button");
+  btns.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const target = btn.dataset.target;
+      btns.forEach((b) => d3.select(b).classed("is-active", false));
+      d3.select(btn).classed("is-active", true);
+      document
+        .querySelectorAll("#drawer-quotes, #drawer-demographics")
+        .forEach((el) => {
+          d3.select(el).classed("is-visible", el.id === target);
+        });
+    });
+  });
+}
+
+// Application entry point: initialize all components and render the default view.
+(() => {
+  if (OVERVIEW_CHART_TYPE === "toggle") createToggle();
+
+  activeOverviewChart =
+    OVERVIEW_CHART_TYPE === "opinions" ? "opinions" : "topics";
+  renderOverviewChart();
+  createParticipantChart();
+  createDonutCharts();
+  createQuotesDrawer();
+  createFilterCompare();
+  createShare();
+  createMenu();
+  createPrint();
+  createContentToggle();
+  createDrawerToggle();
+})();