1import{j as e,L as o}from"./vendor-react-CVijXI0n.js";import{S as c,b as d,h as x,a as m}from"./index-D0o2Sutv.js";import{C as p}from"./ChartBreadcrumb-BOBTh6lg.js";import{C as h,b}from"./ChartFAQ-DwXxlpIj.js";const r="https://www.visualizing.org",i=[{q:"What is a dumbbell chart?",a:"A dumbbell chart (also called a gap chart or DNA chart) displays two data points per category, connected by a line. The two dots typically represent two time periods, two groups, or a planned-vs-actual comparison. The connecting line makes the gap between the two values immediately visible."},{q:"When should you use a dumbbell chart?",a:"Use a dumbbell chart when showing before/after changes across many categories. It also works well when comparing two groups (male/female, plan/actual, 2024/2025), and when the gap between the two values is the main story."},{q:"When should you avoid a dumbbell chart?",a:"Avoid a dumbbell chart when you have more than 2 groups to compare â dots become confusing. It is also a poor fit when only comparing single values per category â use a dot plot or bar chart, or when the values are on very different scales or units."},{q:"How is a dumbbell chart different from a dot plot?",a:"Both a dumbbell chart and a dot plot can look similar at first glance, but they answer different questions. Reach for a dumbbell chart when the comparisons and patterns it was designed to reveal match what you need to communicate, and choose a dot plot when its particular strengths better fit your data and audience."},{q:"Are dumbbell charts accessible to screen readers?",a:"Yes â a dumbbell 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."},{q:"Is a dumbbell chart suitable for dashboards?",a:"Yes â a dumbbell chart can work well in dashboards as long as the panel is large enough for readers to perceive the encoded values, has a clear title, and includes the legend or axis labels needed to interpret it."}],g=b("/dumbbell-chart",i),u={"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":`${r}/dumbbell-chart/#webpage`,url:`${r}/dumbbell-chart`,name:"Dumbbell Chart â The Definitive Guide",description:"Learn what a dumbbell chart is, how to read the gap between two data points, and when to use it for before-after or group comparisons.",isPartOf:{"@id":`${r}/#website`},breadcrumb:{"@id":`${r}/dumbbell-chart/#breadcrumb`},mainEntity:{"@id":`${r}/dumbbell-chart/#article`},inLanguage:"en"},d({slug:"/dumbbell-chart",caption:"Example dumbbell chart",width:620,height:280}),{"@type":["Article","LearningResource"],"@id":`${r}/dumbbell-chart/#article`,mainEntityOfPage:{"@id":`${r}/dumbbell-chart/#webpage`},headline:"Dumbbell Chart: Definition, How to Read, and When to Use",description:"A complete reference to dumbbell charts â connecting two dots per category with a line to emphasize gaps or changes.",image:{"@id":x("/dumbbell-chart")},datePublished:"2025-03-15",dateModified:"2026-04-07",publisher:{"@id":`${r}/#organization`},inLanguage:"en",educationalLevel:"beginner",learningResourceType:"reference",teaches:["How to read dumbbell charts","When to show gaps between two values"],competencyRequired:"Basic chart reading",timeRequired:"PT7M",isAccessibleForFree:!0,audience:{"@type":"EducationalAudience",educationalRole:"student"},about:{"@id":`${r}/dumbbell-chart/#term`},keywords:["dumbbell chart","gap chart","DNA chart","before-after chart"]},{"@type":"DefinedTerm","@id":`${r}/dumbbell-chart/#term`,name:"Dumbbell Chart",description:"Connects two dots per category with a line to emphasize the gap or change between two data points.",inDefinedTermSet:{"@id":`${r}/chart-types/#termset`},termCode:"dumbbell-chart",url:`${r}/dumbbell-chart`},{"@type":"DefinedTermSet","@id":`${r}/chart-types/#termset`,name:"Data Visualization Chart Types",url:`${r}/chart-types`},m("/dumbbell-chart"),g]},f=[{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:"common-mistakes",label:"Common mistakes"},{id:"real-world-examples",label:"Real-world examples"},{id:"key-facts",label:"Quick reference"},{id:"data-format",label:"Data format"},{id:"construction",label:"How to build it"},{id:"accessibility",label:"Accessibility"},{id:"variations",label:"Variations"},{id:"faqs",label:"FAQs"},{id:"related-charts",label:"Related charts"}];function w(){return e.jsxs(e.Fragment,{children:[e.jsx(c,{title:"Dumbbell Chart: What It Is, When To Use It & Examples",description:"Dumbbell Chart guide: what it is, when to use it for comparison analysis, real examples, common pitfalls, and tools to build one yourself.",path:"/dumbbell-chart",ogType:"article",jsonLd:[u]}),e.jsx(p,{slug:"/dumbbell-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:"Comparison"}),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:"Dumbbell Chart"}),e.jsx("p",{className:"text-[17px] md:text-[19px] font-light text-[var(--ink-muted)] leading-[1.6] max-w-[640px]",children:"Connects two dots per category with a line to emphasize the gap or change between two data points â perfect for before/after, male/female, or plan/actual comparisons."})]}),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:"Gender pay gap by department"})]}),e.jsx("span",{children:"2025"})]}),e.jsxs("svg",{viewBox:"0 0 620 240",xmlns:"http://www.w3.org/2000/svg",className:"w-full block",children:[e.jsx("line",{x1:"140",y1:"10",x2:"140",y2:"200",stroke:"#1a1a18",strokeWidth:"0.5",strokeOpacity:"0.10"}),[60,70,80,90,100,110,120].map((a,t)=>{const s=140+(a-60)*7.5;return e.jsxs("g",{children:[e.jsx("line",{x1:s,y1:"10",x2:s,y2:"200",stroke:"#1a1a18",strokeWidth:"0.5",strokeOpacity:"0.06",strokeDasharray:"4,3"}),e.jsxs("text",{x:s,y:"218",textAnchor:"middle",fill:"#b0b0aa",fontSize:"10",fontFamily:"DM Mono, monospace",children:["$",a,"k"]})]},a)}),[{label:"Engineering",a:105,b:95},{label:"Design",a:92,b:85},{label:"Marketing",a:88,b:78},{label:"Sales",a:95,b:82},{label:"HR",a:80,b:75},{label:"Finance",a:98,b:90}].map((a,t)=>{const s=26+t*30,l=140+(a.a-60)*7.5,n=140+(a.b-60)*7.5;return e.jsxs("g",{children:[e.jsx("text",{x:"135",y:s+4,textAnchor:"end",fill:"#6b6b67",fontSize:"11",fontFamily:"DM Mono, monospace",children:a.label}),e.jsx("line",{x1:n,y1:s,x2:l,y2:s,stroke:"#e8c4b8",strokeWidth:"3",strokeLinecap:"round"}),e.jsx("circle",{cx:l,cy:s,r:"5",fill:"#c94a2e"}),e.jsx("circle",{cx:n,cy:s,r:"5",fill:"#f5ede9",stroke:"#c94a2e",strokeWidth:"1.5"})]},a.label)}),e.jsx("rect",{x:"200",y:"228",width:"10",height:"10",rx:"5",fill:"#c94a2e"}),e.jsx("text",{x:"215",y:"237",fill:"#6b6b67",fontSize:"10",fontFamily:"DM Mono, monospace",children:"Male"}),e.jsx("circle",{cx:"275",cy:"233",r:"5",fill:"#f5ede9",stroke:"#c94a2e",strokeWidth:"1.5"}),e.jsx("text",{x:"285",y:"237",fill:"#6b6b67",fontSize:"10",fontFamily:"DM Mono, monospace",children:"Female"})]}),e.jsx("p",{className:"text-[13px] text-[var(--ink-muted)] text-center italic mt-4",children:"A dumbbell chart showing the salary gap between male and female employees. The line length encodes the size of the gap."})]})]}),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 dumbbell chart?"}),e.jsxs("div",{className:"text-[16px] font-light text-[var(--ink)] leading-[1.75]",children:[e.jsxs("p",{children:["A dumbbell chart (also called a ",e.jsx("strong",{className:"font-medium",children:"gap chart"})," or ",e.jsx("strong",{className:"font-medium",children:"DNA chart"}),") displays two data points per category, connected by a line. The two dots typically represent two time periods, two groups, or a planned-vs-actual comparison. The connecting line makes the ",e.jsx("em",{children:"gap"})," between the two values immediately visible."]}),e.jsxs("p",{className:"mt-[18px]",children:["The key insight a dumbbell chart provides is not the individual values, but the ",e.jsx("strong",{className:"font-medium",children:"difference"})," between them. A longer line means a bigger gap; a shorter line means the two values are close. When sorted by gap size, the chart reveals which categories have the largest disparities."]}),e.jsxs("p",{className:"mt-[18px]",children:["Dumbbell charts work for any before/after, group A vs group B, or start-vs-end comparison. Theyâre particularly effective for showing ",e.jsx("strong",{className:"font-medium",children:"gender gaps, demographic differences, and year-over-year changes"})," across many categories simultaneously."]})]})]}),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 dumbbell 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 120",xmlns:"http://www.w3.org/2000/svg",className:"w-full block",children:[e.jsx("text",{x:"80",y:"44",textAnchor:"end",fill:"#b0b0aa",fontSize:"11",fontFamily:"DM Mono, monospace",children:"Category"}),e.jsx("line",{x1:"200",y1:"40",x2:"400",y2:"40",stroke:"#e8c4b8",strokeWidth:"4",strokeLinecap:"round"}),e.jsx("circle",{cx:"200",cy:"40",r:"7",fill:"#f5ede9",stroke:"#c94a2e",strokeWidth:"2"}),e.jsx("circle",{cx:"400",cy:"40",r:"7",fill:"#c94a2e"}),e.jsx("line",{x1:"400",y1:"40",x2:"440",y2:"20",stroke:"#c94a2e",strokeWidth:"1.2"}),e.jsx("text",{x:"445",y:"18",fill:"#c94a2e",fontSize:"10",fontFamily:"DM Mono, monospace",children:"A â End dot (group B)"}),e.jsx("line",{x1:"200",y1:"40",x2:"160",y2:"20",stroke:"#2e7d52",strokeWidth:"1.2"}),e.jsx("text",{x:"75",y:"18",fill:"#2e7d52",fontSize:"10",fontFamily:"DM Mono, monospace",children:"B â Start dot (group A)"}),e.jsx("line",{x1:"300",y1:"50",x2:"300",y2:"80",stroke:"#6b6b67",strokeWidth:"1.2"}),e.jsx("text",{x:"250",y:"95",fill:"#6b6b67",fontSize:"10",fontFamily:"DM Mono, monospace",children:"C â Connector (the gap)"})]}),e.jsx("div",{className:"flex flex-wrap gap-3 mt-7",children:[{color:"#c94a2e",label:"A â End dot:",desc:"Second data point (e.g., 'after', group B)"},{color:"#2e7d52",label:"B â Start dot:",desc:"First data point (e.g., 'before', group A)"},{color:"#6b6b67",label:"C â Connector:",desc:"Line whose length encodes the gap between the two values"}].map((a,t)=>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:a.color}}),e.jsxs("span",{className:"text-[var(--ink-muted)]",children:[e.jsx("strong",{className:"text-[var(--ink)] font-medium",children:a.label})," ",a.desc]})]},t))})]})]}),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 dumbbell chart whenâ¦"]}),e.jsx("ul",{className:"flex flex-col gap-[10px] list-none",children:["Showing before/after changes across many categories","Comparing two groups (male/female, plan/actual, 2024/2025)","The gap between the two values is the main story","You want to sort by gap size to find the biggest disparities"].map((a,t)=>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:a},t))})]}),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 dumbbell chart whenâ¦"]}),e.jsx("ul",{className:"flex flex-col gap-[10px] list-none",children:["You have more than 2 groups to compare â dots become confusing","Only comparing single values per category â use a dot plot or bar chart","The values are on very different scales or units","You need to show a continuous time trend â use a line or slope chart"].map((a,t)=>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:a},t))})]})]})]}),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 dumbbell chart"}),e.jsx("div",{className:"flex flex-col gap-5 mt-7",children:[{num:"1",title:"Read the legend",desc:"Identify which dot color or style represents which group or time period."}
1,{num:"2",title:"Look at line lengths",desc:"Longer lines = bigger gaps. Scan for the longest and shortest connectors to find extreme and minimal differences."},{num:"3",title:"Check which dot leads",desc:"Does the same group consistently lead, or does the pattern change across categories?"},{num:"4",title:"Notice the sorting",desc:"If sorted by gap size, the chart tells you where the biggest disparities are at a glance."}].map(a=>e.jsxs("div",{className:"flex gap-4 items-start",children:[e.jsx("span",{className:"w-[32px] h-[32px] rounded-full bg-[var(--accent-light)] text-[var(--accent-color)] flex items-center justify-center font-mono text-[13px] shrink-0",children:a.num}),e.jsxs("div",{children:[e.jsx("p",{className:"text-[15px] font-medium text-[var(--ink)] mb-1",children:a.title}),e.jsx("p",{className:"text-[14px] font-light text-[var(--ink-muted)] leading-[1.6]",children:a.desc})]})]},a.num))})]}),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:"// 06 â Pitfalls"}),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 mistakes"}),e.jsx("div",{className:"flex flex-col gap-5 mt-4",children:[{mistake:"Indistinguishable dot styles",fix:"Use clearly different colors or filled vs hollow dots. If the reader can't tell which dot is which, the chart fails."},{mistake:"More than 2 groups",fix:"Dumbbell charts are designed for exactly 2 data points. For 3+, use a multi-series dot plot."},{mistake:"Missing legend",fix:"Always include a legend or direct labels explaining what each dot represents."},{mistake:"No sorting",fix:"Random order hides the story. Sort by gap size, by one of the values, or by category alphabetically."}].map((a,t)=>e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5",children:[e.jsx("p",{className:"text-[14px] font-medium text-[var(--red)] mb-2",children:a.mistake}),e.jsx("p",{className:"text-[14px] font-light text-[var(--ink-muted)] leading-[1.6]",children:a.fix})]},t))})]}),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:"// 07 â 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:"Real-world examples"}),e.jsx("div",{className:"flex flex-col gap-4 mt-4",children:[{context:"HR",example:"Gender pay gap by department â filled dots for male salaries, hollow for female"},{context:"Policy",example:"Before vs after policy change in metrics across regions"},{context:"Health",example:"Vaccination rates: 2023 vs 2025 by country"},{context:"Finance",example:"Planned vs actual budget spend by cost center"}].map((a,t)=>e.jsxs("div",{className:"flex gap-3 items-start",children:[e.jsx("span",{className:"font-mono text-[10px] tracking-[0.10em] uppercase text-[var(--accent-color)] bg-[var(--accent-light)] px-[10px] py-[4px] rounded-[3px] shrink-0 mt-[2px]",children:a.context}),e.jsx("p",{className:"text-[14px] font-light text-[var(--ink)] leading-[1.6]",children:a.example})]},t))})]}),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:"// 08 â 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"}),e.jsx("div",{className:"overflow-x-auto mt-4",children:e.jsx("table",{className:"w-full text-[14px] border-collapse",children:e.jsx("tbody",{children:[["Also known as","Gap chart, DNA chart, barbell chart"],["Primary use","Comparing two paired values per category"],["Data types","One categorical + two quantitative values"],["Best category count","5â20"],["Zero baseline","Not required"],["Groups compared","Exactly 2"]].map(([a,t],s)=>e.jsxs("tr",{className:"border-b border-[var(--border-color)]",children:[e.jsx("td",{className:"py-3 pr-4 font-medium text-[var(--ink)] whitespace-nowrap",children:a}),e.jsx("td",{className:"py-3 text-[var(--ink-muted)] font-light",children:t})]},s))})})})]}),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:"// 09 â 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 your data should look like"}),e.jsx("div",{className:"overflow-x-auto mt-4",children:e.jsxs("table",{className:"w-full text-[14px] border-collapse",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"border-b-2 border-[var(--border-color)]",children:[e.jsx("th",{className:"py-2 pr-4 text-left font-medium text-[var(--ink)]",children:"Column"}),e.jsx("th",{className:"py-2 pr-4 text-left font-medium text-[var(--ink)]",children:"Type"}),e.jsx("th",{className:"py-2 text-left font-medium text-[var(--ink)]",children:"Description"})]})}),e.jsx("tbody",{children:[["Category","String","Label for each row (e.g., department)"],["Value_A","Number","First data point (e.g., male salary, 2023 value)"],["Value_B","Number","Second data point (e.g., female salary, 2025 value)"]].map(([a,t,s],l)=>e.jsxs("tr",{className:"border-b border-[var(--border-color)]",children:[e.jsx("td",{className:"py-3 pr-4 text-[var(--ink)] font-mono text-[13px]",children:a}),e.jsx("td",{className:"py-3 pr-4 text-[var(--ink-muted)]",children:t}),e.jsx("td",{className:"py-3 text-[var(--ink-muted)] font-light",children:s})]},l))})]})}),e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5 mt-5 font-mono text-[13px] text-[var(--ink-muted)] leading-[1.7]",children:[e.jsx("span",{className:"text-[var(--accent-color)]",children:"// Example rows"}),e.jsx("br",{}),"Engineering, 105000, 95000",e.jsx("br",{}),"Design,      92000, 85000",e.jsx("br",{}),"Sales,       95000, 82000"]})]}),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:"// 10 â 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 a dumbbell chart"}),e.jsx("div",{className:"flex flex-col gap-5 mt-7",children:[{num:"1",title:"Set the value axis",de
1sc:"Choose a scale that comfortably fits both data points for all categories."},{num:"2",title:"Lay out category rows",desc:"Space categories vertically with labels on the left."},{num:"3",title:"Draw the connector line",desc:"For each category, draw a line from Value_A to Value_B. Use a visible but non-dominant stroke."},{num:"4",title:"Place two dots per row",desc:"Add distinct dots (e.g., filled vs hollow) at each end of the connector line."},{num:"5",title:"Add legend and sort",desc:"Include a legend explaining what each dot represents. Sort by gap size for maximum impact."}].map(a=>e.jsxs("div",{className:"flex gap-4 items-start",children:[e.jsx("span",{className:"w-[32px] h-[32px] rounded-full bg-[var(--accent-light)] text-[var(--accent-color)] flex items-center justify-center font-mono text-[13px] shrink-0",children:a.num}),e.jsxs("div",{children:[e.jsx("p",{className:"text-[15px] font-medium text-[var(--ink)] mb-1",children:a.title}),e.jsx("p",{className:"text-[14px] font-light text-[var(--ink-muted)] leading-[1.6]",children:a.desc})]})]},a.num))})]}),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
1ssibility"}),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:"Accessibility notes"}),e.jsx("div",{className:"flex flex-col gap-4 mt-4",children:[{title:"Distinguish dots beyond colour",desc:"Use filled vs hollow, different sizes, or shape markers so colour-blind users can tell the two groups apart."},{title:"Include a data table",desc:"Provide an accessible table with category, group A value, group B value, and gap size."},{title:"Descriptive ARIA labels",desc:'Each dumbbell should have an aria-label like "Engineering: Male $105k, Female $95k, gap $10k."'},{title:"Announce the legend",desc:"Make the legend accessible to screen readers so users know what each dot style represents."}].map((a,t)=>e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5",children:[e.jsx("p",{className:"text-[14px] font-medium text-[var(--ink)] mb-2",children:a.title}),e.jsx("p",{className:"text-[14px] font-light text-[var(--ink-muted)] leading-[1.6]",children:a.desc})]},t))})]}),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:"Variations"}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4",children:[{name:"Vertical dumbbell",desc:"Rotated 90° with dots going up/down"},{name:"Arrow dumbbell",desc:"The connector ends in an arrow showing direction of change"},{name:"Color-coded gap",desc:"The line color changes based on whether the gap is positive or negative"}].map((a,t)=>e.jsxs("div",{className:"bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[10px] p-5",children:[e.jsx("p",{className:"text-[14px] font-medium text-[var(--ink)] mb-1",children:a.name}),e.jsx("p",{className:"text-[13px] font-light text-[var(--ink-muted)] leading-[1.5]",children:a.desc})]},t))})]}),e.jsx(h,{faqs:i,sectionNumber:10}),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:"// 11 â Related"}),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 mt-4",children:[e.jsxs(o,{href:"/dot-plot",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("p",{className:"text-[14px] font-medium mb-1",children:"Dot plot"}),e.jsx("p",{className:"text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]",children:"Single dots for single-value comparison."}),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(o,{href:"/lollipop-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("p",{className:"text-[14px] font-medium mb-1",children:"Lollipop chart"}),e.jsx("p",{className:"text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]",children:"Single dot with stem to baseline."}),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(o,{href:"/range-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("p",{className:"text-[14px] font-medium mb-1",children:"Range chart"}),e.jsx("p",{className:"text-[12px] text-[var(--ink-muted)] font-light leading-[1.5]",children:"Shows min-max spread per category."}),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:f.map(a=>e.jsx("li",{className:"mb-[2px]",children:e.jsx("a",{href:`#${a.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:a.label})},a.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:"Comparison"},{label:"Difficulty",val:"Beginner",color:"text-[var(--green)]"},{label:"Groups compared",val:"Exactly 2"},{label:"Best for",val:"Gap/change emphasis"}].map((a,t)=>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:a.label}),e.jsx("span",{className:`text-[14px] text-[var(--ink)] ${a.color||""}`,children:a.val})]},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:"// Tags"}),e.jsx("div",{className:"px-[18px] py-4",children:e.jsx("div",{className:"flex flex-wrap gap-[6px]",children:["Comparison","Gap analysis","Before/after","Beginner","Paired data"].map(a=>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:a},a))})})]})]})]})]}),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.jsxs(o,{href:"/dot-plot",className:"text-[13px] text-[var(--ink-muted)] no-underline flex items-center gap-[6px] hover:text-[var(--ink)] transition-colors duration-150",children:[e.jsx("span",{className:"text-[var(--accent-color)]",children:"â"})," Previous: Dot Plot"]}),e.jsx("span",{className:"font-mono text-[11px] text-[var(--ink-faint)] hidden md:block",children:"7 of 177 chart types"}),e.jsxs(o,{href:"/range-chart",className:"text-[13px] text-[var(--ink-muted)] no-underline flex items-center gap-[6px] hover:text-[var(--ink)] transition-colors duration-150",children:["Next: Range Chart ",e.jsx("span",{className:"text-[var(--accent-color)]",children:"â"})]})]})]})}export{w as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.