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