# 11 — Infographics and Motion Grammar ## 1. First principle: visualize relationships, not decoration An infographic should make a relationship easier to perceive than speech or text alone. ```text INFOGRAPHIC = question + data/concepts + relationship + visual encoding + hierarchy + annotation + source/uncertainty + temporal behavior + accessibility alternative + narrative placement ``` Before choosing a chart or animation, name the information task. ## 2. Information-task taxonomy ```text IDENTIFY — what is this? LOCATE — where is it? QUANTIFY — how much? COMPARE — how do values differ? RANK — what is the order? COMPOSE — what are the parts of a whole? DISTRIBUTE — how are values spread? CORRELATE — what varies together? CHANGE_OVER_TIME — how does it move? FLOW — what moves between states/places? SEQUENCE — what happens in what order? HIERARCHY — what contains or governs what? NETWORK — what is connected to what? CAUSE — what produces what? PROCESS — how does it work? STATE_CHANGE — what changed from before to after? UNCERTAINTY — how confident are we? EXPLAIN_SPATIAL — how is it arranged? EXPLAIN_MECHANISM — how do parts interact? ``` ## 3. Visual-encoding grammar Available channels: ```text position length angle area volume shape orientation color hue color value/lightness saturation texture pattern connection containment proximity motion speed direction opacity focus/depth sound ``` Prefer more accurately perceived channels for precise comparison: ```text position/length before angle/area/volume ``` Do not encode the same critical distinction solely with color. ## 4. Graphic object vocabulary ```text TEXT NUMBER LABEL ICON PICTOGRAM PHOTO VIDEO_WINDOW SHAPE LINE ARROW CONNECTOR AXIS TICK GRID BAR POINT AREA BAND NODE EDGE CONTAINER CARD CALLOUT HIGHLIGHT MASK MAP TIMELINE FLOW DIAGRAM LEGEND SOURCE_NOTE UNCERTAINTY_MARK ``` Every object should have a data or explanatory binding. ## 5. Chart-selection grammar | Task | Preferred families | Common failure | |---|---|---| | precise comparison | bar, dot plot, table | decorative area distorts value | | change over time | line, step, area, small multiples | missing time scale or truncated axis | | distribution | histogram, box/violin, strip/dot | showing only average | | part-to-whole | stacked bar, 100% bar, treemap when appropriate | too many pie slices | | correlation | scatter, connected scatter | implying causation | | ranking | sorted bar/dot/table | unordered categories | | flow | Sankey, alluvial, flow map | widths not proportional | | hierarchy | tree, indented list, sunburst/treemap | unreadable nesting | | network | node-link, adjacency matrix | hairball without filtering | | geography | choropleth, symbol map, route map | raw totals normalized incorrectly | | process | flowchart, stage diagram, storyboard | mixed sequence and causality | | mechanism | exploded view, system diagram, causal loop | ornamental arrows | | uncertainty | interval, band, ensemble, probability labels | false precision | ## 6. Non-data explanatory graphics ```text DEFINITION_CARD ENTITY_CARD LOWER_THIRD QUOTE_CARD KEY_TAKEAWAY STEP_LIST PROCESS_DIAGRAM CAUSAL_DIAGRAM SYSTEM_MAP BEFORE_AFTER ANNOTATED_DOCUMENT ANNOTATED_SCREEN TIMELINE MAP FAMILY_OR_RELATIONSHIP_TREE DECISION_TREE MATRIX SPECTRUM LAYER_STACK EXPLODED_VIEW CUTAWAY_DIAGRAM COMPARISON_TABLE COUNTER PROGRESS_INDICATOR ``` ## 7. Narrative-placement grammar Placement modes: ```text FULL_SCREEN SIDE_PANEL LOWER_THIRD OVERLAY PICTURE_IN_PICTURE SCREEN_REPLACEMENT WORLD_TRACKED OBJECT_TRACKED BACKGROUND_LAYER FOREGROUND_LAYER INTERSTITIAL_CARD PAUSE_AND_EXPLAIN ``` Selection rules: ```text IF the graphic is required to understand the mechanism THEN give it sufficient screen area and time; do not force it into a decorative corner. IF the speaker’s performance remains primary THEN use a subordinate overlay or brief full-screen insert with audio continuity. IF the graphic is documentary evidence THEN show source identity, relevant date/scope, and legible detail. IF the graphic introduces a new model THEN orient the whole before animating individual parts. ``` ## 8. Graphic hierarchy ```text PRIMARY — answer or most important relation SECONDARY — dimensions needed to interpret it TERTIARY — labels, sources, caveats, controls ``` Hierarchy dimensions: ```text size position contrast weight motion order isolation repetition voiceover synchronization ``` Do not animate all hierarchy levels simultaneously. ## 9. Motion grammar A motion graphic has phases: ```text PREPARE ENTER ORIENT BUILD EMPHASIZE COMPARE_OR_TRANSFORM HOLD EXIT ``` Motion object: ```text property_changed start_value end_value duration delay easing path velocity acceleration stagger parent/child relation trigger semantic purpose ``` Motion purposes: ```text direct attention show sequence show cause/effect show transformation preserve object constancy connect scenes compress process reveal hierarchy indicate uncertainty provide feedback ``` ## 10. Object-constancy rules ```text IF one concept becomes another state THEN transform or move the same visual object when possible. IF two objects are compared THEN keep scale and encoding consistent. IF an item changes category THEN animate its movement between containers rather than replacing it without explanation. IF an object disappears because it is filtered THEN show the filtering operation or label the new scope. ``` ## 11. Voice-to-graphic synchronization Synchronization modes: ```text LEAD — graphic prepares before words ALIGN — graphic appears with named concept FOLLOW — graphic confirms after verbal explanation COUNTERPOINT — graphic adds a different but compatible layer ``` Rules: ```text IF the viewer must read exact text THEN reduce concurrent speech complexity. IF narration names a number THEN reveal the correct visual unit at that phrase, not the entire dense chart at once. IF the graphic contradicts or qualifies speech THEN make the relationship explicit rather than leaving accidental conflict. ``` ## 12. Infographic timing dimensions ```text reading speed target number of novel terms label count visual complexity animation duration hold duration narration duration screen size platform viewer control ``` A graphic remains on screen until its required task can be completed, not merely until the animation ends. ## 13. Data and claim integrity Every data graphic stores: ```text title/question data source retrieval/publication date population sample units time range geography transformations normalization missing values uncertainty comparison baseline annotation source ``` Rules: ```text Never truncate or transform an axis without making the relevant scale legible. Never use area or volume when the data is encoded only linearly unless the mapping is intentional and labeled. Never imply causation from correlation alone. Never compare totals when rates or population normalization are required. Never animate values through fabricated intermediate states without indicating interpolation. ``` ## 14. Uncertainty grammar ```text confidence interval credible interval range error bar probability scenario band unknown category missing-data marker source disagreement quality grade provisional label ``` Uncertainty can be encoded with: ```text bands interval lines multiple scenarios opacity only with redundant labels texture explicit language source cards ``` Do not use blur as the only uncertainty indicator; it can be confused with depth or decoration. ## 15. Maps and spatial graphics Map dimensions: ```text projection extent scale basemap detail geographic unit normalization symbol type route direction uncertainty privacy precision time layer ``` Rules: ```text IF exact personal location creates risk THEN aggregate, jitter, generalize, or omit coordinates. IF comparing regions of different population THEN consider per-capita/rate normalization. IF movement is central THEN show direction and time, not only endpoints. ``` ## 16. Typography grammar for motion ```text role: title | label | annotation | data | quote | source | caption size hierarchy line length alignment case weight contrast entry behavior hold behavior exit behavior ``` Kinetic type operations: ```text REVEAL_BY_WORD REVEAL_BY_PHRASE HIGHLIGHT_TERM REPLACE_TERM SCALE_EMPHASIS TRACKING_CHANGE PATH_FOLLOW MASK_REVEAL TYPE_ON COUNT_UP ``` Do not animate body text character-by-character when reading continuity is important. ## 17. Accessibility grammar ```text color distinction has redundant cue minimum legibility threshold by output captions do not collide with graphics graphic text has spoken or textual alternative motion can be reduced where interactive flashing is constrained reading order is explicit source notes remain legible ``` For essential visual information, provide narration, captions, transcript description, or an extended description. ## 18. Brand and visual-system dimensions ```text type tokens spacing tokens shape tokens stroke tokens corner tokens icon grammar color roles chart palette motion durations easing families transition motifs texture logo usage source-note format ``` Brand consistency is a constraint; information truth and accessibility are harder constraints. ## 19. LAKA infographic variations ### Baseline ```text same chart/task; refine labels, hierarchy, and timing ``` ### Minor ```text alternate annotation, entry order, or emphasis ``` ### Major ```text change chart family or full-screen/overlay treatment ``` ### Structural ```text single chart becomes progressive explanatory sequence or interactive exploration ``` ### Paradigm ```text data chart becomes physical metaphor, spatial simulation, or audience-controlled model ``` ## 20. Infographic failure modes ```text DECORATION_WITHOUT_TASK WRONG_CHART_FOR_RELATION VISUAL_AREA_DISTORTION UNLABELED_UNITS MISSING_BASELINE SOURCE_TOO_SMALL TOO_MUCH_AT_ONCE VOICE_TEXT_COMPETITION COLOR_ONLY_ENCODING MOTION_WITHOUT_INFORMATION OBJECT_CONSTANCY_FAILURE FALSE_CAUSAL_ARROW UNCERTAINTY_ERASURE CAPTION_COLLISION PLATFORM_CROP_FAILURE ``` ## 21. Acceptance test ```text What question does the graphic answer? What relationship is encoded? Why is this encoding more legible than speech or text alone? Are scale, units, source, scope, and uncertainty visible? Does motion explain rather than decorate? Can the viewer complete the task before the graphic exits? Is essential meaning available without color and without vision? Does it fit all required aspect ratios and caption zones? ```