Last active
May 20, 2026 23:27
-
-
Save mhucka/fa7798f91b75d47ec35e3012c4113d4b to your computer and use it in GitHub Desktop.
Cirq fork history chart, vibe-coded with Gemini 3.1 on 2026-05-20
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cirq Fork History</title> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| body { font-family: -apple-system, sans-serif; background-color: #f6f8fa; padding: 20px; } | |
| .container { max-width: 800px; margin: 0 auto; background: white; padding: 30px; border-radius: 6px; box-shadow: 0 1px 3px rgba(27,31,35,0.12); } | |
| .chart-container { position: relative; height: 400px; width: 100%; } | |
| #status { color: #586069; margin-bottom: 20px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h2>Fork History for quantumlib/Cirq</h2> | |
| <div id="status">Fetching data from GitHub API...</div> | |
| <div class="chart-container"><canvas id="forkChart"></canvas></div> | |
| </div> | |
| <script> | |
| async function drawChart() { | |
| let page = 1, forks = []; | |
| const statusEl = document.getElementById('status'); | |
| while (true) { | |
| statusEl.innerText = `Fetching page ${page}... (${forks.length} forks loaded)`; | |
| const response = await fetch(`https://api.github.com/repos/quantumlib/Cirq/forks?per_page=100&page=${page}`); | |
| if (!response.ok) { | |
| statusEl.innerHTML = `<span style="color:red">API Error: ${response.statusText}. Rate limit likely exceeded.</span>`; | |
| break; | |
| } | |
| const data = await response.json(); | |
| if (data.length === 0) break; | |
| forks = forks.concat(data); | |
| page++; | |
| } | |
| if (forks.length > 0) statusEl.innerText = `Successfully loaded ${forks.length} forks!`; | |
| // Sort dates and calculate cumulative count by month | |
| const dates = forks.map(f => new Date(f.created_at)).sort((a, b) => a - b); | |
| if (dates.length === 0) return; | |
| const countsByMonth = {}; | |
| let currentDate = new Date(dates[0].getFullYear(), dates[0].getMonth(), 1); | |
| const lastDate = new Date(); | |
| while (currentDate <= lastDate) { | |
| countsByMonth[`${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}`] = 0; | |
| currentDate.setMonth(currentDate.getMonth() + 1); | |
| } | |
| let cumulativeCount = 0, dateIndex = 0; | |
| const keys = Object.keys(countsByMonth).sort(); | |
| for (const key of keys) { | |
| const [year, month] = key.split('-'); | |
| const endOfMonth = new Date(year, month, 0, 23, 59, 59); | |
| while (dateIndex < dates.length && dates[dateIndex] <= endOfMonth) { | |
| cumulativeCount++; | |
| dateIndex++; | |
| } | |
| countsByMonth[key] = cumulativeCount; | |
| } | |
| new Chart(document.getElementById('forkChart').getContext('2d'), { | |
| type: 'line', | |
| data: { | |
| labels: keys, | |
| datasets: [{ | |
| label: 'Total Forks', | |
| data: keys.map(k => countsByMonth[k]), | |
| borderColor: '#0366d6', | |
| backgroundColor: 'rgba(3, 102, 214, 0.1)', | |
| borderWidth: 2, fill: true, pointRadius: 0 | |
| }] | |
| }, | |
| options: { responsive: true, maintainAspectRatio: false } | |
| }); | |
| } | |
| drawChart(); | |
| </script> | |
| </body> | |
| </html> |
mhucka
commented
May 20, 2026
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment