🤖 Building a History of AI Timeline

Create an educational timeline showing key milestones in artificial intelligence history.

What You'll Build

Educational timelines help visualize historical progress. You'll create an AI history timeline with:

History of AI Timeline Preview
The final AI history timeline you'll create

Key AI Milestones

Year Milestone Color
1950 Turing Test proposed Blue (foundations)
1956 Dartmouth Conference Blue (foundations)
1997 Deep Blue beats Kasparov Green (chess)
2012 AlexNet / Deep Learning Purple (vision)
2022 ChatGPT Launch Pink (LLMs)

Step 1: Create Timeline Milestones

1

Add Milestone Cards

{
  "id": "milestone-1950",
  "type": "rectangle",
  "x": 100, "y": 150, "w": 180, "h": 100,
  "borderRadius": 12,
  "options": { "stroke": "blue.500", "fill": "blue.50", "fillStyle": "solid" }
},
{
  "id": "milestone-1950-year",
  "type": "text",
  "x": 100, "y": 165, "w": 180, "h": 20,
  "text": "1950",
  "fontSize": 14,
  "fontWeight": "bold",
  "align": "center",
  "options": { "stroke": "blue.600" }
},
{
  "id": "milestone-1950-title",
  "type": "text",
  "x": 100, "y": 195, "w": 180, "h": 40,
  "text": "🧠 Turing Test\\nProposed",
  "fontSize": 13,
  "align": "center",
  "options": { "stroke": "slate.700" }
}

Step 2: Connect with Timeline Spine

2

Add Horizontal Timeline

{
  "id": "timeline",
  "type": "line",
  "x": 50, "y": 300, "w": 1100, "h": 0,
  "options": { "stroke": "slate.400", "strokeWidth": 3 }
}
// Add vertical connector lines from each card to the timeline

Design Tips for Educational Timelines

🤖 Create Your AI Timeline

Document the history of any technology or field.

Open Privacy Sketch

Next Steps