Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Animated US map by state v1.0.0

Use this resource to present a per-state US metric in an animated video

New

  • 346 downloads
  • 128 likes
  • 194 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install us-choropleth-map

First time: connect the CLI with

npx --yes palatekit@latest login

The agent replaces the per-state data (name, abbreviation, value) and the subtitle, then the coloured map reveals state by state, with values shown and a few states highlighted. The example shows population density.

Mostly picked by

Updated November 2, 2026

Details

Works in
Install guides
Generates with
HyperFrames
Uses
  • HyperFrames
  • Node.js
  • FFmpeg
Licence
Apache-2.0

Similar resources

View all

What you get

  • us-map.html: the 12-second animated composition in 1920x1080
  • README.md: data to replace, colour scale and render
  • registry-item.json: dimensions and target path

Good fit for

  • Client report or results by state
  • Data video (sales, audience, survey results) in the US
  • Geography teaching content

Not for

  • Maps of other countries
  • Renders without network access (the base map comes from a CDN)
  • Very detailed data

Tags

  • map
  • data
  • usa
  • choropleth
  • visualisation

About

You say

"Replace the density with my sales per state in dollars, set the subtitle 'Sales 2026 by state' and highlight CA, NY and TX."

US map coloured by population density, with a gradient legend.

Template published by HeyGen (HyperFrames) under the Apache-2.0 license.

Show more

Prerequisites

You bring
Your values per state and A subtitle describing the measure
Dependencies
HyperFrames, Node.js, and FFmpeg

How to use it

  1. Copy us-map.html into your HyperFrames project.
  2. Replace stateData, the subtitle and the scale maximum.
  3. Run the preview (network required) then render.

Content preview

Files

  • LICENSE10.5 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • README.md0.7 KB
  • registry-item.json0.8 KB
  • us-map.html13.3 KB

Origin and licence

Modified by PalateKit

Author
HeyGen (HyperFrames)
Source
github.com/heygen-com/hyperframes/tree/2c3d1e07fe63d4a2d67d63a3e29d4ad73e291d8e/registry/blocks/us-map
Licence
Apache-2.0

Notice

Version modifiée de « US Map » (HeyGen (HyperFrames), Apache-2.0) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Where does the base map come from?

At render time the HTML downloads the us-atlas shape file (JSON) from jsdelivr, along with d3 and topojson-client, so an internet connection is required.

How do I change the data?

Edit the stateData object (numeric state key, name, abbreviation, value) and maxDensity, which sets the top of the colour scale.