Airtable Bubble Chart Extension

A custom Airtable Interface Extension that visualizes data as an interactive bubble chart. Designed for mapping value-chain sectors, where each bubble represents a category (sector), sized by entity count, and positioned by averaged numeric fields.

Features

• Bubble chart visualization powered by Recharts
• Multi-select support -- each option in a multi-select field becomes its own bubble
• Fully configurable via the Airtable properties panel (no code changes needed)
• Click-to-drill-down -- click any bubble to see a list of entities in that sector
• Record detail integration -- "View details" button opens the native Airtable record detail page (when permissions allow)
• Airtable-native styling -- matches Airtable's card design, typography, and color tokens
• Dark mode support
• Hover highlighting -- dims other bubbles to focus on the hovered sector
• Smart defaults -- auto-detects fields named "sector", "revenue", "funding", etc.

How It Works

Records are grouped by the selected sector/grouping field. For each group:

• Bubble position (X-axis) = average of the X-axis numeric field across all entities in that sector
• Bubble position (Y-axis) = average of the Y-axis numeric field across all entities in that sector
• Bubble size = number of entities (records) in that sector
• Bubble color = Airtable select field color (when available), otherwise assigned from a built-in palette

Prerequisites

• An Airtable account with access to Interfaces
• Node.js v18 or later
• The Airtable Blocks CLI

Setup for Your Own Airtable Base

1. Clone the repository

git clone https://github.com/nabong04/airtable-bubble-chart.git
cd airtable-bubble-chart

2. Install dependencies

npm install

3. Register a new extension in your Airtable base

1. Open your Airtable base
2. Go to Extensions (or an Interface in edit mode)
3. Click Add an extension > Build a custom extension
4. Choose Remix from GitHub or Start from scratch
5. Airtable will provide you with a Block ID and Base ID

4. Configure the extension to point to your base

Update the .block/remote.json file with the IDs from step 3:

{
    "blockId": "blkYOUR_BLOCK_ID",
    "baseId": "appYOUR_BASE_ID"
}

5. Run in development mode

npx block run

This starts a local dev server at https://localhost:9000. In your Airtable Interface, add a Custom Extension element and point it to this URL.

6. Configure the chart

Once loaded in your Interface, open the properties panel (click the gear icon on the extension element) and configure:

Property	Description
Data Table	The table containing your entity records
Sector / Grouping Field	A single-select, multi-select, or text field to group entities by (e.g., "Value Chain Sector")
X-Axis Field	A numeric/currency field to average for the X-axis (e.g., "Revenue")
Y-Axis Field	A numeric/currency field to average for the Y-axis (e.g., "Funding Amount")
Chart Title	A custom title displayed above the chart

7. Release to production

When you're happy with the extension, release it so it works without the dev server:

npx block release

After releasing, the extension runs from Airtable's servers -- no local server needed.

Supported Field Types

For grouping (sector field):

• Single Select
• Multiple Selects
• Single Line Text
• Formula

For numeric axes (X and Y):

• Number
• Currency
• Percent
• Duration
• Auto Number
• Count
• Rating

Project Structure

.
├── frontend/
│   ├── index.js          # Main extension code (React + Recharts)
│   └── style.css         # Tailwind CSS with Airtable design tokens
├── block.json            # Extension entry point config
├── tailwind.config.js    # Airtable design system tokens
├── package.json
└── README.md

Development

# Start dev server
npx block run

# Lint
npm run lint

# Release
npx block release

License

MIT -- see LICENSE.md