31:Te98,chart = { const width = 350; const height = 400; const pack = data => d3.pack() .size([width, height]) .padding(4) (d3.hierarchy(data, d => d.values) .sum(d => 1) .sort((a, b) => b.value - a.value)); const data = _.entries(_.groupBy(representatives, r => r.party.name)) .map(([key, values]) => ({key, values})); const root = pack({ name: "root", values: data }); const partyLookup = _.keyBy(partiesWithRepresentatives, p => p.name); let focus = root; let view; const color = () => 'rgba(200,200,200,.1)'; // const color = d3.scaleLinear() // .domain([0, 5]) // .range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"]) // .interpolate(d3.interpolateHcl); const svg = d3.select(DOM.svg(width, height)) .attr("viewBox", `-${width / 2} -${height / 2} ${width} ${height}`) .style("display", "block") .style("margin", "0 -14px") .style("width", "350px") .style("height", "auto") // .style("background", color(0)) .style("cursor", "pointer") .on("click", () => zoom(root)); const node = svg.append("g") .selectAll("circle") .data(root.descendants().slice(1)) .enter().append("circle") .attr("fill", d => d.children ? color(d.depth) : d.data.party.color) .attr("pointer-events", d => !d.children ? "none" : null) .on("mouseover", function() { d3.select(this).attr("stroke", "#000"); }) .on("mouseout", function() { d3.select(this).attr("stroke", null); }) .on("click", d => focus !== d && (zoom(d), d3.event.stopPropagation())); const labelEnter = svg.append("g") .style("font", "bold 14px sans-serif") .attr("pointer-events", "none") .attr("text-anchor", "middle") .selectAll("text") .data(root.descendants()) .enter(); const text1 = labelEnter.append("text") .attr('dy', 4.5) // .attr('y', d => - d.r ) .style("fill-opacity", d => d.parent === root ? 1 : 0) .attr('stroke', 'rgba(255,255,255,0.8)') .attr('stroke-width', '4px') .style("display", d => d.parent === root ? "inline" : "none") .text(d => d.depth === 1 ? `${d.data.key} (${partyLookup[d.data.key].seats})` : ''); const text2 = labelEnter.append("text") .attr('dy', 4.5) // .attr('y', d => - d.r) .style("fill-opacity", d => d.parent === root ? 1 : 0) // .attr('stroke', 'rgba(255,255,255,0.5)') // .attr('stroke-width', '2px') .style("display", d => d.parent === root ? "inline" : "none") .text(d => d.depth === 1 ? `${d.data.key} (${partyLookup[d.data.key].seats})` : ''); function zoomTo(v) { const k = width / v[2]; view = v; text1.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`); text2.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`); node.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`); node.attr("r", d => d.r * k); } zoomTo([root.x, root.y, root.r * 2]); function zoom(d) { const focus0 = focus; focus = d; const transition = svg.transition() .duration(d3.event.altKey ? 7500 : 750) .tween("zoom", d => { const i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2]); return t => zoomTo(i(t)); }); text1 .filter(function(d) { return d.parent === focus || this.style.display === "inline"; }) .transition(transition) .style("fill-opacity", d => d.parent === focus ? 1 : 0) .on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; }) .on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; }); } return svg.node(); }32:T115b,{ const gapBetweenCouncil = 5; const senateLeftColumnCount = Math.ceil(senatorCount / COLUMN_SIZE); const senateRightColumnCount = Math.ceil((250 - senatorCount)/COLUMN_SIZE); const senateLeftWidth = senateLeftColumnCount > 0 ? senateLeftColumnCount * (R * 2 + GAP) + GAP + gapBetweenCouncil : 0; const senateRightWidth = senateRightColumnCount > 0 ? senateRightColumnCount * (R * 2 + GAP) + GAP + gapBetweenCouncil : 0; const repWidth = (500/COLUMN_SIZE) * (R * 2 + GAP) + GAP; const width = senateLeftWidth + repWidth + senateRightWidth; const height = COLUMN_SIZE * (R * 2 + GAP) + GAP; const margin = { bottom: 40, top: 10}; const svg = d3.select(DOM.svg(width, height + margin.top + margin.bottom)) const mainG = svg.append('g') .attr('transform', `translate(0, ${margin.top + 10})`); mainG.append('g').classed('senate-left-layer', true) .attr('transform', `translate(${R + GAP}, ${R + GAP})`) .selectAll('g.senator') .data(d3.range(0, senatorCount)) .enter().append('g') .classed('senator', true) .attr('transform', (i) => `translate(${Math.floor(i / COLUMN_SIZE) * (2 * R + GAP)}, ${i % COLUMN_SIZE * (2 * R + GAP)})`) .append('rect') // .attr('transform', 'rotate(45)') .attr('height', (R-1) * 2) .attr('width', (R-1) * 2) .attr('x', 1-R) .attr('y', 1-R) .attr('rx', 1) .attr('fill', selectedParty.color); mainG.append('g').classed('senate-right-layer', true) .attr('transform', `translate(${R + GAP + senateLeftWidth + gapBetweenCouncil + repWidth}, ${R + GAP})`) .selectAll('g.senator') .data(d3.range(0, 250 - senatorCount)) .enter().append('g') .classed('senator', true) .attr('transform', (i) => `translate(${Math.floor(i / COLUMN_SIZE) * (2 * R + GAP)}, ${i % COLUMN_SIZE * (2 * R + GAP)})`) .append('rect') // .attr('transform', 'rotate(45)') .attr('height', (R-1) * 2) .attr('width', (R-1) * 2) .attr('x', 1-R) .attr('y', 1-R) .attr('rx', 1) .attr('fill', '#999'); mainG.append('g').classed('rep-layer', true) .attr('transform', `translate(${R + GAP + senateLeftWidth}, ${R + GAP})`) .selectAll('g.representative') .data(groupedRepresentatives) .enter().append('g') .classed('representative', true) .attr('transform', (d, i) => `translate(${Math.floor(i / COLUMN_SIZE) * (2 * R + GAP)}, ${i % COLUMN_SIZE * (2 * R + GAP)})`) .append('circle') .attr('r', d => d.isAlly ? R - 1 : R) .attr('fill', d => !d.isAlly ? d.party.color : 'rgba(0,0,0,0)') .attr('stroke', d => d.isAlly ? selectedParty.color : 'none') .attr('stroke-width', '2px'); { const repCountForPrimeMinister = 376 - senatorCount; const cutX = senateLeftWidth + (Math.floor(repCountForPrimeMinister / COLUMN_SIZE) + 1) * (2 * R + GAP) + GAP / 2; const cutY = repCountForPrimeMinister % COLUMN_SIZE * (2 * R + GAP) + GAP / 2; const cutX2 = repCountForPrimeMinister % COLUMN_SIZE === 0 ? cutX : cutX - R*2 - GAP; mainG.append('path') .attr('d', `M${cutX},-5 L${cutX},${cutY} L${cutX2},${cutY} L${cutX2},${height}`) .attr('fill', 'none') .attr('stroke', '#000') .attr('stroke-width', '2px') .attr('stroke-dasharray', '6,4'); mainG.append('text') .attr('x', cutX) .attr('y', - 10) .attr('text-anchor', 'middle') .style('font-size', '11px') .style('font-weight', 'normal') .text('ได้เลือกนายกฯ'); } { const repCountForMajority = 251; const cutX = senateLeftWidth + (Math.floor(repCountForMajority / COLUMN_SIZE) + 1) * (2 * R + GAP) + GAP / 2; const cutY = repCountForMajority % COLUMN_SIZE * (2 * R + GAP) + GAP / 2; const cutX2 = repCountForMajority % COLUMN_SIZE === 0 ? cutX : cutX - R*2 - GAP; mainG.append('path') .attr('d', `M${cutX},0 L${cutX},${cutY} L${cutX2},${cutY} L${cutX2},${height+5}`) .attr('fill', 'none') .attr('stroke', '#000') .attr('stroke-width', '2px') .attr('stroke-dasharray', '6,4'); mainG.append('text') .attr('x', cutX) .attr('y', height + 18) .attr('text-anchor', 'middle') .style('font-size', '11px') .style('font-weight', 'normal') .text('กุมเสียงส่วนใหญ่ในสภาผู้แทนราษฎร'); } return svg.node(); }33:[] 2f:{"title":"ต้องสูตรไหนจะได้รัฐบาล? #เลือกตั้ง2562 ","cells":[{"id":0,"value":"md`# ต้องสูตรไหนจะได้รัฐบาล? #เลือกตั้ง2562 \nหน้านี้เป็นแบบจำลองให้ทำเล่นๆว่าบรรดาพรรคการเมืองจะต้องจับมือกันอย่างไรเพื่อเลือกนายกรัฐมนตรีและจัดตั้งรัฐบาล`","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"md`## 1) ระบุจำนวนส.ส. ของแต่ละพรรค`","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"viewof parties = {\n const form = html``;\n form.oninput = () => {\n const nums = rawParties.map((p, i) => {\n const num = form[`p${i}`].valueAsNumber;\n const label = form.querySelector(`.p${i}`);\n if(label) {\n label.innerText = num;\n }\n return num;\n });\n const sum = d3.sum(nums);\n const rest = 500 - sum;\n form.value = rawParties.map((p, i) => new Party(p.name, p.color, nums[i]/sum, nums[i]));\n if (rest > 0) {\n form.value.push(new Party('อื่นๆ', '#ccc', 0, rest));\n }\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"md`รวมทั้งหมด ${d3.sum(parties, p=>p.seats)} ที่นั่ง ${d3.sum(parties, p=>p.seats) > 500 ? '(เกิน! ส.ส.มีได้แค่ 500 คน)' : ''}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"md`## 2) ทดลองจัดตั้งรัฐบาล`","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"md`เงื่อนไขสู่ชัยชนะ:\n- **ผู้โหวตเลือกนายกรัฐมนตรี** คือ ส.ว. 250 คน และส.ส.จากการเลือกตั้ง 500 คน ต้องมีเสียงเกินครึ่งหนึ่ง คืออย่างน้อย 376 เสียง\n- นอกจากนั้นแล้วก็ยังต้องการเสียงส.ส.อย่างน้อย 251 เสียงเพื่อให้**มีเสียงในสภาผู้แทนราษฎรเกินครึ่ง**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"viewof selectedParty = {\n const form = html``;\n form.oninput = () => {\n form.value = parties.find(p => p.name === form.selectedParty.value);\n }\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"viewof allies = {\n const otherParties = partiesWithRepresentatives.filter(p => p !== selectedParty);\n const form = html``;\n form.oninput = () => {\n form.value = otherParties.filter((p, i) => form[`p${i}`].checked);\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"html`จำนวนเสียงที่ได้จากส.ว. ในการเลือกนายกฯ: ${senatorCount} เสียง`","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"viewof senatorCount = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"md`ข้อมูลที่คุณระบุด้านบนถูกนำมาวาดเป็นแผนภาพต่อไปนี้ โดยใช้สี่เหลี่ยมแทนส.ว. วงกลมแทนส.ส. พรรคร่วมรัฐบาลและส.ว.ที่ร่วมเลือกนายกฯจะถูกนำมาเรียงรวมกันทางด้านซ้าย จะชนะเลือกตั้งได้หรือไม่นั้น ต้องดูว่ารวมกันแล้วได้เกินเส้นประที่ขีดไว้หรือไม่`","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"{\n let htmlString = `

${selectedParty.name} (${selectedParty.representativeCount()})

`;\n\n if (senatorCount > 0) {\n htmlString = `

ส.ว.ที่ร่วมเลือกนายกฯ (${senatorCount})

` + htmlString;\n }\n \n if (alliesSeatCount > 0) {\n htmlString += `

พรรคร่วมรัฐบาลอื่นๆ (${alliesSeatCount})

`;\n }\n return html`${htmlString}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"{\n const toElectPrimeMinister = 376 - (selectedParty.seats + alliesSeatCount + senatorCount);\n const toWinRepCouncil = 251 - (selectedParty.seats + alliesSeatCount);\n if (canElectPrimeMinister && canWinRepCouncil) {\n return html`ผล: ได้จัดตั้งรัฐบาล!`\n } else if (canElectPrimeMinister) {\n return html`ผล: มีเสียงพอเลือกนายกฯ แต่ไม่ได้เสียงส่วนใหญ่ในสภา (ขาดอีก ${toWinRepCouncil})`\n } else if (canWinRepCouncil) {\n return html`ผล: ได้เสียงข้างมากในสภา แต่ไม่ได้เลือกนายกฯ (ขาดอีก ${toElectPrimeMinister})!`\n } else {\n return html`ผล: ได้เสียงไม่พอ (ขาดอีก ${toElectPrimeMinister} เพื่อเลือกนายกฯ และ ขาดอีก ${toWinRepCouncil} เพื่อให้ได้เสียงข้างมากในสภาฯ)`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"rawParties = {\n const parties = [\n new Party('ชาติไทยพัฒนา', '#1F5D52', 0.038),\n new Party('เพื่อไทย', '#DE0505', 0.25),\n new Party('อนาคตใหม่', '#F47932'),\n new Party('ไทยรักษาชาติ', '#FA9BCC'),\n new Party('รวมพลังประชาชาติไทย', '#F6CD4A'),\n new Party('พลังประชารัฐ', '#546D40', 0.25),\n new Party('ประชาธิปัตย์', '#40BDE7', 0.20),\n new Party('ภูมิใจไทย', '#005FFF', 0.068),\n new Party('ประชาชาติ', '#0C3B86'),\n new Party('เพื่อชาติ', '#7077C5'),\n new Party('เพื่อธรรม', '#EB1970'),\n ];\n const sum = d3.sum(parties, p => p.estimatedVote);\n const partiesWithoutEstimate = parties.filter(p => p.estimatedVote === 0);\n const spread = (1 - sum) / partiesWithoutEstimate.length;\n partiesWithoutEstimate.forEach(p => { p.estimatedVote = spread; p.vote = spread; });\n return parties;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"partiesWithRepresentatives = parties.filter(p => p.representativeCount() >= 1)\n .sort((a, b) => b.seats - a.seats);","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"representatives = _.flatMap(partiesWithRepresentatives\n .map((p, i) => d3.range(0, p.representativeCount()).map(j => ({\n party: p,\n partyIndex: i,\n index: j\n }))));","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"alliesSet = new Set(allies.map(p => p.name));","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"alliesSeatCount = d3.sum(partiesWithRepresentatives.filter(p => alliesSet.has(p.name)), p => p.seats)","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"canElectPrimeMinister = (selectedParty.seats + senatorCount + alliesSeatCount) > 375;","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"canWinRepCouncil = (selectedParty.seats + alliesSeatCount) > 250;","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"groupedRepresentatives = {\n return representatives.filter(r => r.party === selectedParty)\n .map(r => ({ ...r, isSelected: true }))\n .concat(representatives.filter(r => alliesSet.has(r.party.name))\n .map(r => ({ ...r, isAlly: true })))\n .concat(representatives.filter(r => r.party !== selectedParty && !alliesSet.has(r.party.name)));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"allies","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"class Party {\n constructor(name, color, estimatedVote = 0, seats = 0) {\n this.name = name;\n this.color = color;\n this.estimatedVote = estimatedVote;\n this.seats = seats;\n }\n \n representativeCount() {\n return this.seats;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"_ = require('lodash');","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"R = 4;","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"GAP = 3;","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"COLUMN_SIZE = 25","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"html`${partiesWithRepresentatives.map((p, i) => `

${p.name} (${p.representativeCount()})

`)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"{\n const svg = d3.select(DOM.svg(50 * R * 2 + 51 * GAP + partiesWithRepresentatives.length * R, COLUMN_SIZE * (R * 2+GAP) + GAP));\n svg.append('g')\n .attr('transform', `translate(${R + GAP}, ${R + GAP})`)\n .selectAll('g.representative')\n .data(representatives)\n .enter().append('g')\n .classed('representative', true)\n .attr('transform', (d, i) => `translate(${Math.floor(i / COLUMN_SIZE) * (2 * R + GAP) + d.partyIndex * R}, ${i % COLUMN_SIZE * (2 * R + GAP)})`)\n .append('circle')\n .attr('r', R)\n .attr('fill', d => d.party.color)\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}