new_sweet_spot = { // --- state --- let selectedCity = "All cities" let selectedCuisines = new Set(cuisineTypes) let activePrices = new Set(["1","2","3","4"]) const jitter = new Map(panj_restaurants.map(d => [d, (Math.random() - 0.5) * 0.38])) // --- city dropdown --- const citySelect = html`` // --- price buttons --- const priceRow = html`

` ;["$","$$","$$$","$$$$"].forEach((label, i) => { const val = String(i + 1) const btn = html`` btn.addEventListener("click", () => { if (activePrices.has(val)) { activePrices.delete(val) btn.style.background = "transparent" btn.style.color = "#999" btn.style.border = "1px solid #ddd" } else { activePrices.add(val) btn.style.background = "#e03b3b" btn.style.color = "white" btn.style.border = "none" } update() }) priceRow.appendChild(btn) }) // --- cuisine checkboxes --- const cuisineContainer = html`

` cuisineTypes.forEach(c => { const label = html` ${c} ` label.querySelector("input").addEventListener("change", e => { if (e.target.checked) selectedCuisines.add(c) else selectedCuisines.delete(c) update() }) cuisineContainer.appendChild(label) }) // --- count label --- const countLabel = html`

` // --- tooltip --- const tooltip = html`` document.body.appendChild(tooltip) // --- plot container --- const plotContainer = html`

` // --- filter function --- function getFiltered() { return panj_restaurants.filter(d => { if (selectedCity !== "All cities" && d.city !== selectedCity) return false const price = d.attributes?.RestaurantsPriceRange2 if (activePrices.size < 4 && !activePrices.has(price)) return false if (selectedCuisines.size > 0) { const match = [...selectedCuisines].some(cuisine => { const keywords = cuisineMap[cuisine] ?? [cuisine] return keywords.some(kw => d.categories?.includes(kw)) }) if (!match) return false } return true }) } // --- render plot --- function update() { const filtered = getFiltered() const shown = filtered.slice(0, 5000) countLabel.textContent = `${filtered.length.toLocaleString()} of ${panj_restaurants.length.toLocaleString()} restaurants` const starColor = s => s < 2 ? "#e05a5a" : s < 3 ? "#e07a5a" : s < 3.5 ? "#e0a040" : s < 4 ? "#d4c030" : s < 4.5 ? "#6abf6a" : "#3a9e3a" plotContainer.innerHTML = "" const plot = Plot.plot({ width: plotContainer.clientWidth || 600, height: 460, marginLeft: 20, marginRight: 60, marginBottom: 60, x: { label: "Star rating →", domain: [0.75, 5.25], tickValues: [1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5], tickFormat: d => d + "★" }, y: { type: "log", label: "↑ Check-ins (log scale)", domain: [1, 5000], tickValues: [1, 10, 100, 1000], axis: "right" }, marks: [ // sweet spot vertical line at 4.0 Plot.ruleX([4.0], { stroke: "#e03b3b", strokeWidth: 1.5, strokeDasharray: "4,3" }), // sweet spot label Plot.text([{x: 4.0, y: 4000, label: "★ sweet spot"}], { x: "x", y: "y", text: "label", fill: "#e03b3b", fontSize: 11, fontWeight: 600, dx: 6, textAnchor: "start" }), Plot.dot(shown, { x: d => (d.stars ?? 0) + jitter.get(d), y: d => Math.max(1, d.review_count), r: 3.5, fill: d => starColor(d.stars), fillOpacity: 0.55, stroke: "none", title: d => `${d.name}\n${d.stars}★ • ${d.review_count.toLocaleString()} check-ins` }) ], style: { background: "transparent", fontSize: "12px" } }) // --- hover interaction --- plot.addEventListener("mousemove", e => { const dot = e.target.closest("circle") if (dot) { // highlight plot.querySelectorAll("circle").forEach(c => c.style.opacity = "0.15") dot.style.opacity = "1" dot.style.r = "6" // tooltip const title = dot.querySelector("title")?.textContent ?? "" const lines = title.split("\n") tooltip.innerHTML = `

${lines[0]}

${lines[1] ?? ""}

` tooltip.style.display = "block" tooltip.style.left = (e.clientX + 12) + "px" tooltip.style.top = (e.clientY - 10) + "px" } else { plot.querySelectorAll("circle").forEach(c => { c.style.opacity = "" c.style.r = "" }) tooltip.style.display = "none" } }) plot.addEventListener("mouseleave", () => { plot.querySelectorAll("circle").forEach(c => { c.style.opacity = "" c.style.r = "" }) tooltip.style.display = "none" }) plotContainer.appendChild(plot) } // --- city change listener --- citySelect.addEventListener("change", e => { selectedCity = e.target.value update() }) // --- sidebar --- const sidebar = html`

${countLabel}

City

${citySelect}

Price tier

${priceRow}

Cuisine type

${cuisineContainer}

` // --- assemble --- const container = html`

` container.appendChild(sidebar) container.appendChild(plotContainer) // cleanup tooltip on cell rerun container.addEventListener("disconnectedCallback", () => tooltip.remove()) update() return container }