reviewchart1 = { let leftIdx = 0 let rightIdx = 3 let topN = 15 const barRow = (d, max, color, rank) => `

${rank} ${d.word}

` function makeTabs(selectedIdx, onSelect) { const row = document.createElement("div") row.style.cssText = "display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap" buckets.forEach((b, i) => { const tab = document.createElement("span") tab.textContent = b.label tab.style.cssText = `padding:3px 8px;border-radius:20px;font-size:11px;cursor:pointer; border:1.5px solid ${i === selectedIdx ? b.color : "#ddd"}; color:${i === selectedIdx ? b.color : "#999"}; font-weight:${i === selectedIdx ? "600" : "400"}` tab.addEventListener("click", () => { onSelect(i); update() }) row.appendChild(tab) }) return row } const sliderLabel = document.createElement("span") sliderLabel.style.cssText = "font-size:12px;color:#999;min-width:24px" sliderLabel.textContent = topN const slider = document.createElement("input") slider.type = "range" slider.min = 5 slider.max = 30 slider.step = 1 slider.value = topN slider.style.cssText = "width:100px;accent-color:#e03b3b" slider.addEventListener("input", e => { topN = +e.target.value sliderLabel.textContent = topN update() }) const sliderRow = document.createElement("div") sliderRow.style.cssText = "display:flex;align-items:center;gap:8px;margin-bottom:1.5rem" sliderRow.innerHTML = `Top` sliderRow.appendChild(slider) sliderRow.appendChild(sliderLabel) const leftTabsContainer = document.createElement("div") const rightTabsContainer = document.createElement("div") const leftBarsContainer = document.createElement("div") const rightBarsContainer = document.createElement("div") const leftPanel = document.createElement("div") leftPanel.style.cssText = "flex:1;min-width:0" leftPanel.appendChild(leftTabsContainer) leftPanel.appendChild(leftBarsContainer) const rightPanel = document.createElement("div") rightPanel.style.cssText = "flex:1;min-width:0" rightPanel.appendChild(rightTabsContainer) rightPanel.appendChild(rightBarsContainer) function update() { // rebuild tabs leftTabsContainer.innerHTML = "" rightTabsContainer.innerHTML = "" leftTabsContainer.appendChild(makeTabs(leftIdx, i => { leftIdx = i })) rightTabsContainer.appendChild(makeTabs(rightIdx, i => { rightIdx = i })) const leftData = wordStats[leftIdx].slice(0, topN) const rightData = wordStats[rightIdx].slice(0, topN) const leftMax = leftData[0]?.score ?? 1 const rightMax = rightData[0]?.score ?? 1 leftBarsContainer.innerHTML = `

${buckets[leftIdx].label} reviews

${leftData.map((d, i) => barRow(d, leftMax, buckets[leftIdx].color, i + 1)).join("")}` rightBarsContainer.innerHTML = `

${buckets[rightIdx].label} reviews

${rightData.map((d, i) => barRow(d, rightMax, buckets[rightIdx].color, i + 1)).join("")}` } const container = document.createElement("div") container.style.cssText = "font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif" const panelRow = document.createElement("div") panelRow.style.cssText = "display:flex;gap:3rem" panelRow.appendChild(leftPanel) panelRow.appendChild(rightPanel) container.appendChild(sliderRow) container.appendChild(panelRow) update() return container }