{
  const plot = makeRoundBarPlot();
  const plotSelection = d3.select(plot);

  const topAxis = plotSelection.selectChildren("g").filter((_, i) => i == 1);
  topAxis.selectAll(".tick").attr("font-size", 16);

  const yScale = plot.scale("y");
  const bandwidth =
    yScale.apply(yScale.domain[1]) - yScale.apply(yScale.domain[0]);
  const leftAxis = plotSelection.selectChildren("g").filter((_, i) => i == 0);

  // Add Dates along y axis
  leftAxis
    .append("g")
    .selectAll("text")
-
    .data(plot.scale("y").domain)
+
    .data(yScale.domain)
    .join("text")
-
    .attr("x", -105)
    .attr("y", (d) => plot.scale("y").apply(d) + bandwidth / 2)
+
    .attr("x", -100)
    .attr("y", (d) => yScale.apply(d) + bandwidth / 2 - 1)
    .attr("alignment-baseline", "middle")
    .text(
      (d) =>
        `${wordleNumToMainDate(d).toLocaleString(undefined, {
-
          dateStyle: "short"
+
          year: "2-digit",
          day: "numeric",
          month: "numeric"
        })}`
    );

  // Add mean score along y axis
  leftAxis
    .append("g")
    .selectAll("text")
-
    .data(plot.scale("y").domain)
+
    .data(yScale.domain)
    .join("text")
-
    .attr("x", -8)
    .attr("y", (d) => plot.scale("y").apply(d) + bandwidth / 2)
+
    .attr("x", -12)
    .attr("y", (d) => yScale.apply(d) + bandwidth / 2 - 1)
    .attr("alignment-baseline", "middle")
    .text(
      (d, i) =>
        `${d3.reverse(sortedMeanScoreByNum)[i][1].toLocaleString(undefined, {
          maximumFractionDigits: 2,
          minimumFractionDigits: 2
        })}`
    );
  leftAxis
    .attr("font-size", 12)
    .selectAll("text")
    .attr("fill", "black")
    .attr("text-anchor", "end");

  const searchIdx = d3
    .reverse(sortedMeanScoreByNum)
    .findIndex((d) => getWord(d[0]) == wordSearch.toUpperCase());

  leftAxis
    .selectAll("text")
    .attr("fill", (d, i) =>
      i % sortedMeanScoreByNum.length == searchIdx ? "red" : "black"
    )
    .style("font-weight", (d, i) =>
      i % sortedMeanScoreByNum.length == searchIdx ? "bold" : "auto"
    );

  const div = d3.select(
    html`<div><div id="header"></div><div id="chart">${plotSelection.node()}</div></div>`
  );

  return div.node();
}

Plot.plot({
  marks: [
    Plot.barY(
      wordleNumSummary.filter((d) =>
        breakdownKey == "language" && removeEn == true && d.language == "en"
          ? false
          : true
      ),
      Plot.groupX(
        {
          y: "sum",
          title: (d) =>
            `${d[0][0]} - ${d3.sum(d, (t) => t[1]).toLocaleString()}`
        },
        {
          x: "wordle_num",
          y: "count",
          fill: breakdownKey,
          offset: "expand",
          title: (d) => [d[breakdownKey], d.count]
        }
      )
    )
  ],
  marginLeft: 50,
+
  marginRight: 50,
  marginBottom: 70,
  width,
  height: 500,
  color: {
    transform: (d) =>
      breakdownKey == "rounds"
        ? d == "X"
          ? 7
          : d
        : breakdownKey == "theme"
        ? d == "l"
          ? "light"
          : d == "d"
          ? "dark"
          : "unknown"
        : d,
    type: "categorical",
    ...(breakdownKey == "rounds"
      ? { type: "linear", reverse: "true", scheme: "RdYlGn" }
      : breakdownKey == "surface"
      ? { type: "categorical", transform: (d) => surfaceCodes[d] }
      : {}),
    legend: true
  },
  x: {
    tickRotate: 40,
    tickFormat: (d) =>
      getWord(d) +
      " " +
      wordleNumToMainDate(d).toLocaleString("en-US", { dateStyle: "short" })
    // tickPadding: 10
  }
})

makeRoundBarPlot = () =>
  Plot.plot({
    marks: [
      Plot.barX(
        wordleNumSummary,
        Plot.groupY(
          {
            x: "sum",
            title: (d) =>
              `${d[0][0]} (${d3.sum(d, (t) => t[1]).toLocaleString()})`
          },
          {
            y: "wordle_num",
            x: "count",
            fill: "rounds",
            offset: "expand",
            title: (d) => [d["rounds"], d.count],
            stroke: "black",
            strokeWidth: 0.7
            // strokeOpacity: 0.5
          }
        )
      ),
      Plot.ruleX([0.25, 0.5, 0.75], { stroke: "gray" })
    ],
    marginLeft: 155,
    // marginTop: 100,
    width: width + 100,
    color: {
      transform: (d) => (d == "X" ? 7 : +d),
      reverse: "true",
      scheme: "RdYlGn",
      type: "ordinal"
    },
    x: {
      axis: "top",
      ticks: topLabelPositions,
      tickFormat: (d, i) => (i < 6 ? i + 1 : "X"),
      label: null,
      tickSize: 0,
      tickPadding: 3
    },
    y: {
      tickFormat: (d) => `${getWord(d)}`,
      label: null,
      domain: sortedMeanScoreByNum.map((d) => d[0]),
      reverse: true,
      tickSize: 0,
-
      tickPadding: 49,
+
      tickPadding: 45,
      paddingInner: 0.15
    },
    style: {
      // background: "#383133",
      // color: "white"
    }
  })