# henno/artificial-analysis-bubble-chart architecture

> Architecture diagram of the GitHub repository henno/artificial-analysis-bubble-chart, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/henno/artificial-analysis-bubble-chart
- Repository: https://github.com/henno/artificial-analysis-bubble-chart

## Overview

This is a browser userscript that adds a three-metric AI model comparison chart to Artificial Analysis pages. The main workflow reads model data from the open page, filters and compares models, then renders an interactive bubble chart; it can also synchronize filtering with Artificial Analysis’s native charts. The README documents saved settings, Pareto and dominance explanations, and missing-data reporting. The product is implemented in one userscript; the excerpts do not expose enough of its internal wiring to map finer-grained calls.

Main entry points: [`artificial-analysis-3d-bubble.user.js`](https://github.com/henno/artificial-analysis-bubble-chart/blob/main/artificial-analysis-3d-bubble.user.js) (Userscript runtime)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Page integration"]
  node_aa_page["Artificial Analysis page"]
  node_runtime["Userscript runtime"]
  node_settings[("Saved settings")]
end

subgraph group_compare["Model comparison"]
  node_model_filter["Model filtering"]
  node_pareto["Pareto analysis"]
  node_dominance["Dominance analysis"]
end

subgraph group_interaction["Chart interaction"]
  node_chart["Bubble chart"]
  node_details["Model explanations"]
end

node_user(("User"))

node_runtime -->|"reads model data"| node_aa_page
node_runtime -->|"loads and saves"| node_settings
node_user -->|"uses controls"| node_runtime
node_runtime -->|"filters models"| node_model_filter
node_runtime -->|"computes frontiers"| node_pareto
node_runtime -->|"finds dominated"| node_dominance
node_runtime -->|"renders chart"| node_chart
node_runtime -->|"shows explanations"| node_details
node_runtime -->|"updates native selection"| node_aa_page
node_chart -->|"presents comparison"| node_user

click node_runtime "https://github.com/henno/artificial-analysis-bubble-chart/blob/main/artificial-analysis-3d-bubble.user.js"
click node_model_filter "https://github.com/henno/artificial-analysis-bubble-chart/blob/main/artificial-analysis-3d-bubble.user.js"
click node_pareto "https://github.com/henno/artificial-analysis-bubble-chart/blob/main/artificial-analysis-3d-bubble.user.js"
click node_dominance "https://github.com/henno/artificial-analysis-bubble-chart/blob/main/artificial-analysis-3d-bubble.user.js"
click node_chart "https://github.com/henno/artificial-analysis-bubble-chart/blob/main/artificial-analysis-3d-bubble.user.js"
click node_details "https://github.com/henno/artificial-analysis-bubble-chart/blob/main/artificial-analysis-3d-bubble.user.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_aa_page,node_runtime,node_settings,node_user toneBlue
class node_model_filter,node_pareto,node_dominance toneAmber
class node_chart,node_details toneMint
```

## Components

### Page integration

- **Artificial Analysis page**
- [Userscript runtime](https://github.com/henno/artificial-analysis-bubble-chart/blob/main/artificial-analysis-3d-bubble.user.js): `artificial-analysis-3d-bubble.user.js`
- **Saved settings**

### Model comparison

- [Model filtering](https://github.com/henno/artificial-analysis-bubble-chart/blob/main/artificial-analysis-3d-bubble.user.js): `artificial-analysis-3d-bubble.user.js`
- [Pareto analysis](https://github.com/henno/artificial-analysis-bubble-chart/blob/main/artificial-analysis-3d-bubble.user.js): `artificial-analysis-3d-bubble.user.js`
- [Dominance analysis](https://github.com/henno/artificial-analysis-bubble-chart/blob/main/artificial-analysis-3d-bubble.user.js): `artificial-analysis-3d-bubble.user.js`

### Chart interaction

- [Bubble chart](https://github.com/henno/artificial-analysis-bubble-chart/blob/main/artificial-analysis-3d-bubble.user.js): `artificial-analysis-3d-bubble.user.js`
- [Model explanations](https://github.com/henno/artificial-analysis-bubble-chart/blob/main/artificial-analysis-3d-bubble.user.js): `artificial-analysis-3d-bubble.user.js`

### Other components

- **User**

## Connections

- Userscript runtime → Artificial Analysis page: reads model data
- Userscript runtime → Saved settings: loads and saves
- User → Userscript runtime: uses controls
- Userscript runtime → Model filtering: filters models
- Userscript runtime → Pareto analysis: computes frontiers
- Userscript runtime → Dominance analysis: finds dominated
- Userscript runtime → Bubble chart: renders chart
- Userscript runtime → Model explanations: shows explanations
- Userscript runtime → Artificial Analysis page: updates native selection
- Bubble chart → User: presents comparison