From 63a4ce0fe28c00b8f770c82e4f182aa4d0ce5a9f Mon Sep 17 00:00:00 2001
From: "Paul Gauthier (aider)" <aider@paulg.org>
Date: Thu, 26 Sep 2024 09:39:16 -0700
Subject: [PATCH] feat: Add a graph that displays the Pass Rate for each
 Senior/Junior/EditFormat

---
 .../_posts/2024-09-26-senior-junior.md        | 77 ++++++++++++++++++-
 1 file changed, 76 insertions(+), 1 deletion(-)

diff --git a/aider/website/_posts/2024-09-26-senior-junior.md b/aider/website/_posts/2024-09-26-senior-junior.md
index defe27235..05115cb3a 100644
--- a/aider/website/_posts/2024-09-26-senior-junior.md
+++ b/aider/website/_posts/2024-09-26-senior-junior.md
@@ -42,10 +42,85 @@ pair programming AI coding experience.
 
 ## Results
 
-The graph above and table below show the
+The graph below and table show the
 [aider's code editing benchmark](/docs/benchmarks.html#the-benchmark)
 score for various combinations of Senior and Junior models.
 
+<div>
+  <canvas id="seniorJuniorChart"></canvas>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  const ctx = document.getElementById('seniorJuniorChart').getContext('2d');
+  
+  const data = {
+    labels: [],
+    datasets: []
+  };
+
+  {% assign sorted_data = site.data.senior | sort: "pass_rate_2" | reverse %}
+  {% assign grouped_data = sorted_data | group_by: "model" %}
+
+  {% for group in grouped_data %}
+    const dataset = {
+      label: '{{ group.name }}',
+      data: [],
+      backgroundColor: getRandomColor(),
+    };
+
+    {% for item in group.items %}
+      data.labels.push('{{ item.junior_model }} ({{ item.junior_edit_format | default: item.edit_format }})');
+      dataset.data.push({{ item.pass_rate_2 }});
+    {% endfor %}
+
+    data.datasets.push(dataset);
+  {% endfor %}
+
+  new Chart(ctx, {
+    type: 'bar',
+    data: data,
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: {
+          display: true,
+          text: 'Pass Rate for Senior/Junior/EditFormat Combinations'
+        },
+        legend: {
+          position: 'top',
+        }
+      },
+      scales: {
+        x: {
+          stacked: true,
+        },
+        y: {
+          stacked: true,
+          beginAtZero: true,
+          max: 100,
+          title: {
+            display: true,
+            text: 'Pass Rate (%)'
+          }
+        }
+      }
+    }
+  });
+});
+
+function getRandomColor() {
+  const letters = '0123456789ABCDEF';
+  let color = '#';
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}
+</script>
+
 Some noteworthy observations:
 
 - o1-preview with Deepseek as the Junior surprises as the SOTA result, beating other stronger Junior models. This result is obtained with Deepseek using the "whole" editing format, requiring it to output a full update copy of each edited source file. This is quite slow, and so probably not practical for interactive use with aider.