36:["$","title",null,{"children":"พรรคเราอยู่ตรงไหน | Wilawan Tu | Observable"}] 3e:T1011,viewof dashboardConfig = { // 1. ดึงรายชื่อพรรคจาก dashboardData (ครอบด้วย Array.from เพื่อแปลงผลลัพธ์จาก DuckDB) const partyArray = Array.from(dashboardData.partySummary || []); const uniqueParties = Array.from(new Set( partyArray.map(d => String(d.party_name).trim()) )).filter(p => p !== "undefined" && p !== "").sort(); // 2. สร้าง Dropdown เลือกพรรค const partySelect = Inputs.select(["ดูทุกพรรค", ...uniqueParties]); // 3. กำหนดชื่อตัวเลือกโหมดแผนที่ const modes = [ "ผลการเลือกตั้งปี 2569", "The Tipping Point", "Split-ticket voting", "ผลเลือกตั้งเปลี่ยนไปอย่างไรจากปี 2566", "พรรคได้คะแนนในพื้นที่แบบไหน" ]; // 4. สร้างโครงสร้างหน้าตา UI ด้วย HTML const container = html`

เลือกพรรค: ${partySelect}

${modes.map((opt, i) => html`

${opt}

`)}

`; // 5. เขียนสคริปต์เพื่อให้ปุ่มสลับสีและส่งค่า const inputs = container.querySelectorAll('input[type="radio"]'); const pills = container.querySelectorAll('.pill-btn'); const updateValue = () => { const selectedMode = container.querySelector('input[type="radio"]:checked').value; // สำคัญ: ส่วนนี้คือการส่งค่าให้ตัวแปร dashboardConfig ไปให้ Cell อื่นๆ ใช้งาน container.value = { party: partySelect.value, mapMode: selectedMode }; container.dispatchEvent(new CustomEvent('input', {bubbles: true})); }; inputs.forEach((input, index) => { input.addEventListener('change', () => { pills.forEach(p => { p.style.borderColor = '#cbd5e1'; p.style.color = '#334155'; p.style.fontWeight = 'normal'; }); pills[index].style.borderColor = '#059669'; pills[index].style.color = '#059669'; pills[index].style.fontWeight = 'bold'; updateValue(); }); }); partySelect.addEventListener('input', (e) => { e.stopPropagation(); updateValue(); }); // กำหนดค่าเริ่มต้นทันทีที่โหลดเสร็จ container.value = { party: partySelect.value, mapMode: modes[0] }; return container; }3f:T12d20,{ const config = dashboardConfig; // ========================================================= // 1. นำเข้าข้อมูลและจัดการ Data Preparation // ========================================================= const districtWinners = Array.from(dashboardData?.districtWinners || []); const candidatesData = Array.from(dashboardData?.candidatesData || []); const demographicData = Array.from(dashboardData?.demographicData || []); const partySummary = Array.from(dashboardData?.partySummary || []); const districtPartyFilter = Array.from(dashboardData?.districtPartyFilter || []); // 🌟 ตัวแปรที่หายไปอยู่ตรงนี้ครับ const provinceData = Array.from(dashboardData?.provinceData || []); const fixConsKey = (key) => { if (!key) return ""; let k = String(key).trim(); if (key instanceof Date) { const y = key.getFullYear(); const m = String(key.getMonth() + 1).padStart(2, '0'); const d = String(key.getDate()).padStart(2, '0'); return `${y}-${m}-${d}`; } if (k.includes('/')) { const parts = k.split('/'); if (parts.length === 3) { return `${parts[2]}-${parts[0].padStart(2, '0')}-${parts[1].padStart(2, '0')}`; } } return k; }; // 🌟 ฟังก์ชันตัด "ปี" ออก เหลือแค่ "รหัสจังหวัด-เขต" const getCoreKey = (key) => { const fixed = fixConsKey(key); const parts = fixed.split('-'); if(parts.length === 3) return `${parts[1]}-${parts[2]}`; return fixed; }; // นำเข้าข้อมูลปี 66 const dist66 = Array.from(dashboardData?.d3_district_2566 || []); const cand66 = Array.from(dashboardData?.d3_candidates_2566 || []); const distParty66 = Array.from(dashboardData?.d3_district_party_2566 || []); const distPerson = Array.from(dashboardData?.d3_district_person || []); // 🌟 สร้าง Map เชื่อมข้อมูลปี 66 const mapDist66 = new Map(); dist66.forEach(d => { if (d.cons_key) mapDist66.set(getCoreKey(d.cons_key), d); }); const mapPerson = new Map(); distPerson.forEach(d => { if (d.cons_key) mapPerson.set(getCoreKey(d.cons_key), d); }); if (!config.mapDisplayMode) { config.mapDisplayMode = "แบ่งเขต"; } const partyColors = {}; partySummary.forEach(p => { const pName = String(p.party_name || "").trim(); const pColor = String(p.party_color || "").trim(); if (pName && pColor && pColor !== "null" && pColor !== "undefined") { partyColors[pName] = pColor; } }); // 🌟 เพิ่มสีพรรคการเมืองปี 2566 ด้วยตัวเองตรงนี้ partyColors["ชาติไทยพัฒนา"] = "#E71485"; partyColors["ชาติพัฒนากล้า"] = "#FFA500"; partyColors["กล้าธรรม"] = "#48CB74"; const partyNameMap = { "ประชาชน": "ก้าวไกล" }; partySummary.forEach(p => { const name69 = String(p.party_name || "").trim(); const name66 = String(p.party_name_2566 || "").trim(); if (name69 && name66 && name66 !== "null" && name66 !== "undefined") { partyNameMap[name69] = name66; } }); const candMap = d3.group(candidatesData, d => fixConsKey(d.cons_key)); const partyWinsConst = {}; const partyWinsList = {}; districtWinners.forEach(d => { const wConst = String(d.winner_party || "").trim(); if (wConst) partyWinsConst[wConst] = (partyWinsConst[wConst] || 0) + 1; const wList = String(d.pl_leader_party || "").trim(); if (wList) partyWinsList[wList] = (partyWinsList[wList] || 0) + 1; }); if (config.mapMode === "พรรคได้คะแนนในพื้นที่แบบไหน") { if (typeof voterAnalysisDashboard === 'function') { return voterAnalysisDashboard(config, dashboardData); } else { return html`

(กำลังพัฒนาหน้า พรรคได้คะแนนในพื้นที่แบบไหน)

`; } } // ========================================================= // 3. สร้าง Layout หลัก (พร้อมเงื่อนไขซ่อนแผนที่) // ========================================================= const numFmt = d3.format(","); const pctFmt = d3.format(".1f"); // 🌟 เงื่อนไขซ่อนแผนที่ในหน้า The Tipping Point (ถ้ายังไม่ได้เลือกพรรค) const isTippingPointEmpty = (config.mapMode === "The Tipping Point" && config.party === "ดูทุกพรรค"); const container = html`

`; const leftMapContainer = container.querySelector("#left-map"); const toggleContainer = container.querySelector("#map-toggle-container"); const rightPanel = container.querySelector("#right-panel"); // ========================================================= // 4. ฟังก์ชันวาดเนื้อหาฝั่งขวา (Right Panel) // ========================================================= function renderRightPanel(provinceFilter = "ทั่วราชอาณาจักร") { rightPanel.innerHTML = ""; // 🌟 โหมด: The Tipping Point (ทำแยกไว้บนสุดเพราะไม่มี Dynamic Header ปกติ) if (config.mapMode === "The Tipping Point") { if (config.party === "ดูทุกพรรค") { rightPanel.innerHTML = `

The Tipping Point

กรุณาเลือกพรรคการเมืองจากตัวกรองด้านบน
เพื่อดูข้อมูลเขตที่พรรคมีโอกาสพลิกมาแพ้หรือชนะ

`; return; // จบการทำงาน } else { // 🌟 สร้างระบบ Toggle เกือบชนะ / เกือบแพ้ ในฝั่งขวา let tippingMode = "เกือบแพ้"; // ค่าเริ่มต้น const content = html`

สถิติความสูสีของพรรค${config.party}

`; rightPanel.appendChild(content); const updateTippingUI = () => { const chartContainer = rightPanel.querySelector("#tipping-chart-container"); if(!chartContainer) return; chartContainer.innerHTML = ""; // อัปเดตสีปุ่ม Toggle const btnLose = rightPanel.querySelector("#btn-almost-lose"); const btnWin = rightPanel.querySelector("#btn-almost-win"); if (tippingMode === "เกือบแพ้") { btnLose.style.background = "#ef4444"; btnLose.style.color = "white"; // สีแดง = เกือบแพ้ btnWin.style.background = "transparent"; btnWin.style.color = "#64748b"; } else { btnLose.style.background = "transparent"; btnLose.style.color = "#64748b"; btnWin.style.background = "#eab308"; btnWin.style.color = "white"; // สีเหลือง = เกือบชนะ } // กรองข้อมูลเฉพาะที่สูสี (< 5%) let filtered = districtWinners.filter(d => Number(d.margin_pct_pt) < 5); if (tippingMode === "เกือบแพ้") { filtered = filtered.filter(d => String(d.winner_party).trim() === config.party); } else { filtered = filtered.filter(d => String(d.runnerup_party).trim() === config.party); } if(filtered.length === 0) { chartContainer.innerHTML = `

ไม่มีสถิติเขตที่${tippingMode}สำหรับพรรค${config.party}

`; return; } const chartColor = tippingMode === "เกือบแพ้" ? "#ef4444" : "#eab308"; // 🌟 แปลงชื่อ Key เพื่อแสดงผลใน Tooltip เป็นคำว่า "จังหวัด" const formattedData = filtered.map(d => ({ ...d, "จังหวัด": String(d.province_name_th).trim(), "ผลต่างคะแนน": Number(d.margin_votes) || 0 })); // 📊 Chart 1: จำนวนเขต x จังหวัด (Bar Y) const chart1 = Plot.plot({ width: 450, height: 250, marginTop: 40, // 🌟 1. เพิ่มระยะขอบด้านบน ให้คำว่า "จำนวนเขต" มีพื้นที่หายใจ ไม่เบียดตัวเลข marginLeft: 40, marginBottom: 70, style: { fontSize: "14px", fontFamily: "sans-serif" }, x: { label: null, tickRotate: -45 }, y: { label: "จำนวนเขต", tickStep: 1, // 🌟 2. ดักจับตัวเลขแกน Y ถ้ามีทศนิยม (เช่น 1.5) ให้ซ่อนไปเลย แสดงเฉพาะจำนวนเต็ม tickFormat: d => Number.isInteger(d) ? d : "" }, marks: [ Plot.barY(formattedData, Plot.groupX({y: "count"}, { x: "จังหวัด", fill: chartColor, fillOpacity: d => (provinceFilter === "ทั่วราชอาณาจักร" || d["จังหวัด"] === provinceFilter) ? 1 : 0.2, stroke: d => (provinceFilter !== "ทั่วราชอาณาจักร" && d["จังหวัด"] === provinceFilter) ? "#0f172a" : "none", strokeWidth: 1.5, title: d => `จังหวัด: ${d["จังหวัด"]}`, tip: true, sort: { x: "y", reverse: true } })) ] }); // 📊 Chart 2: ผลต่างคะแนน x เขต (Bar X) formattedData.sort((a,b) => a["ผลต่างคะแนน"] - b["ผลต่างคะแนน"]); const domainY = formattedData.map(d => `${d["จังหวัด"]} เขต ${d.cons_no}`); const chart2 = Plot.plot({ width: 450, height: Math.max(250, formattedData.length * 30), marginLeft: 150, // เพิ่มขอบซ้ายให้ชื่อเขตแสดงได้เต็มๆ marginRight: 30, marginBottom: 40, style: { fontSize: "14px", fontFamily: "sans-serif" }, x: { label: "ผลต่างคะแนน", grid: true }, y: { label: null, domain: domainY }, marks: [ Plot.barX(formattedData, { x: "ผลต่างคะแนน", y: d => `${d["จังหวัด"]} เขต ${d.cons_no}`, fill: chartColor, // 🌟 ไฮไลต์สีแท่งกราฟตามจังหวัดที่เลือกจากแผนที่เช่นเดียวกัน fillOpacity: d => (provinceFilter === "ทั่วราชอาณาจักร" || d["จังหวัด"] === provinceFilter) ? 1 : 0.2, stroke: d => (provinceFilter !== "ทั่วราชอาณาจักร" && d["จังหวัด"] === provinceFilter) ? "#0f172a" : "none", strokeWidth: 1.5, title: d => `จังหวัด: ${d["จังหวัด"]}\nเขตที่: ${d.cons_no}\nผลต่าง: ${d["ผลต่างคะแนน"].toLocaleString()} คะแนน`, tip: true }) ] }); // 🌟 2. เพิ่ม Event ให้ "คลิกที่แท่งกราฟแล้วแผนที่เปลี่ยนขอบสีดำ" (Link & Brush ย้อนกลับ) const attachChartClick = (chartNode) => { d3.select(chartNode).selectAll("rect") .style("cursor", "pointer") .on("click", function() { // ดึงข้อความ title ที่เราแอบใส่คำว่า "จังหวัด: ..." เอาไว้ const titleStr = d3.select(this).select("title").text(); if (titleStr) { const match = titleStr.match(/จังหวัด:\s*([^\n]+)/); if (match && match[1]) { const provMatch = match[1].trim(); renderRightPanel(provMatch); // บังคับให้แผนที่ซ้ายตีขอบสีดำเฉพาะจังหวัดที่ตรงกัน d3.selectAll("#left-map rect") .attr("stroke", p => p.province_name_th === provMatch ? "#000" : "#fff") .attr("stroke-width", p => p.province_name_th === provMatch ? 1.5 : 0.5); } } }); }; try { attachChartClick(chart1); attachChartClick(chart2); } catch(e) {} chartContainer.appendChild(html`

1. จำนวนเขตที่${tippingMode} รายจังหวัด

`); chartContainer.appendChild(chart1); chartContainer.appendChild(html`

2. ผลต่างคะแนนรายเขต

`); const wrap = document.createElement("div"); wrap.style.maxHeight = "400px"; wrap.style.overflowY = "auto"; wrap.style.border = "1px solid #e2e8f0"; wrap.style.borderRadius = "8px"; wrap.appendChild(chart2); chartContainer.appendChild(wrap); }; // ผูก Event ให้ปุ่ม Toggle rightPanel.querySelector("#btn-almost-lose").addEventListener("click", () => { tippingMode = "เกือบแพ้"; updateTippingUI(); }); rightPanel.querySelector("#btn-almost-win").addEventListener("click", () => { tippingMode = "เกือบชนะ"; updateTippingUI(); }); updateTippingUI(); // รันครั้งแรก return; // จบการทำงานของโหมดนี้ } } // ================================================= // สำหรับโหมดอื่นๆ สร้าง Dynamic Header ปกติ // ================================================= let chartTitle = provinceFilter === "ทั่วราชอาณาจักร" ? "ภาพรวม: ทั่วราชอาณาจักร" : `เจาะลึก: จังหวัด${provinceFilter}`; if (config.party !== "ดูทุกพรรค") { chartTitle += ` (พรรค${config.party})`; } rightPanel.appendChild(html`

${chartTitle}

`); // โหมด: ผลการเลือกตั้งปี 2569 // โหมด: ผลการเลือกตั้งปี 2569 if (config.mapMode === "ผลการเลือกตั้งปี 2569") { const isDistrictMode = config.mapDisplayMode === "แบ่งเขต"; let totalEligible = 0; let totalTurnout = 0; let cardNote = ""; // 🌟 อัปเกรดฟังก์ชันดึงตัวเลข: ให้รองรับ "จุดทศนิยม" ด้วยเพื่อให้อ่านค่าเปอร์เซ็นต์ (turnout_pct) ได้ const parseNum = (val) => { if (val === null || val === undefined || val === "") return 0; const numStr = String(val).replace(/[^0-9.]/g, ''); return Number(numStr) || 0; }; // 🌟 คำนวณผู้มีสิทธิ์และผู้มาใช้สิทธิ์ if (config.party === "ดูทุกพรรค") { let filteredProv = provinceData.filter(d => String(d.province_code) !== "0"); if (provinceFilter !== "ทั่วราชอาณาจักร") { filteredProv = filteredProv.filter(d => String(d.province_name_th).trim() === provinceFilter); } totalEligible = d3.sum(filteredProv, d => parseNum(d.eligible_voters)); // ถ้าในตารางจังหวัดมี voters_came ใช้ได้เลย ถ้าไม่มีให้คำนวณจาก % totalTurnout = d3.sum(filteredProv, d => { if (d.voters_came) return parseNum(d.voters_came); const eligible = parseNum(d.eligible_voters); const pct = parseNum(d.turnout_pct); return Math.round(eligible * (pct / 100)); }); } else { let filteredDistricts = districtWinners; if (provinceFilter !== "ทั่วราชอาณาจักร") { filteredDistricts = filteredDistricts.filter(d => String(d.province_name_th).trim() === provinceFilter); } filteredDistricts = filteredDistricts.filter(d => { const winner = isDistrictMode ? String(d.winner_party || "").trim() : String(d.pl_leader_party || "").trim(); return winner === config.party; }); // 🌟 คำนวณยอดผู้มาใช้สิทธิ์ จาก "ผู้มีสิทธิ์ x เปอร์เซ็นต์" totalEligible = d3.sum(filteredDistricts, d => parseNum(d.eligible_voters)); totalTurnout = d3.sum(filteredDistricts, d => { const eligible = parseNum(d.eligible_voters); const pct = parseNum(d.turnout_pct); return Math.round(eligible * (pct / 100)); // ปัดเศษเป็นจำนวนคนเต็มๆ }); if (filteredDistricts.length > 0) { cardNote = ` (เฉพาะ ${filteredDistricts.length} เขตที่ชนะ)`; } else { cardNote = ` (ไม่ชนะในพื้นที่นี้)`; } } const turnoutPctOverall = totalEligible > 0 ? (totalTurnout / totalEligible) * 100 : 0; const summaryCards = html`

ผู้มีสิทธิ์เลือกตั้ง
${cardNote}

${numFmt(totalEligible)} คน

จำนวนผู้มาใช้สิทธิ์
${cardNote}

${numFmt(totalTurnout)} คน

คิดเป็น ${pctFmt(turnoutPctOverall)}%

`; rightPanel.appendChild(summaryCards); const localWinsConst = {}; const localWinsList = {}; districtWinners.forEach(d => { if (provinceFilter !== "ทั่วราชอาณาจักร" && String(d.province_name_th).trim() !== provinceFilter) return; const wC = String(d.winner_party || "").trim(); if (wC) localWinsConst[wC] = (localWinsConst[wC] || 0) + 1; const wL = String(d.pl_leader_party || "").trim(); if (wL) localWinsList[wL] = (localWinsList[wL] || 0) + 1; }); const targetWins = isDistrictMode ? localWinsConst : localWinsList; const sorted = Object.keys(targetWins).filter(p => targetWins[p] > 0).sort((a,b) => targetWins[b] - targetWins[a]); const legendTable = html`

ผลการเลือกตั้ง (${config.mapDisplayMode})

ลำดับที่

สี

พรรค

${isDistrictMode ? "เขต" : "บัญชีรายชื่อ"}

${sorted.map((p, index) => { if (config.party !== "ดูทุกพรรค" && p !== config.party) return ""; return html`

${index + 1}

${p}

${isDistrictMode ? (localWinsConst[p] || 0) : (localWinsList[p] || 0)}

`; })}

`; rightPanel.appendChild(legendTable); } // 🌟 โหมด:Split-ticket voting else if (config.mapMode === "Split-ticket voting") { if (config.party === "ดูทุกพรรค") { // --- 1. ตารางที่สามารถ Sort ได้ทั้ง แบ่งเขต และ บัญชีรายชื่อ (ลบกล่องสรุปผู้ใช้สิทธิ์ออกแล้ว) --- const tableContainer = document.createElement("div"); rightPanel.appendChild(tableContainer); let sortBy = "แบ่งเขต"; // ค่าเริ่มต้น const localWinsConst = {}; const localWinsList = {}; const partiesSet = new Set(); districtWinners.forEach(d => { if (provinceFilter !== "ทั่วราชอาณาจักร" && String(d.province_name_th).trim() !== provinceFilter) return; const wC = String(d.winner_party || "").trim(); const wL = String(d.pl_leader_party || "").trim(); if (wC) { localWinsConst[wC] = (localWinsConst[wC] || 0) + 1; partiesSet.add(wC); } if (wL) { localWinsList[wL] = (localWinsList[wL] || 0) + 1; partiesSet.add(wL); } }); const updateSplitTable = () => { tableContainer.innerHTML = ""; const partyList = Array.from(partiesSet); // เรียงข้อมูลตามปุ่มที่กด partyList.sort((a, b) => { const valA = sortBy === "แบ่งเขต" ? (localWinsConst[a] || 0) : (localWinsList[a] || 0); const valB = sortBy === "แบ่งเขต" ? (localWinsConst[b] || 0) : (localWinsList[b] || 0); return valB - valA; }); const ui = html`

ผลการเลือกตั้ง

ลำดับที่

สี

พรรค

แบ่งเขต

บัญชีรายชื่อ

${partyList.map((p, index) => html`

${index + 1}

${p}

${localWinsConst[p] || 0}

${localWinsList[p] || 0}

`)}

`; tableContainer.appendChild(ui); // ผูก Event ปุ่มกดให้เรียงใหม่ tableContainer.querySelector("#sort-const").addEventListener("click", () => { sortBy = "แบ่งเขต"; updateSplitTable(); }); tableContainer.querySelector("#sort-list").addEventListener("click", () => { sortBy = "บัญชีรายชื่อ"; updateSplitTable(); }); }; updateSplitTable(); // โหลดตารางครั้งแรก } else { // --- กรณีเลือกพรรค: โชว์ Scatter Plot และ Bar Chart แบบสัดส่วนคะแนน (%) --- const partyCands = candidatesData.filter(c => String(c.party_name).trim() === config.party); const partyCandMap = new Map(partyCands.map(c => [fixConsKey(c.cons_key), Number(c.votes) || 0])); const partyPL = districtPartyFilter.filter(p => String(p.party_name).trim() === config.party); const partyPLMap = new Map(partyPL.map(p => [fixConsKey(p.cons_key), Number(p.pl_votes) || 0])); // 🌟 คำนวณฐานคะแนนรวมทั้งหมดของแต่ละเขต (แบ่งเขต และ บัญชีรายชื่อ) const constTotalMap = d3.rollup(candidatesData, v => d3.sum(v, d => Number(d.votes) || 0), d => fixConsKey(d.cons_key)); const plTotalMap = d3.rollup(districtPartyFilter, v => d3.sum(v, d => Number(d.pl_votes) || 0), d => fixConsKey(d.cons_key)); let scatterData = []; districtWinners.forEach(d => { const key = fixConsKey(d.cons_key); const cVote = partyCandMap.get(key) || 0; const plVote = partyPLMap.get(key) || 0; const totalC = constTotalMap.get(key) || 1; // ป้องกันหาร 0 const totalPL = plTotalMap.get(key) || 1; // 🌟 แปลงเป็นเปอร์เซ็นต์ const cVotePct = (cVote / totalC) * 100; const plVotePct = (plVote / totalPL) * 100; const wC = String(d.winner_party || "").trim(); const wL = String(d.pl_leader_party || "").trim(); const winConst = wC === config.party; const winList = wL === config.party; let dotColor = "#cbd5e1"; if (winConst && winList) dotColor = "#22c55e"; else if (winConst || winList) dotColor = "#eab308"; if (cVote > 0 || plVote > 0) { scatterData.push({ districtName: `${String(d.province_name_th).trim()} เขต ${d.cons_no}`, province: String(d.province_name_th).trim(), cVotePct, plVotePct, dotColor }); } }); if (scatterData.length === 0) { rightPanel.innerHTML = `

ไม่มีข้อมูลคะแนนของพรรค${config.party}

`; return; } // หาจุด Max สุดเพื่อกำหนดความยาวแกน x, y ให้พอดีกัน const maxPct = Math.min(100, Math.max(d3.max(scatterData, d=>d.cVotePct), d3.max(scatterData, d=>d.plVotePct)) + 5); // 🌟 1. วาด Scatter Plot (สัดส่วนคะแนน) const scatterChart = Plot.plot({ width: 600, height: 350, marginLeft: 60, marginBottom: 40, style: { fontSize: "16px", // 🌟 ขยายขนาดตัวอักษรของแกน X, Y และ Tooltip ให้ใหญ่ขึ้น fontFamily: "sans-serif" }, x: { label: "สัดส่วนแบ่งเขต (%)", grid: true, domain: [0, maxPct] }, y: { label: "สัดส่วนบัญชีรายชื่อ (%)", grid: true, domain: [0, maxPct] }, marks: [ Plot.line([[0,0], [maxPct, maxPct]], {stroke: "#94a3b8", strokeDasharray: "4,4"}), Plot.dot(scatterData, { x: "cVotePct", y: "plVotePct", fill: "dotColor", r: 4, // 🌟 ขยายขนาดจุดให้ใหญ่ขึ้นเล็กน้อย เพื่อให้สมดุลกับตัวอักษรและคลิกง่ายขึ้น title: d => `${d.districtName}\nเขต: ${d.cVotePct.toFixed(1)}% | บัญชีฯ: ${d.plVotePct.toFixed(1)}%`, opacity: d => (provinceFilter === "ทั่วราชอาณาจักร" || d.province === provinceFilter) ? 0.9 : 0.15, stroke: d => (provinceFilter !== "ทั่วราชอาณาจักร" && d.province === provinceFilter) ? "#0f172a" : "none", strokeWidth: 1.5, style: { cursor: "pointer" } }) ] }); const containerHtml = document.createElement("div"); containerHtml.style.cssText = "background: white; border-radius: 12px; border: 1px solid #e2e8f0; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);"; containerHtml.innerHTML = `

ความสัมพันธ์สัดส่วนคะแนนบัตร 2 ใบ (พรรค${config.party})

ชนะ 2 ใบ

ชนะ 1 ใบ

ไม่ชนะ

* คลิกที่จุดบนกราฟ หรือแผนที่ เพื่อดูข้อมูลเปรียบเทียบรายจังหวัด

`; const chartDiv = document.createElement("div"); chartDiv.style.overflowX = "auto"; chartDiv.appendChild(scatterChart); containerHtml.appendChild(chartDiv); // 🌟 2. ทำให้คลิกที่จุด (Dot) แล้วเปลี่ยนจังหวัดได้ d3.select(scatterChart).selectAll("circle").on("click", function() { const title = d3.select(this).select("title").text(); if (title) { const provMatch = title.split(" เขต")[0]; if (provMatch) { renderRightPanel(provMatch); d3.selectAll("#left-map rect") .attr("stroke", p => p.province_name_th === provMatch ? "#000" : "#fff") .attr("stroke-width", p => p.province_name_th === provMatch ? 1.5 : 0.5); } } }); // 🌟 3. Bar Chart สำหรับสัดส่วนเปอร์เซ็นต์ (แนวนอน + Dynamic Height + Toggle กรองชนะ 1 ใบ) if (provinceFilter !== "ทั่วราชอาณาจักร") { let baseProvData = scatterData.filter(d => d.province === provinceFilter); let filterOnlyOneWin = false; // State สำหรับเก็บสถานะการกดปุ่ม // 🌟 สร้าง UI กรอบมน (Card) พร้อมปุ่ม Toggle ด้านขวาบน const barDiv = document.createElement("div"); barDiv.style.marginTop = "24px"; barDiv.style.padding = "20px"; barDiv.style.border = "1px solid #e2e8f0"; barDiv.style.borderRadius = "12px"; barDiv.style.background = "#ffffff"; barDiv.innerHTML = `

เปรียบเทียบสัดส่วนเปอร์เซ็นต์รายเขต
(เรียงจากส่วนต่างน้อยสุด)

แบ่งเขต

บัญชีรายชื่อ

`; // พื้นที่สำหรับวาดกราฟ (แยกออกมาเพื่อให้ลบ/วาดใหม่ตอนกดปุ่มได้ง่าย) const chartContainer = document.createElement("div"); barDiv.appendChild(chartContainer); // ฟังก์ชันสำหรับวาดกราฟ (จะถูกเรียกตอนโหลดครั้งแรก และตอนกดปุ่ม) const renderBarChart = () => { chartContainer.innerHTML = ""; // ล้างกราฟเดิมออก // กรองข้อมูลตามสถานะของ Toggle (เราเซ็ตให้ "#eab308" คือสีของชนะใบเดียวไว้ใน Scatter แล้ว) let provData = filterOnlyOneWin ? baseProvData.filter(d => d.dotColor === "#eab308") : baseProvData; if (provData.length === 0) { chartContainer.innerHTML = `

ไม่พบเขตที่พรรค${config.party}ชนะเพียง 1 ใบ ในจังหวัดนี้

`; return; } // เรียงลำดับข้อมูล: หา "ส่วนต่างที่น้อยที่สุด" (Least Difference) ขึ้นก่อน provData.sort((a, b) => Math.abs(a.cVotePct - a.plVotePct) - Math.abs(b.cVotePct - b.plVotePct)); const orderedDistricts = provData.map(d => `เขต ${d.districtName.split("เขต ")[1]}`); const tidyData = []; provData.forEach(d => { const zoneNo = d.districtName.split("เขต ")[1]; tidyData.push({ district: `เขต ${zoneNo}`, type: "แบ่งเขต", pct: d.cVotePct }); tidyData.push({ district: `เขต ${zoneNo}`, type: "บัญชีรายชื่อ", pct: d.plVotePct }); }); const maxPct = (d3.max(tidyData, d => d.pct) || 0) + 10; const dynamicHeight = Math.max(250, provData.length * 75); const barChart = Plot.plot({ width: 560, height: dynamicHeight, marginLeft: 100, marginRight: 80, marginBottom: 50, style: { fontSize: "16px", fontFamily: "sans-serif" }, x: { label: "สัดส่วนคะแนน (%)", grid: true, domain: [0, maxPct] }, y: { label: null }, color: { domain: ["แบ่งเขต", "บัญชีรายชื่อ"], range: ["#0f172a", "#2563eb"] }, facet: { data: tidyData, y: "district" }, fy: { domain: orderedDistricts, label: null, axis: "right" }, marks: [ Plot.barX(tidyData, { x: "pct", y: "type", fill: "type", tip: true, title: d => `📍 ${d.district}\n${d.type}: ${d.pct.toFixed(1)}%` }), Plot.ruleX([0]) ] }); const scrollWrap = document.createElement("div"); scrollWrap.style.overflowY = "auto"; scrollWrap.style.overflowX = "hidden"; scrollWrap.style.maxHeight = "450px"; scrollWrap.style.paddingRight = "8px"; scrollWrap.className = "custom-scrollbar-vertical"; scrollWrap.appendChild(barChart); chartContainer.appendChild(scrollWrap); }; // 🌟 4. ผูก Event ให้ปุ่ม Toggle const btnFilter = barDiv.querySelector("#btn-filter-1win"); btnFilter.addEventListener("click", () => { filterOnlyOneWin = !filterOnlyOneWin; // สลับสถานะ if (filterOnlyOneWin) { // เมื่อเปิดการกรอง (ปุ่มกลายเป็นสีเหลือง) btnFilter.style.background = "#eab308"; btnFilter.style.color = "#ffffff"; btnFilter.style.border = "1px solid #eab308"; btnFilter.innerText = "ยกเลิกตัวกรอง"; } else { // เมื่อปิดการกรอง (ปุ่มกลับเป็นสีขาว) btnFilter.style.background = "#ffffff"; btnFilter.style.color = "#64748b"; btnFilter.style.border = "1px solid #e2e8f0"; btnFilter.innerText = "กรองเฉพาะชนะ 1 ใบ"; } renderBarChart(); // สั่งวาดกราฟใหม่ }); // ใส่ CSS ตกแต่ง Scrollbar แนวตั้ง if (!document.getElementById("v-slider-css")) { const style = document.createElement("style"); style.id = "v-slider-css"; style.innerHTML = ` .custom-scrollbar-vertical::-webkit-scrollbar { width: 8px; } .custom-scrollbar-vertical::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; } .custom-scrollbar-vertical::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } .custom-scrollbar-vertical::-webkit-scrollbar-thumb:hover { background: #94a3b8; } `; document.head.appendChild(style); } renderBarChart(); // เรียกวาดกราฟครั้งแรก containerHtml.appendChild(barDiv); } rightPanel.appendChild(containerHtml); } } // 🌟 โหมด: ผลเลือกตั้งเปลี่ยนไปอย่างไรจากปี 2566 (ใช้ข้อมูลใหม่ 66) else if (config.mapMode === "ผลเลือกตั้งเปลี่ยนไปอย่างไรจากปี 2566") { const mapTo69 = (name) => { const n = String(name).trim(); if (n === "ก้าวไกล") return "ประชาชน"; return n; }; if (config.party === "ดูทุกพรรค") { const tableContainer = document.createElement("div"); rightPanel.appendChild(tableContainer); let sortBy = "ปี 69"; const wins66 = {}; const wins69 = {}; const partiesSet = new Set(); // 🌟 แก้ไข: ลบอันที่ซ้ำออก เหลือ forEach แค่ตัวเดียว districtWinners.forEach(d => { if (provinceFilter !== "ทั่วราชอาณาจักร" && String(d.province_name_th).trim() !== provinceFilter) return; const coreKey = getCoreKey(d.cons_key); const d66 = mapDist66.get(coreKey); const w69 = config.mapDisplayMode === "แบ่งเขต" ? String(d.winner_party || "").trim() : String(d.pl_leader_party || "").trim(); let w66Raw = ""; if (d66) { w66Raw = config.mapDisplayMode === "บัญชีรายชื่อ" ? String(d66.pl_leader_party || "").trim() : String(d66.winner_party_2569_name || d66.winner_party || "").trim(); } const w66 = mapTo69(w66Raw); if (w69) { wins69[w69] = (wins69[w69] || 0) + 1; partiesSet.add(w69); } if (w66) { wins66[w66] = (wins66[w66] || 0) + 1; partiesSet.add(w66); } }); const updateCompareTable = () => { tableContainer.innerHTML = ""; const partyList = Array.from(partiesSet); partyList.sort((a, b) => { const valA = sortBy === "ปี 66" ? (wins66[a] || 0) : (wins69[a] || 0); const valB = sortBy === "ปี 66" ? (wins66[b] || 0) : (wins69[b] || 0); return valB - valA; }); const ui = html`

เปรียบเทียบผลปี 66 vs 69 (${config.mapDisplayMode})

ลำดับที่

สี

พรรค

ปี 66

ปี 69

${partyList.map((p, index) => html`

${index + 1}

${p}

${wins66[p] || 0}

${wins69[p] || 0}

`)}

`; tableContainer.appendChild(ui); tableContainer.querySelector("#sort-66").addEventListener("click", () => { sortBy = "ปี 66"; updateCompareTable(); }); tableContainer.querySelector("#sort-69").addEventListener("click", () => { sortBy = "ปี 69"; updateCompareTable(); }); }; updateCompareTable(); } else { // 🌟 1. ดึงสีประจำพรรค const baseColor = partyColors[config.party] || "#cbd5e1"; let countHold = 0; // ชนะ 66 -> ชนะ 69 let countGain = 0; // แพ้ 66 -> ชนะ 69 let countLoss = 0; // ชนะ 66 -> แพ้ 69 // 🌟 2. วนลูปคำนวณจำนวนเขตในแต่ละสถานะ districtWinners.forEach(d69 => { if (provinceFilter !== "ทั่วราชอาณาจักร" && String(d69.province_name_th).trim() !== provinceFilter) return; const coreKey = getCoreKey(d69.cons_key); const d66 = mapDist66.get(coreKey); if (!d66) return; const w66Raw = config.mapDisplayMode === "บัญชีรายชื่อ" ? String(d66.pl_leader_party || "").trim() : String(d66.winner_party_2569_name || d66.winner_party || "").trim(); const w66 = mapTo69(w66Raw); const w69Raw = config.mapDisplayMode === "แบ่งเขต" ? String(d69.winner_party || "").trim() : String(d69.pl_leader_party || "").trim(); const w69 = w69Raw; const win66 = (w66 === config.party); const win69 = (w69 === config.party); if (win66 && win69) countHold++; if (!win66 && win69) countGain++; if (win66 && !win69) countLoss++; }); // 🌟 3. คำนวณผลสุทธิ (Net Change) const netChange = countGain - countLoss; const netText = netChange > 0 ? `เพิ่มขึ้น ${netChange} ที่นั่ง` : netChange < 0 ? `ลดลง ${Math.abs(netChange)} ที่นั่ง` : `ที่นั่งเท่าเดิม`; const netColor = netChange > 0 ? "#10b981" : netChange < 0 ? "#ef4444" : "#64748b"; // 🌟 4. สร้าง UI Summary Card เจาะลึก พร้อม Legend const summaryCard = document.createElement("div"); summaryCard.style.background = "#ffffff"; summaryCard.style.border = "1px solid #e2e8f0"; summaryCard.style.borderRadius = "12px"; summaryCard.style.padding = "20px"; summaryCard.style.marginBottom = "24px"; summaryCard.style.boxShadow = "0 1px 3px rgba(0,0,0,0.05)"; summaryCard.innerHTML = `

สรุปเปรียบเทียบปี 66 vs 69

สุทธิ: ${netText}

รักษาพื้นที่
(ชนะ ➠ ชนะ)

${countHold} เขต

ชิงมาได้
(แพ้ ➠ ชนะ)

${countGain} เขต

เสียพื้นที่
(ชนะ ➠ แพ้)

${countLoss} เขต

คำอธิบายสีบนแผนที่

รักษาพื้นที่ได้

ชิงพื้นที่มาได้

เสียพื้นที่เดิม

ไม่ได้ทั้ง 2 ปี

`; rightPanel.appendChild(summaryCard); } } } // 🌟 สิ้นสุดฟังก์ชัน renderRightPanel ตรงนี้ // ========================================================= // 5. ฟังก์ชันสลับโหมดปุ่ม (Toggle) บนแผนที่ // ========================================================= function renderToggle() { toggleContainer.innerHTML = ""; const modesWithToggle = ["ผลการเลือกตั้งปี 2569", "ผลเลือกตั้งเปลี่ยนไปอย่างไรจากปี 2566"]; if (modesWithToggle.includes(config.mapMode)) { const isDistrict = config.mapDisplayMode === "แบ่งเขต"; const toggleHtml = html`

`; toggleContainer.appendChild(toggleHtml); toggleContainer.querySelector("#btn-district").addEventListener("click", () => { if (config.mapDisplayMode !== "แบ่งเขต") { config.mapDisplayMode = "แบ่งเขต"; renderToggle(); updateMapColors(); renderRightPanel(); } }); toggleContainer.querySelector("#btn-partylist").addEventListener("click", () => { if (config.mapDisplayMode !== "บัญชีรายชื่อ") { config.mapDisplayMode = "บัญชีรายชื่อ"; renderToggle(); updateMapColors(); renderRightPanel(); } }); } } // ========================================================= // 6. ฟังก์ชันวาดแผนที่ SVG และกำหนดสี // ========================================================= const tileSize = 12, gap = 2; const maxX = d3.max(districtWinners, d => Number(d.x_coordinate) || 0); const maxY = d3.max(districtWinners, d => Number(d.y_coordinate) || 0); const width = (maxX + 5) * (tileSize + gap); const height = (maxY + 5) * (tileSize + gap); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]).style("width", "100%").style("height", "auto").style("background-color", "#ffffff"); const g = svg.append("g"); function getMapFillColor(d) { const currentKey = fixConsKey(d.cons_key); const winnerConst = String(d.winner_party || "").trim(); const winnerList = String(d.pl_leader_party || "").trim(); const runnerUp = String(d.runnerup_party || "").trim(); const marginPt = Number(d.margin_pct_pt) || 100; let activeParty = winnerConst; if (config.mapDisplayMode === "บัญชีรายชื่อ") activeParty = winnerList; const baseColor = partyColors[activeParty] || "#94a3b8"; if (config.mapMode === "ผลการเลือกตั้งปี 2569") { if (config.party === "ดูทุกพรรค") return baseColor; return activeParty === config.party ? baseColor : "#e2e8f0"; } else if (config.mapMode === "The Tipping Point") { const isClose = marginPt < 5; if (config.party === "ดูทุกพรรค") return isClose ? baseColor : "#e2e8f0"; if (!isClose) return "#e2e8f0"; if (winnerConst === config.party) return "#ef4444"; if (runnerUp === config.party) return "#eab308"; return "#e2e8f0"; } else if (config.mapMode === "ผลเลือกตั้งเปลี่ยนไปอย่างไรจากปี 2566") { if (config.party === "ดูทุกพรรค") { return partyColors[activeParty] || "#e2e8f0"; } else { const coreKey = getCoreKey(d.cons_key); // 🌟 ใช้ coreKey const d66 = mapDist66.get(coreKey); if (!d66) return "#e2e8f0"; const map66to69 = (name) => { const n = String(name).trim(); if (n === "ก้าวไกล") return "ประชาชน"; return n; }; const w66Raw = config.mapDisplayMode === "บัญชีรายชื่อ" ? d66.pl_leader_party : (d66.winner_party_2569_name || d66.winner_party); const w66 = map66to69(w66Raw); // ... const win66 = (w66 === config.party); const win69 = (activeParty === config.party); if (win66 && win69) return baseColor; // รักษาแชมป์: ใช้สีพรรคตามปกติ if (!win66 && win69) return "#fbbf24"; // ชิงมาได้ (ใหม่): สีทอง if (win66 && !win69) return "#334155"; // เสียพื้นที่: สีเทาเข้มเกือบดำ return "#e2e8f0"; } } else if (config.mapMode === "Split-ticket voting") { if (config.party === "ดูทุกพรรค") { return partyColors[winnerConst] || "#e2e8f0"; } else { const winConst = winnerConst === config.party; const winList = winnerList === config.party; if (winConst && winList) return "#22c55e"; if (winConst || winList) return "#eab308"; return "#e2e8f0"; } } return "#e2e8f0"; } const mapPaths = g.selectAll("rect") .data(districtWinners) .join("rect") .attr("x", d => (Number(d.x_coordinate) || 0) * (tileSize + gap)) .attr("y", d => (Number(d.y_coordinate) || 0) * (tileSize + gap)) .attr("width", tileSize) .attr("height", tileSize) .attr("stroke", "#ffffff") .attr("stroke-width", 0.5) .style("cursor", "pointer") .attr("fill", d => getMapFillColor(d)); function updateMapColors() { mapPaths.transition().duration(300).attr("fill", d => getMapFillColor(d)); // อัปเดต Tooltip เมื่อมีการสลับโหมด if (typeof getTooltipText === "function") { mapPaths.select("title").text(d => getTooltipText(d)); } if ((config.mapMode === "Split-ticket voting" || config.mapMode === "ผลเลือกตั้งเปลี่ยนไปอย่างไรจากปี 2566") && config.party === "ดูทุกพรรค") { g.selectAll(".inner-rect").remove(); g.selectAll(".inner-rect") .data(districtWinners) .join("rect") .attr("class", "inner-rect") .attr("x", d => (Number(d.x_coordinate) || 0) * (tileSize + gap) + (tileSize * 0.3)) .attr("y", d => (Number(d.y_coordinate) || 0) * (tileSize + gap) + (tileSize * 0.3)) .attr("width", tileSize * 0.4) .attr("height", tileSize * 0.4) .style("pointer-events", "none") .attr("fill", d => { const coreKey = getCoreKey(d.cons_key); // 🌟 ใช้ coreKey if (config.mapMode === "Split-ticket voting") { return partyColors[String(d.pl_leader_party).trim()] || "#fff"; } if (config.mapMode === "ผลเลือกตั้งเปลี่ยนไปอย่างไรจากปี 2566") { const d66 = mapDist66.get(coreKey); // 🌟 ใช้ coreKey ค้นหา if (!d66) return "transparent"; // ... const map66to69 = (name) => { const n = String(name).trim(); if (n === "ก้าวไกล") return "ประชาชน"; return n; }; const party66Raw = config.mapDisplayMode === "บัญชีรายชื่อ" ? d66.pl_leader_party : (d66.winner_party_2569_name || d66.winner_party); const party66Mapped = map66to69(party66Raw); return partyColors[party66Mapped] || "#fff"; } }); } else { g.selectAll(".inner-rect").remove(); } } // ========================================================= // 7. จัดการ Tooltip แผนที่ // ========================================================= const safeDistrictPartyFilter = Array.from(dashboardData?.districtPartyFilter || []); const distPartyMap = d3.group(safeDistrictPartyFilter, d => fixConsKey(d.cons_key)); function getTooltipText(d) { const provName = String(d.province_name_th || "").trim(); const zoneNo = Number(d.cons_no || 0); const currentConsKey = fixConsKey(d.cons_key); let cands = candMap.get(currentConsKey) || []; let plData = distPartyMap.get(currentConsKey) || []; if (cands && cands.length > 0) { let txt = `จ.${provName} เขต ${zoneNo}\n`; txt += `-------------------------\n`; cands = cands.sort((a, b) => (Number(b.votes) || 0) - (Number(a.votes) || 0)); if (config.mapMode === "Margin of victory" || config.mapMode === "The Tipping Point") { if (config.mapDisplayMode === "บัญชีรายชื่อ") { plData = plData.sort((a, b) => (Number(b.pl_votes) || 0) - (Number(a.pl_votes) || 0)); const p1 = plData[0]; const p2 = plData[1]; const totalPl = d3.sum(plData, x => Number(x.pl_votes) || 0); if (p1) txt += `ลำดับที่ 1 พรรค${p1.party_name} : ${(totalPl > 0 ? p1.pl_votes / totalPl * 100 : 0).toFixed(2)}%\n`; if (p2) txt += `ลำดับที่ 2 พรรค${p2.party_name} : ${(totalPl > 0 ? p2.pl_votes / totalPl * 100 : 0).toFixed(2)}%\n`; if (p1 && p2) { const margin = p1.pl_votes - p2.pl_votes; const marginPct = totalPl > 0 ? (margin / totalPl * 100) : 0; txt += `\nส่วนต่างคะแนน: ${margin.toLocaleString()} คะแนน (${marginPct.toFixed(2)} จุด)\n`; } } else { const c1 = cands[0]; const c2 = cands[1]; if (c1) txt += `ลำดับที่ 1 ${c1.candidate_name ? c1.candidate_name + ' ' : ''}(${c1.party_name}) : ${Number(c1.vote_share_pct || 0).toFixed(2)}%\n`; if (c2) txt += `ลำดับที่ 2 ${c2.candidate_name ? c2.candidate_name + ' ' : ''}(${c2.party_name}) : ${Number(c2.vote_share_pct || 0).toFixed(2)}%\n`; txt += `\nส่วนต่างคะแนน: ${Number(d.margin_votes || 0).toLocaleString()} คะแนน (${Number(d.margin_pct_pt || 0).toFixed(2)} จุด)\n`; } } else if (config.mapMode === "ผลเลือกตั้งเปลี่ยนไปอย่างไรจากปี 2566") { const coreKey = getCoreKey(d.cons_key); // 🌟 ใช้ coreKey const d66 = mapDist66.get(coreKey); const personInfo = mapPerson.get(coreKey); if (!d66) { txt += `เขตเลือกตั้งนี้ตั้งขึ้นใหม่ในปี 2569 (ไม่มีในฐานข้อมูลปี 2566)\n`; } else { // ... (โค้ด Tooltip 66 vs 69 เดิมของคุณ) ... const map66to69 = (name) => { const n = String(name).trim(); if (n === "ก้าวไกล") return "ประชาชน"; return n; }; const w69Const = String(d.winner_party || "").trim(); const w66Const = map66to69(d66.winner_party_2569_name || d66.winner_party); const w69List = String(d.pl_leader_party || "").trim(); const w66List = map66to69(d66.pl_leader_party); let changeDetail = personInfo ? String(personInfo.change_66_69_detail || "").trim() : ""; if (config.mapDisplayMode === "แบ่งเขต") { txt += `แชมป์ปี 66 (เขต): ${w66Const}\nแชมป์ปี 69 (เขต): ${w69Const}\n`; txt += `สถานะ: ${changeDetail || (w66Const === w69Const ? "รักษาพื้นที่" : "เปลี่ยนพรรค")}\n`; } else { txt += `แชมป์ปี 66 (บัญชีฯ): ${w66List}\nแชมป์ปี 69 (บัญชีฯ): ${w69List}\n`; txt += `สถานะ: ${w66List === w69List ? "รักษาพื้นที่" : "เปลี่ยนพรรค"}\n`; } } txt += `-------------------------\n`; cands.slice(0, 5).forEach((c, i) => txt += `${i + 1}. ${c.candidate_name ? c.candidate_name + ' ' : ''}(${c.party_name}) : ${Number(c.votes || 0).toLocaleString()} คะแนน\n`); } else if (config.mapMode === "Split-ticket voting") { const winnerConst = String(d.winner_party || "").trim(); const winnerList = String(d.pl_leader_party || "").trim(); const isSplit = winnerConst !== winnerList; txt += `ชนะแบ่งเขต: ${winnerConst}\nชนะบัญชีฯ: ${winnerList}\nสถานะ: ${isSplit ? "เลือกคนละพรรค (Split Ticket)" : "เลือกพรรคเดียวกัน"}\n-------------------------\n`; const plVotesByParty = {}; plData.forEach(dp => plVotesByParty[String(dp.party_name).trim()] = Number(dp.pl_votes || 0)); cands.slice(0, 5).forEach((c, i) => { const party = String(c.party_name).trim(); txt += `${i + 1}. ${c.candidate_name ? c.candidate_name + ' ' : ''}(${party})\n เขต: ${Number(c.votes || 0).toLocaleString()} | บัญชีฯ: ${Number(plVotesByParty[party] || 0).toLocaleString()} คะแนน\n`; }); } else { if (config.mapDisplayMode === "แบ่งเขต") { txt += `🏆 [แบบแบ่งเขต]\n`; cands.slice(0, 5).forEach((c, i) => { txt += ` ${i + 1}. ${c.candidate_name ? c.candidate_name + ' ' : ''}(${c.party_name}) : ${Number(c.votes || 0).toLocaleString()} คะแนน\n`; }); } else { txt += `🏆 [แบบบัญชีรายชื่อ]\n`; plData = plData.sort((a, b) => (Number(b.pl_votes) || 0) - (Number(a.pl_votes) || 0)); if (plData.length > 0) { plData.slice(0, 5).forEach((p, i) => { txt += ` ${i + 1}. พรรค${p.party_name} : ${Number(p.pl_votes || 0).toLocaleString()} คะแนน\n`; }); } else { txt += ` (ไม่มีข้อมูลคะแนนบัญชีรายชื่อ)\n`; } } } return txt; } return `ไม่มีข้อมูล`; } mapPaths.append("title").text(d => getTooltipText(d)); // ========================================================= // 8. แสดงชื่อจังหวัด และ Interaction ต่างๆ // ========================================================= const provinceTextMap = d3.rollup(districtWinners, v => v[0], d => String(d.province_name_th).trim()); g.selectAll("text") .data(Array.from(provinceTextMap.values())) .join("text") .attr("x", d => (Number(d.x_text_coordinate) || 0) * (tileSize + gap)).attr("dx", 0) .attr("y", d => (Number(d.y_text_coordinate) || 0) * (tileSize + gap)).attr("dy", 5) .attr("dominant-baseline", "hanging") .text(d => d.province_name_th) .style("font-size", "9px") .style("fill", "#334155") .style("font-family", "sans-serif") .style("pointer-events", "none"); svg.call(d3.zoom().scaleExtent([0.5, 8]).on("zoom", e => { g.attr("transform", e.transform); mapPaths.attr("stroke-width", 0.5 / e.transform.k); })); mapPaths.on("click", (event, d) => { event.stopPropagation(); if(d.province_name_th) { const provName = String(d.province_name_th).trim(); renderRightPanel(provName); mapPaths.attr("stroke", p => p.province_name_th === provName ? "#000" : "#fff") .attr("stroke-width", p => p.province_name_th === provName ? 1.5 : 0.5); } }); svg.on("click", () => { renderRightPanel("ทั่วราชอาณาจักร"); mapPaths.attr("stroke", "#ffffff").attr("stroke-width", 0.5); }); leftMapContainer.appendChild(svg.node()); renderToggle(); updateMapColors(); renderRightPanel("ทั่วราชอาณาจักร"); return container; }40:Ta541,function voterAnalysisDashboard(config, dashboardData) { const party = String(config?.party || "ดูทุกพรรค").trim(); if (party === "ดูทุกพรรค" || !party) { return html`

พรรคได้คะแนนในพื้นที่แบบไหน

กรุณาเลือกพรรคการเมืองจากตัวกรองด้านบน เพื่อดูข้อมูลเศรษฐกิจ โครงสร้างอายุ และคะแนนบัญชีรายชื่อรายจังหวัด

`; } // --- 1) BUILD THE 77 PROVINCE RECORDS --- const str = v => String(v ?? "").trim(); const code = v => String(Number(v)); const num = v => (v === null || v === undefined || str(v) === "" ? NaN : Number(v)); const valid = v => Number.isFinite(v); const f1 = v => valid(v) ? `${v.toFixed(1)}%` : "ไม่มีข้อมูล"; const f2 = v => valid(v) ? `${v.toFixed(2)}%` : "ไม่มีข้อมูล"; const integer = v => Math.round(v || 0).toLocaleString("th-TH"); const provinceRows = Array.from(dashboardData?.provinceData || []) .filter(d => code(d.province_code) !== "0"); const partyProvinceRows = Array.from(dashboardData?.provincePartyData || []) .filter(d => str(d.party_name) === party); const districtRows = Array.from(dashboardData?.districtWinners || []); const byProvinceParty = new Map(partyProvinceRows.map(d => [code(d.province_code), d])); // Count seats per party per province; include joint-first in the green status. const seatsByProvince = d3.rollup( districtRows, rows => { const totals = d3.rollup(rows, r => r.length, d => str(d.winner_party)); const maxSeats = d3.max(Array.from(totals.values())) || 0; return {maxSeats, leaders: Array.from(totals, ([name, count]) => ({name, count})) .filter(d => d.count === maxSeats && d.name).map(d => d.name)}; }, d => code(d.province_code) ); const provinces = provinceRows.map(p => { const pc = code(p.province_code); const pp = byProvinceParty.get(pc); const sectors = { agri: num(p.agri_share_pct), industry: num(p.industry_share_pct), services: num(p.services_share_pct) }; const dominantSector = Object.entries(sectors) .filter(([,v]) => valid(v)) .sort((a,b) => b[1]-a[1])[0]?.[0] || "unknown"; const plWin = str(p.pl_leader_party) === party; const constituencyLeaders = seatsByProvince.get(pc)?.leaders || []; const consLead = constituencyLeaders.includes(party); return { code: pc, name: str(p.province_name_th), region: str(p.region) || "Other", plLeaderParty: str(p.pl_leader_party), // พรรคคะแนนบัญชีรายชื่ออันดับหนึ่งของจังหวัด plLeaderShare: num(p.pl_leader_share_pct), voteShare: pp ? num(pp.pl_share_pct) : NaN, // Selected party's provincial PL share votes: pp ? num(pp.pl_votes) : NaN, // Selected party's provincial PL votes plWin, consLead, constituencyLeaders, status: !plWin ? "lost-list" : consLead ? "both" : "list-only", sectors, dominantSector, gpp: num(p.gpp_per_capita_baht), // GPP per capita in baht/person: rank, detail card and scatterplot ages: [num(p.pop_18_30_genz), num(p.pop_31_45_geny), num(p.pop_46_60_genx), num(p.pop_61plus)] }; }); // Province-only dashboard: no district-level party-list join. const provinceByCode = new Map(provinces.map(d => [d.code, d])); const partyListLeaderLine = p => `พรรคอันดับหนึ่งบัญชีรายชื่อ: ${p?.plLeaderParty || "ไม่มีข้อมูล"} (${f2(p?.plLeaderShare)})`; // Rank GPP per capita (baht/person) across provinces, highest first. // Equal values share the same competition rank; missing values remain unranked. const gppSorted = provinces.filter(d => valid(d.gpp)).sort((a,b) => b.gpp-a.gpp); gppSorted.forEach((p,i) => { p.gppRank = i > 0 && p.gpp === gppSorted[i-1].gpp ? gppSorted[i-1].gppRank : i+1; }); const winners = provinces.filter(d => d.plWin); // Provinces where the selected party is NOT the top party-list vote getter. const lostList = provinces.filter(d => !d.plWin); const sectorLabels = {agri:"เกษตร", industry:"อุตสาหกรรม", services:"บริการ"}; const counts = Object.fromEntries(Object.keys(sectorLabels).map(k => [k, winners.filter(d => d.dominantSector === k).length])); // Denominator for each sector is ALL provinces of that dominant economic type (not only winning provinces). const sectorTotals = Object.fromEntries(Object.keys(sectorLabels).map(k => [k, provinces.filter(d => d.dominantSector === k).length])); const ratioPct = (numerator, denominator) => denominator > 0 ? `${(numerator / denominator * 100).toFixed(0)}%` : "—"; const averageWin = d3.mean(winners.filter(d=>valid(d.voteShare)), d=>d.voteShare); const statusColors = {"lost-list":"#202938", both:"#16a34a", "list-only":"#eab308"}; const statusText = { "lost-list": "สถานะ: แพ้", both: "สถานะ: บัญชีรายชื่ออันดับหนึ่ง และได้ ส.ส.เขตมากที่สุดในจังหวัด", "list-only": "สถานะ: บัญชีรายชื่ออันดับหนึ่ง แต่ไม่ได้ ส.ส.เขตมากที่สุดในจังหวัด" }; const root = html`

คะแนนบัญชีรายชื่อ (%)

คะแนนต่ำ

คะแนนสูง

วิเคราะห์โครงสร้างพื้นที่ที่พรรคได้คะแนนบัญชีรายชื่อ

ชนะบัญชีรายชื่อ

ของทุกจังหวัด

คะแนนบัญชีฯ เฉลี่ย

จังหวัดที่ชนะ

ความสัมพันธ์กับคะแนนพรรค (77 จังหวัด)

ดำ: แพ้ พรรคไม่ได้อันดับหนึ่งบัญชีฯ เขียว: บัญชีฯ อันดับหนึ่ง และ ส.ส.เขตมากที่สุด เหลือง: บัญชีฯ อันดับหนึ่ง แต่ ส.ส.เขตแพ้

โครงสร้างประชากรอายุ 18 ปีขึ้นไป

`; // Two summary cards; sector breakdown is available via the info tooltip. root.querySelector('[data-stat="wins"]').textContent = integer(winners.length); root.querySelector('[data-pct="wins"]').textContent = ratioPct(winners.length, provinces.length); root.querySelector('[data-stat="avg"]').textContent = valid(averageWin) ? `${averageWin.toFixed(0)}%` : "ไม่มีข้อมูล"; root.querySelector('[data-ratio="avg"]').textContent = `${winners.length} จังหวัด`; const sectorTooltipText = [ "จังหวัดที่ชนะบัญชีรายชื่อ จำแนกตามภาคเศรษฐกิจหลัก", `เกษตรเด่น: ${counts.agri}/${sectorTotals.agri} จังหวัด (${ratioPct(counts.agri,sectorTotals.agri)})`, `บริการเด่น: ${counts.services}/${sectorTotals.services} จังหวัด (${ratioPct(counts.services,sectorTotals.services)})`, `อุตสาหกรรมเด่น: ${counts.industry}/${sectorTotals.industry} จังหวัด (${ratioPct(counts.industry,sectorTotals.industry)})` ].join("\n"); root.querySelector('[data-sector-tooltip]').textContent = sectorTooltipText; // --- 2) INTERACTIVE PROVINCE OVERVIEW --- const mapHost = root.querySelector("[data-map]"); let selectedCode = null; let updateMap = () => {}; let updateScatter = () => {}; const sectorColors={agri:"#22c55e",industry:"#f59e0b",services:"#3b82f6"}; const gppPerCapitaBaht = v => valid(v) ? Math.round(v).toLocaleString("th-TH") : "ไม่มีข้อมูล"; const voteCount = v => valid(v) ? `${integer(v)} คะแนน` : "ไม่มีข้อมูล"; const panel=root.querySelector("[data-province-panel]"); const rightStack=root.querySelector(".va-right-stack"); function drawProvincePie(p) { const host=root.querySelector("[data-selected-pie]"); const legend=root.querySelector("[data-selected-pie-legend]"); host.replaceChildren();legend.replaceChildren(); const sectors=["agri","industry","services"].map(key=>({ key, label:sectorLabels[key], value:valid(p.sectors[key])?Math.max(0,p.sectors[key]):0, hasData:valid(p.sectors[key]),color:sectorColors[key] })); const total=d3.sum(sectors,d=>d.value); if(total>0){ const svg=d3.create("svg") .attr("viewBox","0 0 170 170").attr("class","va-pie-svg") .attr("role","img").attr("aria-label",`โครงสร้างเศรษฐกิจจังหวัด${p.name}`); const arcs=d3.pie().sort(null).value(d=>d.value)(sectors); const arc=d3.arc().innerRadius(0).outerRadius(78); const group=svg.append("g").attr("transform","translate(85,85)"); group.selectAll("path").data(arcs).join("path") .attr("d",arc).attr("fill",d=>d.data.color) .attr("stroke","#fff").attr("stroke-width",2); group.selectAll("path").append("title") .text(d=>`${d.data.label}: ${f1(d.data.value)}`); host.appendChild(svg.node()); } else { const msg=document.createElement("span");msg.className="va-muted"; msg.textContent="ไม่มีข้อมูลโครงสร้างเศรษฐกิจ";host.appendChild(msg); } for(const sector of sectors){ const row=document.createElement("div");row.className="va-pie-row"; const name=document.createElement("span");name.className="va-pie-name"; const square=document.createElement("i");square.className="va-key"; square.style.backgroundColor=sector.color;name.append(square,sector.label); const value=document.createElement("strong"); value.textContent=sector.hasData?f1(sector.value):"ไม่มีข้อมูล"; row.append(name,value);legend.appendChild(row); } } function updateDetail() { const p=provinceByCode.get(selectedCode); panel.hidden=!p; rightStack.classList.toggle("va-has-selection",Boolean(p)); if(!p)return; root.querySelector("[data-selected-province]").textContent=p.name; const shortStatus={ "lost-list":"แพ้ บัญชีรายชื่อไม่เป็นอันดับหนึ่งในจังหวัด", both:"บัญชีฯ อันดับหนึ่ง และ ส.ส.เขตมากที่สุด", "list-only":"บัญชีฯ อันดับหนึ่ง แต่ ส.ส.เขตแพ้" }; const status=root.querySelector("[data-selected-status]"); status.textContent=`สถานะ: ${shortStatus[p.status]}`; status.style.borderLeft=`4px solid ${statusColors[p.status]}`; root.querySelector("[data-selected-gpp-rank]").textContent=valid(p.gppRank) ? `อันดับ ${p.gppRank} / ${gppSorted.length} จังหวัด` : "ไม่มีข้อมูล"; root.querySelector("[data-selected-gpp]").textContent=gppPerCapitaBaht(p.gpp); root.querySelector("[data-selected-votes]").textContent=`${f2(p.voteShare)} · ${voteCount(p.votes)}`; root.querySelector("[data-selected-note]").textContent = "GPP ต่อหัวปี 2024p (บาทต่อคน) · โครงสร้างภาคเศรษฐกิจเป็นข้อมูลระดับจังหวัด"; drawProvincePie(p); } function updateSelections() { updateDetail(); updateMap(); drawScatter(currentMetric); updatePopulation(); // Keep the age profile synchronized with map/scatter selection. } function selectProvince(pc) { selectedCode = pc; updateSelections(); } root.querySelector("[data-reset]").addEventListener("click", () => selectProvince(null)); root.querySelector("[data-clear-province]").addEventListener("click", () => selectProvince(null)); // District-shaped tiles are used only as a geographic outline; all scores // and interactions are province-level. No district-level votes are loaded. const outlineTiles = districtRows .filter(d => valid(num(d.x_coordinate)) && valid(num(d.y_coordinate))) .map(d => ({...d, code: code(d.province_code)})); const uniqueCoordinates = new Set(outlineTiles.map(d => `${d.x_coordinate}:${d.y_coordinate}`)); const hasTileCoordinates = outlineTiles.length >= 350 && uniqueCoordinates.size >= 300; const regionOrder = ["Northern","Northeastern","Central","Eastern","Western","Bangkok & Vicinities","Southern"]; const regionNames = {"Northern":"เหนือ","Northeastern":"ตะวันออกเฉียงเหนือ","Central":"กลาง","Eastern":"ตะวันออก","Western":"ตะวันตก","Bangkok & Vicinities":"กรุงเทพฯ และปริมณฑล","Southern":"ใต้"}; function renderMap() { mapHost.replaceChildren(); mapHost.style.justifyContent = hasTileCoordinates ? "center" : "flex-start"; const values = provinces.filter(d => valid(d.voteShare)); const vMin = d3.min(values, d => d.voteShare) ?? 0; const vMax = d3.max(values, d => d.voteShare) ?? 100; const mapColor = d3.scaleSequential(d3.interpolateBlues) .domain(vMin === vMax ? [Math.max(0,vMin-1),vMax+1] : [vMin,vMax]); const color = v => valid(v) ? mapColor(v) : "#e2e8f0"; root.querySelector("[data-min]").textContent = f1(vMin); root.querySelector("[data-max]").textContent = f1(vMax); root.querySelector("[data-map-subtitle]").textContent = "77 จังหวัด · ใช้คะแนนบัญชีรายชื่อรวมทุกเขต รายจังหวัด"; if (hasTileCoordinates) { // Keep the original Thailand-shaped tile layout while using only province scores. const block = 13, size = 11; const maxX = d3.max(outlineTiles,d=>num(d.x_coordinate)) || 0; const maxY = d3.max(outlineTiles,d=>num(d.y_coordinate)) || 0; const svg = d3.create("svg") .attr("viewBox",`0 0 ${(maxX+6)*block} ${(maxY+6)*block}`) .style("width","100%").style("height","auto"); const group = svg.append("g"); const rects = group.selectAll("rect").data(outlineTiles).join("rect") .attr("x",d=>num(d.x_coordinate)*block) .attr("y",d=>num(d.y_coordinate)*block) .attr("width",size).attr("height",size) .attr("fill",d=>color(provinceByCode.get(d.code)?.voteShare)) .style("cursor","pointer") .on("click",(event,d)=>{event.stopPropagation();selectProvince(d.code);}); rects.append("title").text(d=>{ const p = provinceByCode.get(d.code); return `${p?.name || ""}\nคะแนนบัญชีรายชื่อของพรรค${party}: ${f2(p?.voteShare)} (ระดับจังหวัด)\n${partyListLeaderLine(p)}`; }); const provLabelRows = d3.rollup(outlineTiles,v=>v[0],d=>d.code); group.selectAll("text").data(Array.from(provLabelRows.values())) .join("text") .attr("x",d=>(valid(num(d.x_text_coordinate))?num(d.x_text_coordinate):num(d.x_coordinate))*block) .attr("y",d=>(valid(num(d.y_text_coordinate))?num(d.y_text_coordinate):num(d.y_coordinate))*block) .attr("font-size",9).attr("fill","#334155").attr("pointer-events","none") .text(d=>str(d.province_name_th)); updateMap=()=>rects .attr("stroke",d=>selectedCode && d.code===selectedCode ? "#f59e0b" : "#fff") .attr("stroke-width",d=>selectedCode && d.code===selectedCode ? 1.8 : 0.5); svg.call(d3.zoom().scaleExtent([0.7,6]).on("zoom",event=>group.attr("transform",event.transform))); mapHost.appendChild(svg.node()); } else { // Province-only fallback: 77 tiles grouped by region. const wrap = document.createElement("div");wrap.className="va-region-wrap"; const buttons = []; const groups = d3.groups(provinces,d=>d.region) .sort((a,b)=>regionOrder.indexOf(a[0])-regionOrder.indexOf(b[0])); for(const [region,items] of groups){ const sec=document.createElement("div");sec.className="va-region"; const title=document.createElement("div");title.className="va-region-title"; title.textContent=`${regionNames[region]||region} (${items.length} จังหวัด)`; sec.appendChild(title); const tiles=document.createElement("div");tiles.className="va-region-tiles"; const sorted=[...items].sort((a,b)=>a.name.localeCompare(b.name,"th")); for(const p of sorted){ const b=document.createElement("button");b.type="button";b.className="va-tile"; b.textContent=p.name; b.title=`${p.name}\nคะแนนบัญชีรายชื่อของพรรค${party}: ${f2(p.voteShare)} (ระดับจังหวัด)\n${partyListLeaderLine(p)}`; b.style.backgroundColor=color(p.voteShare); b.style.color=valid(p.voteShare) && p.voteShare>(vMin+vMax)/2 ? "#fff" : "#102139"; b.addEventListener("click",()=>selectProvince(p.code)); tiles.appendChild(b);buttons.push({button:b,code:p.code}); } sec.appendChild(tiles);wrap.appendChild(sec); } mapHost.appendChild(wrap); updateMap=()=>buttons.forEach(d=>d.button.setAttribute("aria-pressed",String( selectedCode!==null && d.code===selectedCode ))); root.querySelector("[data-mapnote]").textContent = "แสดง 77 จังหวัดเป็น Tile Grid ตามภูมิภาค (ไม่ใช่ขอบเขตภูมิศาสตร์)"; } updateMap(); } renderMap(); updateDetail(); // --- 3) SCATTERPLOT (77 provinces, 4 user-selectable X metrics) --- const metrics={ gpp:{label:"GPP ต่อหัว (บาท)", get:d=>d.gpp,fmt:v=>integer(v)}, agri:{label:"สัดส่วนเกษตร (%)",get:d=>d.sectors.agri,fmt:v=>f1(v)}, services:{label:"สัดส่วนบริการ (%)",get:d=>d.sectors.services,fmt:v=>f1(v)}, industry:{label:"สัดส่วนอุตสาหกรรม (%)",get:d=>d.sectors.industry,fmt:v=>f1(v)} }; const scatterHost=root.querySelector("[data-scatter]"); let currentMetric="gpp"; function corr(rows,fn){ const points=rows.map(p=>[fn(p),p.voteShare]).filter(([x,y])=>valid(x)&&valid(y)); if(points.length<3)return NaN; const mx=d3.mean(points,d=>d[0]),my=d3.mean(points,d=>d[1]); const cov=d3.sum(points,d=>(d[0]-mx)*(d[1]-my)); const xx=d3.sum(points,d=>(d[0]-mx)**2), yy=d3.sum(points,d=>(d[1]-my)**2); return xx>0&&yy>0?cov/Math.sqrt(xx*yy):NaN; } function drawScatter(metricKey){ currentMetric=metricKey; scatterHost.replaceChildren(); const m=metrics[metricKey]||metrics.gpp; const pts=provinces.filter(d=>valid(d.voteShare)&&valid(m.get(d))); // Responsive layout: full-height scatter before selecting, compact when detail is open. const W=570,H=selectedCode ? 230 : 590; const margin={top:16,right:22,bottom:48,left:60}; const x=d3.scaleLinear().domain(d3.extent(pts,d=>m.get(d))).nice().range([margin.left,W-margin.right]); const y=d3.scaleLinear().domain([0,Math.max(10,(d3.max(pts,d=>d.voteShare)||0)*1.1)]).nice().range([H-margin.bottom,margin.top]); const svg=d3.create("svg").attr("viewBox",`0 0 ${W} ${H}`) .style("width","100%").style("height","100%"); svg.append("g").attr("transform",`translate(0,${H-margin.bottom})`) .call(d3.axisBottom(x).ticks(5).tickFormat(metricKey==="gpp"?d3.format(".2s"):d=>`${d}%`)); svg.append("g").attr("transform",`translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(6).tickFormat(d=>`${d}%`)); svg.append("g").attr("stroke","#eef2f7").attr("stroke-width",1) .selectAll("line").data(y.ticks(6)).join("line") .attr("x1",margin.left).attr("x2",W-margin.right).attr("y1",y).attr("y2",y); svg.append("text").attr("x",(W+margin.left)/2).attr("y",H-5) .attr("text-anchor","middle").attr("font-size",11).text(m.label); svg.append("text").attr("transform",`translate(15,${H/2}) rotate(-90)`) .attr("text-anchor","middle").attr("font-size",11).text("คะแนนบัญชีรายชื่อ (%)"); const dots=svg.append("g").selectAll("circle").data(pts).join("circle") .attr("cx",d=>x(m.get(d))).attr("cy",d=>y(d.voteShare)) .attr("r",5.5).attr("fill",d=>statusColors[d.status]) .attr("fill-opacity",0.84).attr("stroke","white").attr("stroke-width",1) .style("cursor","pointer") .on("click",(event,d)=>selectProvince(d.code)); dots.append("title").text(d=>`${d.name}\nคะแนนบัญชีฯ พรรค${party}: ${f2(d.voteShare)}\n${partyListLeaderLine(d)}\n${m.label}: ${m.fmt(m.get(d))}\n${statusText[d.status]}`); updateScatter=()=>dots.attr("r",d=>d.code===selectedCode?9:5.5) .attr("stroke",d=>d.code===selectedCode?"#f59e0b":"white") .attr("stroke-width",d=>d.code===selectedCode?3:1) .attr("fill-opacity",d=>selectedCode&&d.code!==selectedCode?0.55:0.9); scatterHost.appendChild(svg.node()); const r=corr(pts,m.get); root.querySelector("[data-corr]").textContent=`แสดง ${pts.length} จังหวัด · Pearson r = ${valid(r)?r.toFixed(3):"N/A"}`; updateScatter(); } root.querySelector("[data-metric]").addEventListener("change",e=>drawScatter(e.target.value)); drawScatter("gpp"); // --- 4) Per-province pie chart is rendered lazily in drawProvincePie() on selection. // --- 5) AGE STRUCTURE: % DISTRIBUTION WITHIN EACH GROUP OF PROVINCES --- // Each panel uses its own 18+ age-group TOTAL as denominator (four non-overlapping // age bands sum to 100%). All three charts use the SAME percentage axis scale. const ageGroups=["Gen Z (18–30)","Gen Y (31–45)","Gen X (46–60)","อายุ 61+"]; const popSets=[ {title:"จังหวัดทั้งหมด",rows:provinces}, {title:"ชนะ บัญชีรายชื่อ",rows:winners}, {title:"แพ้ บัญชีรายชื่อ",rows:lostList} ].map(o=>{ const sums=ageGroups.map((_,i)=>d3.sum(o.rows,d=>valid(d.ages[i]) && d.ages[i]>=0?d.ages[i]:0)); const total=d3.sum(sums); return {...o,sums,total,shares:sums.map(count=>total>0?100*count/total:NaN)}; }); // Shared scale, rounded up to the next 5%. This makes 20-30% bars readable, // unlike a fixed 0-100% axis where all bars would appear very short. const maxAgeShare=d3.max(popSets.flatMap(p=>p.shares).filter(valid))||0; const agePctAxisMax=Math.max(35,Math.ceil(maxAgeShare/5)*5); const popHost=root.querySelector("[data-population]"); // Grayscale bars: dark gray highlights the largest age-group share in each chart. const ageBarColor = (share, maxShare) => valid(share) && valid(maxShare) && Math.abs(share - maxShare) < 1e-9 ? "#374151" // highlighted maximum: dark gray : "#9ca3af"; // other bars: medium gray for(const pop of popSets){ const maxPopShare = d3.max(pop.shares.filter(valid)); const holder=document.createElement("div");holder.className="va-pop-panel"; const title=document.createElement("div");title.className="va-pop-title"; title.textContent=`${pop.title} (${pop.rows.length} จังหวัด)`; holder.appendChild(title); const PW=400,PH=195,left=125,right=65,pTop=22,step=37; const xx=d3.scaleLinear().domain([0,agePctAxisMax]).range([left,PW-right]); const s=d3.create("svg").attr("viewBox",`0 0 ${PW} ${PH}`) .style("width","100%").style("height","auto"); s.append("text").attr("x",left).attr("y",11) .attr("font-size",10).attr("fill","#64748b").text("0%"); s.append("text").attr("x",PW-right).attr("y",11).attr("text-anchor","end") .attr("font-size",10).attr("fill","#64748b").text(`${agePctAxisMax}%`); const row=s.selectAll("g").data(ageGroups.map((name,i)=>({name,count:pop.sums[i],share:pop.shares[i],i}))) .join("g").attr("transform",(d,i)=>`translate(0,${pTop+i*step})`); row.append("text").attr("x",left-6).attr("y",17).attr("text-anchor","end") .attr("font-size",11).text(d=>d.name); row.append("rect").attr("x",left).attr("y",3).attr("height",21) .attr("width",d=>valid(d.share)?Math.max(0,xx(d.share)-left):0) .attr("fill",d=>ageBarColor(d.share, maxPopShare)); row.append("text").attr("x",d=>valid(d.share)?Math.min(PW-4,xx(d.share)+5):left+5).attr("y",18) .attr("font-size",11).attr("font-weight",600) .text(d=>valid(d.share)?`${d.share.toFixed(1)}%`:"—"); // Counts remain available on hover, but the visible labels are percentages. row.append("title").text(d=>`${d.name}: ${valid(d.share)?d.share.toFixed(1)+"%":"ไม่มีข้อมูล"} (${integer(d.count)} คน)`); holder.appendChild(s.node());popHost.appendChild(holder); } // Selected province panel: show percentage distribution, with raw counts only on hover. // The three group-comparison charts above now also display percentages. function updatePopulation() { const p = provinceByCode.get(selectedCode); const selectedPanel = root.querySelector("[data-selected-population]"); selectedPanel.hidden = !p; const barsHost = root.querySelector("[data-selected-age-bars]"); barsHost.replaceChildren(); if (!p) return; root.querySelector("[data-age-province-name]").textContent = p.name; const counts = p.ages.map(v => valid(v) && v >= 0 ? v : NaN); const complete = counts.every(valid); const total = d3.sum(counts.filter(valid)); const selectedShares = counts.map(count => valid(count) && complete && total > 0 ? count / total * 100 : NaN ); const maxSelectedShare = d3.max(selectedShares.filter(valid)); root.querySelector("[data-age-province-total]").textContent = complete && total > 0 ? "สัดส่วนอายุภายในจังหวัด (%)" : "ข้อมูลอายุบางช่วงไม่ครบ"; for (let i = 0; i < ageGroups.length; i++) { const count = counts[i]; const share = selectedShares[i]; const item = document.createElement("div"); const topline = document.createElement("div"); topline.className = "va-age-topline"; const label = document.createElement("span"); label.textContent = ageGroups[i]; const percent = document.createElement("strong"); percent.textContent = valid(share) ? f1(share) : "—"; topline.append(label, percent); const track = document.createElement("div"); track.className = "va-age-track"; const fill = document.createElement("div"); fill.className = "va-age-fill"; fill.style.backgroundColor = ageBarColor(share, maxSelectedShare); fill.style.width = `${valid(share) ? share : 0}%`; track.appendChild(fill); // Show share on the card; retain the absolute count in a hover tooltip. item.title = valid(share) ? `${ageGroups[i]}: ${f1(share)} (${integer(count)} คน)` : "ไม่มีข้อมูล"; item.append(topline,track); barsHost.appendChild(item); } root.querySelector("[data-age-province-note]").textContent = `ข้อมูลโครงสร้างประชากรระดับจังหวัด${p.name} · สัดส่วนคำนวณจาก 4 กลุ่มอายุรวมกัน`; } updatePopulation(); // Initially hidden; appears on province selection. return root; } 41:Te75,const dashboardData = await (async () => { // 🌟 1. โหลดข้อมูล CSV ทั้งหมดตรงๆ ด้วย JavaScript (แก้ปัญหา DuckDB ค้าง) const dim_province = await FileAttachment("d3_province.csv").csv({typed: true}); const dim_party = await FileAttachment("d3_party.csv").csv({typed: true}); const dim_party_summary = await FileAttachment("d3_party_summary.csv").csv({typed: true}); const fact_district = await FileAttachment("d3_district.csv").csv({typed: true}); const fact_candidates = await FileAttachment("d3_candidates.csv").csv({typed: true}); const fact_province_party = await FileAttachment("d3_province_party.csv").csv({typed: true}); const fact_district_party = await FileAttachment("d3_party.csv").csv({typed: true}); const fact_gpp_sector = await FileAttachment("d3_gpp_sector.csv").csv({typed: true}); const fact_age_gen = await FileAttachment("d3_age_generation.csv").csv({typed: true}); // 🌟 2. โหลดไฟล์ปี 66 ทั้งหมดที่เตรียมไว้ const d3_district_2566 = await FileAttachment("d3_district_2566.csv").csv({typed: true}); const d3_candidates_2566 = await FileAttachment("d3_candidates_2566.csv").csv({typed: true}); const d3_district_party_2566 = await FileAttachment("d3_district_party_2566.csv").csv({typed: true}); const d3_province_compare = await FileAttachment("d3_province_compare.csv").csv({typed: true}); const d3_district_person = await FileAttachment("d3_district_person.csv").csv({typed: true}); // 🌟 3. สร้าง Lookup Map เพื่อเชื่อมสีพรรคและชื่อจังหวัด const partyColorMap = new Map(dim_party.map(d => [String(d.party_name).trim(), d.party_color])); const provNameMap = new Map(dim_province.map(d => [String(d.province_code).trim(), d.province_name_th])); // 🌟 4. ประกอบร่างข้อมูล const districtWinners = fact_district.map(d => ({ ...d, party_color: partyColorMap.get(String(d.winner_party).trim()) || null })); const candidatesData = fact_candidates.map(d => ({ ...d, party_color: partyColorMap.get(String(d.party_name).trim()) || null })).sort((a, b) => { if (a.cons_key === b.cons_key) return a.cand_no - b.cand_no; return a.cons_key > b.cons_key ? 1 : -1; }); const districtPartyFilter = fact_district_party.map(d => ({ ...d, party_color: partyColorMap.get(String(d.party_name).trim()) || null })); const provincePartyData = fact_province_party.map(d => ({ ...d, party_color: partyColorMap.get(String(d.party_name).trim()) || null, province_name_th: provNameMap.get(String(d.province_code).trim()) || null })); const gppData = fact_gpp_sector.map(d => ({ ...d, province_name_th: provNameMap.get(String(d.province_code).trim()) || null })); const demographicData = fact_age_gen.map(d => ({ ...d, province_name_th: provNameMap.get(String(d.province_code).trim()) || null })); const partySummary = dim_party_summary.map(d => ({ ...d, party_color: partyColorMap.get(String(d.party_name).trim()) || null })); // 🌟 5. ส่งออกข้อมูลไปให้ Dashboard ใช้งาน return { districtWinners, candidatesData, districtPartyFilter, provincePartyData, gppData, demographicData, partySummary, provinceData: dim_province, // โยนไฟล์ปี 66 ออกไปรอไว้เลย d3_district_2566, d3_candidates_2566, d3_district_party_2566, d3_province_compare, d3_district_person }; })();42:[{"id":"3bbb92f1050a98d5f4bf83d963099e0c2d6d8442fbe273b0020803581e768751969f97fa965efda2dd36cb1ee94bafbec92139823dd8a154dff40d3a81019b1a","href":"https://static.observableusercontent.com/files/3bbb92f1050a98d5f4bf83d963099e0c2d6d8442fbe273b0020803581e768751969f97fa965efda2dd36cb1ee94bafbec92139823dd8a154dff40d3a81019b1a","name":"province.topojson","type":"application/octet-stream","lastModified":1794031015758,"size":1471356},{"id":"bce18169880085cdffbffe83661489abcda808139bfdee6f5b847fce981e9292f51e1ca9600fd49098025219d6f949b7a67a59de11c917930b67385514d63339","href":"https://static.observableusercontent.com/files/bce18169880085cdffbffe83661489abcda808139bfdee6f5b847fce981e9292f51e1ca9600fd49098025219d6f949b7a67a59de11c917930b67385514d63339","name":"constituency_2566.topojson","type":"application/octet-stream","lastModified":1794031006453,"size":1726745},{"id":"df9940abde7239f8c04a94b2ad12867d8fdfd9fe586bbe2c4330f929547888c34568f13e1fa2000b86ac5e48fa6856e6927f987b7aaa44172f6a89343a2870ce","href":"https://static.observableusercontent.com/files/df9940abde7239f8c04a94b2ad12867d8fdfd9fe586bbe2c4330f929547888c34568f13e1fa2000b86ac5e48fa6856e6927f987b7aaa44172f6a89343a2870ce","name":"constituency_2569.topojson","type":"application/octet-stream","lastModified":1794031011031,"size":2559891},{"id":"1c855f68eeeebe2da17de6399bdd6b1f9809237cdcddacec45f37f938b0f99259f72fbe3f538b16bfed682172db9ac8c73fbb48dd7f6240fb676b47101472da2","href":"https://static.observableusercontent.com/files/1c855f68eeeebe2da17de6399bdd6b1f9809237cdcddacec45f37f938b0f99259f72fbe3f538b16bfed682172db9ac8c73fbb48dd7f6240fb676b47101472da2","name":"d3_age_generation.csv","type":"text/csv","lastModified":1794030749595,"size":15040},{"id":"dbc24130dc517bf6cb0f3d91666a45c9de0b9405547eb8f2800213703bd6278890b345b377ccddc94137b92443290c479a87c4b03ded63af48f93a2ae7b858fa","href":"https://static.observableusercontent.com/files/dbc24130dc517bf6cb0f3d91666a45c9de0b9405547eb8f2800213703bd6278890b345b377ccddc94137b92443290c479a87c4b03ded63af48f93a2ae7b858fa","name":"d3_candidates_2566.csv","type":"text/csv","lastModified":1794030749555,"size":706396},{"id":"a8a00ad9095ff35080ada2a2dd0b7ebb66f6f5b0c7143bd965da30a55e40bb485ae513919086640c40d0519a39d3ba00b9baf0eda68ad98f0c3405c04fb66891","href":"https://static.observableusercontent.com/files/a8a00ad9095ff35080ada2a2dd0b7ebb66f6f5b0c7143bd965da30a55e40bb485ae513919086640c40d0519a39d3ba00b9baf0eda68ad98f0c3405c04fb66891","name":"d3_candidates.csv","type":"text/csv","lastModified":1794030749547,"size":431699},{"id":"18685817494243f48243f16bb8f73500ad94814e7181004bcddd2adf9245dd22e890c05ac0a35efe73c30d6af6982ed2933a050b97a98b028a586f0394ca91b4","href":"https://static.observableusercontent.com/files/18685817494243f48243f16bb8f73500ad94814e7181004bcddd2adf9245dd22e890c05ac0a35efe73c30d6af6982ed2933a050b97a98b028a586f0394ca91b4","name":"d3_district_2566.csv","type":"text/csv","lastModified":1794030749530,"size":128030},{"id":"ab26202ea4cf0bdf704590f2295069c2ac06cb27c31321a92183d5d163b92fed0f4e6b3036a86c7bdff0301c743c662a880e97c18a924a7877175fb71885f1c0","href":"https://static.observableusercontent.com/files/ab26202ea4cf0bdf704590f2295069c2ac06cb27c31321a92183d5d163b92fed0f4e6b3036a86c7bdff0301c743c662a880e97c18a924a7877175fb71885f1c0","name":"d3_district_party_2566.csv","type":"text/csv","lastModified":1794030749562,"size":2792420},{"id":"3e963913963cb844b5ddf3700c16b4e9e0f12864f8ac07ba155f34fee97f4edf1fba213b73d96380d770fe03cbc43ecb81c5a18e2f2f5298522e36d97d4987ff","href":"https://static.observableusercontent.com/files/3e963913963cb844b5ddf3700c16b4e9e0f12864f8ac07ba155f34fee97f4edf1fba213b73d96380d770fe03cbc43ecb81c5a18e2f2f5298522e36d97d4987ff","name":"d3_district_person.csv","type":"text/csv","lastModified":1794030749625,"size":63049},{"id":"e738164ed150e54c459751f6f24684f89214d11bf5597e333acdb47fbf1c0250c793eac8085fbbaeeb3d66760ee0218e7ca1d9d06791617faba36e5191c180d3","href":"https://static.observableusercontent.com/files/e738164ed150e54c459751f6f24684f89214d11bf5597e333acdb47fbf1c0250c793eac8085fbbaeeb3d66760ee0218e7ca1d9d06791617faba36e5191c180d3","name":"d3_gpp_sector.csv","type":"text/csv","lastModified":1794030749582,"size":78622},{"id":"ee62001a656a9f77fa53dcaca5fb6d4860ad1892fdc94cca95fe209c0f7805d02988f79b8e95ab75e6782cdff260cdc9d6a282eabeef9e4afd9d8ea6d0cd6951","href":"https://static.observableusercontent.com/files/ee62001a656a9f77fa53dcaca5fb6d4860ad1892fdc94cca95fe209c0f7805d02988f79b8e95ab75e6782cdff260cdc9d6a282eabeef9e4afd9d8ea6d0cd6951","name":"d3_party_summary.csv","type":"text/csv","lastModified":1794030749541,"size":4836},{"id":"cabe2e2c82a3ce2c6215449bd5eefc0805467bd199a9d191893a02cf599a845bf5ccc3be283ccaf76b8512f850e72621bc541854610570449ce160f837365494","href":"https://static.observableusercontent.com/files/cabe2e2c82a3ce2c6215449bd5eefc0805467bd199a9d191893a02cf599a845bf5ccc3be283ccaf76b8512f850e72621bc541854610570449ce160f837365494","name":"d3_province_compare.csv","type":"text/csv","lastModified":1794030749606,"size":308963},{"id":"5d76f0549b676d6c28057349ba92007b278c4a79a5f2238eaeb420551d8878587ccb8f7057c5713b9c1ea331b9e3d7ed6bc0c54ae07cc4609d98554e88745c88","href":"https://static.observableusercontent.com/files/5d76f0549b676d6c28057349ba92007b278c4a79a5f2238eaeb420551d8878587ccb8f7057c5713b9c1ea331b9e3d7ed6bc0c54ae07cc4609d98554e88745c88","name":"d3_province.csv","type":"text/csv","lastModified":1794030749580,"size":22799},{"id":"a5af79194fe40bebe21667bdf9744124ed7d6ed21c0697cb76f5fa122215a07a23cd59cd6557b2e338a21cd34382fd1c2649f06703b8e1c9c43f7ec0ffec3590","href":"https://static.observableusercontent.com/files/a5af79194fe40bebe21667bdf9744124ed7d6ed21c0697cb76f5fa122215a07a23cd59cd6557b2e338a21cd34382fd1c2649f06703b8e1c9c43f7ec0ffec3590","name":"d3_province_party.csv","type":"text/csv","lastModified":1794030749600,"size":231523},{"id":"1cd85ce1d71a958bb85c8944d3fa64886ef8d4e2fa3ff261feb8132b3c6cbdb042abd37231e391045fc8f6618badbac98dc6b20843697c7ba6f5a616ac1e014b","href":"https://static.observableusercontent.com/files/1cd85ce1d71a958bb85c8944d3fa64886ef8d4e2fa3ff261feb8132b3c6cbdb042abd37231e391045fc8f6618badbac98dc6b20843697c7ba6f5a616ac1e014b","name":"d3_district.csv","type":"text/csv","lastModified":1794030898189,"size":160775},{"id":"901c3bb0e30eb366394218b27dceaec36b5060d2ea4bb22ab9c1eb594bcd26af98daed05151ba41cd08464f251acbc4bfba30c59f79e69ec6c88975df3fa2fbd","href":"https://static.observableusercontent.com/files/901c3bb0e30eb366394218b27dceaec36b5060d2ea4bb22ab9c1eb594bcd26af98daed05151ba41cd08464f251acbc4bfba30c59f79e69ec6c88975df3fa2fbd","name":"d3_party.csv","type":"text/csv","lastModified":1794030749574,"size":4213}] 3a:{"id":"9787ff53903112db","slug":"untitled/2","title":"พรรคเราอยู่ตรงไหน","thumbnail":"02156016dc9ef73366519907bc0f8e60baf0d2c6b60665c01b70d2b152da4349","access_level":"public","create_time":"$D2026-11-07T06:42:07.570Z","update_time":"$D2026-11-07T09:09:13.221Z","view_time":null,"first_public_time":"$D2026-11-07T06:43:37.199Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"176407df7e487b8c","login":"wilawan","name":"Wilawan Tu","avatar_url":"https://avatars-next.observableusercontent.com/4804851f13b24e5849d4d52eabefb14c85dab803b06d2ba568d82ee4eb2631ec","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":704,"publish_version":704,"role":null,"authored":false,"authors":[{"type":"individual","id":"dcead57ef487fc74","login":"wilawan","name":"Wilawan Tu","avatar_url":"https://avatars-next.observableusercontent.com/4804851f13b24e5849d4d52eabefb14c85dab803b06d2ba568d82ee4eb2631ec","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"176407df7e487b8c","login":"wilawan","name":"Wilawan Tu","avatar_url":"https://avatars-next.observableusercontent.com/4804851f13b24e5849d4d52eabefb14c85dab803b06d2ba568d82ee4eb2631ec","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"พรรคเราอยู่ตรงไหน","cells":[{"id":38,"value":"{\n // 1. เช็คว่าถ้าเลือก \"ดูทุกพรรค\" ให้ใช้คำว่า \"เรา\" แต่ถ้าเลือกพรรคอื่น ให้ใช้ชื่อพรรคนั้น\n const config = (typeof dashboardConfig !== 'undefined' && dashboardConfig.party !== \"ดูทุกพรรค\")\n ? dashboardConfig.party\n : \"เรา\";\n\n // 2. ใช้ ${config} แทรกใน HTML\n return html`\n

\n พรรค${config}อยู่ตรงไหน\n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$40","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"$41","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W42","stdlib":"2"}} 35:null

The Tipping Point

สถิติความสูสีของพรรค${config.party}

1. จำนวนเขตที่${tippingMode} รายจังหวัด

2. ผลต่างคะแนนรายเขต

${chartTitle}

ผลการเลือกตั้ง (${config.mapDisplayMode})

ผลการเลือกตั้ง

ความสัมพันธ์สัดส่วนคะแนนบัตร 2 ใบ (พรรค${config.party})

เปรียบเทียบสัดส่วนเปอร์เซ็นต์รายเขต
(เรียงจากส่วนต่างน้อยสุด)

เปรียบเทียบผลปี 66 vs 69 (${config.mapDisplayMode})

สรุปเปรียบเทียบปี 66 vs 69

พรรคได้คะแนนในพื้นที่แบบไหน

คะแนนบัญชีรายชื่อ (%)

วิเคราะห์โครงสร้างพื้นที่ที่พรรคได้คะแนนบัญชีรายชื่อ

ความสัมพันธ์กับคะแนนพรรค (77 จังหวัด)

จังหวัด:

โครงสร้างเศรษฐกิจรายจังหวัด (GPP ตามภาคเศรษฐกิจ)

โครงสร้างประชากรอายุ 18 ปีขึ้นไป

โครงสร้างอายุ:

\n พรรค${config}อยู่ตรงไหน\n

The Tipping Point

สถิติความสูสีของพรรค${config.party}

1. จำนวนเขตที่${tippingMode} รายจังหวัด

2. ผลต่างคะแนนรายเขต

${chartTitle}

ผลการเลือกตั้ง (${config.mapDisplayMode})

ผลการเลือกตั้ง

ความสัมพันธ์สัดส่วนคะแนนบัตร 2 ใบ (พรรค${config.party})

เปรียบเทียบสัดส่วนเปอร์เซ็นต์รายเขต(เรียงจากส่วนต่างน้อยสุด)

เปรียบเทียบผลปี 66 vs 69 (${config.mapDisplayMode})

สรุปเปรียบเทียบปี 66 vs 69

พรรคได้คะแนนในพื้นที่แบบไหน

คะแนนบัญชีรายชื่อ (%)

วิเคราะห์โครงสร้างพื้นที่ที่พรรคได้คะแนนบัญชีรายชื่อ

ความสัมพันธ์กับคะแนนพรรค (77 จังหวัด)

จังหวัด:

โครงสร้างเศรษฐกิจรายจังหวัด (GPP ตามภาคเศรษฐกิจ)

โครงสร้างประชากรอายุ 18 ปีขึ้นไป

โครงสร้างอายุ:

\n พรรค${config}อยู่ตรงไหน\n

เปรียบเทียบสัดส่วนเปอร์เซ็นต์รายเขต
(เรียงจากส่วนต่างน้อยสุด)