mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-07 10:06:21 +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.
45 lines
1.2 KiB
Plaintext
45 lines
1.2 KiB
Plaintext
---
|
||
title: "US Bubble Map"
|
||
description: "Animated US bubble map with proportional city markers, value callouts, and connection lines"
|
||
---
|
||
|
||
# US Bubble Map
|
||
|
||
Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with `us-map` for layered data visualizations.
|
||
|
||
`data` `map` `geography` `usa` `bubble` `cities`
|
||
|
||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/us-map-bubble.mp4" poster="/images/catalog/blocks/us-map-bubble.png" autoPlay muted loop playsInline />
|
||
|
||
## Install
|
||
|
||
<CodeGroup>
|
||
|
||
```bash Terminal
|
||
npx hyperframes add us-map-bubble
|
||
```
|
||
|
||
</CodeGroup>
|
||
|
||
## Details
|
||
|
||
| Property | Value |
|
||
| --- | --- |
|
||
| Type | Block |
|
||
| Dimensions | 1920×1080 |
|
||
| Duration | 12s |
|
||
|
||
## Files
|
||
|
||
| File | Target | Type |
|
||
| --- | --- | --- |
|
||
| `us-map-bubble.html` | `compositions/us-map-bubble.html` | hyperframes:composition |
|
||
|
||
## Usage
|
||
|
||
After installing, add the block to your host composition:
|
||
|
||
```html
|
||
<div data-composition-id="us-map-bubble" data-composition-src="compositions/us-map-bubble.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||
```
|