44:["$","title",null,{"children":"พรรคประชาชนอยู่ตรงไหน | Wilawan Tu | Observable"}] 4c:T2933,{ const config = typeof dashboardConfig !== 'undefined' ? dashboardConfig : { mapMode: "หน้าแรก", party: "ดูทุกพรรค" }; const displayParty = config?.party !== "ดูทุกพรรค" ? config?.party : "เรา"; const isDefault = config?.party === "ดูทุกพรรค"; // 1. นำเข้าข้อมูลจาก DuckDB const districtWinners = Array.from(dashboardData?.districtWinners || []); const partySummary = Array.from(dashboardData?.partySummary || []); const districtPartyFilter = Array.from(dashboardData?.districtPartyFilter || []); const totalDistricts = 400; // ข้อมูลฐานปี 2566 const stats66 = { eligible: 52195920, turnout: 39514973, turnoutPct: 75.22, validPct: 94.12 }; // 2. คำนวณสถิติปี 2569 let totalEligible = 0; let totalTurnout = 0; let sumInvalidPct = 0; let totalCloseRaces = 0; let totalDiscrepancy = 0; districtWinners.forEach(d => { const eligible = Number(d.eligible_voters) || 0; const turnoutPct = Number(d.turnout_pct) || 0; const invalidPct = Number(d.invalid_pct) || 0; const margin = Number(d.margin_pct_pt) || 100; totalEligible += eligible; totalTurnout += (eligible * turnoutPct) / 100; sumInvalidPct += invalidPct; if (margin < 5) totalCloseRaces++; const winner = String(d.winner_party || "").trim(); const plLeader = String(d.pl_leader_party || "").trim(); if (winner !== "" && plLeader !== "" && winner !== plLeader) { totalDiscrepancy++; } }); const avgValidPct = totalDistricts > 0 ? 100 - (sumInvalidPct / totalDistricts) : 0; const turnoutPctOverall = totalEligible > 0 ? (totalTurnout / totalEligible) * 100 : 0; // 3. คำนวณสถิติเฉพาะพรรค let partyTotalVotes = 0; let partyListTotalVotes = 0; let partyWins = 0; let partyCloseWin = 0; let partyCloseLoss = 0; let partySeatsChange = 0; let partyListDistrictsWon = 0; let isOldParty = false; if (!isDefault) { const pSummary = partySummary.find(d => String(d.party_name).trim() === config.party) || {}; partyTotalVotes = Number(pSummary.cons_votes) || 0; partyListTotalVotes = Number(pSummary.pl_votes) || 0; // ดึงสถานะว่าเป็นพรรคเก่าที่มีในปี 66 หรือไม่ isOldParty = String(pSummary.existed_2566).toLowerCase() === 'true'; // Mapping แปลงชื่อพรรค 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 selectedParty66 = (typeof partyNameMap !== 'undefined') ? (partyNameMap[config.party] || config.party) : config.party; let seats66 = 0; districtWinners.forEach(d => { const winner = String(d.winner_party || "").trim(); const runnerUp = String(d.runnerup_party || "").trim(); const winner66 = String(d.winner_party_2566 || "").trim(); const marginPt = Number(d.margin_pct_pt) || 100; const isComparable = String(d.comparable_with_2566).toLowerCase() === 'true'; //นับที่นั่งชนะปี 69 if (winner === config.party) partyWins++; //นับที่นั่งชนะปี 66 if (isComparable && winner66 === selectedParty66) { seats66++; } //นับเขตที่ชนะและแพ้อย่างสูสี if (marginPt < 5) { if (winner === config.party) partyCloseWin++; if (runnerUp === config.party) partyCloseLoss++; } }); // คำนวณผลต่างที่นั่ง (ปี 69 ลบ ปี 66) partySeatsChange = partyWins - seats66; // นับจำนวนเขตที่ชนะแบบบัญชีรายชื่อ partyListDistrictsWon = districtWinners.filter(d => String(d.pl_leader_party).trim() === config.party).length; } // 4. จัดเตรียมข้อความ (Text Logic) let descriptionHtml = ""; const numFmt = d3.format(","); const pctFmt = d3.format(".1f"); // โหมดที่ 1: หน้าแรก if (config.mapMode === "หน้าแรก") { if (isDefault) { descriptionHtml = `ในการเลือกตั้งปี 2569 มีผู้มีสิทธิ์เลือกตั้ง ${numFmt(Math.round(totalEligible))} คน
มาใช้สิทธิ์เลือกตั้ง ${numFmt(Math.round(totalTurnout))} คน คิดเป็น ${pctFmt(turnoutPctOverall)}% มีสัดส่วนบัตรดี ${pctFmt(avgValidPct)} %`; } else { if (partyWins === 0) { descriptionHtml = `พรรค${config.party} ได้รับคะแนนเสียง ${numFmt(partyTotalVotes)} คะแนน`; } else { const winPct = (partyWins / totalDistricts) * 100; descriptionHtml = `พรรค${config.party} มีส.ส.แบบแบ่งเขต ${numFmt(partyWins)} ที่นั่ง คิดเป็น ${pctFmt(winPct)}%`; } } } // โหมดที่ 2: Margin of victory else if (config.mapMode === "Margin of victory") { if (isDefault) { descriptionHtml = `มากกว่า ${numFmt(totalCloseRaces)} เขตที่มีผลการเลือกตั้งที่สูสีกัน`; } else { if (partyCloseWin > 0 || partyCloseLoss > 0) { descriptionHtml = `มีจำนวน ${numFmt(partyCloseLoss)} เขตที่พรรค${config.party} มีโอกาสชนะได้ และมีจำนวน ${numFmt(partyCloseWin)} เขตที่พรรค${config.party} มีโอกาสแพ้`; } else if (partyWins > 0) { const winPct = (partyWins / totalDistricts) * 100; descriptionHtml = `พรรค${config.party} มีส.ส.แบบแบ่งเขต ${numFmt(partyWins)} ที่นั่ง คิดเป็น ${pctFmt(winPct)}%`; } else { descriptionHtml = `พรรค${config.party} ได้รับคะแนนเสียง ${numFmt(partyTotalVotes)} คะแนน`; } } } // โหมดที่ 3: ผลเลือกตั้งเปลี่ยนไปอย่างไรจากปี 2566 else if (config.mapMode === "ผลเลือกตั้งเปลี่ยนไปอย่างไรจากปี 2566") { if (isDefault) { // คำนวณส่วนต่างระหว่างปี 69 และ 66 const diffTurnout = totalTurnout - stats66.turnout; const diffTurnoutPct = turnoutPctOverall - stats66.turnoutPct; const diffValidPct = avgValidPct - stats66.validPct; const txtTurnoutDir = diffTurnout >= 0 ? "เพิ่มขึ้น" : "ลดลง"; const txtValidDir = diffValidPct >= 0 ? "เพิ่มขึ้น" : "ลดลง"; descriptionHtml = `เมื่อเปรียบเทียบระหว่างผลการเลือกตั้งปี 2566 และ 2569 มีผู้มาใช้สิทธิ์เลือกตั้ง${txtTurnoutDir} ${numFmt(Math.round(Math.abs(diffTurnout)))} คน
คิดเป็น ${pctFmt(Math.abs(diffTurnoutPct))}% สัดส่วนบัตรดี${txtValidDir} ${pctFmt(Math.abs(diffValidPct))} %`; } else { if (isOldParty) { const txtDir = partySeatsChange >= 0 ? "เพิ่มขึ้น" : "ลดลง"; const winPct = (Math.abs(partySeatsChange) / totalDistricts) * 100; descriptionHtml = `พรรค${config.party} มีส.ส.แบบแบ่งเขต${txtDir} ${numFmt(Math.abs(partySeatsChange))} ที่นั่ง คิดเป็น ${pctFmt(winPct)}%`; } else { descriptionHtml = `พรรค${config.party} ได้รับคะแนนเสียง ${numFmt(partyTotalVotes)} คะแนน`; } } } // โหมดที่ 4: บัตรสองใบ ใจสองขั้ว else if (config.mapMode === "บัตรสองใบ ใจสองขั้ว") { if (isDefault) { const diffPct = (totalDiscrepancy / totalDistricts) * 100; descriptionHtml = `เมื่อเปรียบเทียบผลการเลือกตั้งระหว่างแบบแบ่งเขตและแบบบัญชีรายชื่อพบว่าไม่ตรงกันมากถึง ${pctFmt(diffPct)} %`; } else { if (partyWins === 0 && partyListDistrictsWon === 0) { descriptionHtml = `พรรค${config.party} ได้รับคะแนนเสียงแบบแบ่งเขต ${numFmt(partyTotalVotes)} คะแนน และแบบบัญชีรายชื่อ ${numFmt(partyListTotalVotes)} คะแนน`; } else { const diffDiff = Math.abs(partyWins - partyListDistrictsWon); const diffPct = (diffDiff / totalDistricts) * 100; descriptionHtml = `พรรค${config.party} มีส.ส.แบ่งเขต ${numFmt(partyWins)} ที่นั่ง และแบบบัญชีรายชื่อ ${numFmt(partyListDistrictsWon)} เขต คิดเป็นผลต่าง ${pctFmt(diffPct)}%`; } } } // 5. แปลง String เป็น HTML Element const textNode = document.createElement("span"); textNode.innerHTML = descriptionHtml; // 6. แสดงผล UI return html`

พรรค${displayParty}อยู่ตรงไหน

${textNode}

`; }4d:Tfaf,viewof dashboardConfig = { // 1. ดึงรายชื่อพรรคจาก dashboardData 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 = [ "หน้าแรก", "Margin of victory", "ผลเลือกตั้งเปลี่ยนไปอย่างไรจากปี 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; }4e:T73b7,{ const config = dashboardConfig; // เปิดหน้าใหม่เมื่อเลือก Tab พรรคได้คะแนนในพื้นที่แบบไหน if (config.mapMode === "พรรคได้คะแนนในพื้นที่แบบไหน") { return voterAnalysisDashboard(config, dashboardData); } // 1. นำเข้าข้อมูล 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 || []); // 1.1 สร้าง Mapping สีพรรคแบบไดนามิก 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; } }); 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) { const p = parts[0].padStart(2, '0'); const d = parts[1].padStart(2, '0'); const y = parts[2]; return `${y}-${p}-${d}`; } } return k; }; // 1.2 สร้าง Mapping แปลงชื่อพรรค 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; } }); // 2. จัดเตรียมข้อมูลสำหรับ Tooltip และ Legend const candMap = d3.group(candidatesData, d => fixConsKey(d.cons_key)); const distPartyMap = d3.group(districtPartyFilter, 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; }); // 3. สร้าง Layout const container = html`

`; // 4. ตั้งค่า Grid Map const tileSize = 12; const 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"); // 5. วาด Grid Map 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 => { const winnerConst = String(d.winner_party || "").trim(); const winnerList = String(d.pl_leader_party || "").trim(); const runnerUp = String(d.runnerup_party || "").trim(); const winner66 = String(d.winner_party_2566 || "").trim(); const marginPt = Number(d.margin_pct_pt) || 100; const changeStatus = String(d.change_66_69 || "").trim(); const baseColor = partyColors[winnerConst] || "#94a3b8"; if (config.mapMode === "หน้าแรก") { if (config.party === "ดูทุกพรรค") return baseColor; return winnerConst === config.party ? baseColor : "#e2e8f0"; } else if (config.mapMode === "Margin of victory") { const isClose = marginPt < 5; if (config.party === "ดูทุกพรรค") { return isClose ? baseColor : "#e2e8f0"; } else { if (!isClose) return "#e2e8f0"; if (winnerConst === config.party) return "#ef4444"; if (runnerUp === config.party) return "#22c55e"; return "#e2e8f0"; } } else if (config.mapMode === "ผลเลือกตั้งเปลี่ยนไปอย่างไรจากปี 2566") { const isComparable = String(d.comparable_with_2566).toLowerCase() === 'true'; if (!isComparable) return "#e2e8f0"; if (config.party === "ดูทุกพรรค") { return changeStatus === "เปลี่ยนพรรค" ? "#f59e0b" : "#e2e8f0"; } else { const selectedParty66 = partyNameMap[config.party] || config.party; const win66 = (winner66 === selectedParty66); const win69 = (winnerConst === config.party); if (win66 && !win69) return "#ef4444"; if (!win66 && win69) return "#22c55e"; return "#e2e8f0"; } } else if (config.mapMode === "บัตรสองใบ ใจสองขั้ว") { if (config.party === "ดูทุกพรรค") { return (winnerList !== winnerConst) ? (partyColors[winnerList] || "#333") : "#e2e8f0"; } else { const winConst = winnerConst === config.party; const winList = winnerList === config.party; if (winConst && !winList) return "#ef4444"; if (!winConst && winList) return "#22c55e"; return "#e2e8f0"; } } return "#e2e8f0"; }); // 6. ใส่ Tooltip mapPaths.append("title").text(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) || []; 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") { const c1 = cands[0]; const c2 = cands[1]; if (c1) { const name1 = c1.candidate_name ? `${c1.candidate_name} ` : ""; txt += `ลำดับที่ 1 ${name1}(${c1.party_name}) : ${Number(c1.vote_share_pct || 0).toFixed(2)}%\n`; } if (c2) { const name2 = c2.candidate_name ? `${c2.candidate_name} ` : ""; txt += `ลำดับที่ 2 ${name2}(${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 isComparable = String(d.comparable_with_2566).toLowerCase() === 'true'; const winner66 = String(d.winner_party_2566 || "ไม่มีข้อมูล").trim(); const winner69 = String(d.winner_party || "").trim(); const winner69Mapped = partyNameMap[winner69] || winner69; const isSameParty = (winner66 === winner69Mapped); let changeStatus = String(d.change_66_69 || "").trim(); if (!changeStatus) { changeStatus = isSameParty ? "พรรคเดิม" : "เปลี่ยนพรรค"; } if (!isComparable) { txt += `เขตเลือกตั้งนี้ไม่สามารถเทียบปี 66 ได้\n`; } else { txt += `แชมป์ปี 66: ${winner66}\n`; txt += `แชมป์ปี 69: ${winner69}\n`; txt += `สถานะ: ${changeStatus}\n`; } txt += `-------------------------\n`; cands.slice(0, 5).forEach((c, i) => { const name = c.candidate_name ? `${c.candidate_name} ` : ""; txt += `${i + 1}. ${name}(${c.party_name}) : ${Number(c.votes || 0).toLocaleString()} คะแนน\n`; }); } else if (config.mapMode === "บัตรสองใบ ใจสองขั้ว") { const winnerConst = String(d.winner_party || "").trim(); const winnerList = String(d.pl_leader_party || "").trim(); const isSplit = winnerConst !== winnerList; txt += `ชนะแบ่งเขต: ${winnerConst}\n`; txt += `ชนะบัญชีฯ: ${winnerList}\n`; txt += `สถานะ: ${isSplit ? "เลือกคนละพรรค (Split Ticket)" : "เลือกพรรคเดียวกัน"}\n`; txt += `-------------------------\n`; // ดึงคะแนนบัญชีรายชื่อจาก Mapping ที่จัดเตรียมไว้ const dpList = distPartyMap.get(currentConsKey) || []; const plVotesByParty = {}; dpList.forEach(dp => { plVotesByParty[String(dp.party_name).trim()] = Number(dp.pl_votes || 0); }); cands.slice(0, 5).forEach((c, i) => { const name = c.candidate_name ? `${c.candidate_name} ` : ""; const party = String(c.party_name).trim(); const constVotes = Number(c.votes || 0).toLocaleString(); const listVotes = Number(plVotesByParty[party] || 0).toLocaleString(); // ดึงคะแนน Party List txt += `${i + 1}. ${name}(${party})\n`; txt += ` เขต: ${constVotes} | บัญชีฯ: ${listVotes} คะแนน\n`; }); } else { cands.slice(0, 5).forEach((c, i) => { const name = c.candidate_name ? `${c.candidate_name} ` : ""; txt += `${i + 1}. ${name}(${c.party_name}) : ${Number(c.votes || 0).toLocaleString()} คะแนน\n`; }); } return txt; } return `ไม่มีข้อมูล`; }); // 7. ชื่อจังหวัด (Text Labels) 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"); // zoom 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); })); const leftMapContainer = container.querySelector("#left-map"); leftMapContainer.appendChild(svg.node()); // 8. วาดกล่อง Legend const legendDiv = document.createElement("div"); legendDiv.style.position = "absolute"; legendDiv.style.bottom = "20px"; legendDiv.style.right = "20px"; legendDiv.style.background = "white"; legendDiv.style.padding = "12px"; legendDiv.style.borderRadius = "8px"; legendDiv.style.border = "1px solid #cbd5e1"; legendDiv.style.boxShadow = "0 2px 4px rgba(0,0,0,0.1)"; legendDiv.style.fontSize = "12px"; legendDiv.style.pointerEvents = "auto"; legendDiv.style.zIndex = "10"; legendDiv.style.minWidth = "200px"; if (config.mapMode === "หน้าแรก") { const sorted = Object.keys(partyWinsConst).filter(p => partyWinsConst[p] > 0).sort((a,b) => partyWinsConst[b] - partyWinsConst[a]); legendDiv.innerHTML = `

จำนวนเขตที่ชนะ

${sorted.map(p => ` `).join('')}

สี	พรรค	แบ่งเขต
	${p}	${partyWinsConst[p]}

`; leftMapContainer.appendChild(legendDiv); } else if (config.mapMode === "ผลเลือกตั้งเปลี่ยนไปอย่างไรจากปี 2566" && config.party !== "ดูทุกพรรค") { legendDiv.innerHTML = `

เทียบผลปี 2566

ได้ที่นั่งเพิ่ม (แพ้ ➔ ชนะ)

เสียที่นั่ง (ชนะ ➔ แพ้)

คงเดิม (ชนะ-ชนะ / แพ้-แพ้)

`; leftMapContainer.appendChild(legendDiv); } else if (config.mapMode === "ผลเลือกตั้งเปลี่ยนไปอย่างไรจากปี 2566" && config.party === "ดูทุกพรรค") { legendDiv.innerHTML = `

การเปลี่ยนพรรค

เปลี่ยนพรรค

พรรคเดิม

`; leftMapContainer.appendChild(legendDiv); } else if (config.mapMode === "บัตรสองใบ ใจสองขั้ว") { if (config.party === "ดูทุกพรรค") { const sorted = Object.keys(partyWinsConst).concat(Object.keys(partyWinsList)) .filter((value, index, self) => self.indexOf(value) === index && (partyWinsConst[value] > 0 || partyWinsList[value] > 0)) .sort((a, b) => (partyWinsConst[b] || 0) - (partyWinsConst[a] || 0)); legendDiv.innerHTML = `

จำนวนเขตที่ชนะเปรียบเทียบ

${sorted.map(p => ` `).join('')}

สี	พรรค	แบ่งเขต	บัญชีฯ
	${p}	${partyWinsConst[p] \|\| 0}	${partyWinsList[p] \|\| 0}

`; } else { legendDiv.innerHTML = `

เปรียบเทียบบัตร 2 ใบ

บัญชีฯ ชนะ (เขตแพ้)

เขตชนะ (บัญชีฯแพ้)

ชนะทั้งคู่ / แพ้ทั้งคู่

`; } leftMapContainer.appendChild(legendDiv); } else if (config.mapMode === "Margin of victory" && config.party !== "ดูทุกพรรค") { legendDiv.innerHTML = `

Margin of Victory (< 5 จุด)

เกือบแพ้ (นำเป็นที่ 1)

เกือบชนะ (ตามเป็นที่ 2)

`; leftMapContainer.appendChild(legendDiv); } // 9. ฝั่งขวา: ฟังก์ชันวาดกราฟ function drawRightCharts(provinceName) { const rightDiv = container.querySelector("#right-charts"); rightDiv.innerHTML = ""; // 0. เตรียมข้อมูลจาก d3_province const provinceData = Array.from(dashboardData?.provinceData || []); const allProvinces = provinceData.filter(d => String(d.province_code) !== "0"); let chartProvinces = []; let chartTitle = ""; const isPartyFilterActive = (config.party !== "ดูทุกพรรค"); // ========================================== // คัดกรองจังหวัดตามพรรคที่ชนะบัญชีรายชื่อ (ดึงจาก pl_leader_party) // ========================================== if (isPartyFilterActive) { // กรองเอาเฉพาะจังหวัดที่พรรคที่เลือกเป็นที่ 1 บัญชีรายชื่อ chartProvinces = allProvinces.filter(d => String(d.pl_leader_party).trim() === config.party); if (chartProvinces.length > 0) { chartTitle = provinceName === "ทั่วราชอาณาจักร" ? `ภาพรวม: ${chartProvinces.length} จังหวัดที่พรรค${config.party}ชนะบัญชีรายชื่อ` : `เจาะลึก: จังหวัด${provinceName} (ในกลุ่มชนะบัญชีรายชื่อ)`; } else { chartTitle = `พรรค${config.party} ไม่ชนะบัญชีรายชื่อในจังหวัดใดเลย`; } } else { chartProvinces = allProvinces; chartTitle = provinceName === "ทั่วราชอาณาจักร" ? `ภาพรวม: ทั่วราชอาณาจักร` : `เจาะลึก: จังหวัด${provinceName}`; } rightDiv.appendChild(html`

${chartTitle}

`); // ถ้าเลือกพรรค แต่พรรคนั้นไม่ชนะบัญชีรายชื่อเลย ให้โชว์กล่องเปล่า if (isPartyFilterActive && chartProvinces.length === 0) { rightDiv.appendChild(html`

ไม่มีข้อมูลแสดงผล

`); return; } //เรียงลำดับชื่อจังหวัดตามตัวอักษร ก-ฮ chartProvinces.sort((a, b) => String(a.province_name_th).trim().localeCompare(String(b.province_name_th).trim(), 'th')); // เก็บรายชื่อจังหวัดที่เรียงแล้วไว้สำหรับเป็น Domain ของแกน X const XDomain = chartProvinces.map(d => String(d.province_name_th).trim()); // -------------------------------------------------- // 1. Economic Sector // -------------------------------------------------- const ecoData = []; chartProvinces.forEach(d => { const pName = String(d.province_name_th).trim(); ecoData.push({ province: pName, sector: "เกษตร", share: Number(d.agri_share_pct) || 0 }); ecoData.push({ province: pName, sector: "อุตสาหกรรม", share: Number(d.industry_share_pct) || 0 }); ecoData.push({ province: pName, sector: "บริการ", share: Number(d.services_share_pct) || 0 }); }); const ecoChartWidth = Math.max(800, chartProvinces.length * 24); const ecoChart = Plot.plot({ width: ecoChartWidth, height: 250, marginLeft: 40, marginRight: 20, marginBottom: 80, x: { domain: XDomain, reverse: false,tickRotate: -45, label: null }, y: { label: "สัดส่วน (%)" }, color: { domain: ["เกษตร", "อุตสาหกรรม", "บริการ"], range: ["#22c55e", "#f59e0b", "#3b82f6"], legend: true }, marks: [ Plot.barY(ecoData, {x: "province", y: "share", fill: "sector", tip: true}), // Highlight เฉพาะจังหวัดที่ถูกคลิก Plot.barY(chartProvinces.filter(d => String(d.province_name_th).trim() === provinceName), { x: d => String(d.province_name_th).trim(), y: 100, stroke: "#0f172a", strokeWidth: 3, fillOpacity: 0 }) ] }); const ecoBox = html`

1. สัดส่วนเศรษฐกิจ (Economic Sector)

${ecoChart}

`; rightDiv.appendChild(ecoBox); // -------------------------------------------------- // 2. GPP (Gross Provincial Product) // -------------------------------------------------- const meanGpp = d3.mean(chartProvinces, d => Number(d.gpp_per_capita_baht) || 0); const gppChartWidth = Math.max(800, chartProvinces.length * 24); const gppChart = Plot.plot({ width: gppChartWidth, height: 250, marginLeft: 60, marginRight: 20, marginBottom: 80, x: { domain: XDomain, reverse: false,tickRotate: -45, label: null}, y: { label: "GPP ต่อหัว (บาท)", tickFormat: "s" }, marks: [ Plot.barY(chartProvinces, { x: d => String(d.province_name_th).trim(), y: d => Number(d.gpp_per_capita_baht) || 0, fill: d => String(d.province_name_th).trim() === provinceName ? "#ef4444" : "#cbd5e1", tip: true }), Plot.ruleY([meanGpp], { stroke: "#ef4444", strokeDasharray: "4", strokeWidth: 2 }), Plot.text([meanGpp], { x: 0, dy: -5, text: d => `ค่าเฉลี่ย: ${d3.format(",")(Math.round(meanGpp))} บาท`, fill: "#ef4444", textAnchor: "start" }) ] }); const gppBox = html`

2. GPP (Gross Provincial Product)

${gppChart}

`; rightDiv.appendChild(gppBox); // -------------------------------------------------- // 3. โครงสร้างประชากร (Sum ภายในกลุ่ม) // -------------------------------------------------- let sumGenZ = 0, sumGenY = 0, sumGenX = 0, sumBoomer = 0; if (provinceName !== "ทั่วราชอาณาจักร") { const selectedProvData = chartProvinces.find(d => String(d.province_name_th).trim() === provinceName) || {}; sumGenZ = Number(selectedProvData.pop_18_30_genz) || 0; sumGenY = Number(selectedProvData.pop_31_45_geny) || 0; sumGenX = Number(selectedProvData.pop_46_60_genx) || 0; sumBoomer = Number(selectedProvData.pop_61plus) || 0; } else { chartProvinces.forEach(d => { sumGenZ += Number(d.pop_18_30_genz) || 0; sumGenY += Number(d.pop_31_45_geny) || 0; sumGenX += Number(d.pop_46_60_genx) || 0; sumBoomer += Number(d.pop_61plus) || 0; }); } const popDataPlot = [ { gen: "Gen Z (18-30)", count: sumGenZ }, { gen: "Gen Y (31-45)", count: sumGenY }, { gen: "Gen X (46-60)", count: sumGenX }, { gen: "Baby Boomers (61+)", count: sumBoomer } ]; const popChart = Plot.plot({ width: 400, height: 200, marginLeft: 120, x: { label: "จำนวนประชากร (คน)", tickFormat: "s", grid: true }, y: { label: null, domain: popDataPlot.map(d => d.gen) }, marks: [ Plot.barX(popDataPlot, {x: "count", y: "gen", fill: "#8b5cf6", tip: true}) ] }); const pyramidBox = html`

3. โครงสร้างประชากรผู้มีสิทธิ์เลือกตั้ง

${popChart}

`; rightDiv.appendChild(pyramidBox); } drawRightCharts("ทั่วราชอาณาจักร"); // 10. ระบบ Brushing/Linking mapPaths.on("click", (event, d) => { event.stopPropagation(); if(d.province_name_th) { const provName = String(d.province_name_th).trim(); drawRightCharts(provName); mapPaths.attr("stroke", p => p.province_name_th === d.province_name_th ? "#000" : "#fff") .attr("stroke-width", p => p.province_name_th === d.province_name_th ? 1.5 : 0.5); } }); svg.on("click", () => { drawRightCharts("ทั่วราชอาณาจักร"); mapPaths.attr("stroke", "#ffffff") .attr("stroke-width", 0.5); }); return container; }4f:Tc641, function voterAnalysisDashboard(config, dashboardData) { const party = String(config?.party || "ดูทุกพรรค").trim(); if (party === "ดูทุกพรรค" || !party) { return html`

วิเคราะห์ voters

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

`; } // --- 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), // พรรคคะแนนบัญชีรายชื่ออันดับหนึ่งของจังหวัด 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)] }; }); // District-level party-list share uses fact_district_party.pl_share_pct (NOT the province percentage). // Normalize cons_key defensively because DuckDB may return Date objects for date-like keys. const consKey = v => { if (v instanceof Date) { return `${v.getFullYear()}-${String(v.getMonth()+1).padStart(2,"0")}-${String(v.getDate()).padStart(2,"0")}`; } const k = str(v); if (/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(k)) { const [m,d,y] = k.split("/"); return `${y}-${m.padStart(2,"0")}-${d.padStart(2,"0")}`; } return k; }; const allDistrictPartyRows = Array.from(dashboardData?.districtPartyFilter || []); const districtPartyRows = allDistrictPartyRows.filter(d => str(d.party_name) === party); // ไม่ใช้ชื่อพรรคที่เลือกแทนชื่อผู้ชนะ; อ้างอิง pl_leader_party หรือ pl_rank=1 เท่านั้น const leaderByDistrictKey = d3.rollup( allDistrictPartyRows.filter(d => num(d.pl_rank) === 1 && str(d.party_name)), rows => Array.from(new Set(rows.map(d => str(d.party_name)))).join(" / "), d => consKey(d.cons_key) ); const districtShareByKey = new Map(districtPartyRows.map(d => [consKey(d.cons_key), d])); const districts = districtRows.map(d => { const match = districtShareByKey.get(consKey(d.cons_key)); return { ...d, code: code(d.province_code), consKey: consKey(d.cons_key), consNo: Number(d.cons_no), plLeaderParty: str(d.pl_leader_party) || leaderByDistrictKey.get(consKey(d.cons_key)) || "", voteShare: match ? num(match.pl_share_pct) : NaN, votes: match ? num(match.pl_votes) : NaN }; }); const districtsByProvince = d3.group(districts, d => d.code); const provinceByCode = new Map(provinces.map(d => [d.code, d])); const partyListLeaderLine = p => `พรรคอันดับหนึ่งบัญชีรายชื่อ: ${p?.plLeaderParty || "ไม่มีข้อมูล"}`; // 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(1)}%` : "—"; 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 ปีขึ้นไป

เปรียบเทียบสัดส่วนประชากร (%) ของแต่ละช่วงอายุภายในกลุ่มจังหวัดนั้น ๆ · ทั้ง 3 กราฟใช้สเกลเปอร์เซ็นต์เดียวกัน · คลิกจังหวัดบนแผนที่หรือ Scatterplot เพื่อดูสัดส่วนอายุของจังหวัดที่เลือก

ทุกกราฟแสดงสัดส่วน (%) โดยใช้ผลรวมประชากร 4 ช่วงอายุของกลุ่มนั้นเป็น 100% ไม่ใช่สัดส่วนคะแนนเสียง · กลุ่มที่ 2 (ชนะบัญชีรายชื่อ) และกลุ่มที่ 3 (ไม่เป็นอันดับหนึ่งบัญชีรายชื่อ) เป็นคนละกลุ่มจังหวัด · ข้อมูลอายุไม่บอกว่าคนวัยใดลงคะแนนให้พรรคใด

`; // Update all five header KPIs from the selected party (not hard-coded). for (const [k, value] of Object.entries({wins:winners.length,agri:counts.agri,industry:counts.industry,services:counts.services,avg:f2(averageWin)})) { root.querySelector(`[data-stat="${k}"]`).textContent = String(value); } root.querySelector('[data-ratio="wins"]').textContent = `${winners.length}/${provinces.length}`; root.querySelector('[data-pct="wins"]').textContent = ratioPct(winners.length, provinces.length); for (const sector of ["agri", "services", "industry"]) { root.querySelector(`[data-ratio="${sector}"]`).textContent = `${counts[sector]}/${sectorTotals[sector]}`; root.querySelector(`[data-pct="${sector}"]`).textContent = ratioPct(counts[sector], sectorTotals[sector]); } root.querySelector('[data-ratio="avg"]').textContent = `${winners.length} จังหวัด`; // --- 2) INTERACTIVE PROVINCE OVERVIEW + DISTRICT DRILL-DOWN --- const mapHost = root.querySelector("[data-map]"); let mapLevel = "province"; let selectedCode = null; let selectedDistrictKey = 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)}`; const d=selectedDistrictKey?districts.find(x=>x.consKey===selectedDistrictKey):null; root.querySelector("[data-selected-note]").textContent=d ? `เลือก ${p.name} เขต ${d.consNo} (${f2(d.voteShare)}, ${voteCount(d.votes)}) · GPP ต่อหัวและ Pie Chart เป็นข้อมูลระดับจังหวัด · GPP ปี 2024p` : "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; selectedDistrictKey = null; updateSelections(); } function selectDistrict(d) { selectedCode = d.code; selectedDistrictKey = d.consKey; updateSelections(); } root.querySelector("[data-reset]").addEventListener("click", () => selectProvince(null)); root.querySelector("[data-clear-province]").addEventListener("click", () => selectProvince(null)); const districtTiles = districts.filter(d => valid(num(d.x_coordinate)) && valid(num(d.y_coordinate))); const uniqueCoordinates = new Set(districtTiles.map(d => `${d.x_coordinate}:${d.y_coordinate}`)); const existingCoordinatesAvailable = districtTiles.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(); // In fallback mode the 400-tile list is scrollable; keep its first row visible. mapHost.style.justifyContent = existingCoordinatesAvailable ? "center" : "flex-start"; const rows = mapLevel === "province" ? provinces : districts; const values = rows.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 = mapLevel === "province" ? "77 จังหวัด: ใช้คะแนนบัญชีรายชื่อรวมทุกเขต รายจังหวัด" : `${districts.length} เขต: ใช้คะแนนบัญชีรายชื่อรายเขต`; root.querySelectorAll("[data-level]").forEach(btn => btn.setAttribute("aria-pressed", String(btn.dataset.level===mapLevel))); if (existingCoordinatesAvailable) { // Preserve the teammate's original 400-tile geography. In province mode each // district tile receives its PROVINCE share; in district mode use DISTRICT share. const block=13, size=11; const maxX = d3.max(districtTiles,d=>num(d.x_coordinate)) || 0; const maxY = d3.max(districtTiles,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(districtTiles).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(mapLevel==="province" ? provinceByCode.get(d.code)?.voteShare : d.voteShare)) .style("cursor","pointer") .on("click",(event,d)=>{ event.stopPropagation(); if (mapLevel==="district") selectDistrict(d); else selectProvince(d.code); }); rects.append("title").text(d=>{ const p=provinceByCode.get(d.code); return mapLevel==="province" ? `${p?.name || ""}\nคะแนนบัญชีรายชื่อของพรรค${party}: ${f2(p?.voteShare)} (ระดับจังหวัด)\n${partyListLeaderLine(p)}` : `${p?.name || ""} เขต ${d.consNo}\nคะแนนบัญชีรายชื่อของพรรค${party}: ${f2(d.voteShare)} (${integer(d.votes)} คะแนน)\n${partyListLeaderLine(d)}`; }); const provLabelRows=d3.rollup(districtTiles,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)*block:num(d.x_coordinate)*block) .attr("y",d=>valid(num(d.y_text_coordinate))?num(d.y_text_coordinate)*block: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=>{ if (selectedDistrictKey && mapLevel==="district") return d.consKey===selectedDistrictKey?"#f59e0b":"#fff"; return selectedCode && d.code===selectedCode ? "#f59e0b":"#fff"; }) .attr("stroke-width",d=>{ if (selectedDistrictKey && mapLevel==="district") return d.consKey===selectedDistrictKey?2.8:0.5; return 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()); root.querySelector("[data-mapnote]").textContent = mapLevel==="province" ? "ช่องหลายเขตในจังหวัดเดียวกันใช้สีคะแนนรวมระดับจังหวัดเดียวกัน" : "สีของแต่ละช่องคำนวณจากคะแนนบัญชีรายชื่อจริงของเขตนั้น ไม่ใช่คะแนนเฉลี่ยจังหวัด"; } else { // Fallback when the CSVs supplied to the notebook do not contain tile coordinates. // Province mode: 77 province buttons. District mode: 400 constituency buttons // grouped by province/region (NOT geographic district boundaries). 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 sorted=[...items].sort((a,b)=>a.name.localeCompare(b.name,"th")); if (mapLevel === "province") { const tiles=document.createElement("div");tiles.className="va-region-tiles"; 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,key:null}); } sec.appendChild(tiles); } else { const tileGroups=document.createElement("div");tileGroups.className="va-district-provinces"; for (const p of sorted) { const block=document.createElement("div");block.className="va-district-province"; const label=document.createElement("div");label.className="va-district-prov-title"; label.textContent=p.name; const tiles=document.createElement("div");tiles.className="va-district-tiles"; const provinceDistricts=[...(districtsByProvince.get(p.code)||[])].sort((a,b)=>a.consNo-b.consNo); for (const d of provinceDistricts) { const b=document.createElement("button");b.type="button";b.className="va-district-tile"; b.textContent=String(d.consNo);b.title=`${p.name} เขต ${d.consNo}\nคะแนนบัญชีรายชื่อของพรรค${party}: ${f2(d.voteShare)} (${integer(d.votes)} คะแนน)\n${partyListLeaderLine(d)}`; b.style.backgroundColor=color(d.voteShare); b.style.color=valid(d.voteShare)&&d.voteShare>(vMin+vMax)/2?"#fff":"#102139"; b.addEventListener("click",()=>selectDistrict(d)); tiles.appendChild(b);buttons.push({button:b,code:d.code,key:d.consKey}); } block.append(label,tiles);tileGroups.appendChild(block); } sec.appendChild(tileGroups); } wrap.appendChild(sec); } mapHost.appendChild(wrap); updateMap=()=>buttons.forEach(d=>d.button.setAttribute("aria-pressed",String( selectedDistrictKey && mapLevel==="district" ? d.key===selectedDistrictKey : selectedCode!==null && d.code===selectedCode ))); root.querySelector("[data-mapnote]").textContent = mapLevel==="province" ? "แสดง 77 จังหวัดเป็น Tile Grid ตามภูมิภาค เพราะไฟล์นี้ไม่มีพิกัดแผนที่ (ไม่ใช่ขอบเขตภูมิศาสตร์)" : "แสดงครบ 400 เขต โดยจัดกลุ่มตามจังหวัดและภูมิภาค เพราะไฟล์นี้ไม่มีพิกัดแผนที่รายเขต"; } updateMap(); } root.querySelectorAll("[data-level]").forEach(btn => btn.addEventListener("click",()=>{ if (btn.dataset.level === mapLevel) return; mapLevel=btn.dataset.level; selectedDistrictKey=null; renderMap(); updateSelections(); })); renderMap(); updateDetail(); // Panel remains hidden until the user selects a province or district. // --- 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:"77 จังหวัดทั้งหมด",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]"); const ageColors=["#8b5cf6","#7c3aed","#6d28d9","#5b21b6"]; for(const pop of popSets){ 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=>ageColors[d.i]); 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. // District selections use the demographics of their parent province. 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)); root.querySelector("[data-age-province-total]").textContent = complete && total > 0 ? "สัดส่วนอายุภายในจังหวัด (%)" : "ข้อมูลอายุบางช่วงไม่ครบ"; for (let i = 0; i < ageGroups.length; i++) { const count = counts[i]; const share = valid(count) && complete && total > 0 ? count / total * 100 : NaN; 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 = ageColors[i]; 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 = selectedDistrictKey ? `เลือกเขตเลือกตั้งใน${p.name} · โครงสร้างอายุเป็นข้อมูลรวมระดับจังหวัด ไม่ใช่ระดับเขต` : `ข้อมูลโครงสร้างประชากรระดับจังหวัด${p.name} · สัดส่วนคำนวณจาก 4 กลุ่มอายุรวมกัน`; } updatePopulation(); // Initially hidden; appears on first province/district selection. return root; } 50:Tcf0,const dashboardData = await (async () => { // 1. Initialize DuckDB const db = await DuckDBClient.of({ dim_province: FileAttachment("d3_province.csv"), dim_party: FileAttachment("d3_party.csv"), dim_party_summary: FileAttachment("d3_party_summary.csv"), fact_district: FileAttachment("d3_district.csv"), fact_candidates: FileAttachment("d3_candidates.csv"), fact_province_party: FileAttachment("d3_province_party.csv"), fact_district_party: FileAttachment("d3_district_party.csv"), fact_gpp_sector: FileAttachment("d3_gpp_sector.csv"), fact_age_gen: FileAttachment("d3_age_generation.csv") }); // 2. Query // Q1-Q4: ข้อมูลเขตเลือกตั้งผู้ชนะ, ผลต่างคะแนน (Join กับตารางพรรคเพื่อดึงสี) const districtWinners = await db.query(` SELECT d.*, p.party_color FROM fact_district d LEFT JOIN dim_party p ON d.winner_party = p.party_name `); // Q1: ข้อมูลผู้สมัครรายบุคคล (Tooltip) const candidatesData = await db.query(` SELECT c.*, p.party_color FROM fact_candidates c LEFT JOIN dim_party p ON c.party_name = p.party_name ORDER BY c.cons_key, c.cand_no `); // Q2-Q4: ข้อมูลพรรคย่อยระดับเขต (สำหรับ Filter เลือกพรรคดู margin/swing) const districtPartyFilter = await db.query(` SELECT dp.*, p.party_color FROM fact_district_party dp LEFT JOIN dim_party p ON dp.party_name = p.party_name `); // ข้อมูลผลรวมระดับจังหวัด (Q1 ระดับจังหวัด + Filter พรรค) const provincePartyData = await db.query(` SELECT pp.*, p.party_color, prov.province_name_th FROM fact_province_party pp LEFT JOIN dim_party p ON pp.party_name = p.party_name LEFT JOIN dim_province prov ON pp.province_code = prov.province_code `); // Q6: ข้อมูลเศรษฐกิจ GPP สัดส่วนและมูลค่า const gppData = await db.query(` SELECT g.*, prov.province_name_th FROM fact_gpp_sector g LEFT JOIN dim_province prov ON g.province_code = prov.province_code `); // Q7: ข้อมูลโครงสร้างอายุประชากรแยกชาย-หญิง const demographicData = await db.query(` SELECT a.*, prov.province_name_th FROM fact_age_gen a LEFT JOIN dim_province prov ON a.province_code = prov.province_code `); // หน้าภาพรวมรายพรรค และยอดนับ Q4 const partySummary = await db.query(` SELECT s.*, p.party_color FROM dim_party_summary s LEFT JOIN dim_party p ON s.party_name = p.party_name `); const provinceData = await db.query(`SELECT * FROM dim_province`); // 3. ส่งออกข้อมูลทั้งหมดเป็นก้อนเดียว return { districtWinners, candidatesData, districtPartyFilter, provincePartyData, gppData, demographicData, partySummary, provinceData }; })();51:[{"id":"ee62001a656a9f77fa53dcaca5fb6d4860ad1892fdc94cca95fe209c0f7805d02988f79b8e95ab75e6782cdff260cdc9d6a282eabeef9e4afd9d8ea6d0cd6951","href":"https://static.observableusercontent.com/files/ee62001a656a9f77fa53dcaca5fb6d4860ad1892fdc94cca95fe209c0f7805d02988f79b8e95ab75e6782cdff260cdc9d6a282eabeef9e4afd9d8ea6d0cd6951","name":"d3_party_summary.csv","type":"text/csv","lastModified":1793357252035,"size":4836},{"id":"bce18169880085cdffbffe83661489abcda808139bfdee6f5b847fce981e9292f51e1ca9600fd49098025219d6f949b7a67a59de11c917930b67385514d63339","href":"https://static.observableusercontent.com/files/bce18169880085cdffbffe83661489abcda808139bfdee6f5b847fce981e9292f51e1ca9600fd49098025219d6f949b7a67a59de11c917930b67385514d63339","name":"constituency_2566.topojson","type":"application/octet-stream","lastModified":1793371511180,"size":1726745},{"id":"df9940abde7239f8c04a94b2ad12867d8fdfd9fe586bbe2c4330f929547888c34568f13e1fa2000b86ac5e48fa6856e6927f987b7aaa44172f6a89343a2870ce","href":"https://static.observableusercontent.com/files/df9940abde7239f8c04a94b2ad12867d8fdfd9fe586bbe2c4330f929547888c34568f13e1fa2000b86ac5e48fa6856e6927f987b7aaa44172f6a89343a2870ce","name":"constituency_2569.topojson","type":"application/octet-stream","lastModified":1793371511181,"size":2559891},{"id":"1c855f68eeeebe2da17de6399bdd6b1f9809237cdcddacec45f37f938b0f99259f72fbe3f538b16bfed682172db9ac8c73fbb48dd7f6240fb676b47101472da2","href":"https://static.observableusercontent.com/files/1c855f68eeeebe2da17de6399bdd6b1f9809237cdcddacec45f37f938b0f99259f72fbe3f538b16bfed682172db9ac8c73fbb48dd7f6240fb676b47101472da2","name":"d3_age_generation.csv","type":"text/csv","lastModified":1793357252093,"size":15040},{"id":"a8a00ad9095ff35080ada2a2dd0b7ebb66f6f5b0c7143bd965da30a55e40bb485ae513919086640c40d0519a39d3ba00b9baf0eda68ad98f0c3405c04fb66891","href":"https://static.observableusercontent.com/files/a8a00ad9095ff35080ada2a2dd0b7ebb66f6f5b0c7143bd965da30a55e40bb485ae513919086640c40d0519a39d3ba00b9baf0eda68ad98f0c3405c04fb66891","name":"d3_candidates.csv","type":"text/csv","lastModified":1793357252066,"size":431699},{"id":"6d92a576332cef57b8e29f2fde3130189aace73779121c7d0d525512cd83ff5d3247e565d392d12e9f8e9f7eb09229e83746cc5579f6388c6e8b956132cd2bcd","href":"https://static.observableusercontent.com/files/6d92a576332cef57b8e29f2fde3130189aace73779121c7d0d525512cd83ff5d3247e565d392d12e9f8e9f7eb09229e83746cc5579f6388c6e8b956132cd2bcd","name":"d3_district_party.csv","type":"text/csv","lastModified":1793357252169,"size":3852008},{"id":"e738164ed150e54c459751f6f24684f89214d11bf5597e333acdb47fbf1c0250c793eac8085fbbaeeb3d66760ee0218e7ca1d9d06791617faba36e5191c180d3","href":"https://static.observableusercontent.com/files/e738164ed150e54c459751f6f24684f89214d11bf5597e333acdb47fbf1c0250c793eac8085fbbaeeb3d66760ee0218e7ca1d9d06791617faba36e5191c180d3","name":"d3_gpp_sector.csv","type":"text/csv","lastModified":1793357252129,"size":78622},{"id":"5d76f0549b676d6c28057349ba92007b278c4a79a5f2238eaeb420551d8878587ccb8f7057c5713b9c1ea331b9e3d7ed6bc0c54ae07cc4609d98554e88745c88","href":"https://static.observableusercontent.com/files/5d76f0549b676d6c28057349ba92007b278c4a79a5f2238eaeb420551d8878587ccb8f7057c5713b9c1ea331b9e3d7ed6bc0c54ae07cc4609d98554e88745c88","name":"d3_province.csv","type":"text/csv","lastModified":1793357252079,"size":22799},{"id":"a5af79194fe40bebe21667bdf9744124ed7d6ed21c0697cb76f5fa122215a07a23cd59cd6557b2e338a21cd34382fd1c2649f06703b8e1c9c43f7ec0ffec3590","href":"https://static.observableusercontent.com/files/a5af79194fe40bebe21667bdf9744124ed7d6ed21c0697cb76f5fa122215a07a23cd59cd6557b2e338a21cd34382fd1c2649f06703b8e1c9c43f7ec0ffec3590","name":"d3_province_party.csv","type":"text/csv","lastModified":1793357252136,"size":231523},{"id":"3bbb92f1050a98d5f4bf83d963099e0c2d6d8442fbe273b0020803581e768751969f97fa965efda2dd36cb1ee94bafbec92139823dd8a154dff40d3a81019b1a","href":"https://static.observableusercontent.com/files/3bbb92f1050a98d5f4bf83d963099e0c2d6d8442fbe273b0020803581e768751969f97fa965efda2dd36cb1ee94bafbec92139823dd8a154dff40d3a81019b1a","name":"province.topojson","type":"application/octet-stream","lastModified":1793371511181,"size":1471356},{"id":"1cd85ce1d71a958bb85c8944d3fa64886ef8d4e2fa3ff261feb8132b3c6cbdb042abd37231e391045fc8f6618badbac98dc6b20843697c7ba6f5a616ac1e014b","href":"https://static.observableusercontent.com/files/1cd85ce1d71a958bb85c8944d3fa64886ef8d4e2fa3ff261feb8132b3c6cbdb042abd37231e391045fc8f6618badbac98dc6b20843697c7ba6f5a616ac1e014b","name":"d3_district.csv","type":"text/csv","lastModified":1793427137635,"size":160775},{"id":"b813d8322ba046b676255b42229a9fe92f9e6a2b78f23ce7e0aa23cc5491724932faaffd4cb1778e213811f7c17e645697b1186b479b5c0630f2c4e5e4f472cc","href":"https://static.observableusercontent.com/files/b813d8322ba046b676255b42229a9fe92f9e6a2b78f23ce7e0aa23cc5491724932faaffd4cb1778e213811f7c17e645697b1186b479b5c0630f2c4e5e4f472cc","name":"d3_party.csv","type":"text/csv","lastModified":1793517747659,"size":4278}] 48:{"id":"5b51ca136deaa5ec","slug":"th-election-mockup-2","title":"พรรคประชาชนอยู่ตรงไหน","thumbnail":"e05ccb2dcc9fe14ad407d4ea61ef4e8e2b7627e330316dcb27cd7c546dc28087","access_level":"public","create_time":"$D2026-11-01T09:30:39.961Z","update_time":"$D2026-11-01T18:01:07.185Z","view_time":null,"first_public_time":"$D2026-11-01T17:31:25.990Z","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":630,"publish_version":630,"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":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$4f","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$50","pinned":false,"hidden":true,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"2"}} 24:null