1import{j as e,L as s}from"./vendor-react-CVijXI0n.js";import{S as n,b as l,h as c,a as d}from"./index-D0o2Sutv.js";import{C as x}from"./ChartBreadcrumb-BOBTh6lg.js";import{C as m,b as h}from"./ChartFAQ-DwXxlpIj.js";const i="https://www.visualizing.org",o=[{q:"What is a raincloud plot?",a:'A raincloud plot is a three-layer distribution chart that stacks three complementary views vertically: a half-density curve (the "cloud"), a box plot (summary statistics), and jittered raw data points (the "rain"). Together, they provide the most complete view of a distribution in a single chart.'},{q:"When should you use a raincloud plot?",a:"Use a raincloud plot when you need the fullest possible picture of a distribution in one chart. It also works well when comparing 2â5 groups with 30â300 observations each, and when publishing in academic or scientific contexts that value transparency."},{q:"When should you avoid a raincloud plot?",a:"Avoid a raincloud plot when the audience is non-technical â three layers can overwhelm unfamiliar readers. It is also a poor fit when space is tight â rainclouds need vertical room for all three layers, or when you have many groups (>5) â the chart gets too tall and complex."},{q:"What data do you need to make a raincloud plot?",a:"One continuous numeric column and one grouping column â same as for a violin or box plot."},{q:"Are raincloud plots accessible to screen readers?",a:"Yes â a raincloud plot 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 raincloud plot suitable for dashboards?",a:"Yes â a raincloud plot 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."}],p=h("/raincloud-plot",o),u={"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":`${i}/raincloud-plot/#webpage`,url:`${i}/raincloud-plot`,name:"Raincloud Plot â The Definitive Guide",description:"Learn what a raincloud plot is, how it combines density, box plot, and raw data in one view, when to use it, and common mistakes to avoid.",isPartOf:{"@id":`${i}/#website`},breadcrumb:{"@id":`${i}/raincloud-plot/#breadcrumb`},mainEntity:{"@id":`${i}/raincloud-plot/#article`},inLanguage:"en"},l({slug:"/raincloud-plot",caption:"Example raincloud plot",width:620,height:280}),{"@type":["Article","LearningResource"],"@id":`${i}/raincloud-plot/#article`,mainEntityOfPage:{"@id":`${i}/raincloud-plot/#webpage`},headline:"Raincloud Plot: Definition, How to Read, and When to Use",description:"A complete reference guide to raincloud plots â the three-in-one chart that shows density, summary statistics, and raw data simultaneously.",image:{"@id":c("/raincloud-plot")},datePublished:"2025-03-15",dateModified:"2026-04-08",publisher:{"@id":`${i}/#organization`},inLanguage:"en",educationalLevel:"advanced",learningResourceType:"reference",teaches:["How to read and interpret raincloud plots","When to use raincloud plots vs violin or box plots","How to combine density, box plot, and raw data effectively"],competencyRequired:"Understanding of density plots, box plots, and scatter plots",timeRequired:"PT12M",isAccessibleForFree:!0,audience:{"@type":"EducationalAudience",educationalRole:"student"},about:{"@id":`${i}/raincloud-plot/#term`},keywords:["raincloud plot","data visualization","distribution","density","box plot","raw data"]},{"@type":"DefinedTerm","@id":`${i}/raincloud-plot/#term`,name:"Raincloud Plot",description:"A data visualization that combines three layers: a half-density curve (the 'cloud'), a box plot (summary statistics), and jittered raw data points (the 'rain') â providing the most complete single-chart view of a distribution.",inDefinedTermSet:{"@id":`${i}/chart-types/#termset`},termCode:"raincloud-plot",url:`${i}/raincloud-plot`},{"@type":"DefinedTermSet","@id":`${i}/chart-types/#termset`,name:"Data Visualization Chart Types",url:`${i}/chart-types`},d("/raincloud-plot"),p]},b=[{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:"How to build it"},{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 j(){return e.jsxs(e.Fragment,{children:[e.jsx(n,{title:"Raincloud Plot: What It Is, How To Read & Examples",description:"Raincloud Plot reference: definition, when to use it, how to read it, real examples, common mistakes, and tools (Excel, Tableau, D3) to build one.",path:"/raincloud-plot",ogType:"article",jsonLd:[u]}),e.jsx(x,{slug:"/raincloud-plot"}),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:"Distribution"}),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:"Advanced"})]}),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:"Raincloud Plot"}),e.jsx("p",{className:"text-[17px] md:text-[19px] font-light text-[var(--ink-muted)] leading-[1.6] max-w-[640px]",children:"Three charts in one â a half-density âcloud,â a box plot for summary statistics, and jittered data points as ârain.â The most information-dense distribution chart available."})]}),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:"Reaction time by condition"})]}),e.jsx("span",{children:"n = 90 trials"})]}),e.jsxs("svg",{viewBox:"0 0 620 280",xmlns:"http://www.w3.org/2000/svg",className:"w-full block",children:[e.jsx("line",{x1:"100",y1:"260",x2:"590",y2:"260",stroke:"#1a1a18",strokeWidth:"1",strokeOpacity:"0.15"}),e.jsx("text",{x:"85",y:"80",textAnchor:"end",fill:"#b0b0aa",fontSize:"11",fontFamily:"DM Mono, monospace",children:"Control"}),e.jsx("text",{x:"85",y:"200",textAnchor:"end",fill:"#b0b0aa",fontSize:"11",fontFamily:"DM Mono, monospace",children:"Treatment"}),[150,250,350,450,550].map(t=>e.jsx("line",{x1:t,y1:"15",x2:t,y2:"260",stroke:"#1a1a18",strokeWidth:"0.3",strokeOpacity:"0.06"},t)),e.jsx("text",{x:"150",y:"275",textAnchor:"middle",fill:"#b0b0aa",fontSize:"10",fontFamily:"DM Mono, monospace",children:"200"}),e.jsx("text",{x:"250",y:"275",textAnchor:"middle",fill:"#b0b0aa",fontSize:"10",fontFamily:"DM Mono, monospace",children:"300"}),e.jsx("text",{x:"350",y:"275",textAnchor:"middle",fill:"#b0b0aa",fontSize:"10",fontFamily:"DM Mono, monospace",children:"400"}),e.jsx("text",{x:"450",y:"275",textAnchor:"middle",fill:"#b0b0aa",fontSize:"10",fontFamily:"DM Mono, monospace",children:"500"}),e.jsx("text",{x:"550",y:"275",textAnchor:"middle",fill:"#b0b0aa",fontSize:"10",fontFamily:"DM Mono, monospace",children:"600"}),e.jsx("path",{d:"M180,55 C220,50 260,30 320,20 C370,30 410,45 460,53 L460,55 L180,55 Z",fill:"#f5ede9",stroke:"#c94a2e",strokeWidth:"1.5"}),e.jsx("rect",{x:"240",y:"70",width:"180",height:"8",rx:"2",fill:"#f5ede9",stroke:"#c94a2e",strokeWidth:"1"}),e.jsx("line",{x1:"330",y1:"70",x2:"330",y2:"78",stroke:"#c94a2e",strokeWidth:"2.5"}),e.jsx("line",{x1:"200",y1:"74",x2:"240",y2:"74",stroke:"#c94a2e",strokeWidth:"1"}),e.jsx("line",{x1:"420",y1:"74",x2:"470",y2:"74",stroke:"#c94a2e",strokeWidth:"1"}),[[220,98],[240,92],[260,100],[270,88],[280,96],[290,104],[300,90],[310,98],[320,86],[330,94],[340,102],[350,90],[360,96],[370,88],[380,94],[390,100],[400,92],[320,100],[280,86],[350,
1100]].map(([t,a],r)=>e.jsx("circle",{cx:t,cy:a,r:"3.5",fill:"#f5ede9",stroke:"#c94a2e",strokeWidth:"1",opacity:"0.7"},`c${r}`)),e.jsx("path",{d:"M140,175 C180,172 220,155 280,140 C330,155 370,168 430,173 L430,175 L140,175 Z",fill:"#f5ede9",stroke:"#e8c4b8",strokeWidth:"1.5"}),e.jsx("rect",{x:"200",y:"190",width:"160",height:"8",rx:"2",fill:"#f5ede9",stroke:"#e8c4b8",strokeWidth:"1"}),e.jsx("line",{x1:"280",y1:"190",x2:"280",y2:"198",stroke:"#e8c4b8",strokeWidth:"2.5"}),e.jsx("line",{x1:"160",y1:"194",x2:"200",y2:"194",stroke:"#e8c4b8",strokeWidth:"1"}),e.jsx("line",{x1:"360",y1:"194",x2:"420",y2:"194",stroke:"#e8c4b8",strokeWidth:"1"}),[[180,218],[200,212],[220,220],[240,214],[250,222],[260,210],[270,218],[280,208],[290,216],[300,224],[310,212],[320,220],[330,214],[340,222],[350,210],[300,226],[270,210],[250,216],[310,224],[280,220]].map(([t,a],r)=>e.jsx("circle",{cx:t,cy:a,r:"3.5",fill:"#f5ede9",stroke:"#e8c4b8",strokeWidth:"1",opacity:"0.7"},`t${r}`)),e.jsx("text",{x:"370",y:"278",textAnchor:"middle",fill:"#6b6b67",fontSize:"11",fontFamily:"DM Mono, monospace",children:"Reaction time (ms)"})]}),e.jsx("p",{className:"text-[13px] text-[var(--ink-muted)] text-center italic mt-4",children:"A raincloud plot comparing reaction times: the cloud (density curve) shows shape, the box shows statistics, and the rain (dots) shows every trial."})]})]}),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 raincloud plot?"}),e.jsxs("div",{className:"text-[16px] font-light text-[var(--ink)] leading-[1.75]",children:[e.jsxs("p",{children:["A raincloud plot is a ",e.jsx("strong",{className:"font-medium",children:"three-layer distribution chart"})," that stacks three complementary views vertically: a half-density curve (the âcloudâ), a box plot (summary statistics), and jittered raw data points (the ârainâ). Together, they provide the most complete view of a distribution in a single chart."]}),e.jsxs("p",{className:"mt-[18px]",children:["Each layer answers a different question. The density curve shows the ",e.jsx("strong",{className:"font-medium",children:"overall shape"})," (skewness, multimodality). The box plot shows the ",e.jsx("strong",{className:"font-medium",children:"five-number summary"})," (min, Q1, median, Q3, max). The raw dots show ",e.jsx("strong",{className:"font-medium",children:"individual observations"}),", outliers, and exact data density."]}),e.jsx("p",{className:"mt-[18px]",children:"The name comes from the visual metaphor: the smooth density curve above looks like a cloud, and the jittered dots below look like rain falling from it. This design was formalized in a 2019 paper by Micah Allen et al., who argued that showing all three views simultaneously prevents the misleading oversimplification that any single chart type creates."})]}),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:"Origin:"})," The raincloud plot was formalized in âRaincloud plots: a multi-platform tool for robust data visualizationâ by Micah Allen, Davide Poggiali, Kirstie Whitaker et al. (2019). The concept builds on earlier âhalf-violin + dot plotâ designs used informally in scientific communities."]})})]}),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 raincloud plot"}),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 180",xmlns:"http://www.w3.org/2000/svg",className:"w-full block",children:[e.jsx("path",{d:"M80,55 C130,50 180,30 260,20 C330,30 380,45 440,53 L440,55 L80,55 Z",fill:"#f5ede9",stroke:"#c94a2e",strokeWidth:"2"}),e.jsx("rect",{x:"160",y:"70",width:"200",height:"10",rx:"2",fill:"#f5ede9",stroke:"#c94a2e",strokeWidth:"1"}),e.jsx("line",{x1:"260",y1:"70",x2:"260",y2:"80",stroke:"#c94a2e",strokeWidth:"2.5"}),e.jsx("line",{x1:"100",y1:"75",x2:"160",y2:"75",stroke:"#c94a2e",strokeWidth:"1"}),e.jsx("line",{x1:"360",y1:"75",x2:"430",y2:"75",stroke:"#c94a2e",strokeWidth:"1"}),[[120,102],[150,96],[170,104],[190,98],[210,106],[230,100],[250,94],[260,102],[270,96],[280,104],[290,98],[310,106],[330,100],[350,94],[370,102],[390,98],[320,96],[240,104],[200,96],[340,100]].map(([t,a],r)=>e.jsx("circle",{cx:t,cy:a,r:"3.5",fill:"#f5ede9",stroke:"#c94a2e",strokeWidth:"1",opacity:"0.7"},r)),e.jsx("line",{x1:"260",y1:"20",x2:"280",y2:"8",stroke:"#c94a2e",strokeWidth:"1.2"}),e.jsx("circle",{cx:"282",cy:"6",r:"4",fill:"#c94a2e"}),e.jsx("text",{x:"292",y:"4",fill:"#c94a2e",fontSize:"10",fontFamily:"DM Mono, monospace",children:"A"}),e.jsx("line",{x1:"260",y1:"80",x2:"280",y2:"90",stroke:"#2e7d52",strokeWidth:"1.2"}),e.jsx("circle",{cx:"282",cy:"92",r:"4",fill:"#2e7d52"}),e.jsx("text",{x:"292",y:"95",fill:"#2e7d52",fontSize:"10",fontFamily:"DM Mono, monospace",children:"B"}),e.jsx("line",{x1:"250",y1:"94",x2:"240",y2:"120",stroke:"#6b6b67",strokeWidth:"1.2"}),e.jsx("circle",{cx:"238",cy:"122",r:"4",fill:"#6b6b67"}),e.jsx("text",{x:"230",y:"138",textAnchor:"middle",fill:"#6b6b67",fontSize:"10",fontFamily:"DM Mono, monospace",children:"C"}),e.jsx("line",{x1:"440",y1:"55",x2:"460",y2:"40",stroke:"#6b6b67",strokeWidth:"1.2"}),e.jsx("circle",{cx:"462",cy:"38",r:"4",fill:"#6b6b67"}),e.jsx("text",{x:"472",y:"36",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 â Cloud (half-density):",desc:"A one-sided density curve showing the overall distribution shape"},{color:"#2e7d52",label:"B â Box plot:",desc:"Median line, IQR box, and whiskers â quick summary statistics"},{color:"#6b6b67",label:"C â Rain (raw dots):",desc:"Jittered individual data points â every observation is visible"},{color:"#6b6b67",label:"D â Tail:",desc:"Where the density drops to near zero â reveals the range and potential outliers"}].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 raincloud plot whenâ¦"]}),e.jsx("ul",{className:"flex flex-col gap-[10px] list-none",children:["You need the fullest possible picture of a distribution in one chart","Comparing 2â5 groups with 30â300 observations each","Publishing in academic or scientific contexts that value transparency","You want to show shape, summary stats, AND individual points simultaneously","Box plots or violin plots alone would hide important features","You suspect the data is multimodal and want to confirm with raw points"].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 raincloud plot whenâ¦"]}),e.jsx("ul",{className:"flex flex-col gap-[10px] list-none",children:["The audience is non-technical â three layers can overwhelm unfamiliar readers","Space is tight â rainclouds need vertical room for all three layers","You have many groups (>5) â the chart gets too tall and complex","A simple box plot or histogram suffices for the communication goal","You have very large samples (>500/group) â dots become noise","Quick dashboard displays where simplicity matters more than completeness"].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 raincloud plot"}),e.jsx("p",{className:"text-[16px] font-light text-[var(--ink)] leading-[1.75]",children:"Read each layer separately, then synthesize."}),e.jsx("div",{className:"flex flex-col gap-5 mt-7",children:[{num:"1",title:"Start with the cloud",desc:"The density curve shows the overall shape â is it symmetric, skewed, bimodal? This gives the big picture."},{num:"2",title:"Read the box plot",desc:"The thick line is the median, the box is the IQR. Whiskers show the range excluding outliers."},{num:"3",title:"Examine the rain",desc:"Look at the raw dots â are there cluster
1s? Gaps? Outliers that the density curve smoothed over?"},{num:"4",title:"Cross-check layers",desc:"Does the density peak align with where most dots cluster? Does the box plot median sit at the density peak?"},{num:"5",title:"Compare across groups",desc:"For each group, compare all three layers: shape shifts, median differences, and individual-level overlap."}].map(t=>e.jsxs("div",{className:"flex gap-5 items-start",children:[e.jsx("div",{className:"w-[36px] h-[36px] rounded-full bg-[var(--accent-light)] flex items-center justify-center font-mono text-[13px] text-[var(--accent-color)] font-medium shrink-0 mt-[2px]",children:t.num}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-[15px] font-medium text-[var(--ink)] mb-[4px]",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 your data should look like"}),e.jsx("p",{className:"text-[16px] font-light text-[var(--ink)] leading-[1.75] mb-6",children:"One continuous numeric column and one grouping column â same as for a violin or box plot."}),e.jsx("div",{className:"overflow-x-auto mb-6",children:e.jsxs("table",{className:"w-full text-[13px] font-mono border-collapse",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"border-b border-[var(--border-color)]",children:[e.jsx("th",{className:"text-left py-2 pr-6 text-[var(--ink-muted)] font-medium",children:"condition"}),e.jsx("th",{className:"text-left py-2 pr-6 text-[var(--ink-muted)] font-medium",children:"reaction_ms"})]})}),e.jsx("tbody",{children:[["Control","342"],["Control","318"],["Treatment","285"],["Treatment","301"],["Control","367"]].map(([t,a],r)=>e.jsxs("tr",{className:"border-b border-[var(--border-color)]",children:[e.jsx("td",{className:"py-2 pr-6 text-[var(--ink)]",children:t}),e.jsx("td",{className:"py-2 pr-6 text-[var(--ink-muted)]",children:a})]},r))})]})}),e.jsxs("div",{className:"bg-[var(--bg-alt)] rounded-[8px] p-5",children:[e.jsx("p",{className:"font-mono text-[11px] text-[var(--ink-faint)] mb-2",children:"// R example (ggrain)"}),e.jsx("pre",{className:"text-[13px] text-[var(--ink)] font-mono leading-[1.7] whitespace-pre-wrap",children:`library(ggrain) 2ggplot(df, aes(x = condition, y = reaction_ms, fill = condition)) + 3 geom_rain(alpha = 0.6)`})]})]}),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 a raincloud plot"}),e.jsx("div",{className:"flex flex-col gap-5 mt-4",children:[{num:"1",text:"Compute a kernel density estimate for each group"},{num:"2",text:"Draw a half-density curve (one-sided violin) â the 'cloud'"},{num:"3",text:"Position a box plot below the cloud, aligned to the same axis"},{num:"4",text:"Add jittered raw data points below the box plot â the 'rain'"},{num:"5",text:"Align all three layers to share the same value axis"},{num:"6",text:"Use consistent colors per group across all three layers"}].map(t=>e.jsxs("div",{className:"flex gap-4 items-start",children:[e.jsxs("span",{className:"font-mono text-[12px] text-[var(--accent-color)] mt-[2px] shrink-0",children:[t.num,"."]}),e.jsx("p",{className:"text-[15px] font-light text-[var(--ink)] leading-[1.6]",children:t.text})]},t.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:"// 08 â 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-6 mt-4",children:[{title:"Layers not aligned",de
3sc:"If the cloud, box plot, and dots don't share the same axis, they can't be cross-referenced â defeating the purpose."},{title:"Too many groups",desc:"More than 5 groups makes the chart too tall and complex. Use facets or ridgeline plots for many groups."},{title:"Wrong layer order",desc:"Convention is cloud on top, box in the middle, dots on the bottom. Other orderings confuse experienced readers."},{title:"Ignoring the audience",desc:"Non-technical audiences may find three layers overwhelming. Use simpler alternatives for general communication."}].map((t,a)=>e.jsxs("div",{className:"bg-[var(--bg-alt)] rounded-[8px] p-5",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-2",children:[e.jsx("span",{className:"text-[var(--red)] text-[14px]",children:"Ã"}),e.jsx("h3",{className:"text-[14px] font-medium text-[var(--ink)]",children:t.title})]}),e.jsx("p",{className:"text-[14px] 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 â In the wild"}),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-5 mt-4",children:[{field:"Neuroscience",desc:"Comparing reaction times across experimental conditions â the three-layer view shows distributional shape, summary, and individual trial results."},{field:"Clinical research",desc:"Visualizing patient outcomes in treatment vs. placebo groups with full transparency about individual-level data."},{field:"Open science",desc:"Increasingly required in preregistered studies and reproducibility-focused journals that mandate showing raw data alongside summaries."}].map((t,a)=>e.jsxs("div",{className:"flex gap-4 items-start",children:[e.jsx("span",{className:"font-mono text-[11px] text-[var(--accent-color)] bg-[var(--accent-light)] px-2 py-1 rounded-[3px] shrink-0 mt-[2px]",children:t.field}),e.jsx("p",{className:"text-[14px] font-light text-[var(--ink)] 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 â At a glance"}),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:"Quick reference"}),e.jsx("div",{className:"overflow-x-auto",children:e.jsx("table",{className:"w-full text-[14px]",children:e.jsx("tbody",{children:[["Also known as","Rain cloud chart, split-half violin + box + jitter"],["Category","Distribution"],["Components","Half-density curve + box plot + jittered raw data points"],["Data type","One continuous variable + one categorical grouping variable"],["Ideal group count","2â5 groups, 30â300 observations each"],["Key principle","Never hide data â show the full distributional picture"],["First published","Allen, Poggiali, Whitaker et al. (2019)"]].map(([t,a],r)=>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 w-[180px]",children:t}),e.jsx("td",{className:"py-3 text-[var(--ink-muted)] font-light",children:a})]},r))})})})]}),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
3ssibility"}),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:["Use distinct visual treatments for each layer â fill for density, outlined box, dot markers for rain","Provide a text summary: 'Control group: median 330 ms, IQR 290â370 ms, n = 45, right-skewed'","Offer a data table with raw values and summary statistics as an alternative","Ensure all three layers use sufficient contrast against the background","Label each layer clearly if the audience is unfamiliar with the format"].map((t,a)=>e.jsxs("div",{className:"flex gap-3 items-start",children:[e.jsx("span",{className:"text-[var(--green)] mt-[2px] shrink-0",children:"✓"}),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:"Variations"}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-5 mt-4",children:[{name:"Horizontal raincloud",desc:"Clouds on top, rain falling down â the classic orientation. Flip for vertical when groups go on the X-axis."},{name:"Paired raincloud",desc:"Two mirrored rainclouds facing each other for direct group comparison â like a split violin."},{name:"Raincloud with mean",desc:"Add a diamond or crossbar at the group mean in addition to the median line in the box."},{name:"Half-eye plot",desc:"Removes the raw data dots â just cloud + box for a cleaner but less transparent view."}].map((t,a)=>e.jsxs("div",{className:"bg-[var(--bg-alt)] rounded-[8px] p-5",children:[e.jsx("h3",{className:"text-[14px] font-medium text-[var(--ink)] mb-2",children:t.name}),e.jsx("p",{className:"text-[13px] font-light text-[var(--ink-muted)] leading-[1.6]",children:t.desc})]},a))})]}),e.jsx(m,{faqs:o,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"}),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.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4",children:[{name:"Half-eye plot",path:"/half-eye-plot",desc:"Cloud + box without the rain dots â simpler but less transparent"},{name:"Violin plot",path:"/violin-plot",desc:"Full mirrored density without box plot or raw data"},{name:"Box plot",path:"/box-plot",desc:"Summary statistics only â the most compact distribution chart"},{name:"Beeswarm plot",path:"/beeswarm-plot",desc:"Raw data dots with systematic displacement â no density or box"}].map((t,a)=>e.jsx(s,{href:t.path,className:"flex items-center gap-4 bg-[var(--bg-card)] border border-[var(--border-color)] rounded-[8px] p-4 no-underline hover:border-[var(--accent-border-hover)] transition-all duration-150",children:e.jsxs("div",{children:[e.jsx("p",{className:"text-[14px] font-medium text-[var(--ink)] mb-[2px]",children:t.name}),e.jsx("p",{className:"text-[12px] font-light text-[var(--ink-muted)] leading-[1.5]",children:t.desc})]})},a))})]})]}),e.jsx("aside",{className:"hidden md:block sticky top-8",children:e.jsxs("div",{className:"bg-[var(--ink)] rounded-[10px] p-5",children:[e.jsx("p",{className:"font-mono text-[10px] tracking-[0.12em] uppercase text-[var(--white-muted)] mb-4",children:"On this page"}),e.jsx("nav",{className:"flex flex-col gap-[6px]",children:b.map(t=>e.jsx("a",{href:`#${t.id}`,className:"text-[13px] text-[var(--white-muted)] no-underline hover:text-white transition-colors duration-150",children:t.label},t.id))})]})})]})]}),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(s,{href:"/jitter-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: Jitter Plot"]}),e.jsx("span",{className:"font-mono text-[11px] text-[var(--ink-faint)] hidden md:block",children:"21 of 177 chart types"}),e.jsxs(s,{href:"/half-eye-plot",className:"text-[13px] text-[var(--ink-muted)] no-underline flex items-center gap-[6px] hover:text-[var(--ink)] transition-colors duration-150",children:["Next: Half-Eye Plot ",e.jsx("span",{className:"text-[var(--accent-color)]",children:"â"})]})]})]})}export{j 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.