Slide Charts

Slide Charts

The bar: a deck is a sequence of single ideas, each readable from the back of the room in three seconds, whose headlines alone tell the story, and whose charts are honest enough to survive a ruler and animate only where the story turns. The starter gives you the frame, the layouts and the runtime; the story, the look and the charts are yours.

References

• read_skill_file("slide-charts", "references/starter.html"): required. Your file starts from it: its whole <head> (frame CSS, layout classes, build CSS, and the build <script> at the end), and its icon sprite. Its slides are worked examples of every layout and every chart recipe.
• read_skill_file("slide-charts", "references/charts.md"): the six recipes (columns, paired columns, line, ranking/race, share bar, dumbbell) with exact geometry, and the full attribute semantics. Read it unless you are sure of the runtime contract below.
• read_skill_file("slide-charts", "references/layouts.md"): per-layout character budgets (tested in wide fonts), skeletons, the diagram kit.
• read_skill_file("slide-charts", "references/styles.md"): six style families (tokens, font pairs, style blocks) and a contrast-checked hue table.

Request what you need in one turn, then write the deck in your next reply without further tool calls.

Contract (checkers depend on it)

• One self-contained HTML file. Each slide is <section class="slide LAYOUT">, 1920×1080, stacked vertically, with <aside class="notes"> inside (30–90 spoken words). LAYOUT is one of title section statement big-number stats chart compare cards process visual quote closing, optional inverse. No frameworks.
• The starter's build <script> stays at the end of <head>, copied byte for byte. It defines window.build (slides, steps, show, play, …) and window.deck, which the step driver calls to render each step; a copy that loses one line still shows the slides but nothing moves and every step goes unmeasured. Write no other script, no handlers, no CSS animation.
• Change the head only in the TOKENS block, the <title>, the Google Fonts <link>, and an appended section 6 style block. Never set font-size, style="", <br> in headings, or absolute positioning: the frame's fixed type scale and overflow:hidden are what make the budgets hold.
• Every number on a slide, in every step, comes from the brief; every figure in the brief's tables and bullet lists is on a slide (notes don't count).

The runtime, in brief

• A slide's steps are 1…N, N = the largest data-step/data-focus value or the length of any data-values. Step 0 is everything without data-step. Presenting (press P) opens on step 0 and plays step 1; each → plays the next. The static page shows the last step, so the slide as written is the final state; earlier steps only hide parts or show earlier values, and each must also read as a valid slide.
• data-step="k" (an integer 1–4) on a chart part or .num: appears at step k. How it moves follows from the element: a g.bar grows up from its rect's bottom edge, a g.hbar grows right from its left edge (its value label rides the tip and counts up), a <g> holding a polyline/line/unfilled path draws itself and pops its dots, a figure counts up, anything else fades. Never on h2, .head, <section>, .figure or <svg>.
• data-values="1840 2310 2960" on a bar or figure: one plain number per step (no separators, units or %), the last equal to the label drawn; the label keeps the brief's form (2,960) and the script preserves its separators and decimals while tweening.
• data-sort on an <svg>: bars with data-values re-order each step, largest first; draw them in the order of their final values. This is the race: items × 2–4 years on one slide.
• data-focus="3" (or "2 4") on a bar or dot group: it becomes the chart's one highlight at that step. Don't also give it fa; the script colours it.
• Every chart part carries data-step (at least "1", so it enters). big-number and stats figures count up with data-step="1".

What strong decks still get wrong

• Scale honesty. A checker measures every bar against its label and every dot against one linear scale. Fix one scale per chart (k = 420 / max for columns and lines in the 1104×600 chart viewBox, 720 / max for a ranking, 800 / max for a dumbbell), compute every length as value × k, and never start a bar axis above zero. Write it down: a SCALE | line per chart slide in a PLAN comment at the top of <body>, alongside one line per slide and a CHART | line per build. Eyeballed heights are the most common failure in otherwise excellent decks.
• Builds are rationed. 2–3 slides build in 2–4 steps, where the story turns (plan then actual then the miss; target then line; the years rolling and the lead changing; before then after); never slide 1 or the last. More builds make the deck slow and dilute the turns.
• Whole series, not endpoints. Show every period or row the brief gives; a metric that worsened gets its own chart, not a sentence. With 5+ years per item, lines beat a race.
• Words. ≤ 40 visible words per slide (55 on data-heavy chart, stats, compare slides, chart labels included); stay within the character budgets in layouts.md. Over budget means cut, chart, or split, never shrink.
• Precision. Shorten long numbers without losing a digit (3,250 → 3.25k, never 3k); decimals as given.
• Look. Decks made with this skill drift toward one look. Pick a style family and accent for this subject on purpose: avoid the topic's cliché hue unless it is the brand colour, use accent only for the kicker, the one key mark and at most one <em>, and keep chart labels ≥ 26 units inside the viewBox.

Deliverable

The complete file in one ```html block, ending with </html>, in the same reply as its PLAN comment. Then 2–4 lines: style and accent, layout sequence, build slides (press P, → plays each step), and any placeholder to replace (photo slot, illustrative quote).