--- title: "Maps and Data Motion: travel maps, charts and visualizers — AI video effect for numbers & charts" description: "Globe dives, flyovers, route maps, self-drawing charts, count-ups and audio visualizers with camera curves, chart rules and map credits. Install in Claude Code, Codex and Grok with one command." url: https://varg.ai/how-to/skills/maps-and-data-motion updated: 2026-10-29 --- # Maps and Data Motion: travel maps, charts and visualizers — effect skill for numbers & charts > **For AI agents:** find the right skill in one call — `curl -s "https://varg.ai/how-to/api/search?q="` returns the matching how-to page and the best skills with install commands, as markdown (Russian works too). Full index: https://varg.ai/how-to/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the how-to page. From a terminal: `curl -fsSL https://varg.ai/install | sh` installs the vargai CLI (https://varg.ai/how-to/cli.md): `vargai search` and `vargai install ` with no key, every varg model after `vargai login`. Globe dives, flyovers, route maps, self-drawing charts, count-ups and audio visualizers with camera curves, chart rules and map credits. - **Type:** [Effect](https://varg.ai/how-to/effects.md) · [Numbers & charts](https://varg.ai/how-to/browse/skills/numbers.md) - **Slug:** `maps-and-data-motion` - **Status:** live - **Publisher:** varg (varg, verified) - **License:** MIT - **Source:** https://github.com/vargHQ/skills/tree/main/maps-and-data-motion - **Works in:** Claude Code, Codex, Cursor, Gemini CLI, OpenClaw, varg Studio - **Requires:** Node 22 + ffmpeg (HyperFrames) or a Remotion 4 project - **Cost:** Free: renders locally with HyperFrames, Remotion or ffmpeg. Generated footage, voice or music is billed in varg credits with an estimate first. - **Runtime:** Minutes per template, mostly render time ## What it does Eight animations where the data or the place is the story. One paused timeline drives the camera, the numbers and the audio bands, so a frame renders the same on every pass, and the map credits are designed in rather than pasted on. **8 templates, 25 presets.** Every rule in the skill cites its source; every preset is exact values (durations, easing, sizes, colors, fonts) in a JSON file the agent loads. | Template | Presets | |---|---| | **Audio visualizer**: Turns a soundtrack into silk ribbons, a scrolling wireframe terrain or an ASCII character field | Silk ribbons, Wire terrain, ASCII stream | | **Count-up statistic**: One big number counts to its value over footage or a plain background, lands with a small pulse and holds with a label | Centre hero, Corner tag, Lower band, Split compare | | **Globe-to-country dive**: A globe turns and zooms onto one country, which lights up and gets a label | Night globe, Atlas paper, Flat brand | | **Satellite flyover between two places**: Camera lifts off over place A on satellite imagery, flies an arc and settles over place B while the route draws | Daylight, City lights, Slate | | **Self-drawing bar and line chart**: Bars grow from a zero baseline or a line draws with its value riding the tip, then one datum is highlighted | Bars, Line, Editorial | | **Vector route map**: A route draws itself across a flat vector map with a traveller riding the line and stops popping in | Clean light, Night transit, Multi-stop itinerary | | **Versus timeline**: Two values move in opposite directions on a shared axis while a year counter ticks, ending with a gap callout | Light paper, Dark ink, Footage overlay | | **Watercolor travel route**: A hand-painted watercolour map where a dashed ink route draws between two places with handwritten labels | Travel journal, Bold wash, Antique | **Rules every template follows** - One paused timeline drives everything: map cameras via per-frame `jumpTo` (never `flyTo`'s own clock), counters via a tweened proxy, audio via precomputed per-frame arrays. - Camera moves use the van Wijk zoom-pan curve (rho 1.42 in MapLibre, √2 in d3), scale interpolated in log space, about one zoom level per second. - About 1 s per simple transition, slow-in slow-out, staged (axis/camera first, values/colour second), stagger 0.05–0.08 s (Heer & Robertson). - Bars start at zero, lines need not; one accent series, the rest grey; direct labels instead of legends; units in the subtitle. - Numbers: tabular figures, compact notation, 2–3 significant digits, signed deltas; count with easeOutExpo cubic-bezier(0.16,1,0.3,1), linear-then-ease above 999. - Build maps as vector (SVG/canvas from Natural Earth, public domain) so every part animates; raster only for imagery. **Built from:** Heer & Robertson (InfoVis 2007); MapLibre/Mapbox docs and source; Datawrapper (Lisa Charlotte Muth); John Burn-Murdoch (FT); W3C Web Audio + Remotion + HyperFrames audio guide; Ryan Geiss (MilkDrop); Tyler Hobbs; CountUp.js; cartographers Joshua Stevens, Steven Bernard, John Nelson. Renders locally with HyperFrames or Remotion for 0 credits; generated footage, voice or music runs through varg with a cost estimate first. ## Use when - How to make an animated travel map video - How to animate a route on a map between two cities - How to make a satellite flyover video from A to B - How to zoom from a globe into a country in a video - How to make a bar chart that draws itself for a video - How to animate a number counting up in a video ## Not for - Build an interactive map for my website (use a web mapping skill; this one renders video) - Make a dashboard of our sales data (use a BI tool) - Generate background music for the chart video (use varg-ai (music)) ## Install - Claude Code: `claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg` - Codex: `npx skills add vargHQ/skills --skill maps-and-data-motion -a codex -y` - Cursor: `npx skills add vargHQ/skills --skill maps-and-data-motion -a cursor -y` - OpenClaw: `npx clawhub@latest install maps-and-data-motion` - Gemini CLI: `npx skills add vargHQ/skills --skill maps-and-data-motion -a gemini-cli -y` - Any agent, with the vargai CLI: `vargai install maps-and-data-motion` ## Example output https://s3.varg.ai/files/72c55813-c0fa-4cf2-9f64-ec4f7ed0e7ae/file_b7ac8a5cafce.mp4 — example (credit: varg) ## More numbers & charts skills - [Big Stat Count-Up](https://varg.ai/how-to/skills/big-stat-count-up.md): One huge number counts from zero to its value and lands, with a short label under it. - [Odometer Digit Roll](https://varg.ai/how-to/skills/odometer-digit-roll.md): Each digit rolls on its own wheel to the target, places settling right to left like an odometer. - [Bars Grow with Value Labels](https://varg.ai/how-to/skills/bars-grow-with-labels.md): Bars rise from the baseline in a staggered cascade with values riding their tops. - [Line Draws with Riding Label](https://varg.ai/how-to/skills/line-draws-riding-label.md): A line draws itself left to right while the current value rides the pen tip, ending on a dot and big label. - [Ranked Bar Race](https://varg.ai/how-to/skills/ranked-bar-race.md): Ranked bars grow and overtake each other over time while the axis rescales and a year/date ticks. - [Progress Ring Fills](https://varg.ai/how-to/skills/progress-ring-fills.md): A thin ring draws on to a percentage while the number in its center counts up in sync.