100%

Large Language Model API Pricing vs Web Dev Performance

✓ Published1🌍 Public

Last edited Nov 20, 2025

Created on Nov 19, 2025

Forked from Large Language Model API Pricing (October 2024)

This interactive scatter plot compares the cost of API calls against web development performance scores for various large language models. Each circle represents a model, colored by provider (OpenAI, Anthropic, Google, or Other), with cross-hair lines and a dashed trend line revealing the cost-performance trade-off. Hovering over a provider in the legend highlights that provider’s models. Built with React, D3.js 7, and SVG, it reads pricing data from OpenRouter and performance benchmarks from LMArena.

AI-generated description

LLM Pricing vs Performance Visualization

An interactive D3.js visualization comparing Large Language Model API pricing against performance benchmarks.

Overview

This visualization explores the relationship between LLM API costs and performance across multiple providers. It helps developers understand the cost-performance trade-offs when selecting models for their applications.

Features

Interactive Scatter Plot - Explore pricing vs performance with interactive hover effects
Provider Highlighting - Color-coded by provider (OpenAI, Anthropic, Google, and others)
Line of Best Fit - Visual trend line showing the overall pricing-performance relationship
Cross-Hair Grid - Vertical and horizontal reference lines for each model
Responsive Design - Automatically adapts to window resizing
Provider Legend - Interactive legend to highlight specific providers

Data Sources

Pricing Data: OpenRouter - Completion and prompt costs per million tokens
Performance Scores: LMArena - Web development benchmark scores

How to Read the Chart

X-Axis: Completion cost per million tokens (in dollars)
Y-Axis: Web development performance score
Circle Position: Each model's pricing and performance combination
Circle Color: Provider affiliation
Dashed Line: Trend line showing the general pricing-performance relationship

Data Files

data.csv - LLM pricing information from OpenRouter (prompt and completion costs)
webDevScores.csv - Web development performance scores from LMArena

Technology Stack

D3.js 7.8.5 - Data visualization
React 19.1.0 - UI framework
Modern JavaScript (ES6+) - Application logic

Running Locally

MIT Licensed

Similar vizzes

Loading thumbnail…

Large Language Model API Pricing (October 2024)

This horizontal bar chart compares the cost per million output tokens for chat models from four API providers: Together AI, DeepInfra, OpenAI, and Anthropic, with bars colored by provider and labeled with their exact price. The visualization uses D3.js, employing a symlog scale for the x-axis to handle the wide range of prices, and custom tick selection logic to place readable axis labels. Data is sourced from a Google Sheet and filtered to chat-type models, with bars sorted by ascending price.

CCurran Kelleher

80% match

Loading thumbnail…

OpenRouter LLM API Pricing

This visualization compares LLM API pricing from OpenRouter, showing the completion cost per million tokens for various models as horizontal bars. Each bar is colored by the model's author, with well-known organizations like OpenAI, Anthropic, and Google distinguished from others. The chart filters out free, beta, and dated models to focus on current paid offerings. The visualization uses D3.js with a linear scale for the x-axis and band scale for model names. A custom `selectTicks` algorithm intelligently places axis tick marks to avoid overcrowding. Model authors are mapped to a Tableau10 color scale, with a color legend showing the mapping. The data comes from OpenRouter's model documentation.

CCurran Kelleher

72% match

Loading thumbnail…

Aider Models in OpenRouter

This scatter plot compares usage and cost of AI models listed on OpenRouter as of July 2025, with tokens on the x-axis and price per million tokens on the y-axis. Data is loaded from a CSV and visualized using D3 v7 with `d3.forceSimulation` to position labels, preventing overlap, and `d3.axisBottom`/`axisLeft` for axes. The chart highlights that Claude Sonnet 4 and Gemini 2.5 Pro lead in usage, DeepSeek V3 0324 offers low cost with substantial use, while Claude Opus appears too expensive for widespread adoption.

CCurran Kelleher

69% match

Loading thumbnail…

Chat Model Pricing Across Providers

This horizontal bar chart compares the cost per million output tokens for chat models across Together AI, DeepInfra, OpenAI, and Anthropic. The visualization uses D3’s `scaleBand` for the categorical y-axis and a linear `scaleLinear` x-axis, with bars colored by provider via `scaleOrdinal`. Model prices come from a CSV dataset, listing endpoints from Together AI and DeepInfra, while axis labels and a color legend clarify the mapping.

CCurran Kelleher

66% match

Loading thumbnail…

OpenRouter Data

A scatter plot maps the OpenRouter model catalog, with each point representing a model positioned by context length and pricing per million tokens. The visualization uses a logarithmic scale for pricing to accommodate the wide range from free models to premium tiers, while color coding distinguishes model providers and point size reflects context window capacity. Built with D3.js, the plot reads from a JSON snapshot of the OpenRouter API, fetched via curl on February 21, 2025, and renders interactive tooltips showing model names, descriptions, and tokenizer details on hover.

CCurran Kelleher

65% match

Loading thumbnail…

Fork of OpenRouter LLM API Pricing

This horizontal bar chart compares completion costs for LLM models from OpenRouter, priced per million tokens, using a quantile color scale to categorize models into budget, standard, and premium tiers. It uses D3’s `scaleBand`, `scaleLinear`, and `scaleQuantile` to position bars and compute tiers, while `colorLegend.js` builds a legend with `scaleOrdinal` and `schemeTableau10` for provider colors. The `selectTicks.js` module implements a custom tick-selection algorithm for the x-axis, and tooltips reveal model details. Data comes from the included `data.csv` file.

NNita

65% match

Loading thumbnail…

Aider Benchmarks Scatter Plot

This interactive scatter plot visualizes Aider’s LLM leaderboard benchmarks, comparing models’ percent correct on coding exercises against their cost per run on a logarithmic x-axis. Built with React and D3 v7, it uses `scaleSymlog` for cost, `d3.forceSimulation` for label placement, and hover/click interactions to highlight selected models. Data comes from a TSV file with costs parsed from dollar strings.

CCurran Kelleher

64% match

Loading thumbnail…

OpenRouter LLM API Pricing Updated

One hundred forty-four LLM bars charted by cost-per-token, colored by provider with a Tableau10 legend, and sorted ascending. Prices come from openrouter.ai/docs/models, with free, beta, dated, and extended versions filtered out. The chart uses D3's `scaleBand`, `scaleLinear`, and a custom `selectTicks` algorithm for axis gap-filling, while `data.json` supplies structured model metadata.

CCurran Kelleher

63% match