mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-05 17:30:50 +00:00
Miguel Ángel
ae1716d4c1
New block: spain-map — animated Spain choropleth by autonomous community using D3 conic conformal projection with GDP per capita data and red-to-amber color scale. Also switches all map MDX preview URLs from S3 to local paths so they render in mintlify dev without needing S3 upload first.
54 lines
1.6 KiB
Plaintext
54 lines
1.6 KiB
Plaintext
---
|
||
title: "US Map"
|
||
description: "Animated US choropleth map with staggered state reveals, value labels, and gradient legend"
|
||
---
|
||
|
||
# US Map
|
||
|
||
Animated US choropleth map with staggered state reveals, value labels, and gradient legend — D3 geoAlbersUsa projection with GSAP timeline.
|
||
|
||
`data` `map` `geography` `usa` `choropleth`
|
||
|
||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/us-map.mp4" poster="/images/catalog/blocks/us-map.png" autoPlay muted loop playsInline />
|
||
|
||
## Install
|
||
|
||
<CodeGroup>
|
||
|
||
```bash Terminal
|
||
npx hyperframes add us-map
|
||
```
|
||
|
||
</CodeGroup>
|
||
|
||
## Details
|
||
|
||
| Property | Value |
|
||
| --- | --- |
|
||
| Type | Block |
|
||
| Dimensions | 1920×1080 |
|
||
| Duration | 12s |
|
||
|
||
## Files
|
||
|
||
| File | Target | Type |
|
||
| --- | --- | --- |
|
||
| `us-map.html` | `compositions/us-map.html` | hyperframes:composition |
|
||
|
||
## Usage
|
||
|
||
After installing, add the block to your host composition:
|
||
|
||
```html
|
||
<div data-composition-id="us-map" data-composition-src="compositions/us-map.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||
```
|
||
|
||
## Composability
|
||
|
||
Layer `us-map-bubble` or `us-map-flow` on top of this block as a higher track index to combine choropleth + bubble or flow visualizations:
|
||
|
||
```html
|
||
<div data-composition-id="us-map" data-composition-src="compositions/us-map.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||
<div data-composition-id="us-map-bubble" data-composition-src="compositions/us-map-bubble.html" data-start="0" data-duration="12" data-track-index="2" data-width="1920" data-height="1080"></div>
|
||
```
|