Redesign: Table-focused layout with objective data presentation

Major Changes:
- Reorganized into tabbed interface (All Models / Visual Analysis)
- Table is now the centerpiece with color-coded cost and context tiers
- Added sortable columns (click headers to sort)
- Removed subjective "value score" metrics
- Added proper attribution and methodology explanation

Features:
- Color-coded pricing tiers (5 levels from very low to very high)
- Color-coded context window tiers (5 levels from small to ultra)
- Interactive legends explaining tier ranges
- Vendor name normalization (meta-llama → Meta, etc.)
- Separate input/output pricing display
- Tab navigation for better content organization
- Clear quadrant methodology (median-based divisions)

Attribution:
- Data collection by Daniel Rosehill
- Source: OpenRouter API (Nov 8, 2025)
- Notes on pricing variability across providers
- Median cost and context values displayed

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app.js

@@ -2,6 +2,42 @@
 let allModels = [];
 let filteredModels = [];
 
+// Vendor name mapping
+const vendorNameMap = {
+    'qwen': 'Qwen',
+    'meta-llama': 'Meta',
+    'x-ai': 'xAI',
+    'z-ai': 'Zhipu AI',
+    'google': 'Google',
+    'openai': 'OpenAI',
+    'anthropic': 'Anthropic',
+    'mistralai': 'Mistral AI',
+    'deepseek': 'DeepSeek',
+    'alibaba': 'Alibaba',
+    'amazon': 'Amazon',
+    'microsoft': 'Microsoft',
+    'nvidia': 'NVIDIA',
+    'cohere': 'Cohere',
+    'ai21': 'AI21 Labs',
+    'minimax': 'MiniMax',
+    'moonshotai': 'Moonshot AI',
+    'stepfun-ai': 'StepFun',
+    'inclusionai': 'Inclusion AI',
+    'deepcogito': 'Deep Cogito',
+    'baidu': 'Baidu',
+    'nousresearch': 'Nous Research',
+    'arcee-ai': 'Arcee AI',
+    'inception': 'Inception',
+    'sao10k': 'Sao10K',
+    'thedrummer': 'TheDrummer',
+    'tngtech': 'TNG Technology',
+    'meituan': 'Meituan'
+};
+
+function normalizeVendorName(vendor) {
+    return vendorNameMap[vendor] || vendor;
+}
+
 // Load and process CSV data
 async function loadData() {
     try {
@@ -13,6 +49,10 @@ async function loadData() {
             dynamicTyping: true,
             complete: function(results) {
                 allModels = results.data.filter(row => row.model_name);
+                // Normalize vendor names
+                allModels.forEach(model => {
+                    model.displayVendor = normalizeVendorName(model.vendor);
+                });
                 filteredModels = [...allModels];
                 initializeApp();
             }
@@ -22,32 +62,74 @@ async function loadData() {
     }
 }
 
+// Sorting state
+let currentSort = {
+    column: 'model_name',
+    direction: 'asc'
+};
+
 // Initialize all visualizations and features
 function initializeApp() {
     updateStats();
-    createQuadrantChart();
-    populateTopModels();
-    createDistributionCharts();
-    generateInsights();
     populateTable();
     setupTableControls();
+    setupSorting();
+    setupTabs();
+    createQuadrantChart();
+}
+
+// Setup tab navigation
+function setupTabs() {
+    const tabButtons = document.querySelectorAll('.tab-button');
+    const tabContents = document.querySelectorAll('.tab-content');
+
+    tabButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            const targetTab = button.dataset.tab;
+
+            // Remove active class from all buttons and contents
+            tabButtons.forEach(btn => btn.classList.remove('active'));
+            tabContents.forEach(content => content.classList.remove('active'));
+
+            // Add active class to clicked button and corresponding content
+            button.classList.add('active');
+            document.getElementById(`tab-${targetTab}`).classList.add('active');
+        });
+    });
 }
 
 // Update summary statistics
 function updateStats() {
-    const freeModels = allModels.filter(m => m.avg_cost === 0).length;
-    const avgContext = Math.round(
-        allModels.reduce((sum, m) => sum + m.context_length, 0) / allModels.length / 1000
-    );
-    const vendors = new Set(allModels.map(m => m.vendor)).size;
+    const costs = allModels.map(m => m.avg_cost);
+    const contexts = allModels.map(m => m.context_length);
+    const minCost = Math.min(...costs);
+    const maxCost = Math.max(...costs);
+    const minContext = Math.min(...contexts);
+    const maxContext = Math.max(...contexts);
+    const vendors = new Set(allModels.map(m => m.displayVendor)).size;
+
+    // Calculate medians for methodology display
+    const medianCost = median(costs);
+    const medianContext = median(contexts);
 
     document.getElementById('total-models').textContent = allModels.length;
-    document.getElementById('free-models').textContent = freeModels;
-    document.getElementById('avg-context').textContent = avgContext;
+    document.getElementById('price-range').textContent = `$${minCost.toFixed(2)} - $${maxCost.toFixed(2)}`;
+    document.getElementById('context-range').textContent = `${(minContext/1000).toFixed(0)}K - ${(maxContext/1000000).toFixed(1)}M`;
     document.getElementById('vendors').textContent = vendors;
+
+    // Update methodology section with actual median values
+    document.getElementById('median-cost-display').textContent = `$${medianCost.toFixed(2)}/M tokens`;
+    document.getElementById('median-context-display').textContent = `${(medianContext/1000).toFixed(0)}K tokens`;
+}
+
+// Calculate median for quadrant lines
+function median(arr) {
+    const sorted = [...arr].sort((a, b) => a - b);
+    const mid = Math.floor(sorted.length / 2);
+    return sorted.length % 2 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2;
 }
 
-// Create main quadrant scatter plot
+// Create main quadrant scatter plot with division lines
 function createQuadrantChart() {
     const ctx = document.getElementById('quadrantChart').getContext('2d');
 
@@ -64,7 +146,7 @@ function createQuadrantChart() {
             label: quadrant,
             data: models.map(m => ({
                 x: m.avg_cost,
-                y: m.context_length / 1000, // Convert to K
+                y: m.context_length / 1000,
                 model: m
             })),
             backgroundColor: quadrantColors[quadrant] + '80',
@@ -75,6 +157,10 @@ function createQuadrantChart() {
         };
     });
 
+    // Calculate medians for quadrant lines
+    const medianCost = median(allModels.map(m => m.avg_cost));
+    const medianContext = median(allModels.map(m => m.context_length / 1000));
+
     new Chart(ctx, {
         type: 'scatter',
         data: { datasets },
@@ -95,13 +181,44 @@ function createQuadrantChart() {
                             const model = context.raw.model;
                             return [
                                 model.model_name,
-                                `Vendor: ${model.vendor}`,
+                                `Vendor: ${model.displayVendor}`,
                                 `Context: ${(model.context_length / 1000).toFixed(0)}K tokens`,
-                                `Avg Cost: $${model.avg_cost.toFixed(2)}/M tokens`,
-                                `Value Score: ${model.value_score.toFixed(0)}`
+                                `Input: $${model.input_price_usd_per_m.toFixed(2)}/M`,
+                                `Output: $${model.output_price_usd_per_m.toFixed(2)}/M`,
+                                `Avg: $${model.avg_cost.toFixed(2)}/M`
                             ];
                         }
                     }
+                },
+                annotation: {
+                    annotations: {
+                        verticalLine: {
+                            type: 'line',
+                            xMin: medianCost,
+                            xMax: medianCost,
+                            borderColor: '#64748b',
+                            borderWidth: 2,
+                            borderDash: [5, 5],
+                            label: {
+                                display: true,
+                                content: `Median Cost: $${medianCost.toFixed(2)}`,
+                                position: 'start'
+                            }
+                        },
+                        horizontalLine: {
+                            type: 'line',
+                            yMin: medianContext,
+                            yMax: medianContext,
+                            borderColor: '#64748b',
+                            borderWidth: 2,
+                            borderDash: [5, 5],
+                            label: {
+                                display: true,
+                                content: `Median Context: ${medianContext.toFixed(0)}K`,
+                                position: 'end'
+                            }
+                        }
+                    }
                 }
             },
             scales: {
@@ -120,199 +237,104 @@ function createQuadrantChart() {
                     }
                 }
             }
-        }
+        },
+        plugins: [window['chartjs-plugin-annotation']]
     });
 }
 
-// Populate top value models by quadrant
-function populateTopModels() {
-    const quadrants = {
-        'Low Cost / High Context': 'lc-hc-models',
-        'High Cost / High Context': 'hc-hc-models',
-        'Low Cost / Low Context': 'lc-lc-models',
-        'High Cost / Low Context': 'hc-lc-models'
-    };
 
-    Object.entries(quadrants).forEach(([quadrant, elementId]) => {
-        const models = allModels
-            .filter(m => m.quadrant === quadrant)
-            .sort((a, b) => b.value_score - a.value_score)
-            .slice(0, 5);
-
-        const container = document.getElementById(elementId);
-        container.innerHTML = models.map(m => `
-            <div class="model-item">
-                <div class="model-name">${m.model_name}</div>
-                <div class="model-vendor">${m.vendor}</div>
-                <div class="model-stats">
-                    <div class="model-stat">
-                        <span class="model-stat-label">Context</span>
-                        <span class="model-stat-value">${(m.context_length / 1000).toFixed(0)}K</span>
-                    </div>
-                    <div class="model-stat">
-                        <span class="model-stat-label">Cost</span>
-                        <span class="model-stat-value">$${m.avg_cost.toFixed(2)}</span>
-                    </div>
-                    <div class="model-stat">
-                        <span class="model-stat-label">Value</span>
-                        <span class="model-stat-value">${m.value_score.toFixed(0)}</span>
-                    </div>
-                </div>
-            </div>
-        `).join('');
-    });
+// Get tier class for cost
+function getCostTier(cost) {
+    if (cost < 0.10) return 'cost-very-low';
+    if (cost < 0.50) return 'cost-low';
+    if (cost < 2.00) return 'cost-medium';
+    if (cost < 5.00) return 'cost-high';
+    return 'cost-very-high';
 }
 
-// Create distribution charts
-function createDistributionCharts() {
-    // Context distribution histogram
-    const contextCtx = document.getElementById('contextDistChart').getContext('2d');
-    const contextBins = {
-        '<64K': 0,
-        '64K-128K': 0,
-        '128K-256K': 0,
-        '256K-512K': 0,
-        '512K-1M': 0,
-        '>1M': 0
-    };
-
-    allModels.forEach(m => {
-        const ctx = m.context_length;
-        if (ctx < 64000) contextBins['<64K']++;
-        else if (ctx < 128000) contextBins['64K-128K']++;
-        else if (ctx < 256000) contextBins['128K-256K']++;
-        else if (ctx < 512000) contextBins['256K-512K']++;
-        else if (ctx < 1000000) contextBins['512K-1M']++;
-        else contextBins['>1M']++;
-    });
+// Get tier class for context
+function getContextTier(context) {
+    if (context < 32000) return 'context-small';
+    if (context < 128000) return 'context-medium';
+    if (context < 256000) return 'context-large';
+    if (context < 1000000) return 'context-very-large';
+    return 'context-ultra';
+}
 
-    new Chart(contextCtx, {
-        type: 'bar',
-        data: {
-            labels: Object.keys(contextBins),
-            datasets: [{
-                label: 'Number of Models',
-                data: Object.values(contextBins),
-                backgroundColor: '#2563eb'
-            }]
-        },
-        options: {
-            responsive: true,
-            maintainAspectRatio: true,
-            plugins: {
-                legend: {
-                    display: false
-                }
-            },
-            scales: {
-                y: {
-                    beginAtZero: true,
-                    title: {
-                        display: true,
-                        text: 'Count'
-                    }
-                }
-            }
-        }
-    });
+// Populate data table with color coding
+function populateTable(models = filteredModels) {
+    const tbody = document.getElementById('table-body');
 
-    // Vendor distribution
-    const vendorCtx = document.getElementById('vendorChart').getContext('2d');
-    const vendorCounts = {};
-    allModels.forEach(m => {
-        vendorCounts[m.vendor] = (vendorCounts[m.vendor] || 0) + 1;
-    });
+    // Sort models
+    const sortedModels = [...models].sort((a, b) => {
+        let aVal = a[currentSort.column];
+        let bVal = b[currentSort.column];
 
-    const topVendors = Object.entries(vendorCounts)
-        .sort((a, b) => b[1] - a[1])
-        .slice(0, 10);
-
-    new Chart(vendorCtx, {
-        type: 'bar',
-        data: {
-            labels: topVendors.map(v => v[0]),
-            datasets: [{
-                label: 'Model Count',
-                data: topVendors.map(v => v[1]),
-                backgroundColor: '#10b981'
-            }]
-        },
-        options: {
-            indexAxis: 'y',
-            responsive: true,
-            maintainAspectRatio: true,
-            plugins: {
-                legend: {
-                    display: false
-                }
-            },
-            scales: {
-                x: {
-                    beginAtZero: true,
-                    title: {
-                        display: true,
-                        text: 'Number of Models'
-                    }
-                }
-            }
+        // Handle string comparisons
+        if (typeof aVal === 'string') {
+            aVal = aVal.toLowerCase();
+            bVal = bVal.toLowerCase();
         }
-    });
-}
 
-// Generate insights
-function generateInsights() {
-    const freeModels = allModels.filter(m => m.avg_cost === 0);
-    const longestContext = allModels.reduce((max, m) =>
-        m.context_length > max.context_length ? m : max
-    );
-    const bestValue = allModels.reduce((max, m) =>
-        m.value_score > max.value_score ? m : max
-    );
-    const avgCost = (allModels.reduce((sum, m) => sum + m.avg_cost, 0) / allModels.length).toFixed(2);
-
-    const insights = [
-        {
-            title: 'Free Models Available',
-            text: `${freeModels.length} models offer free tool-calling capabilities, with ${freeModels.filter(m => m.context_length > 128000).length} providing >128K context windows.`
-        },
-        {
-            title: 'Longest Context',
-            text: `${longestContext.model_name} by ${longestContext.vendor} offers the largest context window at ${(longestContext.context_length / 1000000).toFixed(1)}M tokens.`
-        },
-        {
-            title: 'Best Value',
-            text: `${bestValue.model_name} offers the highest value score (${bestValue.value_score.toFixed(0)}), with ${(bestValue.context_length / 1000).toFixed(0)}K context at $${bestValue.avg_cost.toFixed(2)}/M.`
-        },
-        {
-            title: 'Average Pricing',
-            text: `The average cost across all models is $${avgCost} per million tokens, with significant variation based on context window size.`
+        if (currentSort.direction === 'asc') {
+            return aVal > bVal ? 1 : -1;
+        } else {
+            return aVal < bVal ? 1 : -1;
         }
-    ];
-
-    const container = document.getElementById('insights-content');
-    container.innerHTML = insights.map(i => `
-        <div class="insight-card">
-            <div class="insight-title">${i.title}</div>
-            <div class="insight-text">${i.text}</div>
-        </div>
-    `).join('');
-}
+    });
 
-// Populate data table
-function populateTable(models = filteredModels) {
-    const tbody = document.getElementById('table-body');
-    tbody.innerHTML = models.map(m => `
+    tbody.innerHTML = sortedModels.map(m => `
         <tr>
             <td>${m.model_name}</td>
-            <td>${m.vendor}</td>
-            <td>${(m.context_length / 1000).toFixed(0)}K</td>
-            <td>$${m.avg_cost.toFixed(2)}</td>
+            <td>${m.displayVendor}</td>
+            <td class="${getContextTier(m.context_length)}" style="font-weight: 600;">
+                ${(m.context_length / 1000).toFixed(0)}K
+            </td>
+            <td class="${getCostTier(m.input_price_usd_per_m)}" style="font-weight: 600;">
+                $${m.input_price_usd_per_m.toFixed(2)}
+            </td>
+            <td class="${getCostTier(m.output_price_usd_per_m)}" style="font-weight: 600;">
+                $${m.output_price_usd_per_m.toFixed(2)}
+            </td>
             <td><span class="quadrant-badge">${m.quadrant}</span></td>
-            <td>${m.value_score.toFixed(0)}</td>
         </tr>
     `).join('');
 }
 
+// Setup sorting functionality
+function setupSorting() {
+    const headers = document.querySelectorAll('th.sortable');
+
+    headers.forEach(header => {
+        header.addEventListener('click', () => {
+            const column = header.dataset.sort;
+
+            // Toggle direction if clicking same column
+            if (currentSort.column === column) {
+                currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
+            } else {
+                currentSort.column = column;
+                currentSort.direction = 'asc';
+            }
+
+            // Update UI indicators
+            headers.forEach(h => {
+                h.classList.remove('sort-asc', 'sort-desc');
+            });
+            header.classList.add(`sort-${currentSort.direction}`);
+
+            // Repopulate table
+            populateTable(filteredModels);
+        });
+    });
+
+    // Set initial sort indicator
+    const initialHeader = document.querySelector(`th[data-sort="${currentSort.column}"]`);
+    if (initialHeader) {
+        initialHeader.classList.add('sort-asc');
+    }
+}
+
 // Setup table filtering and search
 function setupTableControls() {
     const searchInput = document.getElementById('search');
@@ -325,7 +347,7 @@ function setupTableControls() {
         filteredModels = allModels.filter(m => {
             const matchesSearch = !searchTerm ||
                 m.model_name.toLowerCase().includes(searchTerm) ||
-                m.vendor.toLowerCase().includes(searchTerm);
+                m.displayVendor.toLowerCase().includes(searchTerm);
             const matchesQuadrant = !quadrant || m.quadrant === quadrant;
             return matchesSearch && matchesQuadrant;
         });

index.html

@@ -6,6 +6,7 @@
     <title>LLM Tool-Calling Models: Cost & Context Analysis</title>
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@3.0.1/dist/chartjs-plugin-annotation.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
 </head>
 <body>
@@ -23,6 +24,25 @@
                 <li><strong>Cost per token</strong> - Economic efficiency for production use</li>
                 <li><strong>Context window size</strong> - Capability for complex, long-form tasks</li>
             </ul>
+
+            <div class="attribution">
+                <h3>Methodology</h3>
+                <p><strong>Quadrant Classification:</strong> Models are categorized into four quadrants based on median values calculated from the dataset:</p>
+                <ul>
+                    <li><strong>Cost Division:</strong> Median average cost (mean of input + output pricing) = <span id="median-cost-display">calculated from data</span></li>
+                    <li><strong>Context Division:</strong> Median context window size = <span id="median-context-display">calculated from data</span></li>
+                </ul>
+                <p>This creates four categories: Low Cost/High Context, High Cost/High Context, Low Cost/Low Context, and High Cost/Low Context.</p>
+
+                <h3>Attribution & Data Notes</h3>
+                <ul>
+                    <li><strong>Data Collection:</strong> <a href="https://danielrosehill.com" target="_blank">Daniel Rosehill</a></li>
+                    <li><strong>Collection Date:</strong> November 8, 2025</li>
+                    <li><strong>Source:</strong> Prices derived from API calls to <a href="https://openrouter.ai/" target="_blank">OpenRouter</a></li>
+                    <li><strong>Pricing Variability:</strong> OpenRouter pricing can fluctuate slightly according to the end inference provider. The same models may have slightly different pricing even at the time of capture.</li>
+                    <li><strong>Data Exclusions:</strong> Free models (cost = $0) were excluded from this analysis</li>
+                </ul>
+            </div>
         </section>
 
         <section class="stats-grid">
@@ -31,12 +51,12 @@
                 <div class="stat-label">Models Analyzed</div>
             </div>
             <div class="stat-card">
-                <div class="stat-number" id="free-models">-</div>
-                <div class="stat-label">Free Models</div>
+                <div class="stat-number" id="price-range">-</div>
+                <div class="stat-label">Price Range ($/M)</div>
             </div>
             <div class="stat-card">
-                <div class="stat-number" id="avg-context">-</div>
-                <div class="stat-label">Avg Context (K)</div>
+                <div class="stat-number" id="context-range">-</div>
+                <div class="stat-label">Context Range (K)</div>
             </div>
             <div class="stat-card">
                 <div class="stat-number" id="vendors">-</div>
@@ -44,61 +64,47 @@
             </div>
         </section>
 
-        <section class="chart-section">
-            <h2>Quadrant Analysis: Cost vs Context</h2>
-            <p>Models positioned by average cost (input + output) and context window size. Hover for details.</p>
-            <div class="chart-container">
-                <canvas id="quadrantChart"></canvas>
-            </div>
-        </section>
+        <div class="tabs">
+            <button class="tab-button active" data-tab="models">All Models</button>
+            <button class="tab-button" data-tab="analysis">Visual Analysis</button>
+        </div>
 
-        <section class="chart-section">
-            <h2>Top Value Models by Quadrant</h2>
-            <p>Models with the best context-to-cost ratio in each category</p>
-            <div class="quadrant-grid">
-                <div class="quadrant-card">
-                    <h3>Low Cost / High Context</h3>
-                    <div id="lc-hc-models" class="model-list"></div>
-                </div>
-                <div class="quadrant-card">
-                    <h3>High Cost / High Context</h3>
-                    <div id="hc-hc-models" class="model-list"></div>
-                </div>
-                <div class="quadrant-card">
-                    <h3>Low Cost / Low Context</h3>
-                    <div id="lc-lc-models" class="model-list"></div>
-                </div>
-                <div class="quadrant-card">
-                    <h3>High Cost / Low Context</h3>
-                    <div id="hc-lc-models" class="model-list"></div>
-                </div>
-            </div>
-        </section>
+        <div class="tab-content active" id="tab-models">
+            <section class="data-notes">
+                <h3>Data Notes</h3>
+                <ul>
+                    <li><strong>Cost Calculation:</strong> Input and output pricing shown separately (per million tokens)</li>
+                    <li><strong>Data Exclusions:</strong> Free models (cost = $0) were excluded from this analysis</li>
+                    <li><strong>Color Coding:</strong> Cells are color-coded by tier - see legend below for ranges</li>
+                </ul>
+            </section>
 
-        <section class="chart-section">
-            <h2>Distribution Analysis</h2>
-            <div class="dual-chart">
-                <div class="chart-half">
-                    <h3>Context Window Distribution</h3>
-                    <canvas id="contextDistChart"></canvas>
+            <section class="data-table-section">
+            <h2>All Models - Comprehensive View</h2>
+            <p>Complete dataset with color-coded cost and context tiers. Click column headers to sort.</p>
+
+            <div class="tier-legends">
+                <div class="legend-group">
+                    <h4>Cost Tiers ($/M tokens)</h4>
+                    <div class="legend-items">
+                        <div class="legend-item"><span class="tier-indicator cost-very-low"></span> Very Low (&lt; $0.10)</div>
+                        <div class="legend-item"><span class="tier-indicator cost-low"></span> Low ($0.10 - $0.50)</div>
+                        <div class="legend-item"><span class="tier-indicator cost-medium"></span> Medium ($0.50 - $2.00)</div>
+                        <div class="legend-item"><span class="tier-indicator cost-high"></span> High ($2.00 - $5.00)</div>
+                        <div class="legend-item"><span class="tier-indicator cost-very-high"></span> Very High (&gt; $5.00)</div>
+                    </div>
                 </div>
-                <div class="chart-half">
-                    <h3>Top Vendors by Model Count</h3>
-                    <canvas id="vendorChart"></canvas>
+                <div class="legend-group">
+                    <h4>Context Window Tiers</h4>
+                    <div class="legend-items">
+                        <div class="legend-item"><span class="tier-indicator context-small"></span> Small (&lt; 32K)</div>
+                        <div class="legend-item"><span class="tier-indicator context-medium"></span> Medium (32K - 128K)</div>
+                        <div class="legend-item"><span class="tier-indicator context-large"></span> Large (128K - 256K)</div>
+                        <div class="legend-item"><span class="tier-indicator context-very-large"></span> Very Large (256K - 1M)</div>
+                        <div class="legend-item"><span class="tier-indicator context-ultra"></span> Ultra (&gt; 1M)</div>
+                    </div>
                 </div>
             </div>
-        </section>
-
-        <section class="insights">
-            <h2>Key Findings</h2>
-            <div class="insights-grid" id="insights-content">
-                <!-- Populated by JavaScript -->
-            </div>
-        </section>
-
-        <section class="data-table-section">
-            <h2>All Models</h2>
-            <p>Complete dataset with filtering and search</p>
             <div class="table-controls">
                 <input type="text" id="search" placeholder="Search models..." />
                 <select id="quadrant-filter">
@@ -113,12 +119,12 @@
                 <table id="models-table">
                     <thead>
                         <tr>
-                            <th>Model Name</th>
-                            <th>Vendor</th>
-                            <th>Context (tokens)</th>
-                            <th>Avg Cost ($/M)</th>
-                            <th>Quadrant</th>
-                            <th>Value Score</th>
+                            <th class="sortable" data-sort="model_name">Model Name <span class="sort-indicator"></span></th>
+                            <th class="sortable" data-sort="displayVendor">Vendor <span class="sort-indicator"></span></th>
+                            <th class="sortable" data-sort="context_length">Context <span class="sort-indicator"></span></th>
+                            <th class="sortable" data-sort="input_price_usd_per_m">Input ($/M) <span class="sort-indicator"></span></th>
+                            <th class="sortable" data-sort="output_price_usd_per_m">Output ($/M) <span class="sort-indicator"></span></th>
+                            <th class="sortable" data-sort="quadrant">Quadrant <span class="sort-indicator"></span></th>
                         </tr>
                     </thead>
                     <tbody id="table-body">
@@ -126,7 +132,27 @@
                     </tbody>
                 </table>
             </div>
-        </section>
+            </section>
+        </div>
+
+        <div class="tab-content" id="tab-analysis">
+            <section class="data-notes">
+                <h3>Analysis Notes</h3>
+                <ul>
+                    <li><strong>Quadrant Divisions:</strong> Based on median values for cost and context window size</li>
+                    <li><strong>Logarithmic Scale:</strong> Cost axis uses log scale to better visualize the wide price range</li>
+                    <li><strong>Median Lines:</strong> Dashed lines show median cost and context values across all models</li>
+                </ul>
+            </section>
+
+            <section class="chart-section">
+                <h2>Cost vs Context Quadrant Analysis</h2>
+                <p>Interactive scatter plot showing the relationship between pricing and context window size. Hover over points for detailed model information.</p>
+                <div class="chart-container">
+                    <canvas id="quadrantChart"></canvas>
+                </div>
+            </section>
+        </div>
     </main>
 
     <footer>

style.css

@@ -88,6 +88,94 @@ h3 {
     margin-bottom: 0.5rem;
 }
 
+.attribution {
+    margin-top: 2rem;
+    padding: 1.5rem;
+    background: var(--bg);
+    border-radius: 8px;
+    border-left: 4px solid var(--primary);
+}
+
+.attribution h3 {
+    color: var(--primary);
+    font-size: 1.1rem;
+    margin-bottom: 1rem;
+}
+
+.attribution ul {
+    margin-left: 1.5rem;
+}
+
+.attribution li {
+    margin-bottom: 0.5rem;
+    line-height: 1.6;
+}
+
+.attribution a {
+    color: var(--primary);
+    text-decoration: none;
+    font-weight: 600;
+}
+
+.attribution a:hover {
+    text-decoration: underline;
+}
+
+/* Data Notes */
+.data-notes ul {
+    margin-left: 1.5rem;
+    margin-top: 0.5rem;
+}
+
+.data-notes li {
+    margin-bottom: 0.5rem;
+    line-height: 1.6;
+}
+
+/* Tabs */
+.tabs {
+    display: flex;
+    gap: 0.5rem;
+    margin: 2rem 0 0 0;
+    border-bottom: 2px solid var(--border);
+}
+
+.tab-button {
+    padding: 1rem 2rem;
+    background: transparent;
+    border: none;
+    border-bottom: 3px solid transparent;
+    color: var(--text-muted);
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.tab-button:hover {
+    color: var(--text);
+    background: var(--bg);
+}
+
+.tab-button.active {
+    color: var(--primary);
+    border-bottom-color: var(--primary);
+}
+
+.tab-content {
+    display: none;
+    animation: fadeIn 0.3s;
+}
+
+.tab-content.active {
+    display: block;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
 /* Stats Grid */
 .stats-grid {
     display: grid;
@@ -214,6 +302,32 @@ h3 {
     font-weight: 600;
 }
 
+/* Quadrant Stats */
+.quadrant-stats {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.quadrant-stat-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.5rem;
+    background: var(--card-bg);
+    border-radius: 4px;
+}
+
+.quadrant-stat-item .stat-label {
+    color: var(--text-muted);
+    font-size: 0.85rem;
+}
+
+.quadrant-stat-item .stat-value {
+    color: var(--text);
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+
 /* Insights */
 .insights-grid {
     display: grid;
@@ -240,6 +354,58 @@ h3 {
     line-height: 1.5;
 }
 
+/* Tier Legends */
+.tier-legends {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin-bottom: 2rem;
+    padding: 1.5rem;
+    background: var(--bg);
+    border-radius: 8px;
+}
+
+.legend-group h4 {
+    color: var(--text);
+    font-size: 1rem;
+    margin-bottom: 1rem;
+    font-weight: 600;
+}
+
+.legend-items {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-size: 0.9rem;
+}
+
+.tier-indicator {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    display: inline-block;
+}
+
+/* Cost Tier Colors */
+.cost-very-low { background: #10b981; }
+.cost-low { background: #84cc16; }
+.cost-medium { background: #f59e0b; }
+.cost-high { background: #f97316; }
+.cost-very-high { background: #ef4444; }
+
+/* Context Tier Colors */
+.context-small { background: #fca5a5; }
+.context-medium { background: #fde047; }
+.context-large { background: #a78bfa; }
+.context-very-large { background: #60a5fa; }
+.context-ultra { background: #34d399; }
+
 /* Table */
 .table-controls {
     display: flex;
@@ -294,6 +460,31 @@ th {
     letter-spacing: 0.05em;
 }
 
+th.sortable {
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+}
+
+th.sortable:hover {
+    background: var(--primary-dark);
+}
+
+.sort-indicator {
+    margin-left: 0.5rem;
+    opacity: 0.5;
+}
+
+th.sort-asc .sort-indicator::after {
+    content: ' ▲';
+    opacity: 1;
+}
+
+th.sort-desc .sort-indicator::after {
+    content: ' ▼';
+    opacity: 1;
+}
+
 tbody tr {
     border-bottom: 1px solid var(--border);
     transition: background-color 0.2s;