Add pie chart

index.html

@@ -49,7 +49,8 @@
     .org-mihaipopa { background: #93c6aa33; color: var(--mihaipopa); }
     .org-cromia { background: #ffffff33; color: var(--cromia); }
     .org-wop { background: #ff9b5033; color: var(--wop); }
-
+    .chart-card.pie { grid-column: 1 / -1; }
+  
     .row-compactai { border-left: 3px solid var(--compactai); }
     .row-supralabs { border-left: 3px solid var(--supralabs); }
     .row-axiomiclabs { border-left: 3px solid var(--axiomiclabs); }
@@ -143,10 +144,13 @@
       <span>Yellow shaded area: models outperforming expectations for their size</span>
     </div>
   </div>
+  <div class="chart-card pie">
+    <h3>Models Released by Org</h3>
+    <canvas id="orgCountChart"></canvas>
+  </div>
 </div>
 
 
-
 <div class="methodology" style="margin-top:1.5rem">
 <h3>Add your model</h3>
 <p>
@@ -722,6 +726,39 @@ window.addEventListener('DOMContentLoaded', () => {
   buildChart('wikiChart', 'wiki', 'WikiText-2 Perplexity', true);
   buildEfficiencyChart();
 });
+
+function buildOrgCountChart() {
+  const orgCounts = {};
+  models.forEach(m => {
+    orgCounts[m.org] = (orgCounts[m.org] || 0) + 1;
+  });
+
+  const orgs = Object.keys(orgCounts).sort((a, b) => orgCounts[b] - orgCounts[a]);
+
+  new Chart(document.getElementById('orgCountChart'), {
+    type: 'doughnut',
+    data: {
+      labels: orgs.map(org => orgNameMap[org]),
+      datasets: [{
+        data: orgs.map(org => orgCounts[org]),
+        backgroundColor: orgs.map(org => colorMap[org]),
+        borderColor: '#161b22',
+        borderWidth: 2
+      }]
+    },
+    options: {
+      responsive: true,
+      plugins: {
+        legend: {
+          position: 'bottom',
+          labels: { color: '#c9d1d9', padding: 15 }
+        }
+      }
+    }
+  });
+}
+
+buildOrgCountChart();
 </script>
 </body>
 </html>