Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Timeline of Iran's Nuclear Program & Related Events

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

5772aa8e37554c9d913a4c9a5e1544df

Open

Timeline of Iran's Nuclear Program & Related Events

0 stars1🌍 Public
NNita
Last edited Jun 19, 2025
Created on Jun 19, 2025
Forked from HTML Starter

An interactive timeline visualizes key events in Iran's nuclear program from 1967 through 2024, along with related regional conflicts. Events are color-coded by type—political, technical, military, and diplomatic—and positioned along a vertical axis with the most recent events at the top, as specified by the reversed domain of the time scale. The visualization uses D3.js v7 to load and parse the CSV data, render the SVG chart, and implement features such as hover tooltips, clickable event points, and zoom controls. A highlighted background section marks events from 2015 onward, and a details panel updates with the selected event's description and impact.

AI-generated description

Iran Nuclear Timeline Visualization

This interactive timeline visualizes key events related to Iran's nuclear program, from its beginning in 1967 through hypothetical future events.

Features

  • Vertical chronological display of events on an interactive timeline (newest events at the top)
  • Events are color-coded by type (political, technical, military, diplomatic)
  • Interactive elements:
    • Click on events to view detailed information
    • Hover tooltips with preview information
    • Zoom controls to explore dense time periods
    • Automatic highlighting of selected events
  • Responsive design that adapts to different screen sizes

Implementation

The visualization is built using:

  • HTML5/CSS3 for structure and styling
  • D3.js (v7) for data visualization
  • JavaScript for interactivity

Data Structure

The timeline is populated from data.csv which contains information about:

  • Event dates
  • Event names
  • Key actors involved
  • Event descriptions
  • Impact and significance
  • Reported deaths (when applicable)

Usage

Simply open the index.html file in a modern web browser. No server is required as all data is loaded locally.

Browser Compatibility

The visualization works best in modern browsers that support ES6 and CSS3 features:

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)