Skip to content

Commit 8092e5a

Browse files
mschwarclaude
mschwar
and
claude
committed
Add GitHub Pages site with cross-links and polish
- Root index.html with card layout for both visualizations - Subdir index.html pages with companion cross-links - Consistent footer on all pages - CONTRIBUTING.md for issue/PR guidelines - GitHub topics: data-visualization, ai-history, exponential-growth, etc. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 0653785 commit 8092e5a

4 files changed

Lines changed: 517 additions & 0 deletions

File tree

‎CONTRIBUTING.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Contributing
2+
3+
Ideas and issues welcome!
4+
5+
## Suggesting New Milestones
6+
7+
Have a technology milestone that should be included? [Open an issue](https://github.com/mschwar/plots/issues/new) with:
8+
9+
- **Year** of launch/release
10+
- **Event** name and brief description
11+
- **Category** (Hardware, Software, AI/Agentic, etc.)
12+
- **Metric** (Training FLOPs or Days to 50M users)
13+
- **Source** for the data
14+
15+
## Reporting Issues
16+
17+
Found an error in the data or visualization? Please open an issue describing:
18+
19+
- Which plot (AI Compute or Adoption Timeline)
20+
- What's incorrect
21+
- Suggested correction with source
22+
23+
## Future Plot Ideas
24+
25+
Interested in seeing additional visualizations? Some ideas under consideration:
26+
27+
- Energy & Inference Costs in AI
28+
- Global AI Model Releases by Year
29+
- Hardware Price/Performance Over Time
30+
- AI Benchmark Progress (MMLU, etc.)
31+
32+
Feel free to suggest others via issues.
33+
34+
## Technical Contributions
35+
36+
Pull requests welcome for:
37+
38+
- Bug fixes in Python scripts
39+
- Improved label positioning
40+
- Additional data points with sources
41+
- Accessibility improvements
42+
43+
### Setup
44+
45+
```bash
46+
pip install matplotlib numpy plotly
47+
```
48+
49+
### Regenerating Plots
50+
51+
```bash
52+
# AI Compute Timeline
53+
cd ai-compute-timeline/src && python ai_compute_timeline.py && python ai_compute_timeline_plotly.py
54+
55+
# Adoption Timeline
56+
cd adoption-timeline/src && python adoption_timeline.py && python adoption_timeline_plotly.py
57+
```
58+
59+
## License
60+
61+
By contributing, you agree that your contributions will be licensed under MIT.

‎adoption-timeline/index.html‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Accelerating Paradigms (1957–2030+) – Time to Mass Adoption</title>
7+
<style>
8+
* { box-sizing: border-box; }
9+
body {
10+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
11+
max-width: 1000px;
12+
margin: 0 auto;
13+
padding: 2rem;
14+
background: #fafafa;
15+
color: #333;
16+
line-height: 1.6;
17+
}
18+
.breadcrumb {
19+
font-size: 0.9rem;
20+
margin-bottom: 1rem;
21+
}
22+
.breadcrumb a { color: #2563eb; text-decoration: none; }
23+
.breadcrumb a:hover { text-decoration: underline; }
24+
h1 { font-size: 2rem; margin-bottom: 0.5rem; color: #1a1a1a; }
25+
.subtitle { font-size: 1.1rem; color: #666; margin-bottom: 1.5rem; }
26+
.main-image {
27+
width: 100%;
28+
border-radius: 8px;
29+
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
30+
margin: 1.5rem 0;
31+
}
32+
.links {
33+
display: flex;
34+
gap: 1.5rem;
35+
flex-wrap: wrap;
36+
margin: 1.5rem 0;
37+
padding: 1rem;
38+
background: white;
39+
border-radius: 8px;
40+
}
41+
.links a {
42+
color: #2563eb;
43+
text-decoration: none;
44+
font-weight: 500;
45+
}
46+
.links a:hover { text-decoration: underline; }
47+
.companion {
48+
background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 100%);
49+
border: 1px solid #e9d5ff;
50+
border-radius: 8px;
51+
padding: 1rem 1.5rem;
52+
margin: 1.5rem 0;
53+
}
54+
.companion strong { color: #7c3aed; }
55+
.companion a { color: #7c3aed; font-weight: 500; }
56+
.highlight {
57+
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
58+
border: 1px solid #fcd34d;
59+
border-radius: 8px;
60+
padding: 1rem 1.5rem;
61+
margin: 1.5rem 0;
62+
}
63+
.description { background: white; padding: 1.5rem; border-radius: 8px; margin: 1.5rem 0; }
64+
.description h2 { margin-top: 0; font-size: 1.3rem; }
65+
table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
66+
th, td { padding: 0.5rem; text-align: left; border-bottom: 1px solid #eee; }
67+
th { background: #f5f5f5; }
68+
footer {
69+
margin-top: 3rem;
70+
text-align: center;
71+
font-size: 0.9rem;
72+
color: #666;
73+
padding: 1.5rem;
74+
border-top: 1px solid #ddd;
75+
}
76+
footer a { color: #2563eb; text-decoration: none; }
77+
footer a:hover { text-decoration: underline; }
78+
</style>
79+
</head>
80+
<body>
81+
<div class="breadcrumb">
82+
<a href="../">← Back to Plots</a>
83+
</div>
84+
85+
<h1>Accelerating Paradigms in Computing & Connectivity</h1>
86+
<p class="subtitle">Time to Mass Adoption (~50M users) – from years to days (1957–2030+)</p>
87+
88+
<a href="output/adoption_timeline_interactive.html">
89+
<img src="output/adoption_timeline_highres.png" alt="Adoption Timeline" class="main-image">
90+
</a>
91+
92+
<div class="links">
93+
<a href="output/adoption_timeline_interactive.html">🖱️ Interactive HTML (hover for details)</a>
94+
<a href="output/adoption_timeline_highres.png">📷 High-res PNG</a>
95+
<a href="output/adoption_timeline.svg">📐 SVG Vector</a>
96+
<a href="data/tech_adoption.csv">📊 Source Data (CSV)</a>
97+
</div>
98+
99+
<div class="highlight">
100+
<strong>⚡ Key Insight:</strong> Adoption time compressed <strong>60x</strong> over 65 years — from ~10 years (FORTRAN, 1957) to ~60 days (ChatGPT, 2022). Projections speculative; recent AI adoption drives the steep drop.
101+
</div>
102+
103+
<div class="companion">
104+
<strong>See companion plot:</strong>
105+
<a href="../ai-compute-timeline/">AI Compute Timeline</a>
106+
— shows the exponential growth in training FLOPs that this adoption acceleration enabled.
107+
</div>
108+
109+
<div class="description">
110+
<h2>Adoption Milestones</h2>
111+
<table>
112+
<tr><th>Year</th><th>Technology</th><th>Time to 50M</th></tr>
113+
<tr><td>1957</td><td>FORTRAN</td><td>~10 years</td></tr>
114+
<tr><td>1989</td><td>World Wide Web</td><td>~4 years</td></tr>
115+
<tr><td>2004</td><td>Facebook</td><td>~1 year</td></tr>
116+
<tr><td>2007</td><td>iPhone</td><td>~2 years</td></tr>
117+
<tr><td>2022</td><td><strong>ChatGPT</strong></td><td><strong>~60 days</strong></td></tr>
118+
<tr><td>2025+</td><td>Agentic AI (projected)</td><td>~30 days</td></tr>
119+
</table>
120+
121+
<h2>About This Visualization</h2>
122+
<p>This semi-logarithmic timeline shows the exponential <em>compression</em> in technology adoption times. On a log scale, this accelerating trend appears as a downward slope.</p>
123+
124+
<h3>Key Features</h3>
125+
<ul>
126+
<li><strong>21 milestones</strong> from 1957 (FORTRAN) to 2026 (projected Omni-modal AI)</li>
127+
<li><strong>Color-coded categories:</strong> Hardware, Internet/Web, Mobile, Social/Apps, Cloud, AI/Agentic</li>
128+
<li><strong>Impact-sized markers:</strong> Transformative > High > Medium</li>
129+
<li><strong>Era shading:</strong> PC Foundations → AI Hyper-Scale</li>
130+
<li><strong>Exponential compression trend line:</strong> Dashed orange reference</li>
131+
</ul>
132+
133+
<h3>Data Sources</h3>
134+
<p>Statista, Asymco, historical tech adoption curves, Epoch AI. Pre-1990 estimates approximate. Post-2010 driven by network effects and mobile/cloud. 2025+ projections speculative based on recent trends.</p>
135+
</div>
136+
137+
<footer>
138+
<p>
139+
Sources in <a href="https://github.com/mschwar/plots/tree/main/adoption-timeline">README</a> |
140+
Built with Plotly & Python |
141+
<a href="https://github.com/mschwar/plots">GitHub Repo</a> |
142+
MIT License | Last updated Jan 2026
143+
</p>
144+
</footer>
145+
</body>
146+
</html>

‎ai-compute-timeline/index.html‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>AI Compute Timeline (1900–2026) – Training FLOPs Milestones</title>
7+
<style>
8+
* { box-sizing: border-box; }
9+
body {
10+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
11+
max-width: 1000px;
12+
margin: 0 auto;
13+
padding: 2rem;
14+
background: #fafafa;
15+
color: #333;
16+
line-height: 1.6;
17+
}
18+
.breadcrumb {
19+
font-size: 0.9rem;
20+
margin-bottom: 1rem;
21+
}
22+
.breadcrumb a { color: #2563eb; text-decoration: none; }
23+
.breadcrumb a:hover { text-decoration: underline; }
24+
h1 { font-size: 2rem; margin-bottom: 0.5rem; color: #1a1a1a; }
25+
.subtitle { font-size: 1.1rem; color: #666; margin-bottom: 1.5rem; }
26+
.main-image {
27+
width: 100%;
28+
border-radius: 8px;
29+
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
30+
margin: 1.5rem 0;
31+
}
32+
.links {
33+
display: flex;
34+
gap: 1.5rem;
35+
flex-wrap: wrap;
36+
margin: 1.5rem 0;
37+
padding: 1rem;
38+
background: white;
39+
border-radius: 8px;
40+
}
41+
.links a {
42+
color: #2563eb;
43+
text-decoration: none;
44+
font-weight: 500;
45+
}
46+
.links a:hover { text-decoration: underline; }
47+
.companion {
48+
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
49+
border: 1px solid #bae6fd;
50+
border-radius: 8px;
51+
padding: 1rem 1.5rem;
52+
margin: 1.5rem 0;
53+
}
54+
.companion strong { color: #0369a1; }
55+
.companion a { color: #0369a1; font-weight: 500; }
56+
.description { background: white; padding: 1.5rem; border-radius: 8px; margin: 1.5rem 0; }
57+
.description h2 { margin-top: 0; font-size: 1.3rem; }
58+
footer {
59+
margin-top: 3rem;
60+
text-align: center;
61+
font-size: 0.9rem;
62+
color: #666;
63+
padding: 1.5rem;
64+
border-top: 1px solid #ddd;
65+
}
66+
footer a { color: #2563eb; text-decoration: none; }
67+
footer a:hover { text-decoration: underline; }
68+
</style>
69+
</head>
70+
<body>
71+
<div class="breadcrumb">
72+
<a href="../">← Back to Plots</a>
73+
</div>
74+
75+
<h1>AI Compute Timeline (1900–2026)</h1>
76+
<p class="subtitle">Training FLOPs for Key AI Milestones – from vacuum tubes to frontier models</p>
77+
78+
<a href="output/ai_compute_timeline_interactive.html">
79+
<img src="output/ai_compute_timeline_highres.png" alt="AI Compute Timeline" class="main-image">
80+
</a>
81+
82+
<div class="links">
83+
<a href="output/ai_compute_timeline_interactive.html">🖱️ Interactive HTML (hover for details)</a>
84+
<a href="output/ai_compute_timeline_highres.png">📷 High-res PNG</a>
85+
<a href="output/ai_compute_timeline.svg">📐 SVG Vector</a>
86+
<a href="data/ai_milestones.csv">📊 Source Data (CSV)</a>
87+
</div>
88+
89+
<div class="companion">
90+
<strong>See companion plot:</strong>
91+
<a href="../adoption-timeline/">Accelerating Paradigms – Adoption Timeline</a>
92+
— shows how adoption timelines compressed to enable this compute explosion.
93+
</div>
94+
95+
<div class="description">
96+
<h2>About This Visualization</h2>
97+
<p>This semi-logarithmic timeline shows the exponential growth in AI training compute over 125+ years, spanning <strong>27 orders of magnitude</strong> from early computing proxies (~10³ FLOPs) to frontier models (~10²⁷ FLOPs).</p>
98+
99+
<h3>Key Features</h3>
100+
<ul>
101+
<li><strong>50 milestones</strong> from 1904 (Vacuum Tube) to 2026 (speculative Omni-modal AI)</li>
102+
<li><strong>Color-coded categories:</strong> Hardware, AI Milestone, Model Release, Infrastructure, etc.</li>
103+
<li><strong>Impact-sized markers:</strong> Transformative > High > Medium</li>
104+
<li><strong>Era shading:</strong> Mechanical & Theoretical → Reasoning & Agentic</li>
105+
<li><strong>Moore's Law reference:</strong> Dashed line showing transistor doubling trajectory</li>
106+
<li><strong>Pre/Post 2010 distinction:</strong> Dashed line (proxy values) vs solid (actual training FLOPs)</li>
107+
</ul>
108+
109+
<h3>Data Sources</h3>
110+
<p>Epoch AI, Our World in Data, scaling reports. Pre-2010 values are rough proxies. Post-2023 estimates based on published research. Speculative 2026+ points marked with diamonds.</p>
111+
</div>
112+
113+
<footer>
114+
<p>
115+
Sources in <a href="https://github.com/mschwar/plots/tree/main/ai-compute-timeline">README</a> |
116+
Built with Plotly & Python |
117+
<a href="https://github.com/mschwar/plots">GitHub Repo</a> |
118+
MIT License | Last updated Jan 2026
119+
</p>
120+
</footer>
121+
</body>
122+
</html>

0 commit comments

Comments
 (0)