Skip to content

Percy the Peacock — Mascot Style Guide

This page shows all seven admonition styles for Percy the Peacock, the pedagogical mascot for Interactive Infographics. Use it as a reference when writing chapter content.

Welcome (Chapter Openings)

Use mascot-welcome at the start of each chapter to introduce the topic.

Let's Make It Visual!

Percy welcomes you Welcome to interactive infographics! I'm Percy, your guide through the world of data visualization and interactive design. Whether we're building overlay hotspots or crafting causal loop diagrams, I'll be right here with you. Let's make it visual!

Thinking (Key Concepts)

Use mascot-thinking when introducing a major concept students must deeply understand.

Key Insight

Percy is thinking Notice the pattern here: every interactive infographic follows the same architecture — a base image, an overlay configuration in JSON, and a JavaScript event handler. Once you understand this three-part pattern, you can build any type of infographic.

Tip (Hints and Strategies)

Use mascot-tip for design strategies, workflow shortcuts, or best practices.

Percy's Tip

Percy shares a tip Always test your infographics at both 600px and 1400px widths to ensure they're truly responsive. The aliceblue drawing region should scale smoothly without breaking your layout or cutting off content.

Warning (Common Mistakes)

Use mascot-warning to flag misconceptions or frequent errors.

Common Mistake

Percy warns you Don't forget to include Dublin Core metadata in your metadata.json file. Without it, your MicroSim won't be discoverable or properly indexed. Every infographic needs a title, creator, and description at minimum.

Celebration (Achievements)

Use mascot-celebration at the end of major sections or chapters.

Excellent Progress!

Percy celebrates You've just built your first complete interactive infographic with overlay regions, hover-activated infoboxes, and xAPI event logging. That's a fully deployable MicroSim — display it with style!

Encourage (Difficult Content)

Use mascot-encourage before or during challenging sections where students often struggle.

You've Got This!

Percy encourages you Causal loop diagrams can feel overwhelming at first — all those arrows and polarities! But once you learn to trace one loop at a time and identify whether it's reinforcing or balancing, the system dynamics become clear. Keep going, you're closer than you think!

Neutral (General Purpose)

Use mascot-neutral for general sidebars, introductions, or any context where none of the specific poses fits.

A Note from Percy

Percy notes This course covers many JavaScript visualization libraries — p5.js, D3.js, Chart.js, and vis-network. You don't need to master them all. Focus on one that fits your project, and branch out from there.

Usage Rules

  • Use Percy no more than 5-6 times per chapter
  • Do not stack multiple Percy admonitions back-to-back
  • Keep Percy's dialogue brief (1-4 sentences)
  • Always use a catchphrase at least once per chapter welcome:
    • "Let's make it visual!"
    • "Display it with style!"
    • "Let's spread some knowledge!"