What is a data display pattern?
A data display pattern is a reusable way of arranging information so a reader can understand it at a glance. The same numbers can land as a wall of text or as a clean set of cards, a bar chart, or a flip card that hides detail until someone wants it. The pattern is the structure, not the data.
This guide focuses on patterns that live inside one HTML file with no build step and no backend. That matters because the place you embed a page decides what survives. WordPress strips inline scripts for many users. Google Sites sandboxes everything in an iframe. GitHub Pages serves whatever you give it. So the real measure of difficulty here is not how clever the code is. It is how many extra libraries the pattern needs, and whether those libraries get stripped out by your host.
Structure over data
Pick the pattern that matches the question your reader is asking, then pour your data into it.
Self-contained
One file. All CSS and JavaScript embedded. Fonts from a CDN are fine. No frameworks.
Difficulty by dependency
Easy means CSS only. Medium means a little vanilla JavaScript. Hard means a charting library that some hosts will block.
Copy the prompt
Every pattern has a ready prompt. Paste your data, or point it at a public source or an article link.
Glossary
- Self-contained HTML
- A single .html file holding its own CSS and JavaScript, with no external dependencies except optional web fonts.
- Custom HTML block
- The WordPress Gutenberg block that lets you paste raw HTML into a page. It keeps markup and CSS but strips inline scripts on save for most roles.
- iframe embed
- A page nested inside another page in a sandboxed frame. Google Sites and many platforms use this. It is the most reliable way to keep your JavaScript intact.
- KSES filtering
- The WordPress security layer that removes script tags and unsafe attributes when a non-admin saves content.
- CDN
- Content Delivery Network. A public host for shared assets such as Google Fonts or a charting library, loaded by URL.
- KPI
- Key Performance Indicator. A single headline metric that signals whether something is on track, often shown as a big number with a trend.
- CSS only
- A pattern built with styling and markup alone, no scripting. The safest tier because nothing can be stripped.
- Scroll-spy
- Navigation that highlights the section currently in view as the reader scrolls.
- conic-gradient
- A CSS gradient that sweeps around a center point, used to fake donut and gauge charts without any library.
- localStorage
- Browser storage that persists data on the reader's device. Often blocked inside sandboxed iframes.
How to use this guide
Browse the three pattern tiers, find one that fits your data, copy its prompt into your AI tool, and paste in your numbers or a link to an article you want visualized. Then check the Hosting Guide to confirm it survives where you plan to embed it.
Easy Patterns
CSS only or near-zero JavaScript. Nothing to strip out, so these work in every host including WordPress Custom HTML blocks, Google Sites embeds, and GitHub Pages.
Medium Patterns
These need a little vanilla JavaScript for filtering, switching, or animation. No external library. They run fine on GitHub Pages and inside iframe embeds. In WordPress, use an iframe rather than a Custom HTML block, since inline scripts get stripped on save.
Charts and KPIs
Charts split into two camps. CSS and SVG charts stay self-contained and survive everywhere. Library charts like Chart.js or D3 look richer but pull in an external script that strict hosts block or sandbox. KPIs are the easiest win of all and belong on almost every dashboard.
Hosting Guide
The same file behaves differently depending on where you embed it. This is the real source of difficulty. Match your pattern tier to your host before you build.
| Host | CSS-only (Easy) | Vanilla JS (Medium) | Library charts (Hard) | Best method |
|---|---|---|---|---|
| GitHub Pages | Yes | Yes | Yes | Upload the file directly. Nothing is stripped. |
| Google Sites | Yes | Yes | Usually | Insert > Embed > Code. Runs in a sandboxed iframe. Avoid localStorage. |
| WordPress Custom HTML block | Yes | Scripts stripped | Scripts stripped | Fine for CSS-only. For anything with JS, host the file elsewhere and iframe it in. |
| WordPress (iframe embed) | Yes | Yes | Yes | Host the file on GitHub Pages, then embed with an iframe block. |
| LMS (Canvas, Schoology, etc.) | Yes | Often | Varies | Use the iframe or external-tool option. Inline JS support varies by platform. |
The one rule that prevents most heartache
If your pattern uses any JavaScript and your destination is WordPress, do not paste it into a Custom HTML block. Host the file on GitHub Pages and pull it in with an iframe. The iframe keeps your script intact because it is a separate document.
Sizing an iframe embed
Sandboxed embeds do not auto-grow to fit content. Set an explicit height on the iframe, or design the pattern to a fixed height. For Google Sites, drag the embed handles after inserting.
VIBES for Data Display Patterns
VIBES is a five-step checklist for building a data display with AI. It is the same spirit as the marketing version, adapted so the output is a clean, embeddable visualization rather than a campaign.
Vision
Name the one question the reader should answer in five seconds, the audience, and where it will be embedded.
Instruct
Give the AI the pattern, the host, the brand colors, and the rule that it must be one self-contained file.
Build
Paste your data or a public source link. Ask for a first version of just the display, no extras.
Evaluate
Check accuracy, readability on mobile, and whether it survives your host. Test the embed before trusting it.
Ship
Embed it, set the iframe height, and confirm the live page renders the same as the preview.
Below is the framework in a markdown code block, ready to drop into your image generator or documentation.
# VIBES Framework for Data Display Patterns **Turning raw data into a clean, embeddable visualization with AI** Use VIBES as a simple checklist for building data displays with AI. ## V — Vision Name the one question the reader should answer at a glance, the audience, and the destination (GitHub Pages, Google Sites, WordPress, an LMS). Example: show three years of enrollment so a board member sees the trend instantly. ## I — Instruct Give the AI the context it needs: the chosen pattern, the host, the brand colors, and the constraint that the output must be one self-contained HTML file with no frameworks. Example: build a CSS-only bar chart in TCEA navy and gold for a WordPress Custom HTML block. ## B — Build Provide the data. Paste a table, point at a public source, or share a link to an article you want visualized. Ask for a first version of the display only, one pattern at a time. ## E — Evaluate Check the numbers, the labels, mobile readability, and color contrast. Confirm it survives the host: a Custom HTML block strips scripts, an iframe keeps them. Fix one thing at a time. ## S — Ship Embed the file, set an explicit iframe height so it is not cut off, and load the live page to confirm it renders the same as the preview. Track whether readers act on what they see. > In practice, VIBES moves you from a screenshot of a spreadsheet to a purposeful display. > Frame it, feed it, build it, check it, embed it. Citation: Miguel Guhlin (mguhlin.org)