commit

app.js

@@ -76,6 +76,8 @@ function initializeApp() {
     setupSorting();
     setupTabs();
     createQuadrantChart();
+    createAllQuadrantsChart();
+    createIndividualQuadrantCharts();
 }
 
 // Setup tab navigation
@@ -395,5 +397,203 @@ function setupTableControls() {
     quadrantFilter.addEventListener('change', applyFilters);
 }
 
+// Create all quadrants overview chart (same as main quadrant chart)
+function createAllQuadrantsChart() {
+    const ctx = document.getElementById('allQuadrantsChart').getContext('2d');
+
+    const quadrantColors = {
+        'Low Cost / High Context': '#10b981',
+        'High Cost / High Context': '#2563eb',
+        'Low Cost / Low Context': '#f59e0b',
+        'High Cost / Low Context': '#ef4444'
+    };
+
+    const datasets = Object.keys(quadrantColors).map(quadrant => {
+        const models = allModels.filter(m => m.quadrant === quadrant);
+        return {
+            label: quadrant,
+            data: models.map(m => ({
+                x: m.avg_cost,
+                y: m.context_length / 1000,
+                model: m
+            })),
+            backgroundColor: quadrantColors[quadrant] + '80',
+            borderColor: quadrantColors[quadrant],
+            borderWidth: 2,
+            pointRadius: 5,
+            pointHoverRadius: 8
+        };
+    });
+
+    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 },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                title: {
+                    display: false
+                },
+                legend: {
+                    display: true,
+                    position: 'top'
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            const model = context.raw.model;
+                            return [
+                                model.model_name,
+                                `Vendor: ${model.displayVendor}`,
+                                `Context: ${(model.context_length / 1000).toFixed(0)}K tokens`,
+                                `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: $${medianCost.toFixed(2)}`,
+                                position: 'start'
+                            }
+                        },
+                        horizontalLine: {
+                            type: 'line',
+                            yMin: medianContext,
+                            yMax: medianContext,
+                            borderColor: '#64748b',
+                            borderWidth: 2,
+                            borderDash: [5, 5],
+                            label: {
+                                display: true,
+                                content: `Median: ${medianContext.toFixed(0)}K`,
+                                position: 'end'
+                            }
+                        }
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    type: 'logarithmic',
+                    title: {
+                        display: true,
+                        text: 'Average Cost ($/M tokens, log scale)'
+                    },
+                    min: 0.01
+                },
+                y: {
+                    title: {
+                        display: true,
+                        text: 'Context Window (K tokens)'
+                    }
+                }
+            }
+        },
+        plugins: [window['chartjs-plugin-annotation']]
+    });
+}
+
+// Create individual quadrant zoom charts
+function createIndividualQuadrantCharts() {
+    const quadrants = [
+        { name: 'Low Cost / High Context', id: 'lchc', color: '#10b981' },
+        { name: 'High Cost / High Context', id: 'hchc', color: '#2563eb' },
+        { name: 'Low Cost / Low Context', id: 'lclc', color: '#f59e0b' },
+        { name: 'High Cost / Low Context', id: 'hclc', color: '#ef4444' }
+    ];
+
+    quadrants.forEach(quadrant => {
+        const ctx = document.getElementById(`quadrant-${quadrant.id}`).getContext('2d');
+        const models = allModels.filter(m => m.quadrant === quadrant.name);
+
+        if (models.length === 0) return;
+
+        const data = models.map(m => ({
+            x: m.avg_cost,
+            y: m.context_length / 1000,
+            model: m
+        }));
+
+        new Chart(ctx, {
+            type: 'scatter',
+            data: {
+                datasets: [{
+                    label: quadrant.name,
+                    data: data,
+                    backgroundColor: quadrant.color + '80',
+                    borderColor: quadrant.color,
+                    borderWidth: 2,
+                    pointRadius: 6,
+                    pointHoverRadius: 9
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    title: {
+                        display: false
+                    },
+                    legend: {
+                        display: false
+                    },
+                    tooltip: {
+                        callbacks: {
+                            label: function(context) {
+                                const model = context.raw.model;
+                                return [
+                                    model.model_name,
+                                    `Vendor: ${model.displayVendor}`,
+                                    `Context: ${(model.context_length / 1000).toFixed(0)}K tokens`,
+                                    `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`
+                                ];
+                            }
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        type: 'logarithmic',
+                        title: {
+                            display: true,
+                            text: 'Average Cost ($/M tokens, log scale)',
+                            font: {
+                                size: 11
+                            }
+                        }
+                    },
+                    y: {
+                        title: {
+                            display: true,
+                            text: 'Context (K tokens)',
+                            font: {
+                                size: 11
+                            }
+                        }
+                    }
+                }
+            }
+        });
+    });
+}
+
 // Initialize on page load
 document.addEventListener('DOMContentLoaded', loadData);

index.html

@@ -66,6 +66,7 @@
 
         <div class="tabs">
             <button class="tab-button active" data-tab="models">All Models</button>
+            <button class="tab-button" data-tab="quadrants">Quadrant Analysis</button>
             <button class="tab-button" data-tab="analysis">Visual Analysis</button>
         </div>
 
@@ -135,6 +136,62 @@
             </section>
         </div>
 
+        <div class="tab-content" id="tab-quadrants">
+            <section class="data-notes">
+                <h3>Quadrant Analysis</h3>
+                <ul>
+                    <li><strong>Overview:</strong> Models divided into four quadrants based on median cost and context values</li>
+                    <li><strong>Green (Low Cost / High Context):</strong> Best value - low prices with large context windows</li>
+                    <li><strong>Blue (High Cost / High Context):</strong> Premium models with extensive context capabilities</li>
+                    <li><strong>Orange (Low Cost / Low Context):</strong> Budget-friendly for simple tasks</li>
+                    <li><strong>Red (High Cost / Low Context):</strong> Specialized models with limited context</li>
+                </ul>
+            </section>
+
+            <section class="chart-section">
+                <h2>All Quadrants Overview</h2>
+                <p>Complete view showing all models across quadrants with median division lines.</p>
+                <div class="chart-container">
+                    <canvas id="allQuadrantsChart"></canvas>
+                </div>
+            </section>
+
+            <section class="quadrant-details">
+                <h2>Individual Quadrant Deep Dive</h2>
+                <p>Detailed view of each quadrant's models for easier comparison within each category.</p>
+
+                <div class="quadrant-grid">
+                    <div class="quadrant-detail">
+                        <h3 style="color: #10b981;">Low Cost / High Context</h3>
+                        <div class="chart-container-small">
+                            <canvas id="quadrant-lchc"></canvas>
+                        </div>
+                    </div>
+
+                    <div class="quadrant-detail">
+                        <h3 style="color: #2563eb;">High Cost / High Context</h3>
+                        <div class="chart-container-small">
+                            <canvas id="quadrant-hchc"></canvas>
+                        </div>
+                    </div>
+
+                    <div class="quadrant-detail">
+                        <h3 style="color: #f59e0b;">Low Cost / Low Context</h3>
+                        <div class="chart-container-small">
+                            <canvas id="quadrant-lclc"></canvas>
+                        </div>
+                    </div>
+
+                    <div class="quadrant-detail">
+                        <h3 style="color: #ef4444;">High Cost / Low Context</h3>
+                        <div class="chart-container-small">
+                            <canvas id="quadrant-hclc"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+
         <div class="tab-content" id="tab-analysis">
             <section class="data-notes">
                 <h3>Analysis Notes</h3>

style.css

@@ -212,6 +212,12 @@ h3 {
     margin-top: 1.5rem;
 }
 
+.chart-container-small {
+    position: relative;
+    height: 300px;
+    margin-top: 1rem;
+}
+
 .dual-chart {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
@@ -230,11 +236,29 @@ h3 {
 /* Quadrant Grid */
 .quadrant-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    grid-template-columns: repeat(2, 1fr);
     gap: 1.5rem;
     margin-top: 1.5rem;
 }
 
+.quadrant-detail {
+    background: var(--bg);
+    border: 2px solid var(--border);
+    border-radius: 8px;
+    padding: 1.5rem;
+}
+
+.quadrant-detail h3 {
+    font-size: 1.1rem;
+    margin-bottom: 0.5rem;
+    padding-bottom: 0.75rem;
+    border-bottom: 2px solid var(--border);
+}
+
+.quadrant-details {
+    margin-top: 2rem;
+}
+
 .quadrant-card {
     background: var(--bg);
     border: 2px solid var(--border);
@@ -567,7 +591,24 @@ footer a:hover {
         height: 350px;
     }
 
+    .chart-container-small {
+        height: 250px;
+    }
+
     .dual-chart {
         grid-template-columns: 1fr;
     }
+
+    .quadrant-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .tabs {
+        flex-wrap: wrap;
+    }
+
+    .tab-button {
+        padding: 0.75rem 1rem;
+        font-size: 0.9rem;
+    }
 }