https://www.visualizing.org/assets/ParliamentChart-CI-W7M7G.js

1import{j as e,L as l}from"./vendor-react-CVijXI0n.js";import{S as h,b as p,h as u,a as b}from"./index-D0o2Sutv.js";import{C as f}from"./ChartBreadcrumb-BOBTh6lg.js";import{C as g,b as v}from"./ChartFAQ-DwXxlpIj.js";const r="https://www.visualizing.org",x=[{q:"What is a parliament chart?",a:"A parliament chart (also called a hemicycle diagram) is a semicircular arrangement of individual dots, each representing one seat in a legislative body. Dots are coloured by party or faction to show the distribution of political power."},{q:"When should you use a parliament chart?",a:"Use a parliament chart when showing seat distribution in a legislature or council. It also works well when you want the audience to count individual units (seats, votes), and when visualizing coalition possibilities — which parties sum to a majority."},{q:"When should you avoid a parliament chart?",a:"Avoid a parliament chart when data isn't about discrete, countable units. It is also a poor fit when you have hundreds of seats — dots become too small to distinguish, or when precise percentage comparison is the goal — use a bar chart."},{q:"What data do you need to make a parliament chart?",a:"A list of parties with their seat counts and colours. The total seats determine how many dots to draw."},{q:"How is a parliament chart different from a waffle chart?",a:"Both a parliament chart and a waffle chart can look similar at first glance, but they answer different questions. Reach for a parliament chart when the comparisons and patterns it was designed to reveal match what you need to communicate, and choose a waffle chart when its particular strengths better fit your data and audience."},{q:"What is another name for a parliament chart?",a:"Parliament Chart is also known as Hemicycle diagram, semicircle seat chart. The name varies between fields, but the visualisation technique is the same."},{q:"What size of dataset works best for a parliament chart?",a:"Parliament Chart works best for Legislative seat distribution, coalition analysis. Outside that range the chart either looks empty or becomes too cluttered to read clearly."},{q:"Are parliament charts accessible to screen readers?",a:"Yes — a parliament chart can be made accessible to screen readers by pairing it with a clear text summary of the key insight, ensuring color choices meet WCAG contrast guidelines, adding descriptive alt text or aria-label to the SVG, and offering the underlying data as an HTML table fallback for assistive technologies."}],y=v("/parliament-chart",x),j={"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":`${r}/parliament-chart/#webpage`,url:`${r}/parliament-chart`,name:"Parliament Chart — The Definitive Guide",description:"Learn what a parliament chart is, how to read one, when to use it for seat distribution, and common mistakes to avoid.",isPartOf:{"@id":`${r}/#website`},breadcrumb:{"@id":`${r}/parliament-chart/#breadcrumb`},mainEntity:{"@id":`${r}/parliament-chart/#article`},inLanguage:"en"},p({slug:"/parliament-chart",caption:"Example parliament chart",width:620,height:280}),{"@type":["Article","LearningResource"],"@id":`${r}/parliament-chart/#article`,mainEntityOfPage:{"@id":`${r}/parliament-chart/#webpage`},headline:"Parliament Chart: Definition, How to Read, and When to Use",description:"A complete reference guide to parliament charts.",image:{"@id":u("/parliament-chart")},datePublished:"2025-03-15",dateModified:"2026-04-08",publisher:{"@id":`${r}/#organization`},inLanguage:"en",educationalLevel:"beginner",learningResourceType:"reference",teaches:["How to read parliament charts","When to use parliament charts for seat distribution"],competencyRequired:"Basic understanding of proportions",timeRequired:"PT10M",isAccessibleForFree:!0,audience:{"@type":"EducationalAudience",educationalRole:"student"},about:{"@id":`${r}/parliament-chart/#term`},keywords:["parliament chart","hemicycle","seat distribution","political visualization","part-to-whole"]},{"@type":"DefinedTerm","@id":`${r}/parliament-chart/#term`,name:"Parliament Chart",description:"A semicircular arrangement of dots representing individual seats in a legislature, coloured by party affiliation to show the distribution of political power.",inDefinedTermSet:{"@id":`${r}/chart-types/#termset`},termCode:"parliament-chart",url:`${r}/parliament-chart`},{"@type":"DefinedTermSet","@id":`${r}/chart-types/#termset`,name:"Data Visualization Chart Types",url:`${r}/chart-types`},b("/parliament-chart"),y]},w=[{id:"the-chart",label:"The chart"},{id:"what-is-it",label:"What is it?"},{id:"anatomy",label:"Anatomy"},{id:"when-to-use",label:"When to use it"},{id:"how-to-read",label:"How to read it"},{id:"data-format",label:"Data format"},{id:"construction",label:"Construction"},{id:"common-mistakes",label:"Common mistakes"},{id:"real-world-examples",label:"Real-world examples"},{id:"key-facts",label:"Quick reference"},{id:"accessibility",label:"Accessibility"},{id:"variations",label:"Variations"},{id:"faqs",label:"FAQs"},{id:"related-charts",label:"Related charts"}];function k(){const t=[],a=[8,12,16,20,24],s=["#c94a2e","#c94a2e","#c94a2e","#e8c4b8","#e8c4b8","#f5ede9","#f5ede9","#f0e4e0"];let o=0;for(let i=0;i<a.length;i++){const n=a[i],d=60+i*22;for(let c=0;c<n;c++){const m=Math.PI-Math.PI*(c+.5)/n;t.push({cx:310+d*Math.cos(m),cy:180+d*Math.sin(m)*-1,fill:s[o%s.length]}),o++}}return t}const N=k();function T(){return e.jsxs(e.Fragment,{children:[e.jsx(h,{title:"Parliament Chart: What It Is, When To Use It & Examples",description:"Parliament Chart guide: what it is, when to use it for part-to-whole analysis, real examples, common pitfalls, and tools to build one yourself.",path:"/parliament-chart",ogType:"article",jsonLd:[j]}),e.jsx(f,{slug:"/parliament-chart"}),e.jsxs("div",{className:"max-w-[1100px] mx-auto px-6 md:px-12",children:[e.jsxs("div",{className:"py-[56px] pb-[48px] border-b border-[var(--border-color)]",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-5",children:[e.jsx("span",{className:"font-mono text-[10px] tracking-[0.12em] uppercase bg-[var(--accent-light)] text-[var(--accent-color)] px-[10px] py-[4px] rounded-[3px] font-medium",children:"Part-to-whole"}),e.jsx("span",{className:"font-mono text-[10px] tracking-[0.10em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[10px] py-[4px] rounded-[3px]",children:"Beginner"})]}),e.jsx("h1",{className:"font-serif text-[42px] md:text-[52px] font-normal tracking-[-0.025em] leading-[1.1] text-[var(--ink)] mb-4",children:"Parliament Chart"}),e.jsx("p",{className:"text-[17px] md:text-[19px] font-light text-[var(--ink-muted)] leading-[1.6] max-w-[640px]",children:"A hemicycle of coloured dots representing individual seats — the iconic 

1way to show political seat distribution, coalition sizes, and majority thresholds at a glance."})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-[1fr_280px] gap-16 pt-12 items-start",children:[e.jsxs("div",{className:"min-w-0",children:[e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"the-chart",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 01 — The chart"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"What it looks like"}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[12px] p-6 md:p-10 mt-8 mb-2",children:[e.jsxs("div",{className:"font-mono text-[10px] tracking-[0.10em] uppercase text-[var(--ink-faint)] mb-6 flex justify-between items-center",children:[e.jsxs("span",{children:["Example — ",e.jsx("em",{className:"not-italic text-[var(--accent-color)] font-medium",children:"Legislative seat distribution"})]}),e.jsx("span",{children:"2025 election"})]}),e.jsxs("svg",{viewBox:"0 0 620 220",xmlns:"http://www.w3.org/2000/svg",className:"w-full block",children:[N.map((t,a)=>e.jsx("circle",{cx:t.cx,cy:t.cy,r:"7",fill:t.fill,stroke:"#fff",strokeWidth:"1"},a)),e.jsx("text",{x:"310",y:"200",textAnchor:"middle",fill:"#1a1a18",fontSize:"18",fontFamily:"Playfair Display, serif",fontWeight:"600",children:"80"}),e.jsx("text",{x:"310",y:"215",textAnchor:"middle",fill:"#b0b0aa",fontSize:"10",fontFamily:"DM Mono, monospace",children:"total seats"})]}),e.jsx("div",{className:"flex gap-4 justify-center mt-4",children:[{c:"#c94a2e",l:"Party A — 30"},{c:"#e8c4b8",l:"Party B — 25"},{c:"#f5ede9",l:"Party C — 15"},{c:"#f0e4e0",l:"Independent — 10"}].map(({c:t,l:a})=>e.jsxs("div",{className:"flex items-center gap-2 text-[12px] text-[var(--ink-muted)]",children:[e.jsx("span",{className:"w-3 h-3 rounded-full",style:{background:t}}),a]},a))}),e.jsx("p",{className:"text-[13px] text-[var(--ink-muted)] text-center italic mt-4",children:"A parliament chart showing 80 seats distributed across four parties. Seats are arranged in concentric semicircular rows, coloured by party affiliation."})]})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"what-is-it",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 02 — Definition"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"What is a parliament chart?"}),e.jsxs("div",{className:"text-[16px] font-light text-[var(--ink)] leading-[1.75]",children:[e.jsx("p",{children:"A parliament chart (also called a hemicycle diagram) is a semicircular arrangement of individual dots, each representing one seat in a legislative body. Dots are coloured by party or faction to show the distribution of political power."}),e.jsx("p",{className:"mt-[18px]",children:"The layout mimics the physical seating of many real-world parliaments — parties sit together in arcs, with the ruling coalition typically on one side and the opposition on the other. This makes the chart immediately intuitive for anyone familiar with democratic institutions."}),e.jsx("p",{className:"mt-[18px]",children:"Beyond politics, parliament charts can represent any scenario where individual units need to be grouped and counted — board votes, jury composition, or committee membership."})]}),e.jsx("div",{className:"bg-[var(--accent-light)] border-l-[3px] border-l-[var(--accent-color)] rounded-r-[8px] px-5 py-4 mt-6",children:e.jsxs("p",{className:"text-[14px] text-[var(--ink)] leading-[1.65] font-light",children:[e.jsx("strong",{className:"font-medium text-[var(--accent-color)]",children:"Fun fact:"})," The parliament chart became a staple of election coverage thanks to Wikipedia, which maintains hemicycle diagrams for virtually every national legislature. The open-source tool “parliament-svg” and similar libraries made generation easy."]})})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"anatomy",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 03 — Anatomy"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"Parts of a parliament chart"}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[12px] p-6 md:p-10 mt-8",children:[e.jsxs("svg",{viewBox:"0 0 580 200",xmlns:"http://www.w3.org/2000/svg",className:"w-full block",children:[[6,10,14].map((t,a)=>{const s=50+a*25;return Array.from({length:t},(o,i)=>{const n=Math.PI-Math.PI*(i+.5)/t;return e.jsx("circle",{cx:290+s*Math.cos(n),cy:140-s*Math.sin(n),r:"8",fill:i<t*.4?"#c94a2e":i<t*.7?"#e8c4b8":"#f5ede9",stroke:"#fff",strokeWidth:"1.5"},`${a}-${i}`)})}).flat(),e.jsx("line",{x1:"100",y1:"50",x2:"180",y2:"70",stroke:"#c94a2e",strokeWidth:"1.2"}),e.jsx("circle",{cx:"98",cy:"48",r:"4",fill:"#c94a2e"}),e.jsx("text",{x:"80",y:"42",fill:"#c94a2e",fontSize:"10",fontFamily:"DM Mono, monospace",children:"A"}),e.jsx("line",{x1:"290",y1:"145",x2:"290",y2:"170",stroke:"#2e7d52",strokeWidth:"1.2",strokeDasharray:"3,2"}),e.jsx("circle",{cx:"290",cy:"172",r:"4",fill:"#2e7d52"}),e.jsx("text",{x:"290",y:"190",textAnchor:"middle",fill:"#2e7d52",fontSize:"10",fontFamily:"DM Mono, monospace",children:"B"}),e.jsx("line",{x1:"430",y1:"70",x2:"470",y2:"45",stroke:"#6b6b67",strokeWidth:"1.2"}),e.jsx("circle",{cx:"472",cy:"43",r:"4",fill:"#6b6b67"}),e.jsx("text",{x:"480",y:"40",fill:"#6b6b67",fontSize:"10",fontFamily:"DM Mono, monospace",children:"C"}),e.jsx("line",{x1:"290",y1:"30",x2:"290",y2:"10",stroke:"#6b6b67",strokeWidth:"1.2",strokeDasharray:"3,2"}),e.jsx("circle",{cx:"290",cy:"8",r:"4",fill:"#6b6b67"}),e.jsx("text",{x:"290",y:"0",textAnchor:"middle",fill:"#6b6b67",fontSize:"10",fontFamily:"DM Mono, monospace",children:"D"})]}),e.jsx("div",{className:"flex flex-wrap gap-3 mt-7",children:[{color:"#c94a2e",label:"A — Seat (dot):",desc:"Each dot represents one seat. Its colour shows party/faction membership."}

1,{color:"#2e7d52",label:"B — Center area:",desc:"The open center, often used to display the total seat count or majority threshold."},{color:"#6b6b67",label:"C — Party cluster:",desc:"Adjacent dots of the same colour form a visual group showing that party's seat count."},{color:"#6b6b67",label:"D — Row (arc):",desc:"Seats arranged in concentric semicircular rows, filling from inner to outer."}].map((t,a)=>e.jsxs("div",{className:"flex items-center gap-2 bg-[var(--bg-alt)] rounded-[4px] px-[14px] py-2 text-[13px]",children:[e.jsx("span",{className:"w-[10px] h-[10px] rounded-full shrink-0",style:{background:t.color}}),e.jsxs("span",{className:"text-[var(--ink-muted)]",children:[e.jsx("strong",{className:"text-[var(--ink)] font-medium",children:t.label})," ",t.desc]})]},a))})]})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"when-to-use",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 04 — Usage"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"When to use it — and when not to"}),e.jsxs("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-5 mt-7",children:[e.jsxs("div",{className:"bg-[var(--green-light)] border border-[var(--green-border)] rounded-[10px] p-6",children:[e.jsxs("div",{className:"flex items-center gap-2 font-medium text-[14px] text-[var(--green)] mb-4",children:[e.jsx("span",{className:"w-[22px] h-[22px] rounded-full bg-[var(--green)] text-white flex items-center justify-center text-[12px] shrink-0",children:"✓"}),"Use a parliament chart when…"]}),e.jsx("ul",{className:"flex flex-col gap-[10px] list-none",children:["Showing seat distribution in a legislature or council","You want the audience to count individual units (seats, votes)","Visualizing coalition possibilities — which parties sum to a majority","The data maps naturally to a hemicycle (legislative bodies, committees)","Creating engaging election coverage infographics"].map((t,a)=>e.jsx("li",{className:"text-[14px] text-[var(--ink)] leading-[1.5] pl-4 relative font-light before:content-['—'] before:absolute before:left-0 before:text-[var(--ink-faint)]",children:t},a))})]}),e.jsxs("div",{className:"bg-[var(--red-light)] border border-[var(--red-border)] rounded-[10px] p-6",children:[e.jsxs("div",{className:"flex items-center gap-2 font-medium text-[14px] text-[var(--red)] mb-4",children:[e.jsx("span",{className:"w-[22px] h-[22px] rounded-full bg-[var(--red)] text-white flex items-center justify-center text-[12px] shrink-0",children:"×"}),"Avoid a parliament chart when…"]}),e.jsx("ul",{className:"flex flex-col gap-[10px] list-none",children:["Data isn't about discrete, countable units","You have hundreds of seats — dots become too small to distinguish","Precise percentage comparison is the goal — use a bar chart",`The metaphor of "seating" doesn't apply to your context`,"You need to show change over time — use paired charts instead"].map((t,a)=>e.jsx("li",{className:"text-[14px] text-[var(--ink)] leading-[1.5] pl-4 relative font-light before:content-['—'] before:absolute before:left-0 before:text-[var(--ink-faint)]",children:t},a))})]})]})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"how-to-read",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 05 — Reading guide"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"How to read a parliament chart"}),e.jsx("div",{className:"flex flex-col gap-5 mt-7",children:[{num:"1",title:"Check the legend",desc:"Identify which colour represents which party or faction. This mapping is essential to reading the chart."},{num:"2",title:"Spot the largest block",desc:"The party with the most dots has the most seats. Visually, the largest contiguous colour cluster is the dominant party."},{num:"3",title:"Find the majority line",desc:"The total seat count is often shown in the center. Half of that + 1 is the majority threshold. Does any single party reach it?"},{num:"4",title:"Assess coalition potential",desc:"Can two or more party clusters add up to cross the majority threshold? Adjacent colours often represent potential coalition partners."},{num:"5",title:"Compare election results",desc:"If shown alongside a previous parliament chart, compare the size of each colour block to see which parties gained or lost seats."}].map(t=>e.jsxs("div",{className:"flex gap-5 items-start",children:[e.jsx("span",{className:"w-9 h-9 rounded-full bg-[var(--accent-color)] text-white font-mono text-[13px] font-medium flex items-center justify-center shrink-0 mt-[2px]",children:t.num}),e.jsxs("div",{children:[e.jsx("h4",{className:"text-[15px] font-medium text-[var(--ink)] mb-1",children:t.title}),e.jsx("p",{className:"text-[14px] font-light text-[var(--ink-muted)] leading-[1.6]",children:t.desc})]})]},t.num))})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"data-format",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 06 — Data format"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"What data do you need?"}),e.jsx("div",{className:"text-[16px] font-light text-[var(--ink)] leading-[1.75]",children:e.jsxs("p",{children:["A list of ",e.jsx("strong",{className:"font-medium",children:"parties"})," with their ",e.jsx("strong",{className:"font-medium",children:"seat counts"})," and ",e.jsx("strong",{className:"font-medium",children:"colours"}),". The total seats determine how many dots to draw."]})}),e.jsx("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 mt-6 font-mono text-[13px] text-[var(--ink)] leading-[1.7] overflow-x-auto",children:e.jsx("pre",{children:`[
2  { party: "Party A",      seats: 120, color: "#c94a2e" },
3  { party: "Party B",      seats: 95,  color: "#e8c4b8" },
4  { party: "Party C",      seats: 55,  color: "#f5ede9" },
5  { party: "Independent",  seats: 30,  color: "#f0e4e0" }
6]
7// Total = 300 seats`})})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"construction",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 07 — Construction"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"How to build one"}),e.jsx("div",{className:"flex flex-col gap-4 mt-6",children:[{step:"1",text:"Determine the total seat count and the number of concentric rows needed (typically 3–8 rows)."},{step:"2",text:"Distribute seats across rows, with more seats in outer rows (larger circumference = more space)."},{step:"3",text:"Position each dot at equal angular intervals along its semicircular row."},{step:"4",text:"Sort parties left-to-right (political spectrum) and assign colours sequentially to dots."},{step:"5",text:"Add a central label showing total seats and a legend mapping colours to party names."}].map(t=>e.jsxs("div",{className:"flex gap-4 items-start bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[8px] p-4",children:[e.jsx("span",{className:"w-7 h-7 rounded-full bg-[var(--accent-light)] text-[var(--accent-color)] font-mono text-[12px] font-medium flex items-center justify-center shrink-0",children:t.step}),e.jsx("p",{className:"text-[14px] font-light text-[var(--ink)] leading-[1.6]",children:t.text})]},t.step))})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"common-mistakes",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 08 — Common mistakes"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"Mistakes to wat

7ch out for"}),e.jsx("div",{className:"flex flex-col gap-4 mt-7",children:[{title:"Dots too small to see",desc:"With 500+ seats, individual dots become indistinguishable. Use fewer rows or group seats into blocks of 5–10."},{title:"Random party ordering",desc:"Conventionally, parties are ordered left-to-right along the political spectrum. Random ordering confuses the audience."},{title:"No majority indicator",desc:"The whole point of the parliament chart is to show whether a party or coalition can govern. Always mark the majority threshold."},{title:"Using it for non-discrete data",desc:"Parliament charts work because each dot = 1 seat. If your data isn't about countable units, use a pie or donut chart."},{title:"Missing legend",desc:"Without a legend mapping colours to party names and seat counts, the chart is just a semicircle of coloured dots."}].map((t,a)=>e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] border-l-[3px] border-l-[var(--accent-color)] rounded-r-[8px] px-5 py-[18px]",children:[e.jsx("h4",{className:"text-[14px] font-medium text-[var(--ink)] mb-[6px]",children:t.title}),e.jsx("p",{className:"text-[13px] font-light text-[var(--ink-muted)] leading-[1.6]",children:t.desc})]},a))})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"real-world-examples",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 09 — Real-world examples"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"Where you’ll see it in the wild"}),e.jsx("div",{className:"flex flex-col gap-4 mt-7",children:[{domain:"Election coverage",desc:"Every major news outlet uses parliament charts for election night results — BBC, CNN, Reuters, The Guardian."},{domain:"Wikipedia",desc:"Nearly every national legislature's Wikipedia page features a parliament diagram showing the current seat distribution."},{domain:"Political analysis",desc:"Think tanks and policy institutes use parliament charts to illustrate coalition scenarios and voting bloc dynamics."},{domain:"Corporate governance",desc:"Board of directors vote distributions, shareholder voting power, and committee composition."}].map((t,a)=>e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5",children:[e.jsx("h4",{className:"text-[14px] font-medium text-[var(--ink)] mb-[6px]",children:t.domain}),e.jsx("p",{className:"text-[13px] font-light text-[var(--ink-muted)] leading-[1.6]",children:t.desc})]},a))})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"key-facts",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 10 — Quick reference"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"Key facts at a glance"}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 mt-7",children:[{label:"Also known as",value:"Hemicycle diagram, semicircle seat chart"},{label:"Best for",value:"Legislative seat distribution, coalition analysis"},{label:"Ideal seats",value:"50–400 (beyond that, dots become tiny)"},{label:"Layout",value:"Concentric semicircular rows of dots"},{label:"Common tools",value:"parliament-svg, D3.js, Datawrapper, Flourish"},{label:"Unit",value:"1 dot = 1 seat"}].map((t,a)=>e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[8px] p-4",children:[e.jsx("span",{className:"text-[11px] text-[var(--ink-faint)] font-mono tracking-[0.05em]",children:t.label}),e.jsx("p",{className:"text-[14px] text-[var(--ink)] mt-1",children:t.value})]},a))})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"accessibility",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 11 — Acce

7ssibility"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"Making it accessible"}),e.jsx("div",{className:"flex flex-col gap-3 mt-6",children:["Include a data table listing parties with exact seat counts","Add an aria-label on the SVG summarizing the distribution","Use party patterns or icons in addition to colour for colour-blind accessibility","Ensure the legend includes both colour swatches and numeric seat counts",'Provide a text summary: "Party A holds 120 of 300 seats (40%)"'].map((t,a)=>e.jsxs("div",{className:"flex gap-3 items-start",children:[e.jsx("span",{className:"w-5 h-5 rounded-full bg-[var(--green-light)] text-[var(--green)] flex items-center justify-center text-[11px] shrink-0 mt-[2px]",children:"&check;"}),e.jsx("p",{className:"text-[14px] font-light text-[var(--ink)] leading-[1.6]",children:t})]},a))})]}),e.jsxs("section",{className:"py-14 border-b border-[var(--border-color)]",id:"variations",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 12 — Variations"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"Common variations"}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 mt-7",children:[{name:"Full circle parliament",desc:"360° arrangement used for round chambers (e.g. European Parliament). Less common, but shows the same data."},{name:"Grouped dots",desc:"Dots are clustered by party with gaps between groups, making party boundaries clearer than interleaved seating."},{name:"Before/after comparison",desc:"Two hemicycles side by side showing election results — one for the old composition, one for the new."},{name:"Weighted dots",desc:"Each dot represents multiple seats (e.g. 1 dot = 5 seats) for legislatures with 500+ members."}].map((t,a)=>e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5",children:[e.jsx("h4",{className:"text-[14px] font-medium text-[var(--ink)] mb-[6px]",children:t.name}),e.jsx("p",{className:"text-[13px] font-light text-[var(--ink-muted)] leading-[1.6]",children:t.desc})]},a))})]}),e.jsx(g,{faqs:x,sectionNumber:13}),e.jsxs("section",{className:"py-14",id:"related-charts",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.14em] uppercase text-[var(--accent-color)] mb-3",children:"// 14 — Related charts"}),e.jsx("h2",{className:"font-serif text-[28px] md:text-[30px] font-normal tracking-[-0.02em] text-[var(--ink)] mb-6 leading-[1.2]",children:"Related charts"}),e.jsxs("div",{className:"grid grid-cols-1 sm:grid-cols-3 gap-4",children:[e.jsxs(l,{href:"/waffle-chart",className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6 px-5 cursor-pointer hover:border-[var(--accent-border-hover)] hover:-translate-y-[2px] hover:shadow-[var(--shadow-card)] transition-all duration-150 no-underline text-[var(--ink)]",children:[e.jsx("div",{className:"h-[72px] mb-4 flex items-center justify-center",children:e.jsx("svg",{viewBox:"0 0 100 60",width:"100",height:"60",children:Array.from({length:50},(t,a)=>{const s=Math.floor(a/10),o=a%10;return e.jsx("rect",{x:5+o*9.5,y:2+s*11.5,width:"8",height:"10",rx:"1.5",fill:a<35?"#c94a2e":"#f5ede9"},a)})})}),e.jsx("p",{className:"text-[14px] font-medium text-[var(--ink)] mb-1",children:"Waffle chart"}),e.jsx("p",{className:"text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]",children:"A rectangular grid of unit cells — similar countable-unit concept."}),e.jsx("span",{className:"inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase text-[var(--accent-color)] bg-[var(--accent-light)] px-2 py-[3px] rounded-[3px]",children:"Part-to-whole"})]}),e.jsxs(l,{href:"/donut-chart",className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6 px-5 cursor-pointer hover:border-[var(--accent-border-hover)] hover:-translate-y-[2px] hover:shadow-[var(--shadow-card)] transition-all duration-150 no-underline text-[var(--ink)]",children:[e.jsx("div",{className:"h-[72px] mb-4 flex items-center justify-center",children:e.jsx("svg",{viewBox:"0 0 100 60",width:"100",height:"60",children:e.jsxs("g",{transform:"translate(50,32)",children:[e.jsx("path",{d:"M0,-28 A28,28 0 0,1 28,0 L17,0 A17,17 0 0,0 0,-17 Z",fill:"#c94a2e"}),e.jsx("path",{d:"M28,0 A28,28 0 0,1 -16,23 L-10,14 A17,17 0 0,0 17,0 Z",fill:"#f5ede9"}),e.jsx("path",{d:"M-16,23 A28,28 0 0,1 0,-28 L0,-17 A17,17 0 0,0 -10,14 Z",fill:"#e8c4b8"})]})})}),e.jsx("p",{className:"text-[14px] font-medium text-[var(--ink)] mb-1",children:"Donut chart"}),e.jsx("p",{className:"text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]",children:"Shows proportions as arcs — less precise but more compact."}),e.jsx("span",{className:"inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase text-[var(--accent-color)] bg-[var(--accent-light)] px-2 py-[3px] rounded-[3px]",children:"Part-to-whole"})]}),e.jsxs(l,{href:"/pictogram-chart",className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-6 px-5 cursor-pointer hover:border-[var(--accent-border-hover)] hover:-translate-y-[2px] hover:shadow-[var(--shadow-card)] transition-all duration-150 no-underline text-[var(--ink)]",children:[e.jsx("div",{className:"h-[72px] mb-4 flex items-center justify-center",children:e.jsxs("svg",{viewBox:"0 0 100 60",width:"100",height:"60",children:[[0,1,2,3,4].map(t=>e.jsx("rect",{x:5+t*19,y:"10",width:"14",height:"14",rx:"3",fill:"#c94a2e"},t)),[0,1,2].map(t=>e.jsx("rect",{x:5+t*19,y:"30",width:"14",height:"14",rx:"3",fill:"#f5ede9",stroke:"#e8c4b8",strokeWidth:"0.5"},`b${t}`))]})}),e.jsx("p",{className:"text-[14px] font-medium text-[var(--ink)] mb-1",children:"Pictogram chart"}),e.jsx("p",{className:"text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]",children:"Icon-based units — similar countable approach with thematic shapes."}),e.jsx("span",{className:"inline-block mt-[10px] font-mono text-[9px] tracking-[0.1em] uppercase text-[var(--accent-color)] bg-[var(--accent-light)] px-2 py-[3px] rounded-[3px]",children:"Comparison"})]})]})]})]}),e.jsxs("aside",{className:"hidden md:block sticky top-[80px]",children:[e.jsxs("div",{className:"mt-12 mb-7",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.12em] uppercase text-[var(--ink-faint)] mb-[14px] pb-[10px] border-b border-[var(--border-color)]",children:"On this page"}),e.jsx("ul",{className:"list-none",children:w.map(t=>e.jsx("li",{className:"mb-[2px]",children:e.jsx("a",{href:`#${t.id}`,className:"block text-[13px] text-[var(--ink-muted)] no-underline py-[5px] pl-3 -ml-3 border-l-2 border-transparent hover:text-[var(--ink)] hover:border-l-[var(--accent-color)] transition-all duration-150 leading-[1.4]",children:t.label})},t.id))})]}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] overflow-hidden mb-5",children:[e.jsx("div",{className:"bg-[var(--ink)] px-[18px] py-[14px] font-mono text-[10px] tracking-[0.12em] uppercase text-[var(--white-muted)]",children:"// At a glance"}),e.jsx("div",{children:[{label:"Category",val:"Part-to-whole"},{label:"Difficulty",val:"Beginner",color:"text-[var(--green)]"},{label:"Layout",val:"Semicircular rows of dots"},{label:"Best seats",val:"50 – 400"},{label:"Each dot =",val:"1 seat"}

7,{label:"Popular since",val:"Wikipedia era"}].map((t,a)=>e.jsxs("div",{className:"px-[18px] py-[14px] border-b border-[var(--border-color)] last:border-b-0 flex flex-col gap-[2px]",children:[e.jsx("span",{className:"text-[11px] text-[var(--ink-faint)] font-mono tracking-[0.05em]",children:t.label}),e.jsx("span",{className:`text-[14px] text-[var(--ink)] ${t.color||""}`,children:t.val})]},a))})]}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] overflow-hidden mb-5",children:[e.jsx("div",{className:"bg-[var(--ink)] px-[18px] py-[14px] font-mono text-[10px] tracking-[0.12em] uppercase text-[var(--white-muted)]",children:"// Tags"}),e.jsx("div",{className:"px-[18px] py-4",children:e.jsx("div",{className:"flex flex-wrap gap-[6px]",children:["Part-to-whole","Political","Hemicycle","Seats","Election","Beginner"].map(t=>e.jsx("span",{className:"font-mono text-[10px] tracking-[0.06em] uppercase bg-[var(--bg-alt)] text-[var(--ink-muted)] px-[10px] py-1 rounded-[3px]",children:t},t))})})]}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] overflow-hidden mb-5",children:[e.jsx("div",{className:"bg-[var(--ink)] px-[18px] py-[14px] font-mono text-[10px] tracking-[0.12em] uppercase text-[var(--white-muted)]",children:"// Similar charts"}),e.jsx("div",{className:"py-1",children:["Waffle chart","Donut chart","Pictogram chart","Pie chart"].map((t,a,s)=>e.jsxs("span",{className:`flex items-center justify-between px-[18px] py-3 text-[13px] text-[var(--ink-muted)] hover:text-[var(--accent-color)] transition-colors duration-150 cursor-pointer ${a<s.length-1?"border-b border-[var(--border-color)]":""}`,children:[t," ",e.jsx("span",{children:"→"})]},t))})]})]})]})]}),e.jsxs("div",{className:"border-t border-[var(--border-color)] bg-[var(--bg-card)] px-6 md:px-12 py-5 flex items-center justify-between",children:[e.jsx("div",{className:"flex gap-8",children:e.jsxs(l,{href:"/marimekko-chart",className:"text-[13px] text-[var(--ink-muted)] flex items-center gap-[6px] no-underline hover:text-[var(--ink)] transition-colors duration-150",children:[e.jsx("span",{className:"text-[var(--accent-color)]",children:"←"})," Previous: Marimekko chart"]})}),e.jsx("span",{className:"font-mono text-[11px] text-[var(--ink-faint)] hidden md:block",children:"Part-to-whole charts"}),e.jsx("div",{className:"flex gap-8",children:e.jsxs(l,{href:"/stacked-bar-chart",className:"text-[13px] text-[var(--ink-muted)] flex items-center gap-[6px] no-underline hover:text-[var(--ink)] transition-colors duration-150",children:["Next: Stacked bar chart ",e.jsx("span",{className:"text-[var(--accent-color)]",children:"→"})]})})]})]})}export{T as default};