Which part of Mat by Design would you like to learn more about?
Home Page
USAID Expansion
BNY Expansion
Learning Solutions & Gamification
Visual Design & Problem Solving
Excel Visual Guides
Interactive Tools
Skills That Set Me Apart
Accessibility, by design.
My accessibility checklist brings inclusive design into the everyday production of digital learning, from the first visual to the final published course.
The review framework
09 focus areasOne consistent approach across courses, presentations, documents, and multimedia.
A condensed visual overview of my eLearning accessibility review criteria, updated to align with current W3C and accessible authoring guidance.
01 / IMAGE ACCESSIBILITY
Alt Text & Images
- Decorative images: use empty alt text (
alt="") or exclude them from the accessibility tree. - Meaningful images: describe their purpose and information clearly, without repeating nearby text.
- Charts and diagrams: provide an essential summary plus accessible detailed data when needed.
- Functional graphics: give image buttons and linked icons names that explain the action.
- Text in images: use real text wherever practical; provide an equivalent if image text is essential.
- Captions and credits: add where useful or required by licensing; they do not replace necessary alt text.
02 / VISUAL DESIGN
Clarity & Readability
- Text contrast: at least 4.5:1 for normal text and 3:1 for large text at WCAG AA.
- Non-text contrast: at least 3:1 for essential interface elements and graphics.
- Color independence: never rely on color alone to communicate meaning.
- Readable typography: clear type, suitable sizing, spacing, and scalable live text.
- Zoom and reflow: review 200% text resizing and content reflow at 400% equivalent where applicable.
- Motion and flashing: avoid hazardous flashing and provide needed control of moving content.
02A / COLOR ACCESSIBILITY
Color & Visual Meaning
- Beyond color alone: pair color-coded status, instructions, and feedback with text, symbols, or patterns.
- Contrast ratios: ensure at least 4.5:1 for regular text, 3:1 for large text, and 3:1 for essential controls and graphical details at WCAG AA.
- Charts and data: distinguish series with direct labels, shapes, or patterns; provide an accessible data summary or equivalent.
- Interactive states: make focus, selection, success, and errors recognizable without depending on hue alone.
- Color-vision differences: review palettes in grayscale and color-vision simulations; check high-contrast display settings where applicable.
- Real backgrounds: test text, icons, and overlays on every slide, image, gradient, and state—not just against a sample swatch.
03 / INTERACTION
Keyboard & Navigation
- Keyboard access: learners can operate all essential features without a mouse.
- Visible focus: keyboard focus is clearly indicated and follows a logical sequence.
- No hover dependency: important information and actions have a keyboard-accessible route.
- Accessible names: buttons, controls, and links communicate what they do.
- Meaningful structure: headings, instructions, and content order support assistive technology.
- Manual testing: test with keyboard-only navigation and representative screen-reader workflows.
04 / AUTHORING PLATFORMS
Rise & Storyline 360
- Meaningful objects: provide informative alternatives; keep decorative objects out of screen-reader focus.
- Reading order: confirm slide, layer, and course content follows a logical sequence.
- Interactive alternatives: avoid pointer-only hotspots, hover-only reveals, and inaccessible drag-and-drop.
- Accessible media: captions, alternatives, and usable player controls accompany audio/video.
- Structure and readability: use clear text and appropriate heading/semantic options.
- Published experience: validate the exported course, not only the editable source project.
05 / SUPPORTING FILES
Documents & Slides
- Structured documents: use true heading styles, lists, and text rather than graphic substitutes.
- Tables: identify headers and preserve logical reading order.
- PowerPoint: use accessible layouts, unique slide titles, and the Reading Order pane.
- Visual information: add meaningful text alternatives and detailed explanations for complex figures.
- Exported PDFs: verify document tags, reading order, title, language, and working links.
- Final checks: review the actual shared Word, PDF, or PowerPoint file with accessibility tools.
06 / MULTIMEDIA
Video & Audio
- Video captions: accurate, synchronized captions for prerecorded video with meaningful audio.
- Live sessions: provide live captions when required.
- Transcripts: provide text equivalents for audio-only media; descriptive video transcripts are useful too.
- Audio description: convey essential visual-only information when needed.
- Playback: provide accessible controls and avoid unexpected autoplay or uncontrolled looping.
- Embeds: test keyboard access, caption accuracy, quality, and loading across devices.
06A / AI ACCESSIBILITY
Responsible AI
- AI-created materials: inspect generated courses, text, images, slides, and code for semantic structure and accessible presentation before release.
- Generated alt text: verify AI image descriptions against the image, context, and data; correct omissions and fabricated details.
- Automated media aids: edit AI captions, transcripts, and descriptions for accuracy, speakers, timing, and meaningful visual information.
- Accessible AI tools: test chatbots and assistants with keyboard and screen readers; provide text-based alternatives to voice-only tasks.
- Inclusive interaction: allow different ways to respond, avoid rigid time limits, and offer human assistance when AI misinterprets a user.
- Human oversight: check AI outputs for errors, bias affecting people with disabilities, and exposure of sensitive learner data; AI checks do not replace manual testing.
07 / RELEASE QUALITY
Links, Files & Final QA
- Descriptive hyperlinks: link text communicates destination or purpose.
- New windows: tell learners when links unexpectedly open new tabs or windows.
- File naming: use clear, consistent names; a 31-character limit is a convention, not a WCAG rule.
- External content: verify linked and embedded resources are usable by keyboard.
- Quality review: combine automated checking with manual screen-reader, zoom, media, and navigation tests.
- Delivery: review the actual published product and all files learners must open.
Principle 01Perceivable
Principle 02Operable
Principle 03Understandable
Principle 04Robust
Loading the Data Resource Library…
"\u003c!doctype html\u003e\u003chtml lang=\"en\"\u003e\u003chead\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta name=\"viewport\" content=\"width=device-width,initial-scale=1\"\u003e\u003ctitle\u003eMat by Design | BAR CHART\u003c/title\u003e\u003cstyle\u003e :root{--accent:#2457A6;font-family:Helvetica,Arial,sans-serif;color:#102a43}*{box-sizing:border-box}body{margin:0;background:#eaf0f4}main{max-width:1320px;margin:auto;background:white}header{background:#102a43;color:white;padding:30px 4%;display:flex;justify-content:space-between;align-items:end;gap:20px}header small{color:#a9d7f0;font-weight:bold;letter-spacing:.08em}h1{font-size:clamp(2rem,4vw,3rem);margin:10px 0 0}header p{font-weight:bold;font-size:1.3rem}.content{padding:24px 4%}.grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}h2{font-size:1.2rem;margin:20px 0 12px}h2 span{color:#0a5a9c;margin-right:12px}.panel,.step{background:#f3f8fb;border:1px solid #d3e3ef;border-radius:12px;padding:20px}p{line-height:1.45}.lead{font-size:1.15rem;font-weight:700}.good{color:#146c43}.warn{color:#a52019}table{border-collapse:collapse;min-width:80%}th,td{padding:7px 12px;border-bottom:1px solid #cadce8;text-align:left}th{background:#dcecf6}.workflow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.sthead{display:flex;align-items:center;gap:14px}.sthead strong{font-size:2rem;color:var(--accent)}.step small{color:#0a5a9c;font-weight:bold}.step p{margin:10px 0}.custom{background:#ecf5fc}svg{max-width:100%;height:195px}.bad{background:#fff3f1}.right{background:#f0f8f3}ul{padding-left:22px;line-height:1.8}footer{border-top:1px solid #cadce8;margin-top:30px;padding:20px 0;color:#455f73;font-size:.9rem}a{color:#075795}.note{color:#455f73;font-size:.9rem}@media(max-width:720px){header{display:block}.grid,.workflow{grid-template-columns:1fr}.content{padding:18px}}@media print{@page{size:17in 22in;margin:.4in}body{background:white}main{max-width:none}header{print-color-adjust:exact;-webkit-print-color-adjust:exact}.panel,.step{print-color-adjust:exact;-webkit-print-color-adjust:exact}.content{padding:10px 2%}h2{margin:12px 0 7px}p{margin:7px 0}.panel,.step{padding:12px}footer{margin-top:12px}}\n .process-layout{display:grid;grid-template-columns:minmax(280px,.36fr) minmax(0,1fr);gap:24px;align-items:stretch}\n.process-steps{list-style:none;display:grid;grid-template-rows:repeat(6,minmax(0,1fr));gap:8px;padding:0;margin:0;min-height:0}\n.process-steps li{min-height:0}\n.process-step{display:flex;align-items:center;gap:12px;width:100%;height:100%;min-height:0;text-align:left;padding:8px 12px;border:1px solid #d3e3ef;border-radius:9px;background:#f3f8fb;color:#102a43;font-family:Helvetica,Arial,sans-serif;cursor:pointer}\n.process-step:hover{border-color:#2457a6;background:#edf3fc}\n.process-step:focus-visible{outline:3px solid #2457a6;outline-offset:2px}\n.process-step[aria-current=\"step\"]{border-color:#2457a6;background:#edf3fc;box-shadow:inset 3px 0 #2457a6}\n.step-number{color:#2457a6;font-size:1.25rem;font-weight:700;flex:0 0 27px}\n.step-copy{display:block;min-width:0}.step-copy strong{display:block;font-size:15px;line-height:1.15}.step-copy span{display:block;margin-top:4px;font-size:13px;line-height:1.3;color:#455f73}\n.process-player{margin:0;min-width:0;align-self:stretch;aspect-ratio:16/9;position:relative;background:#102a43;border:1px solid #d3e3ef;border-radius:10px;overflow:hidden}\n.process-player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#fff}\n.process-help{display:flex;justify-content:space-between;gap:12px;margin:12px 0 0;font-size:.85rem;color:#455f73;line-height:1.4}\n.process-help p{margin:0}.process-duration{white-space:nowrap}\n.formatting-notes{margin-top:14px;color:#455f73;font-size:.9rem;line-height:1.5}.formatting-notes summary{cursor:pointer;color:#075795;font-weight:700}.formatting-notes p{margin:8px 0}\n@media(max-width:1199px){.process-layout{grid-template-columns:1fr;gap:16px}.process-player{grid-row:1;aspect-ratio:16/9}.process-steps{grid-template-rows:repeat(6,auto)}.process-step{min-height:64px;padding:12px 14px}.process-help{flex-direction:column;gap:4px}}\n@media print{.process-layout{grid-template-columns:30% 1fr}.process-player{grid-row:auto}.process-step{break-inside:avoid}.formatting-notes{display:none}}\n\u003c/style\u003e\u003cstyle\u003e\n.process-player iframe#process-video{position:absolute;inset:0;width:100%;height:100%;display:block;border:0;background:#102a43}\n.process-player{overflow:hidden}\n.youtube-help{font-size:13px;margin:7px 0 0;color:#455f73}\n.youtube-help a{font-weight:700;color:#075795}\n\u003c/style\u003e\u003c/head\u003e\u003cbody\u003e\u003cmain\u003e\u003cheader\u003e\u003cdiv\u003e\u003csmall\u003eMAT BY DESIGN / EXCEL VISUAL GUIDE\u003c/small\u003e\u003ch1\u003eBAR CHART\u003c/h1\u003e\u003c/div\u003e\u003cp\u003eCompare categories\u003c/p\u003e\u003c/header\u003e\u003cdiv class=\"content\"\u003e\u003cp style=\"color:#455f73;font-size:.9rem\"\u003e\u003cb\u003eLEARNING OBJECTIVE\u003c/b\u003e \u0026nbsp; Create and interpret a horizontal bar chart that compares categories.\u003c/p\u003e\u003cdiv class=\"grid\"\u003e\u003csection\u003e\u003ch2\u003e\u003cspan\u003e01\u003c/span\u003e WHAT IS IT?\u003c/h2\u003e\u003cdiv class=\"panel\"\u003e\u003cp class=\"lead\"\u003eUses the length of horizontal bars to compare values across categories.\u003c/p\u003e\u003cp\u003e\u003cb class=\"good\"\u003eUSE\u003c/b\u003e \u0026nbsp; Compare products, teams, service types, or workloads.\u003c/p\u003e\u003cp\u003e\u003cb class=\"warn\"\u003eAVOID\u003c/b\u003e \u0026nbsp; Continuous trends over time or a relationship between two numeric variables.\u003c/p\u003e\u003cp\u003e\u003cb\u003eASK\u003c/b\u003e \u0026nbsp; Which category is largest, and by how much?\u003c/p\u003e\u003c/div\u003e\u003c/section\u003e\u003csection\u003e\u003ch2\u003e\u003cspan\u003e02\u003c/span\u003e BEFORE YOU BEGIN\u003c/h2\u003e\u003cdiv class=\"panel\"\u003e\u003ctable\u003e\u003cthead\u003e\u003ctr\u003e\u003cth\u003eService\u003c/th\u003e\u003cth\u003eRequests\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd\u003eSetup\u003c/td\u003e\u003ctd\u003e80\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003eSupport\u003c/td\u003e\u003ctd\u003e65\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003eTraining\u003c/td\u003e\u003ctd\u003e45\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003eReview\u003c/td\u003e\u003ctd\u003e30\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cp\u003e\u003cb class=\"good\"\u003e✓ GOOD\u003c/b\u003e \u0026nbsp; Put one category per row and its numeric value beside it. Include descriptive headers.\u003c/p\u003e\u003cp\u003e\u003cb class=\"warn\"\u003e! WATCH\u003c/b\u003e \u0026nbsp; Avoid duplicate or inconsistent category names and numbers stored as text. Sort only when ranking helps; preserve meaningful order otherwise.\u003c/p\u003e\u003c/div\u003e\u003c/section\u003e\u003c/div\u003e\u003csection aria-labelledby=\"process-heading\"\u003e\u003ch2 id=\"process-heading\"\u003e\u003cspan\u003e03\u003c/span\u003e BUILD AND CUSTOMIZE YOUR CHART\u003c/h2\u003e\u003cdiv class=\"process-layout\"\u003e\u003col class=\"process-steps\" aria-label=\"Six steps to build and customize a bar chart\"\u003e\u003cli\u003e\u003cbutton type=\"button\" class=\"process-step\" data-start=\"0\" aria-controls=\"process-video\" aria-label=\"Step 1: Select data. Jump to this step.\"\u003e\u003cspan class=\"step-number\" aria-hidden=\"true\"\u003e01\u003c/span\u003e\u003cspan class=\"step-copy\"\u003e\u003cstrong\u003eSelect data\u003c/strong\u003e\u003cspan\u003eSelect both columns, including headers.\u003c/span\u003e\u003c/span\u003e\u003c/button\u003e\u003c/li\u003e\u003cli\u003e\u003cbutton type=\"button\" class=\"process-step\" data-start=\"4.5\" aria-controls=\"process-video\" aria-label=\"Step 2: Open Insert. Jump to this step.\"\u003e\u003cspan class=\"step-number\" aria-hidden=\"true\"\u003e02\u003c/span\u003e\u003cspan class=\"step-copy\"\u003e\u003cstrong\u003eOpen Insert\u003c/strong\u003e\u003cspan\u003eSelect Insert on the ribbon.\u003c/span\u003e\u003c/span\u003e\u003c/button\u003e\u003c/li\u003e\u003cli\u003e\u003cbutton type=\"button\" class=\"process-step\" data-start=\"6.8\" aria-controls=\"process-video\" aria-label=\"Step 3: Choose the bar chart. Jump to this step.\"\u003e\u003cspan class=\"step-number\" aria-hidden=\"true\"\u003e03\u003c/span\u003e\u003cspan class=\"step-copy\"\u003e\u003cstrong\u003eChoose the bar chart\u003c/strong\u003e\u003cspan\u003eChoose 2-D Bar → Clustered Bar.\u003c/span\u003e\u003c/span\u003e\u003c/button\u003e\u003c/li\u003e\u003cli\u003e\u003cbutton type=\"button\" class=\"process-step\" data-start=\"11.7\" aria-controls=\"process-video\" aria-label=\"Step 4: Review the chart. Jump to this step.\"\u003e\u003cspan class=\"step-number\" aria-hidden=\"true\"\u003e04\u003c/span\u003e\u003cspan class=\"step-copy\"\u003e\u003cstrong\u003eReview the chart\u003c/strong\u003e\u003cspan\u003eCheck the categories and bar lengths.\u003c/span\u003e\u003c/span\u003e\u003c/button\u003e\u003c/li\u003e\u003cli\u003e\u003cbutton type=\"button\" class=\"process-step\" data-start=\"14.5\" aria-controls=\"process-video\" aria-label=\"Step 5: Open Chart Elements. Jump to this step.\"\u003e\u003cspan class=\"step-number\" aria-hidden=\"true\"\u003e05\u003c/span\u003e\u003cspan class=\"step-copy\"\u003e\u003cstrong\u003eOpen Chart Elements\u003c/strong\u003e\u003cspan\u003eSelect the green + beside the chart.\u003c/span\u003e\u003c/span\u003e\u003c/button\u003e\u003c/li\u003e\u003cli\u003e\u003cbutton type=\"button\" class=\"process-step\" data-start=\"18.3\" aria-controls=\"process-video\" aria-label=\"Step 6: Edit and format. Jump to this step.\"\u003e\u003cspan class=\"step-number\" aria-hidden=\"true\"\u003e06\u003c/span\u003e\u003cspan class=\"step-copy\"\u003e\u003cstrong\u003eEdit and format\u003c/strong\u003e\u003cspan\u003eAdd data labels and a descriptive title.\u003c/span\u003e\u003c/span\u003e\u003c/button\u003e\u003c/li\u003e\u003c/ol\u003e\u003cfigure class=\"process-player\"\u003e\u003ciframe id=\"process-video\" title=\"Excel Bar Chart demonstration on YouTube\" src=\"https://www.youtube.com/embed/__MBD_YOUTUBE_ID__?enablejsapi=1\u0026amp;playsinline=1\u0026amp;rel=0\u0026amp;loop=1\u0026amp;playlist=__MBD_YOUTUBE_ID__\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen loading=\"eager\"\u003e\u003c/iframe\u003e\u003c/figure\u003e\u003c/div\u003e\u003cdiv class=\"process-help\" id=\"process-description\"\u003e\u003cp\u003ePlay the full process, or select a step to jump ahead. The video will replay at the end.\u003c/p\u003e\u003cp class=\"process-duration\"\u003e6 steps · 35 seconds · Silent demonstration\u003c/p\u003e\u003c/div\u003e\u003cdetails class=\"formatting-notes\"\u003e\u003csummary\u003eMore chart formatting options\u003c/summary\u003e\u003cp\u003eChart Design → Add Chart Element is an alternative to the green + button. Add a descriptive chart title and value-axis title. Add data labels if useful; remove a single-series legend. Keep the value axis starting at zero.\u003c/p\u003e\u003cp\u003eRight-click an element → Format for more options. Rename series in the source header or Chart Design → Select Data.\u003c/p\u003e\u003cp\u003eFor additional guidance, follow \u003ca href=\"https://support.microsoft.com/en-us/excel/creating-charts-from-start-to-finish\"\u003eMicrosoft’s illustrated instructions\u003c/a\u003e.\u003c/p\u003e\u003c/details\u003e\u003cp class=\"youtube-help\"\u003eVideo not playing? \u003ca href=\"https://youtu.be/__MBD_YOUTUBE_ID__\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eWatch this demonstration on YouTube\u003c/a\u003e.\u003c/p\u003e\u003c/section\u003e\u003cdiv class=\"grid\"\u003e\u003csection\u003e\u003ch2\u003e\u003cspan\u003e04\u003c/span\u003e HOW TO READ THIS CHART\u003c/h2\u003e\u003cdiv class=\"panel\"\u003e\u003csvg viewBox=\"0 0 430 195\" role=\"img\" aria-label=\"Requests by service example chart\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003ctext x=\"0\" y=\"29\" font-size=\"13\"\u003eSetup\u003c/text\u003e\u003crect x=\"82\" y=\"13\" width=\"216.0\" height=\"19\" rx=\"3\" fill=\"#2457A6\"/\u003e\u003ctext x=\"306.0\" y=\"29\" font-size=\"13\"\u003e80\u003c/text\u003e\u003ctext x=\"0\" y=\"67\" font-size=\"13\"\u003eSupport\u003c/text\u003e\u003crect x=\"82\" y=\"51\" width=\"175.5\" height=\"19\" rx=\"3\" fill=\"#2457A6\"/\u003e\u003ctext x=\"265.5\" y=\"67\" font-size=\"13\"\u003e65\u003c/text\u003e\u003ctext x=\"0\" y=\"105\" font-size=\"13\"\u003eTraining\u003c/text\u003e\u003crect x=\"82\" y=\"89\" width=\"121.50000000000001\" height=\"19\" rx=\"3\" fill=\"#2457A6\"/\u003e\u003ctext x=\"211.5\" y=\"105\" font-size=\"13\"\u003e45\u003c/text\u003e\u003ctext x=\"0\" y=\"143\" font-size=\"13\"\u003eReview\u003c/text\u003e\u003crect x=\"82\" y=\"127\" width=\"81.0\" height=\"19\" rx=\"3\" fill=\"#2457A6\"/\u003e\u003ctext x=\"171.0\" y=\"143\" font-size=\"13\"\u003e30\u003c/text\u003e\u003ctext x=\"82\" y=\"185\" font-size=\"12\"\u003e0\u003c/text\u003e\u003c/svg\u003e\u003cp\u003e\u003cb\u003eRequests by service\u003c/b\u003e\u003c/p\u003e\u003cp\u003eSetup has 80 requests, 35 more than Training. Compare lengths against the same zero baseline.\u003c/p\u003e\u003cp\u003eLook for highest and lowest values, differences, and meaningful order.\u003c/p\u003e\u003c/div\u003e\u003c/section\u003e\u003csection\u003e\u003ch2\u003e\u003cspan\u003e05\u003c/span\u003e BEST PRACTICES\u003c/h2\u003e\u003cdiv class=\"panel\"\u003e\u003cul\u003e\u003cli\u003eStart the value axis at zero.\u003c/li\u003e\u003cli\u003eSort when ranking is the task.\u003c/li\u003e\u003cli\u003eUse horizontal bars for long labels.\u003c/li\u003e\u003cli\u003eAvoid 3-D and unnecessary effects.\u003c/li\u003e\u003c/ul\u003e\u003cp\u003e\u003cb\u003eASK\u003c/b\u003e \u0026nbsp; Which category is largest, and by how much?\u003c/p\u003e\u003c/div\u003e\u003c/section\u003e\u003c/div\u003e\u003csection\u003e\u003ch2\u003e\u003cspan\u003e06\u003c/span\u003e COMMON MISTAKES\u003c/h2\u003e\u003cdiv class=\"grid\"\u003e\u003cdiv class=\"panel bad\"\u003e\u003cb class=\"warn\"\u003eWRONG\u003c/b\u003e\u003cp\u003e3-D bars, a truncated baseline, or a jumble of hard-to-read labels.\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"panel right\"\u003e\u003cb class=\"good\"\u003eRIGHT\u003c/b\u003e\u003cp\u003eUse flat 2-D bars, a zero baseline, and clear category/value labels.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\u003c/section\u003e\u003cfooter\u003e\u003cp\u003eSources: \u003ca href=\"https://support.microsoft.com/en-us/excel/creating-charts-from-start-to-finish\"\u003eMicrosoft Support\u003c/a\u003e · \u003ca href=\"https://www.datawrapper.de/blog/chart-types-guide\"\u003eDatawrapper\u003c/a\u003e · \u003ca href=\"https://www.tableau.com/chart\"\u003eTableau\u003c/a\u003e. The full process demonstration is hosted on YouTube.\u003c/p\u003eMicrosoft 365 desktop · Ribbon names and availability may vary.\u003c/footer\u003e\u003c/div\u003e\u003c/main\u003e\u003cscript\u003e\n(function(){\n 'use strict';\n const frame = document.getElementById('process-video');\n const steps = Array.from(document.querySelectorAll('.process-step'));\n if (!frame || !steps.length) return;\n\n const videoId = '__MBD_YOUTUBE_ID__';\n const baseURL = 'https://www.youtube.com/embed/' + videoId +\n '?enablejsapi=1\u0026playsinline=1\u0026rel=0\u0026loop=1\u0026playlist=' + videoId;\n let player = null;\n let playerReady = false;\n let wasStarted = false;\n let desiredStart = null;\n let lastSelected = -1;\n\n function highlightAt(seconds) {\n if (!wasStarted) return;\n let selected = 0;\n steps.forEach((step, index) =\u003e {\n if (seconds \u003e= Number(step.dataset.start)) selected = index;\n });\n if (selected === lastSelected) return;\n lastSelected = selected;\n steps.forEach((step, index) =\u003e {\n if (index === selected) step.setAttribute('aria-current', 'step');\n else step.removeAttribute('aria-current');\n });\n }\n\n function fallbackSeek(seconds) {\n // Works even if the YouTube player API has not loaded or is blocked.\n const start = Math.max(0, Math.floor(seconds));\n frame.src = baseURL + '\u0026start=' + start + '\u0026autoplay=1';\n }\n\n steps.forEach(step =\u003e step.addEventListener('click', function(){\n const seconds = Number(step.dataset.start) || 0;\n wasStarted = true;\n desiredStart = seconds;\n highlightAt(seconds);\n if (playerReady \u0026\u0026 player) {\n try {\n player.seekTo(seconds, true);\n player.playVideo();\n desiredStart = null;\n return;\n } catch (error) { playerReady = false; }\n }\n fallbackSeek(seconds);\n }));\n\n // Expose the YouTube IFrame Player API callback on this guide's window.\n window.onYouTubeIframeAPIReady = function(){\n if (!window.YT || !window.YT.Player) return;\n try {\n player = new YT.Player('process-video', {\n events: {\n onReady: function(){\n playerReady = true;\n if (desiredStart !== null) {\n try { player.seekTo(desiredStart, true); player.playVideo(); } catch (error) {}\n desiredStart = null;\n }\n },\n onStateChange: function(event){\n if (!window.YT || !window.YT.PlayerState) return;\n if (event.data === YT.PlayerState.PLAYING) wasStarted = true;\n if (event.data === YT.PlayerState.ENDED) {\n try { player.seekTo(0, true); player.playVideo(); } catch (error) {}\n }\n },\n onError: function(){ playerReady = false; }\n }\n });\n } catch (error) { playerReady = false; }\n };\n\n // Keep step emphasis in sync when viewers use the YouTube scrubber.\n setInterval(function(){\n if (!playerReady || !player || !wasStarted) return;\n try {\n const time = player.getCurrentTime();\n if (Number.isFinite(time)) highlightAt(time);\n } catch (error) {}\n }, 400);\n\n const apiScript = document.createElement('script');\n apiScript.src = 'https://www.youtube.com/iframe_api';\n apiScript.async = true;\n document.head.appendChild(apiScript);\n})();\n\u003c/script\u003e\u003c/body\u003e\u003c/html\u003e"
"\u003c!doctype html\u003e\u003chtml lang=\"en\"\u003e\u003chead\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta name=\"viewport\" content=\"width=device-width,initial-scale=1\"\u003e\u003ctitle\u003eMat by Design | LINE CHART\u003c/title\u003e\u003cstyle\u003e :root{--accent:#006D77;font-family:Helvetica,Arial,sans-serif;color:#102a43}*{box-sizing:border-box}body{margin:0;background:#eaf0f4}main{max-width:1320px;margin:auto;background:white}header{background:#102a43;color:white;padding:30px 4%;display:flex;justify-content:space-between;align-items:end;gap:20px}header small{color:#a9d7f0;font-weight:bold;letter-spacing:.08em}h1{font-size:clamp(2rem,4vw,3rem);margin:10px 0 0}header p{font-weight:bold;font-size:1.3rem}.content{padding:24px 4%}.grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}h2{font-size:1.2rem;margin:20px 0 12px}h2 span{color:#0a5a9c;margin-right:12px}.panel,.step{background:#f3f8fb;border:1px solid #d3e3ef;border-radius:12px;padding:20px}p{line-height:1.45}.lead{font-size:1.15rem;font-weight:700}.good{color:#146c43}.warn{color:#a52019}table{border-collapse:collapse;min-width:80%}th,td{padding:7px 12px;border-bottom:1px solid #cadce8;text-align:left}th{background:#dcecf6}.workflow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.sthead{display:flex;align-items:center;gap:14px}.sthead strong{font-size:2rem;color:var(--accent)}.step small{color:#0a5a9c;font-weight:bold}.step p{margin:10px 0}.custom{background:#ecf5fc}svg{max-width:100%;height:195px}.bad{background:#fff3f1}.right{background:#f0f8f3}ul{padding-left:22px;line-height:1.8}footer{border-top:1px solid #cadce8;margin-top:30px;padding:20px 0;color:#455f73;font-size:.9rem}a{color:#075795}.note{color:#455f73;font-size:.9rem}@media(max-width:720px){header{display:block}.grid,.workflow{grid-template-columns:1fr}.content{padding:18px}}@media print{@page{size:17in 22in;margin:.4in}body{background:white}main{max-width:none}header{print-color-adjust:exact;-webkit-print-color-adjust:exact}.panel,.step{print-color-adjust:exact;-webkit-print-color-adjust:exact}.content{padding:10px 2%}h2{margin:12px 0 7px}p{margin:7px 0}.panel,.step{padding:12px}footer{margin-top:12px}}\n .process-layout{display:grid;grid-template-columns:minmax(280px,.36fr) minmax(0,1fr);gap:24px;align-items:stretch}\n.process-steps{list-style:none;display:grid;grid-template-rows:repeat(6,minmax(0,1fr));gap:8px;padding:0;margin:0;min-height:0}\n.process-steps li{min-height:0}\n.process-step{display:flex;align-items:center;gap:12px;width:100%;height:100%;min-height:0;text-align:left;padding:8px 12px;border:1px solid #d3e3ef;border-radius:9px;background:#f3f8fb;color:#102a43;font-family:Helvetica,Arial,sans-serif;cursor:pointer}\n.process-step:hover{border-color:#006d77;background:#eaf6f6}\n.process-step:focus-visible{outline:3px solid #006d77;outline-offset:2px}\n.process-step[aria-current=\"step\"]{border-color:#006d77;background:#eaf6f6;box-shadow:inset 3px 0 #006d77}\n.step-number{color:#006d77;font-size:1.25rem;font-weight:700;flex:0 0 27px}\n.step-copy{display:block;min-width:0}.step-copy strong{display:block;font-size:15px;line-height:1.15}.step-copy span{display:block;margin-top:4px;font-size:13px;line-height:1.3;color:#455f73}\n.process-player{margin:0;min-width:0;align-self:stretch;aspect-ratio:16/9;position:relative;background:#102a43;border:1px solid #d3e3ef;border-radius:10px;overflow:hidden}\n.process-player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#fff}\n.process-help{display:flex;justify-content:space-between;gap:12px;margin:12px 0 0;font-size:.85rem;color:#455f73;line-height:1.4}\n.process-help p{margin:0}.process-duration{white-space:nowrap}\n.formatting-notes{margin-top:14px;color:#455f73;font-size:.9rem;line-height:1.5}.formatting-notes summary{cursor:pointer;color:#075795;font-weight:700}.formatting-notes p{margin:8px 0}\n@media(max-width:1199px){.process-layout{grid-template-columns:1fr;gap:16px}.process-player{grid-row:1;aspect-ratio:16/9}.process-steps{grid-template-rows:repeat(6,auto)}.process-step{min-height:64px;padding:12px 14px}.process-help{flex-direction:column;gap:4px}}\n@media print{.process-layout{grid-template-columns:30% 1fr}.process-player{grid-row:auto}.process-step{break-inside:avoid}.formatting-notes{display:none}}\n\u003c/style\u003e\u003cstyle\u003e\n.process-player iframe#process-video{position:absolute;inset:0;width:100%;height:100%;display:block;border:0;background:#102a43}\n.process-player{overflow:hidden}\n.youtube-help{font-size:13px;margin:7px 0 0;color:#455f73}\n.youtube-help a{font-weight:700;color:#075795}\n\u003c/style\u003e\u003c/head\u003e\u003cbody\u003e\u003cmain\u003e\u003cheader\u003e\u003cdiv\u003e\u003csmall\u003eMAT BY DESIGN / EXCEL VISUAL GUIDE\u003c/small\u003e\u003ch1\u003eLINE CHART\u003c/h1\u003e\u003c/div\u003e\u003cp\u003eSee change over time\u003c/p\u003e\u003c/header\u003e\u003cdiv class=\"content\"\u003e\u003cp style=\"color:#455f73;font-size:.9rem\"\u003e\u003cb\u003eLEARNING OBJECTIVE\u003c/b\u003e \u0026nbsp; Create and interpret a line chart that reveals change over time.\u003c/p\u003e\u003cdiv class=\"grid\"\u003e\u003csection\u003e\u003ch2\u003e\u003cspan\u003e01\u003c/span\u003e WHAT IS IT?\u003c/h2\u003e\u003cdiv class=\"panel\"\u003e\u003cp class=\"lead\"\u003eConnects observations in time order to reveal direction and change.\u003c/p\u003e\u003cp\u003e\u003cb class=\"good\"\u003eUSE\u003c/b\u003e \u0026nbsp; Trends across dates; monthly revenue, response time, or completion rates.\u003c/p\u003e\u003cp\u003e\u003cb class=\"warn\"\u003eAVOID\u003c/b\u003e \u0026nbsp; Unordered categories or the relationship between two numeric variables.\u003c/p\u003e\u003cp\u003e\u003cb\u003eASK\u003c/b\u003e \u0026nbsp; How did the measure change over time?\u003c/p\u003e\u003c/div\u003e\u003c/section\u003e\u003csection\u003e\u003ch2\u003e\u003cspan\u003e02\u003c/span\u003e BEFORE YOU BEGIN\u003c/h2\u003e\u003cdiv class=\"panel\"\u003e\u003ctable\u003e\u003cthead\u003e\u003ctr\u003e\u003cth\u003eMonth\u003c/th\u003e\u003cth\u003eOrders\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd\u003e1/1/2026\u003c/td\u003e\u003ctd\u003e120\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e2/1/2026\u003c/td\u003e\u003ctd\u003e150\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e3/1/2026\u003c/td\u003e\u003ctd\u003e135\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e4/1/2026\u003c/td\u003e\u003ctd\u003e180\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cp\u003e\u003cb class=\"good\"\u003e✓ GOOD\u003c/b\u003e \u0026nbsp; Use real dates in time order and a consistent reporting interval. Keep one series per adjacent column.\u003c/p\u003e\u003cp\u003e\u003cb class=\"warn\"\u003e! WATCH\u003c/b\u003e \u0026nbsp; Do not silently replace a missing value with zero. Irregular intervals need a date axis or an XY scatter chart when precise spacing matters.\u003c/p\u003e\u003c/div\u003e\u003c/section\u003e\u003c/div\u003e\u003csection aria-labelledby=\"process-heading\"\u003e\u003ch2 id=\"process-heading\"\u003e\u003cspan\u003e03\u003c/span\u003e BUILD AND CUSTOMIZE YOUR CHART\u003c/h2\u003e\u003cdiv class=\"process-layout\"\u003e\u003col class=\"process-steps\" aria-label=\"Six steps to build and customize a line chart\"\u003e\u003cli\u003e\u003cbutton type=\"button\" class=\"process-step\" data-start=\"0\" aria-controls=\"process-video\" aria-label=\"Step 1: Select data. Jump to this step.\"\u003e\u003cspan class=\"step-number\" aria-hidden=\"true\"\u003e01\u003c/span\u003e\u003cspan class=\"step-copy\"\u003e\u003cstrong\u003eSelect data\u003c/strong\u003e\u003cspan\u003eSelect both columns, including headers.\u003c/span\u003e\u003c/span\u003e\u003c/button\u003e\u003c/li\u003e\u003cli\u003e\u003cbutton type=\"button\" class=\"process-step\" data-start=\"3\" aria-controls=\"process-video\" aria-label=\"Step 2: Open Insert. Jump to this step.\"\u003e\u003cspan class=\"step-number\" aria-hidden=\"true\"\u003e02\u003c/span\u003e\u003cspan class=\"step-copy\"\u003e\u003cstrong\u003eOpen Insert\u003c/strong\u003e\u003cspan\u003eSelect Insert on the ribbon.\u003c/span\u003e\u003c/span\u003e\u003c/button\u003e\u003c/li\u003e\u003cli\u003e\u003cbutton type=\"button\" class=\"process-step\" data-start=\"4.9\" aria-controls=\"process-video\" aria-label=\"Step 3: Choose the line chart. Jump to this step.\"\u003e\u003cspan class=\"step-number\" aria-hidden=\"true\"\u003e03\u003c/span\u003e\u003cspan class=\"step-copy\"\u003e\u003cstrong\u003eChoose the line chart\u003c/strong\u003e\u003cspan\u003eChoose Line or Area → Line with Markers.\u003c/span\u003e\u003c/span\u003e\u003c/button\u003e\u003c/li\u003e\u003cli\u003e\u003cbutton type=\"button\" class=\"process-step\" data-start=\"7.6\" aria-controls=\"process-video\" aria-label=\"Step 4: Review the chart and title. Jump to this step.\"\u003e\u003cspan class=\"step-number\" aria-hidden=\"true\"\u003e04\u003c/span\u003e\u003cspan class=\"step-copy\"\u003e\u003cstrong\u003eReview the chart and title\u003c/strong\u003e\u003cspan\u003eCheck the trend and rename the title.\u003c/span\u003e\u003c/span\u003e\u003c/button\u003e\u003c/li\u003e\u003cli\u003e\u003cbutton type=\"button\" class=\"process-step\" data-start=\"15.2\" aria-controls=\"process-video\" aria-label=\"Step 5: Open Chart Elements. Jump to this step.\"\u003e\u003cspan class=\"step-number\" aria-hidden=\"true\"\u003e05\u003c/span\u003e\u003cspan class=\"step-copy\"\u003e\u003cstrong\u003eOpen Chart Elements\u003c/strong\u003e\u003cspan\u003eSelect the green + beside the chart.\u003c/span\u003e\u003c/span\u003e\u003c/button\u003e\u003c/li\u003e\u003cli\u003e\u003cbutton type=\"button\" class=\"process-step\" data-start=\"18.7\" aria-controls=\"process-video\" aria-label=\"Step 6: Edit and format. Jump to this step.\"\u003e\u003cspan class=\"step-number\" aria-hidden=\"true\"\u003e06\u003c/span\u003e\u003cspan class=\"step-copy\"\u003e\u003cstrong\u003eEdit and format\u003c/strong\u003e\u003cspan\u003eAdd axis titles and refine formatting.\u003c/span\u003e\u003c/span\u003e\u003c/button\u003e\u003c/li\u003e\u003c/ol\u003e\u003cfigure class=\"process-player\"\u003e\u003ciframe id=\"process-video\" title=\"Excel Line Chart demonstration on YouTube\" src=\"https://www.youtube.com/embed/__MBD_YOUTUBE_ID__?enablejsapi=1\u0026amp;playsinline=1\u0026amp;rel=0\u0026amp;loop=1\u0026amp;playlist=__MBD_YOUTUBE_ID__\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen loading=\"eager\"\u003e\u003c/iframe\u003e\u003c/figure\u003e\u003c/div\u003e\u003cdiv class=\"process-help\" id=\"process-description\"\u003e\u003cp\u003ePlay the full process, or select a step to jump ahead. The video will replay at the end.\u003c/p\u003e\u003cp class=\"process-duration\"\u003e6 steps · 29 seconds · Silent demonstration\u003c/p\u003e\u003c/div\u003e\u003cdetails class=\"formatting-notes\"\u003e\u003csummary\u003eMore chart formatting options\u003c/summary\u003e\u003cp\u003eChart Design → Add Chart Element is an alternative to the green + button. Add a descriptive chart title and axis titles. Label key points only. Keep a legend when multiple series need identification.\u003c/p\u003e\u003cp\u003eRight-click an element → Format for more options. Rename series in the source header or Chart Design → Select Data.\u003c/p\u003e\u003cp\u003eFor additional guidance, follow \u003ca href=\"https://support.microsoft.com/en-us/excel/creating-charts-from-start-to-finish\"\u003eMicrosoft’s illustrated instructions\u003c/a\u003e.\u003c/p\u003e\u003c/details\u003e\u003cp class=\"youtube-help\"\u003eVideo not playing? \u003ca href=\"https://youtu.be/__MBD_YOUTUBE_ID__\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eWatch this demonstration on YouTube\u003c/a\u003e.\u003c/p\u003e\u003c/section\u003e\u003cdiv class=\"grid\"\u003e\u003csection\u003e\u003ch2\u003e\u003cspan\u003e04\u003c/span\u003e HOW TO READ THIS CHART\u003c/h2\u003e\u003cdiv class=\"panel\"\u003e\u003csvg viewBox=\"0 0 430 195\" role=\"img\" aria-label=\"Monthly orders example chart\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003ctext x=\"5\" y=\"10\" font-size=\"12\"\u003eOrders\u003c/text\u003e\u003cpath d=\"M45 165 V15 M45 165 H400\" stroke=\"#94ADBE\" fill=\"none\"/\u003e\u003cpolyline points=\"65,135 165,90 265,113 365,45\" fill=\"none\" stroke=\"#006D77\" stroke-width=\"4\"/\u003e\u003ccircle cx=\"65\" cy=\"135\" r=\"5\" fill=\"#006D77\"/\u003e\u003ctext x=\"53\" y=\"185\" font-size=\"12\"\u003eJan\u003c/text\u003e\u003ccircle cx=\"165\" cy=\"90\" r=\"5\" fill=\"#006D77\"/\u003e\u003ctext x=\"153\" y=\"185\" font-size=\"12\"\u003eFeb\u003c/text\u003e\u003ccircle cx=\"265\" cy=\"113\" r=\"5\" fill=\"#006D77\"/\u003e\u003ctext x=\"253\" y=\"185\" font-size=\"12\"\u003eMar\u003c/text\u003e\u003ccircle cx=\"365\" cy=\"45\" r=\"5\" fill=\"#006D77\"/\u003e\u003ctext x=\"353\" y=\"185\" font-size=\"12\"\u003eApr\u003c/text\u003e\u003ctext x=\"6\" y=\"165\" font-size=\"12\"\u003e100\u003c/text\u003e\u003ctext x=\"6\" y=\"20\" font-size=\"12\"\u003e200\u003c/text\u003e\u003c/svg\u003e\u003cp\u003e\u003cb\u003eMonthly orders\u003c/b\u003e\u003c/p\u003e\u003cp\u003eOrders rose from 120 in January to 180 in April, with a dip in March. The chart shows change, not its cause.\u003c/p\u003e\u003cp\u003eLook for direction, turning points, gaps, and the time span.\u003c/p\u003e\u003c/div\u003e\u003c/section\u003e\u003csection\u003e\u003ch2\u003e\u003cspan\u003e05\u003c/span\u003e BEST PRACTICES\u003c/h2\u003e\u003cdiv class=\"panel\"\u003e\u003cul\u003e\u003cli\u003eUse ordered dates and meaningful intervals.\u003c/li\u003e\u003cli\u003eLimit series and use distinct lines or markers.\u003c/li\u003e\u003cli\u003eKeep gridlines light and labels readable.\u003c/li\u003e\u003cli\u003eCheck the axis and missing-data settings.\u003c/li\u003e\u003c/ul\u003e\u003cp\u003e\u003cb\u003eASK\u003c/b\u003e \u0026nbsp; How did the measure change over time?\u003c/p\u003e\u003c/div\u003e\u003c/section\u003e\u003c/div\u003e\u003csection\u003e\u003ch2\u003e\u003cspan\u003e06\u003c/span\u003e COMMON MISTAKES\u003c/h2\u003e\u003cdiv class=\"grid\"\u003e\u003cdiv class=\"panel bad\"\u003e\u003cb class=\"warn\"\u003eWRONG\u003c/b\u003e\u003cp\u003eCrowded lines, missing periods treated as zero, or unordered dates.\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"panel right\"\u003e\u003cb class=\"good\"\u003eRIGHT\u003c/b\u003e\u003cp\u003eShow a few identified series; investigate gaps and use a suitable date axis.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\u003c/section\u003e\u003cfooter\u003e\u003cp\u003eSources: \u003ca href=\"https://support.microsoft.com/en-us/excel/creating-charts-from-start-to-finish\"\u003eMicrosoft Support\u003c/a\u003e · \u003ca href=\"https://www.datawrapper.de/blog/chart-types-guide\"\u003eDatawrapper\u003c/a\u003e · \u003ca href=\"https://www.tableau.com/chart\"\u003eTableau\u003c/a\u003e. The full process demonstration is hosted on YouTube.\u003c/p\u003eMicrosoft 365 desktop · Ribbon names and availability may vary.\u003c/footer\u003e\u003c/div\u003e\u003c/main\u003e\u003cscript\u003e\n(function(){\n 'use strict';\n const frame = document.getElementById('process-video');\n const steps = Array.from(document.querySelectorAll('.process-step'));\n if (!frame || !steps.length) return;\n\n const videoId = '__MBD_YOUTUBE_ID__';\n const baseURL = 'https://www.youtube.com/embed/' + videoId +\n '?enablejsapi=1\u0026playsinline=1\u0026rel=0\u0026loop=1\u0026playlist=' + videoId;\n let player = null;\n let playerReady = false;\n let wasStarted = false;\n let desiredStart = null;\n let lastSelected = -1;\n\n function highlightAt(seconds) {\n if (!wasStarted) return;\n let selected = 0;\n steps.forEach((step, index) =\u003e {\n if (seconds \u003e= Number(step.dataset.start)) selected = index;\n });\n if (selected === lastSelected) return;\n lastSelected = selected;\n steps.forEach((step, index) =\u003e {\n if (index === selected) step.setAttribute('aria-current', 'step');\n else step.removeAttribute('aria-current');\n });\n }\n\n function fallbackSeek(seconds) {\n // Works even if the YouTube player API has not loaded or is blocked.\n const start = Math.max(0, Math.floor(seconds));\n frame.src = baseURL + '\u0026start=' + start + '\u0026autoplay=1';\n }\n\n steps.forEach(step =\u003e step.addEventListener('click', function(){\n const seconds = Number(step.dataset.start) || 0;\n wasStarted = true;\n desiredStart = seconds;\n highlightAt(seconds);\n if (playerReady \u0026\u0026 player) {\n try {\n player.seekTo(seconds, true);\n player.playVideo();\n desiredStart = null;\n return;\n } catch (error) { playerReady = false; }\n }\n fallbackSeek(seconds);\n }));\n\n // Expose the YouTube IFrame Player API callback on this guide's window.\n window.onYouTubeIframeAPIReady = function(){\n if (!window.YT || !window.YT.Player) return;\n try {\n player = new YT.Player('process-video', {\n events: {\n onReady: function(){\n playerReady = true;\n if (desiredStart !== null) {\n try { player.seekTo(desiredStart, true); player.playVideo(); } catch (error) {}\n desiredStart = null;\n }\n },\n onStateChange: function(event){\n if (!window.YT || !window.YT.PlayerState) return;\n if (event.data === YT.PlayerState.PLAYING) wasStarted = true;\n if (event.data === YT.PlayerState.ENDED) {\n try { player.seekTo(0, true); player.playVideo(); } catch (error) {}\n }\n },\n onError: function(){ playerReady = false; }\n }\n });\n } catch (error) { playerReady = false; }\n };\n\n // Keep step emphasis in sync when viewers use the YouTube scrubber.\n setInterval(function(){\n if (!playerReady || !player || !wasStarted) return;\n try {\n const time = player.getCurrentTime();\n if (Number.isFinite(time)) highlightAt(time);\n } catch (error) {}\n }, 400);\n\n const apiScript = document.createElement('script');\n apiScript.src = 'https://www.youtube.com/iframe_api';\n apiScript.async = true;\n document.head.appendChild(apiScript);\n})();\n\u003c/script\u003e\u003c/body\u003e\u003c/html\u003e"
"\u003c!doctype html\u003e\u003chtml lang=\"en\"\u003e\u003chead\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta name=\"viewport\" content=\"width=device-width,initial-scale=1\"\u003e\u003ctitle\u003eMat by Design | PIE CHART\u003c/title\u003e\u003cstyle\u003e :root{--accent:#995420;font-family:Helvetica,Arial,sans-serif;color:#102a43}*{box-sizing:border-box}body{margin:0;background:#eaf0f4}main{max-width:1320px;margin:auto;background:white}header{background:#102a43;color:white;padding:30px 4%;display:flex;justify-content:space-between;align-items:end;gap:20px}header small{color:#a9d7f0;font-weight:bold;letter-spacing:.08em}h1{font-size:clamp(2rem,4vw,3rem);margin:10px 0 0}header p{font-weight:bold;font-size:1.3rem}.content{padding:24px 4%}.grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}h2{font-size:1.2rem;margin:20px 0 12px}h2 span{color:#0a5a9c;margin-right:12px}.panel,.step{background:#f3f8fb;border:1px solid #d3e3ef;border-radius:12px;padding:20px}p{line-height:1.45}.lead{font-size:1.15rem;font-weight:700}.good{color:#146c43}.warn{color:#a52019}table{border-collapse:collapse;min-width:80%}th,td{padding:7px 12px;border-bottom:1px solid #cadce8;text-align:left}th{background:#dcecf6}.workflow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.sthead{display:flex;align-items:center;gap:14px}.sthead strong{font-size:2rem;color:var(--accent)}.step small{color:#0a5a9c;font-weight:bold}.step p{margin:10px 0}.custom{background:#ecf5fc}svg{max-width:100%;height:195px}.bad{background:#fff3f1}.right{background:#f0f8f3}ul{padding-left:22px;line-height:1.8}footer{border-top:1px solid #cadce8;margin-top:30px;padding:20px 0;color:#455f73;font-size:.9rem}a{color:#075795}.note{color:#455f73;font-size:.9rem}@media(max-width:720px){header{display:block}.grid,.workflow{grid-template-columns:1fr}.content{padding:18px}}@media print{@page{size:17in 22in;margin:.4in}body{background:white}main{max-width:none}header{print-color-adjust:exact;-webkit-print-color-adjust:exact}.panel,.step{print-color-adjust:exact;-webkit-print-color-adjust:exact}.content{padding:10px 2%}h2{margin:12px 0 7px}p{margin:7px 0}.panel,.step{padding:12px}footer{margin-top:12px}}\n .process-layout{display:grid;grid-template-columns:minmax(280px,.36fr) minmax(0,1fr);gap:24px;align-items:stretch}\n.process-steps{list-style:none;display:grid;grid-template-rows:repeat(6,minmax(0,1fr));gap:8px;padding:0;margin:0;min-height:0}\n.process-steps li{min-height:0}\n.process-step{display:flex;align-items:center;gap:12px;width:100%;height:100%;min-height:0;text-align:left;padding:8px 12px;border:1px solid #d3e3ef;border-radius:9px;background:#f3f8fb;color:#102a43;font-family:Helvetica,Arial,sans-serif;cursor:pointer}\n.process-step:hover{border-color:#995420;background:#fbf1e8}\n.process-step:focus-visible{outline:3px solid #995420;outline-offset:2px}\n.process-step[aria-current=\"step\"]{border-color:#995420;background:#fbf1e8;box-shadow:inset 3px 0 #995420}\n.step-number{color:#995420;font-size:1.25rem;font-weight:700;flex:0 0 27px}\n.step-copy{display:block;min-width:0}.step-copy strong{display:block;font-size:15px;line-height:1.15}.step-copy span{display:block;margin-top:4px;font-size:13px;line-height:1.3;color:#455f73}\n.process-player{margin:0;min-width:0;align-self:stretch;aspect-ratio:16/9;position:relative;background:#102a43;border:1px solid #d3e3ef;border-radius:10px;overflow:hidden}\n.process-player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#fff}\n.process-help{display:flex;justify-content:space-between;gap:12px;margin:12px 0 0;font-size:.85rem;color:#455f73;line-height:1.4}\n.process-help p{margin:0}.process-duration{white-space:nowrap}\n.formatting-notes{margin-top:14px;color:#455f73;font-size:.9rem;line-height:1.5}.formatting-notes summary{cursor:pointer;color:#075795;font-weight:700}.formatting-notes p{margin:8px 0}\n@media(max-width:1199px){.process-layout{grid-template-columns:1fr;gap:16px}.process-player{grid-row:1;aspect-ratio:16/9}.process-steps{grid-template-rows:repeat(6,auto)}.process-step{min-height:64px;padding:12px 14px}.process-help{flex-direction:column;gap:4px}}\n@media print{.process-layout{grid-template-columns:30% 1fr}.process-player{grid-row:auto}.process-step{break-inside:avoid}.formatting-notes{display:none}}\n\u003c/style\u003e\u003cstyle\u003e\n.process-player iframe#process-video{position:absolute;inset:0;width:100%;height:100%;display:block;border:0;background:#102a43}\n.process-player{overflow:hidden}\n.youtube-help{font-size:13px;margin:7px 0 0;color:#455f73}\n.youtube-help a{font-weight:700;color:#075795}\n\u003c/style\u003e\u003c/head\u003e\u003cbody\u003e\u003cmain\u003e\u003cheader\u003e\u003cdiv\u003e\u003csmall\u003eMAT BY DESIGN / EXCEL VISUAL GUIDE\u003c/small\u003e\u003ch1\u003ePIE CHART\u003c/h1\u003e\u003c/div\u003e\u003cp\u003eShow parts of one whole\u003c/p\u003e\u003c/header\u003e\u003cdiv class=\"content\"\u003e\u003cp style=\"color:#455f73;font-size:.9rem\"\u003e\u003cb\u003eLEARNING OBJECTIVE\u003c/b\u003e \u0026nbsp; Create and interpret a pie chart that shows shares of a whole.\u003c/p\u003e\u003cdiv class=\"grid\"\u003e\u003csection\u003e\u003ch2\u003e\u003cspan\u003e01\u003c/span\u003e WHAT IS IT?\u003c/h2\u003e\u003cdiv class=\"panel\"\u003e\u003cp class=\"lead\"\u003eDivides one total into slices proportional to each category’s contribution.\u003c/p\u003e\u003cp\u003e\u003cb class=\"good\"\u003eUSE\u003c/b\u003e \u0026nbsp; Show a few mutually exclusive shares of one complete total.\u003c/p\u003e\u003cp\u003e\u003cb class=\"warn\"\u003eAVOID\u003c/b\u003e \u0026nbsp; Close comparisons, multiple totals, negative values, or categories that overlap.\u003c/p\u003e\u003cp\u003e\u003cb\u003eASK\u003c/b\u003e \u0026nbsp; What share of the total does each category represent?\u003c/p\u003e\u003c/div\u003e\u003c/section\u003e\u003csection\u003e\u003ch2\u003e\u003cspan\u003e02\u003c/span\u003e BEFORE YOU BEGIN\u003c/h2\u003e\u003cdiv class=\"panel\"\u003e\u003ctable\u003e\u003cthead\u003e\u003ctr\u003e\u003cth\u003eChannel\u003c/th\u003e\u003cth\u003eOrders\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd\u003eOnline\u003c/td\u003e\u003ctd\u003e50\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003ePhone\u003c/td\u003e\u003ctd\u003e25\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003eStore\u003c/td\u003e\u003ctd\u003e15\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003eOther\u003c/td\u003e\u003ctd\u003e10\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cp\u003e\u003cb class=\"good\"\u003e✓ GOOD\u003c/b\u003e \u0026nbsp; Use one label column and one numeric series. Categories must be mutually exclusive and together make the intended whole.\u003c/p\u003e\u003cp\u003e\u003cb class=\"warn\"\u003e! WATCH\u003c/b\u003e \u0026nbsp; Do not include a Total row in the selection. Use nonnegative values with a positive total; avoid numerous tiny slices.\u003c/p\u003e\u003c/div\u003e\u003c/section\u003e\u003c/div\u003e\u003csection aria-labelledby=\"process-heading\"\u003e\u003ch2 id=\"process-heading\"\u003e\u003cspan\u003e03\u003c/span\u003e BUILD AND CUSTOMIZE YOUR CHART\u003c/h2\u003e\u003cdiv class=\"process-layout\"\u003e\u003col class=\"process-steps\" aria-label=\"Six steps to build and customize a pie chart\"\u003e\u003cli\u003e\u003cbutton type=\"button\" class=\"process-step\" data-start=\"0\" aria-controls=\"process-video\" aria-label=\"Step 1: Select data. Jump to this step.\"\u003e\u003cspan class=\"step-number\" aria-hidden=\"true\"\u003e01\u003c/span\u003e\u003cspan class=\"step-copy\"\u003e\u003cstrong\u003eSelect data\u003c/strong\u003e\u003cspan\u003eSelect both columns, including headers.\u003c/span\u003e\u003c/span\u003e\u003c/button\u003e\u003c/li\u003e\u003cli\u003e\u003cbutton type=\"button\" class=\"process-step\" data-start=\"3.8\" aria-controls=\"process-video\" aria-label=\"Step 2: Open Insert. Jump to this step.\"\u003e\u003cspan class=\"step-number\" aria-hidden=\"true\"\u003e02\u003c/span\u003e\u003cspan class=\"step-copy\"\u003e\u003cstrong\u003eOpen Insert\u003c/strong\u003e\u003cspan\u003eSelect Insert on the ribbon.\u003c/span\u003e\u003c/span\u003e\u003c/button\u003e\u003c/li\u003e\u003cli\u003e\u003cbutton type=\"button\" class=\"process-step\" data-start=\"5.5\" aria-controls=\"process-video\" aria-label=\"Step 3: Choose the pie chart. Jump to this step.\"\u003e\u003cspan class=\"step-number\" aria-hidden=\"true\"\u003e03\u003c/span\u003e\u003cspan class=\"step-copy\"\u003e\u003cstrong\u003eChoose the pie chart\u003c/strong\u003e\u003cspan\u003eChoose Pie or Doughnut → 2-D Pie.\u003c/span\u003e\u003c/span\u003e\u003c/button\u003e\u003c/li\u003e\u003cli\u003e\u003cbutton type=\"button\" class=\"process-step\" data-start=\"8.7\" aria-controls=\"process-video\" aria-label=\"Step 4: Review the chart and title. Jump to this step.\"\u003e\u003cspan class=\"step-number\" aria-hidden=\"true\"\u003e04\u003c/span\u003e\u003cspan class=\"step-copy\"\u003e\u003cstrong\u003eReview the chart and title\u003c/strong\u003e\u003cspan\u003eCheck the slices and rename the title.\u003c/span\u003e\u003c/span\u003e\u003c/button\u003e\u003c/li\u003e\u003cli\u003e\u003cbutton type=\"button\" class=\"process-step\" data-start=\"16.3\" aria-controls=\"process-video\" aria-label=\"Step 5: Open Chart Elements. Jump to this step.\"\u003e\u003cspan class=\"step-number\" aria-hidden=\"true\"\u003e05\u003c/span\u003e\u003cspan class=\"step-copy\"\u003e\u003cstrong\u003eOpen Chart Elements\u003c/strong\u003e\u003cspan\u003eSelect the green + beside the chart.\u003c/span\u003e\u003c/span\u003e\u003c/button\u003e\u003c/li\u003e\u003cli\u003e\u003cbutton type=\"button\" class=\"process-step\" data-start=\"20.8\" aria-controls=\"process-video\" aria-label=\"Step 6: Edit and format. Jump to this step.\"\u003e\u003cspan class=\"step-number\" aria-hidden=\"true\"\u003e06\u003c/span\u003e\u003cspan class=\"step-copy\"\u003e\u003cstrong\u003eEdit and format\u003c/strong\u003e\u003cspan\u003eShow category names and percentages.\u003c/span\u003e\u003c/span\u003e\u003c/button\u003e\u003c/li\u003e\u003c/ol\u003e\u003cfigure class=\"process-player\"\u003e\u003ciframe id=\"process-video\" title=\"Excel Pie Chart demonstration on YouTube\" src=\"https://www.youtube.com/embed/__MBD_YOUTUBE_ID__?enablejsapi=1\u0026amp;playsinline=1\u0026amp;rel=0\u0026amp;loop=1\u0026amp;playlist=__MBD_YOUTUBE_ID__\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen loading=\"eager\"\u003e\u003c/iframe\u003e\u003c/figure\u003e\u003c/div\u003e\u003cdiv class=\"process-help\" id=\"process-description\"\u003e\u003cp\u003ePlay the full process, or select a step to jump ahead. The video will replay at the end.\u003c/p\u003e\u003cp class=\"process-duration\"\u003e6 steps · 46 seconds · Silent demonstration\u003c/p\u003e\u003c/div\u003e\u003cdetails class=\"formatting-notes\"\u003e\u003csummary\u003eMore chart formatting options\u003c/summary\u003e\u003cp\u003eChart Design → Add Chart Element is an alternative to the green + button. Add a descriptive chart title. Add Data Labels, then choose Format Data Labels → Category Name and Percentage. Remove the legend when the slices are labeled directly. Pie charts have no axes.\u003c/p\u003e\u003cp\u003eRight-click an element → Format for more options. Rename series in the source header or Chart Design → Select Data.\u003c/p\u003e\u003cp\u003eFor additional guidance, follow \u003ca href=\"https://support.microsoft.com/en-us/excel/creating-charts-from-start-to-finish\"\u003eMicrosoft’s illustrated instructions\u003c/a\u003e.\u003c/p\u003e\u003c/details\u003e\u003cp class=\"youtube-help\"\u003eVideo not playing? \u003ca href=\"https://youtu.be/__MBD_YOUTUBE_ID__\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eWatch this demonstration on YouTube\u003c/a\u003e.\u003c/p\u003e\u003c/section\u003e\u003cdiv class=\"grid\"\u003e\u003csection\u003e\u003ch2\u003e\u003cspan\u003e04\u003c/span\u003e HOW TO READ THIS CHART\u003c/h2\u003e\u003cdiv class=\"panel\"\u003e\u003csvg viewBox=\"0 0 430 195\" role=\"img\" aria-label=\"Share of orders by channel example chart\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003ccircle cx=\"105\" cy=\"95\" r=\"75\" fill=\"#995420\"/\u003e\u003cpath d=\"M105 95 L105 170 A75 75 0 0 0 180 95 Z\" fill=\"#6FAAB0\"/\u003e\u003cpath d=\"M105 95 L180 95 A75 75 0 0 0 149 34 Z\" fill=\"#B3D1D3\"/\u003e\u003cpath d=\"M105 95 L149 34 A75 75 0 0 0 105 20 Z\" fill=\"#DEE9E9\"/\u003e\u003ctext x=\"220\" y=\"48\" font-size=\"15\"\u003eOnline: 50%\u003c/text\u003e\u003ctext x=\"220\" y=\"80\" font-size=\"15\"\u003ePhone: 25%\u003c/text\u003e\u003ctext x=\"220\" y=\"112\" font-size=\"15\"\u003eStore: 15%\u003c/text\u003e\u003ctext x=\"220\" y=\"144\" font-size=\"15\"\u003eOther: 10%\u003c/text\u003e\u003c/svg\u003e\u003cp\u003e\u003cb\u003eShare of orders by channel\u003c/b\u003e\u003c/p\u003e\u003cp\u003eOnline accounts for 50 of 100 orders, or 50%. The four categories together represent the whole.\u003c/p\u003e\u003cp\u003eIdentify the whole first, then compare the largest shares and read labels.\u003c/p\u003e\u003c/div\u003e\u003c/section\u003e\u003csection\u003e\u003ch2\u003e\u003cspan\u003e05\u003c/span\u003e BEST PRACTICES\u003c/h2\u003e\u003cdiv class=\"panel\"\u003e\u003cul\u003e\u003cli\u003eUse only a few distinct slices.\u003c/li\u003e\u003cli\u003eLabel categories and percentages directly.\u003c/li\u003e\u003cli\u003eUse 2-D; group minor slices only if meaningful.\u003c/li\u003e\u003cli\u003eUse a bar chart for close comparisons.\u003c/li\u003e\u003c/ul\u003e\u003cp\u003e\u003cb\u003eASK\u003c/b\u003e \u0026nbsp; What share of the total does each category represent?\u003c/p\u003e\u003c/div\u003e\u003c/section\u003e\u003c/div\u003e\u003csection\u003e\u003ch2\u003e\u003cspan\u003e06\u003c/span\u003e COMMON MISTAKES\u003c/h2\u003e\u003cdiv class=\"grid\"\u003e\u003cdiv class=\"panel bad\"\u003e\u003cb class=\"warn\"\u003eWRONG\u003c/b\u003e\u003cp\u003eMany tiny slices, overlapping categories, or a Total row included as a slice.\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"panel right\"\u003e\u003cb class=\"good\"\u003eRIGHT\u003c/b\u003e\u003cp\u003eUse a few exclusive categories that add to one whole and label shares.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\u003c/section\u003e\u003cfooter\u003e\u003cp\u003eSources: \u003ca href=\"https://support.microsoft.com/en-us/excel/creating-charts-from-start-to-finish\"\u003eMicrosoft Support\u003c/a\u003e · \u003ca href=\"https://www.datawrapper.de/blog/chart-types-guide\"\u003eDatawrapper\u003c/a\u003e · \u003ca href=\"https://www.tableau.com/chart\"\u003eTableau\u003c/a\u003e. The full process demonstration is hosted on YouTube.\u003c/p\u003eMicrosoft 365 desktop · Ribbon names and availability may vary.\u003c/footer\u003e\u003c/div\u003e\u003c/main\u003e\u003cscript\u003e\n(function(){\n 'use strict';\n const frame = document.getElementById('process-video');\n const steps = Array.from(document.querySelectorAll('.process-step'));\n if (!frame || !steps.length) return;\n\n const videoId = '__MBD_YOUTUBE_ID__';\n const baseURL = 'https://www.youtube.com/embed/' + videoId +\n '?enablejsapi=1\u0026playsinline=1\u0026rel=0\u0026loop=1\u0026playlist=' + videoId;\n let player = null;\n let playerReady = false;\n let wasStarted = false;\n let desiredStart = null;\n let lastSelected = -1;\n\n function highlightAt(seconds) {\n if (!wasStarted) return;\n let selected = 0;\n steps.forEach((step, index) =\u003e {\n if (seconds \u003e= Number(step.dataset.start)) selected = index;\n });\n if (selected === lastSelected) return;\n lastSelected = selected;\n steps.forEach((step, index) =\u003e {\n if (index === selected) step.setAttribute('aria-current', 'step');\n else step.removeAttribute('aria-current');\n });\n }\n\n function fallbackSeek(seconds) {\n // Works even if the YouTube player API has not loaded or is blocked.\n const start = Math.max(0, Math.floor(seconds));\n frame.src = baseURL + '\u0026start=' + start + '\u0026autoplay=1';\n }\n\n steps.forEach(step =\u003e step.addEventListener('click', function(){\n const seconds = Number(step.dataset.start) || 0;\n wasStarted = true;\n desiredStart = seconds;\n highlightAt(seconds);\n if (playerReady \u0026\u0026 player) {\n try {\n player.seekTo(seconds, true);\n player.playVideo();\n desiredStart = null;\n return;\n } catch (error) { playerReady = false; }\n }\n fallbackSeek(seconds);\n }));\n\n // Expose the YouTube IFrame Player API callback on this guide's window.\n window.onYouTubeIframeAPIReady = function(){\n if (!window.YT || !window.YT.Player) return;\n try {\n player = new YT.Player('process-video', {\n events: {\n onReady: function(){\n playerReady = true;\n if (desiredStart !== null) {\n try { player.seekTo(desiredStart, true); player.playVideo(); } catch (error) {}\n desiredStart = null;\n }\n },\n onStateChange: function(event){\n if (!window.YT || !window.YT.PlayerState) return;\n if (event.data === YT.PlayerState.PLAYING) wasStarted = true;\n if (event.data === YT.PlayerState.ENDED) {\n try { player.seekTo(0, true); player.playVideo(); } catch (error) {}\n }\n },\n onError: function(){ playerReady = false; }\n }\n });\n } catch (error) { playerReady = false; }\n };\n\n // Keep step emphasis in sync when viewers use the YouTube scrubber.\n setInterval(function(){\n if (!playerReady || !player || !wasStarted) return;\n try {\n const time = player.getCurrentTime();\n if (Number.isFinite(time)) highlightAt(time);\n } catch (error) {}\n }, 400);\n\n const apiScript = document.createElement('script');\n apiScript.src = 'https://www.youtube.com/iframe_api';\n apiScript.async = true;\n document.head.appendChild(apiScript);\n})();\n\u003c/script\u003e\u003c/body\u003e\u003c/html\u003e"
"\u003c!doctype html\u003e\u003chtml lang=\"en\"\u003e\u003chead\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta name=\"viewport\" content=\"width=device-width,initial-scale=1\"\u003e\u003ctitle\u003eMat by Design | SCATTER PLOT\u003c/title\u003e\u003cstyle\u003e :root{--accent:#6246A7;font-family:Helvetica,Arial,sans-serif;color:#102a43}*{box-sizing:border-box}body{margin:0;background:#eaf0f4}main{max-width:1320px;margin:auto;background:white}header{background:#102a43;color:white;padding:30px 4%;display:flex;justify-content:space-between;align-items:end;gap:20px}header small{color:#a9d7f0;font-weight:bold;letter-spacing:.08em}h1{font-size:clamp(2rem,4vw,3rem);margin:10px 0 0}header p{font-weight:bold;font-size:1.3rem}.content{padding:24px 4%}.grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}h2{font-size:1.2rem;margin:20px 0 12px}h2 span{color:#0a5a9c;margin-right:12px}.panel,.step{background:#f3f8fb;border:1px solid #d3e3ef;border-radius:12px;padding:20px}p{line-height:1.45}.lead{font-size:1.15rem;font-weight:700}.good{color:#146c43}.warn{color:#a52019}table{border-collapse:collapse;min-width:80%}th,td{padding:7px 12px;border-bottom:1px solid #cadce8;text-align:left}th{background:#dcecf6}.workflow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.sthead{display:flex;align-items:center;gap:14px}.sthead strong{font-size:2rem;color:var(--accent)}.step small{color:#0a5a9c;font-weight:bold}.step p{margin:10px 0}.custom{background:#ecf5fc}svg{max-width:100%;height:195px}.bad{background:#fff3f1}.right{background:#f0f8f3}ul{padding-left:22px;line-height:1.8}footer{border-top:1px solid #cadce8;margin-top:30px;padding:20px 0;color:#455f73;font-size:.9rem}a{color:#075795}.note{color:#455f73;font-size:.9rem}@media(max-width:720px){header{display:block}.grid,.workflow{grid-template-columns:1fr}.content{padding:18px}}@media print{@page{size:17in 22in;margin:.4in}body{background:white}main{max-width:none}header{print-color-adjust:exact;-webkit-print-color-adjust:exact}.panel,.step{print-color-adjust:exact;-webkit-print-color-adjust:exact}.content{padding:10px 2%}h2{margin:12px 0 7px}p{margin:7px 0}.panel,.step{padding:12px}footer{margin-top:12px}}\n\n.process-layout{display:grid;grid-template-columns:minmax(280px,.36fr) minmax(0,1fr);gap:24px;align-items:stretch}\n.process-steps{list-style:none;display:grid;grid-template-rows:repeat(6,minmax(0,1fr));gap:8px;padding:0;margin:0;min-height:0}\n.process-steps li{min-height:0}\n.process-step{display:flex;align-items:center;gap:12px;width:100%;height:100%;min-height:0;text-align:left;padding:8px 12px;border:1px solid #d3e3ef;border-radius:9px;background:#f3f8fb;color:#102a43;font-family:Helvetica,Arial,sans-serif;cursor:pointer}\n.process-step:hover{border-color:#6246a7;background:#f1edf9}\n.process-step:focus-visible{outline:3px solid #6246a7;outline-offset:2px}\n.process-step[aria-current=\"step\"]{border-color:#6246a7;background:#f1edf9;box-shadow:inset 3px 0 #6246a7}\n.step-number{color:#6246a7;font-size:1.25rem;font-weight:700;flex:0 0 27px}\n.step-copy{display:block;min-width:0}.step-copy strong{display:block;font-size:15px;line-height:1.15}.step-copy span{display:block;margin-top:4px;font-size:13px;line-height:1.3;color:#455f73}\n.process-player{margin:0;min-width:0;align-self:stretch;aspect-ratio:16/9;position:relative;background:#102a43;border:1px solid #d3e3ef;border-radius:10px;overflow:hidden}\n.process-player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#fff}\n.process-help{display:flex;justify-content:space-between;gap:12px;margin:12px 0 0;font-size:.85rem;color:#455f73;line-height:1.4}\n.process-help p{margin:0}.process-duration{white-space:nowrap}\n.formatting-notes{margin-top:14px;color:#455f73;font-size:.9rem;line-height:1.5}.formatting-notes summary{cursor:pointer;color:#075795;font-weight:700}.formatting-notes p{margin:8px 0}\n@media(max-width:1199px){.process-layout{grid-template-columns:1fr;gap:16px}.process-player{grid-row:1;aspect-ratio:16/9}.process-steps{grid-template-rows:repeat(6,auto)}.process-step{min-height:64px;padding:12px 14px}.process-help{flex-direction:column;gap:4px}}\n@media print{.process-layout{grid-template-columns:30% 1fr}.process-player{grid-row:auto}.process-step{break-inside:avoid}.formatting-notes{display:none}}\n\u003c/style\u003e\u003cstyle\u003e\n.process-player iframe#process-video{position:absolute;inset:0;width:100%;height:100%;display:block;border:0;background:#102a43}\n.process-player{overflow:hidden}\n.youtube-help{font-size:13px;margin:7px 0 0;color:#455f73}\n.youtube-help a{font-weight:700;color:#075795}\n\u003c/style\u003e\u003c/head\u003e\u003cbody\u003e\u003cmain\u003e\u003cheader\u003e\u003cdiv\u003e\u003csmall\u003eMAT BY DESIGN / EXCEL VISUAL GUIDE\u003c/small\u003e\u003ch1\u003eSCATTER PLOT\u003c/h1\u003e\u003c/div\u003e\u003cp\u003eExplore relationships\u003c/p\u003e\u003c/header\u003e\u003cdiv class=\"content\"\u003e\u003cp style=\"color:#455f73;font-size:.9rem\"\u003e\u003cb\u003eLEARNING OBJECTIVE\u003c/b\u003e \u0026nbsp; Create and interpret an XY scatter plot for two numeric variables.\u003c/p\u003e\u003cdiv class=\"grid\"\u003e\u003csection\u003e\u003ch2\u003e\u003cspan\u003e01\u003c/span\u003e WHAT IS IT?\u003c/h2\u003e\u003cdiv class=\"panel\"\u003e\u003cp class=\"lead\"\u003ePlots paired numeric values as points on independent X and Y axes.\u003c/p\u003e\u003cp\u003e\u003cb class=\"good\"\u003eUSE\u003c/b\u003e \u0026nbsp; Explore relationships such as training hours and practice scores.\u003c/p\u003e\u003cp\u003e\u003cb class=\"warn\"\u003eAVOID\u003c/b\u003e \u0026nbsp; Category ranking or a parts-of-a-whole question.\u003c/p\u003e\u003cp\u003e\u003cb\u003eASK\u003c/b\u003e \u0026nbsp; How do the two measures vary together?\u003c/p\u003e\u003c/div\u003e\u003c/section\u003e\u003csection\u003e\u003ch2\u003e\u003cspan\u003e02\u003c/span\u003e BEFORE YOU BEGIN\u003c/h2\u003e\u003cdiv class=\"panel\"\u003e\u003ctable\u003e\u003cthead\u003e\u003ctr\u003e\u003cth\u003ePractice hours\u003c/th\u003e\u003cth\u003eScore\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\u003ctbody\u003e\u003ctr\u003e\u003ctd\u003e1\u003c/td\u003e\u003ctd\u003e52\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e2\u003c/td\u003e\u003ctd\u003e61\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e3\u003c/td\u003e\u003ctd\u003e65\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e4\u003c/td\u003e\u003ctd\u003e77\u003c/td\u003e\u003c/tr\u003e\u003ctr\u003e\u003ctd\u003e5\u003c/td\u003e\u003ctd\u003e82\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\u003cp\u003e\u003cb class=\"good\"\u003e✓ GOOD\u003c/b\u003e \u0026nbsp; Place numeric X values in the first column and paired numeric Y values in the next; each row is one observation.\u003c/p\u003e\u003cp\u003e\u003cb class=\"warn\"\u003e! WATCH\u003c/b\u003e \u0026nbsp; Do not mismatch rows, use text for numbers, or treat categories as numeric measurements.\u003c/p\u003e\u003c/div\u003e\u003c/section\u003e\u003c/div\u003e\u003csection aria-labelledby=\"process-heading\"\u003e\u003ch2 id=\"process-heading\"\u003e\u003cspan\u003e03\u003c/span\u003e BUILD AND CUSTOMIZE YOUR CHART\u003c/h2\u003e\u003cdiv class=\"process-layout\"\u003e\u003col class=\"process-steps\" aria-label=\"Six steps to build and customize a scatter plot\"\u003e\u003cli\u003e\u003cbutton type=\"button\" class=\"process-step\" data-start=\"0\" aria-controls=\"process-video\" aria-label=\"Step 1: Select data. Jump to this step.\"\u003e\u003cspan class=\"step-number\" aria-hidden=\"true\"\u003e01\u003c/span\u003e\u003cspan class=\"step-copy\"\u003e\u003cstrong\u003eSelect data\u003c/strong\u003e\u003cspan\u003eSelect both columns, including headers.\u003c/span\u003e\u003c/span\u003e\u003c/button\u003e\u003c/li\u003e\u003cli\u003e\u003cbutton type=\"button\" class=\"process-step\" data-start=\"3.5\" aria-controls=\"process-video\" aria-label=\"Step 2: Open Insert. Jump to this step.\"\u003e\u003cspan class=\"step-number\" aria-hidden=\"true\"\u003e02\u003c/span\u003e\u003cspan class=\"step-copy\"\u003e\u003cstrong\u003eOpen Insert\u003c/strong\u003e\u003cspan\u003eSelect Insert on the ribbon.\u003c/span\u003e\u003c/span\u003e\u003c/button\u003e\u003c/li\u003e\u003cli\u003e\u003cbutton type=\"button\" class=\"process-step\" data-start=\"5\" aria-controls=\"process-video\" aria-label=\"Step 3: Choose the scatter chart. Jump to this step.\"\u003e\u003cspan class=\"step-number\" aria-hidden=\"true\"\u003e03\u003c/span\u003e\u003cspan class=\"step-copy\"\u003e\u003cstrong\u003eChoose the scatter chart\u003c/strong\u003e\u003cspan\u003eChoose Scatter (X, Y) → Scatter.\u003c/span\u003e\u003c/span\u003e\u003c/button\u003e\u003c/li\u003e\u003cli\u003e\u003cbutton type=\"button\" class=\"process-step\" data-start=\"7.8\" aria-controls=\"process-video\" aria-label=\"Step 4: Review the chart and title. Jump to this step.\"\u003e\u003cspan class=\"step-number\" aria-hidden=\"true\"\u003e04\u003c/span\u003e\u003cspan class=\"step-copy\"\u003e\u003cstrong\u003eReview the chart and title\u003c/strong\u003e\u003cspan\u003eCheck the plotted data and rename the title.\u003c/span\u003e\u003c/span\u003e\u003c/button\u003e\u003c/li\u003e\u003cli\u003e\u003cbutton type=\"button\" class=\"process-step\" data-start=\"17.1\" aria-controls=\"process-video\" aria-label=\"Step 5: Open Chart Elements. Jump to this step.\"\u003e\u003cspan class=\"step-number\" aria-hidden=\"true\"\u003e05\u003c/span\u003e\u003cspan class=\"step-copy\"\u003e\u003cstrong\u003eOpen Chart Elements\u003c/strong\u003e\u003cspan\u003eSelect the green + beside the chart.\u003c/span\u003e\u003c/span\u003e\u003c/button\u003e\u003c/li\u003e\u003cli\u003e\u003cbutton type=\"button\" class=\"process-step\" data-start=\"21.7\" aria-controls=\"process-video\" aria-label=\"Step 6: Edit and format. Jump to this step.\"\u003e\u003cspan class=\"step-number\" aria-hidden=\"true\"\u003e06\u003c/span\u003e\u003cspan class=\"step-copy\"\u003e\u003cstrong\u003eEdit and format\u003c/strong\u003e\u003cspan\u003eAdd axis titles and units; refine formatting.\u003c/span\u003e\u003c/span\u003e\u003c/button\u003e\u003c/li\u003e\u003c/ol\u003e\u003cfigure class=\"process-player\"\u003e\u003ciframe id=\"process-video\" title=\"Excel Scatter Chart demonstration on YouTube\" src=\"https://www.youtube.com/embed/__MBD_YOUTUBE_ID__?enablejsapi=1\u0026amp;playsinline=1\u0026amp;rel=0\u0026amp;loop=1\u0026amp;playlist=__MBD_YOUTUBE_ID__\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen loading=\"eager\"\u003e\u003c/iframe\u003e\u003c/figure\u003e\u003c/div\u003e\u003cdiv class=\"process-help\" id=\"process-description\"\u003e\u003cp\u003ePlay the full process, or select a step to jump ahead. The video will replay at the end.\u003c/p\u003e\u003cp class=\"process-duration\"\u003e6 steps · 34 seconds · Silent demonstration\u003c/p\u003e\u003c/div\u003e\u003cdetails class=\"formatting-notes\"\u003e\u003csummary\u003eMore chart formatting options\u003c/summary\u003e\u003cp\u003eChart Design → Add Chart Element is an alternative to the green + button. Add a descriptive chart title and both axis titles with units. Label unusual points only; remove an unnecessary legend.\u003c/p\u003e\u003cp\u003eRight-click an element → Format for more options. Rename series in the source header or Chart Design → Select Data.\u003c/p\u003e\u003cp\u003eFor additional guidance, follow \u003ca href=\"https://support.microsoft.com/en-us/excel/creating-charts-from-start-to-finish\"\u003eMicrosoft’s illustrated instructions\u003c/a\u003e.\u003c/p\u003e\u003c/details\u003e\u003cp class=\"youtube-help\"\u003eVideo not playing? \u003ca href=\"https://youtu.be/__MBD_YOUTUBE_ID__\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eWatch this demonstration on YouTube\u003c/a\u003e.\u003c/p\u003e\u003c/section\u003e\u003cdiv class=\"grid\"\u003e\u003csection\u003e\u003ch2\u003e\u003cspan\u003e04\u003c/span\u003e HOW TO READ THIS CHART\u003c/h2\u003e\u003cdiv class=\"panel\"\u003e\u003csvg viewBox=\"0 0 430 195\" role=\"img\" aria-label=\"Practice hours and score example chart\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003ctext x=\"5\" y=\"10\" font-size=\"12\"\u003eScore\u003c/text\u003e\u003cpath d=\"M45 160 V15 M45 160 H400\" stroke=\"#94ADBE\" fill=\"none\"/\u003e\u003ccircle cx=\"100\" cy=\"130\" r=\"6\" fill=\"#6246A7\"/\u003e\u003ccircle cx=\"155\" cy=\"109\" r=\"6\" fill=\"#6246A7\"/\u003e\u003ccircle cx=\"210\" cy=\"98\" r=\"6\" fill=\"#6246A7\"/\u003e\u003ccircle cx=\"265\" cy=\"67\" r=\"6\" fill=\"#6246A7\"/\u003e\u003ccircle cx=\"320\" cy=\"54\" r=\"6\" fill=\"#6246A7\"/\u003e\u003ctext x=\"160\" y=\"190\" font-size=\"13\"\u003ePractice hours\u003c/text\u003e\u003ctext x=\"15\" y=\"160\" font-size=\"12\"\u003e40\u003c/text\u003e\u003ctext x=\"8\" y=\"22\" font-size=\"12\"\u003e100\u003c/text\u003e\u003c/svg\u003e\u003cp\u003e\u003cb\u003ePractice hours and score\u003c/b\u003e\u003c/p\u003e\u003cp\u003eScores generally rise as practice hours increase in this example. The points suggest association, not proof of cause.\u003c/p\u003e\u003cp\u003eLook for direction, spread, clusters, outliers, and possible nonlinearity.\u003c/p\u003e\u003c/div\u003e\u003c/section\u003e\u003csection\u003e\u003ch2\u003e\u003cspan\u003e05\u003c/span\u003e BEST PRACTICES\u003c/h2\u003e\u003cdiv class=\"panel\"\u003e\u003cul\u003e\u003cli\u003eUse paired numeric X and Y values.\u003c/li\u003e\u003cli\u003eName both axes and include units.\u003c/li\u003e\u003cli\u003eUse readable scales and avoid point clutter.\u003c/li\u003e\u003cli\u003eCorrelation does not establish causation.\u003c/li\u003e\u003c/ul\u003e\u003cp\u003e\u003cb\u003eASK\u003c/b\u003e \u0026nbsp; How do the two measures vary together?\u003c/p\u003e\u003c/div\u003e\u003c/section\u003e\u003c/div\u003e\u003csection\u003e\u003ch2\u003e\u003cspan\u003e06\u003c/span\u003e COMMON MISTAKES\u003c/h2\u003e\u003cdiv class=\"grid\"\u003e\u003cdiv class=\"panel bad\"\u003e\u003cb class=\"warn\"\u003eWRONG\u003c/b\u003e\u003cp\u003eUntitled numeric axes, misleading scales, and a default chart title.\u003c/p\u003e\u003c/div\u003e\u003cdiv class=\"panel right\"\u003e\u003cb class=\"good\"\u003eRIGHT\u003c/b\u003e\u003cp\u003eLabel axes and units, use a descriptive title, and inspect the full pattern.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\u003c/section\u003e\u003cfooter\u003e\u003cp\u003eSources: \u003ca href=\"https://support.microsoft.com/en-us/excel/creating-charts-from-start-to-finish\"\u003eMicrosoft Support\u003c/a\u003e · \u003ca href=\"https://www.datawrapper.de/blog/chart-types-guide\"\u003eDatawrapper\u003c/a\u003e · \u003ca href=\"https://www.tableau.com/chart\"\u003eTableau\u003c/a\u003e. The full process demonstration is hosted on YouTube.\u003c/p\u003eMicrosoft 365 desktop · Ribbon names and availability may vary.\u003c/footer\u003e\u003c/div\u003e\u003c/main\u003e\u003cscript\u003e\n(function(){\n 'use strict';\n const frame = document.getElementById('process-video');\n const steps = Array.from(document.querySelectorAll('.process-step'));\n if (!frame || !steps.length) return;\n\n const videoId = '__MBD_YOUTUBE_ID__';\n const baseURL = 'https://www.youtube.com/embed/' + videoId +\n '?enablejsapi=1\u0026playsinline=1\u0026rel=0\u0026loop=1\u0026playlist=' + videoId;\n let player = null;\n let playerReady = false;\n let wasStarted = false;\n let desiredStart = null;\n let lastSelected = -1;\n\n function highlightAt(seconds) {\n if (!wasStarted) return;\n let selected = 0;\n steps.forEach((step, index) =\u003e {\n if (seconds \u003e= Number(step.dataset.start)) selected = index;\n });\n if (selected === lastSelected) return;\n lastSelected = selected;\n steps.forEach((step, index) =\u003e {\n if (index === selected) step.setAttribute('aria-current', 'step');\n else step.removeAttribute('aria-current');\n });\n }\n\n function fallbackSeek(seconds) {\n // Works even if the YouTube player API has not loaded or is blocked.\n const start = Math.max(0, Math.floor(seconds));\n frame.src = baseURL + '\u0026start=' + start + '\u0026autoplay=1';\n }\n\n steps.forEach(step =\u003e step.addEventListener('click', function(){\n const seconds = Number(step.dataset.start) || 0;\n wasStarted = true;\n desiredStart = seconds;\n highlightAt(seconds);\n if (playerReady \u0026\u0026 player) {\n try {\n player.seekTo(seconds, true);\n player.playVideo();\n desiredStart = null;\n return;\n } catch (error) { playerReady = false; }\n }\n fallbackSeek(seconds);\n }));\n\n // Expose the YouTube IFrame Player API callback on this guide's window.\n window.onYouTubeIframeAPIReady = function(){\n if (!window.YT || !window.YT.Player) return;\n try {\n player = new YT.Player('process-video', {\n events: {\n onReady: function(){\n playerReady = true;\n if (desiredStart !== null) {\n try { player.seekTo(desiredStart, true); player.playVideo(); } catch (error) {}\n desiredStart = null;\n }\n },\n onStateChange: function(event){\n if (!window.YT || !window.YT.PlayerState) return;\n if (event.data === YT.PlayerState.PLAYING) wasStarted = true;\n if (event.data === YT.PlayerState.ENDED) {\n try { player.seekTo(0, true); player.playVideo(); } catch (error) {}\n }\n },\n onError: function(){ playerReady = false; }\n }\n });\n } catch (error) { playerReady = false; }\n };\n\n // Keep step emphasis in sync when viewers use the YouTube scrubber.\n setInterval(function(){\n if (!playerReady || !player || !wasStarted) return;\n try {\n const time = player.getCurrentTime();\n if (Number.isFinite(time)) highlightAt(time);\n } catch (error) {}\n }, 400);\n\n const apiScript = document.createElement('script');\n apiScript.src = 'https://www.youtube.com/iframe_api';\n apiScript.async = true;\n document.head.appendChild(apiScript);\n})();\n\u003c/script\u003e\u003c/body\u003e\u003c/html\u003e"