Roman Civilization Timeline with All Data | #fX2uGiPK

HTMLcopy

​x
 
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
</head>
​
<button id="period-button" onclick="zoomTo('kingdom')">Roman Kingdom</button>
<button id="period-button" onclick="zoomTo('republic')">Roman Republic</button>
<button id="period-button" onclick="zoomTo('empire')">Roman Empire</button>
<button id="period-button" onclick="zoomTo('empires')">Two Empires</button>
<button id="zoom-out" onclick="zoomOut()">Zoom out</button>
​
<div id="container"></div>

CSScopy

 
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
​
#container {
  position: absolute;
  min-width: 1000px;
  width: 100%;
  top: 40px;
  bottom: 0;
}
​
#period-button, #zoom-out {
  background-color: #bad5f1;
  border: none;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-family: "Cinzel", serif;
  margin-top: 5px;
  margin-left: 5px;
}
​
#period-button:hover, #zoom-out:hover {
  color: #fff;
  background-color: #1976d2;
}
​
#zoom-out {
  position: absolute;
  right: 5px;
}
​
img {
  max-width: 300px;
  max-height: 300px;
}
​
p {
  font-family: "Cinzel", serif;
  margin-top: 1px;
  margin-bottom: 1px;
}  

JavaScriptAutocompletecopy

 
// Create a chart variable here to be accessible from various places in the script
var chart;
​
// Ensure the main charting code runs after the page has loaded with all external resources
anychart.onDocumentReady(function () {
​
  // Create a timeline chart
  chart = anychart.timeline();
  
  // Set the minimum and maximum dates of the timeline scale
  chart.scale().minimum(Date.UTC(-1000));
  chart.scale().maximum(Date.UTC(1500));
  
  // Set the chart's data (see lines 154-1692):
  var data = loadData();
  
  // 1) Set the range series for periods (e.g., rulers, empires)
  for (let i = 0; i < data.periods.length; i++) {
    var period = data.periods[i];
    var range = chart.range(period.ranges);
    range.name(period.name);
    range.direction(period.direction);    
    range.labels().fontFamily("Cinzel");
    // Customize the range series tooltip:
    var tooltip = range.tooltip();
    // enable HTML in the tooltip
    tooltip.useHtml(true);
    // format the tooltip content
    tooltip.format(function(){
      var img = this.getData("img");
      var description = this.getData("description");
      return "<center><img src='" + img + "'/></center><p style='max-width: 250px;'>" + description + "</p>";
    });
    // disable the tooltip separator
    tooltip.separator(false);
    // enable HTML in the tooltip header
    tooltip.title().useHtml(true);
    // format the tooltip header
    tooltip.titleFormat(function(){
      // use the anychart.format.dateTime() method to format the dates      
      var start = anychart.format.dateTime(this.start, "y G");
      var end = anychart.format.dateTime( this.end, "y G");
      return "<p>" + this.x + " (" + start + " – " + end + ")</p>";
    });
  };
​
  // 2) Set the moment series for events (e.g., battles, establishment of states)
  for (let i = 0; i < data.events.length; i++) {
    var event = data.events[i];
    var moment = chart.moment(event.moments);
    moment.name(event.name);
    moment.direction(event.direction);
    moment.labels().fontFamily("Cinzel");
    // Configure the moment series tooltip:
    var tooltip = moment.tooltip();
    // enable HTML in the tooltip
    tooltip.useHtml(true);
    // format the tooltip content
    tooltip.format(function(){
      var img = this.getData('img');
      var description = this.getData('description');
      return "<center><img src='" + img + "'/></center><p style= 'max-width: 250px;'>" + description + "</p>";
    });
    // disable the tooltip separator
    tooltip.separator(false);
    // enable HTML in the tooltip header
    tooltip.title().useHtml(true);
    // format the tooltip header
    tooltip.titleFormat(function(){
      var x = new Date(this.x);
      // use the anychart.format.dateTime() method for date formatting
      var formatted = anychart.format.dateTime(x, "y G");
      return "<p>" + this.value + ", " + formatted + "</p>";
    });
  };
  
  // Enable the scroller for better navigation of the timeline
  chart.scroller(true);
  
  // Add an event listener to zoom into an element when it's clicked:
  chart.listen("pointClick", function(e){
    var start, end, gap;
    // check if the clicked element is a moment or a period
    var type = e.series.getType();
    // configure the behavior for moments
    if (type == "moment") {
      var momentDate =  e.point.get("x");
      // zoom into the moment, showing 50 years before and after it
      start = momentDate;
      end = momentDate;
      // 50 years in milliseconds
      gap = 1577880000000;
    } else { // for periods (non-moment elements)
      // zoom into the period, showing 10% of its length before its start and after its end
      start = e.point.get("start");
      end = e.point.get("end");
      gap = (end - start)/10;
    };
    // zoom into the element when it's clicked
    chart.zoomTo(start - gap, end + gap);    
  });
  
  // Patch the zoom levels since we're working with years and centuries (see lines 1745-1775)
  chart.scale().zoomLevels(patchedZoomLevels());
  
  // Disable the selection functionality to allow click tracking for zooming
  chart.interactivity().selectionMode("none");
  
  // Call the custom locale-altering function before the chart creation
  // to tweak the locale to work with AD and BC (era designators) - see lines 1694-1743
  patchDateTimeLocale();
  
  // Customize the font of the axis labels
  chart.axis().labels().fontFamily("Cinzel");
  
  // Configure the chart's title
  chart.title({
    text: "Roman Civilization",
    fontFamily: "Cinzel",
    fontSize: 32
  });
  
  // Specify the chart container element by its id
  chart.container("container");
  
  // Draw the chart
  chart.draw();
​
});
​
// Function to zoom into the target period when a button is clicked
function zoomTo(period) {
  switch (period) {
    case "kingdom":
      chart.zoomTo(Date.UTC(-755), Date.UTC(-505));
      break
    case "republic":
      chart.zoomTo(Date.UTC(-515), Date.UTC(-20));
      break
    case "empire":
      chart.zoomTo(Date.UTC(-40), Date.UTC(410));
      break
    case "empires":
      chart.zoomTo(Date.UTC(380), Date.UTC(1460));
      break
  } 
};
​
// Function to zoom out, fitting the chart to the container
function zoomOut() {
  chart.fit();  
};
​
// Function to add data for the timeline chart:
function loadData(){
​
  // 1) Add periods (ranges):
  var periods = [{}];
  
  // legendaries' years of life
  periods[0] = {};
  periods[0].name = "Legendary";
  periods[0].direction = "up";
  periods[0].ranges = [
    {
      name: "Romulus", 
      start: new Date(Date.UTC(-753, 0, 0)), 
      end: new Date(Date.UTC(-717, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Brogi%2C_Carlo_%281850-1925%29_-_n._8226_-_Certosa_di_Pavia_-_Medaglione_sullo_zoccolo_della_facciata.jpg/250px-Brogi%2C_Carlo_%281850-1925%29_-_n._8226_-_Certosa_di_Pavia_-_Medaglione_sullo_zoccolo_della_facciata.jpg",
      description: "The legendary founder and first king of Rome, who established the city's foundations."
    },
    {
      name: "Numa Pompilius", 
      start: new Date(Date.UTC(-717, 0, 0)), 
      end: new Date(Date.UTC(-673, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Numapisocng6371obverse.jpg/220px-Numapisocng6371obverse.jpg",
      description: "Rome's second king, known for instituting religious and legal traditions."
    },
    {
      name: "Tullus Hostilius", 
      start: new Date(Date.UTC(-673, 0, 0)), 
      end: new Date(Date.UTC(-641, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Tulius-Hostilius.jpg/220px-Tulius-Hostilius.jpg",
      description: "Rome's third king, a warrior who expanded Rome through conquest."
    },
    {
      name: "Ancus Marcius", 
      start: new Date(Date.UTC(-641, 0, 0)), 
      end: new Date(Date.UTC(-616, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Ancusmarciuscng10300642obverse.jpg/250px-Ancusmarciuscng10300642obverse.jpg",
      description: "The fourth king, credited with developing Rome's infrastructure and expanding its territory."
    },
    {
      name: "Lucius Tarquinius Priscus", 
      start: new Date(Date.UTC(-616, 0, 0)), 
      end: new Date(Date.UTC(-578, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Tarquinius-Priscus.jpg/220px-Tarquinius-Priscus.jpg",
      description: "Rome's fifth king, of Etruscan origin, who improved the city's military and infrastructure."
    },
    {
      name: "Servius Tullius", 
      start: new Date(Date.UTC(-578, 0, 0)), 
      end: new Date(Date.UTC(-534, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Servius_by_Rouille.jpg/220px-Servius_by_Rouille.jpg",
      description: "The sixth king, known for social and military reforms, including the introduction of the census."
    },
    {
      name: "Lucius Tarquinius Superbus", 
      start: new Date(Date.UTC(-534, 0, 0)), 
      end: new Date(Date.UTC(-509, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Tarquinius-Superbus.jpg/220px-Tarquinius-Superbus.jpg",
      description: "The seventh and final king, whose tyranny led to the overthrow of the monarchy and the founding of the Republic."
    }
  ];  
​
  // consuls' years of rule
  periods[1] = {};  
  periods[1].name = "Consuls";
  periods[1].direction = "up";
  periods[1].ranges = [
    {
      name: "Consulate", 
      start: new Date(Date.UTC(-509, 0, 0)), 
      end: new Date(Date.UTC(-27, 0, 16)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Roman_SPQR_banner.svg/150px-Roman_SPQR_banner.svg.png",
      description: "Consuls were elected annually, and the position was often shared by two individuals, making it difficult to track the exact reign periods for all consuls over the centuries."
    }
  ];
​
  // emperors' years of life
  periods[2] = {};    
  periods[2].name = "Emperors";
  periods[2].direction = "up";
  periods[2].ranges = [
    {
      name: "Augustus",
      start: new Date(Date.UTC(-27, 0, 16)),
      end: new Date("0014-08-19"),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Augustus_of_Prima_Porta_%28inv._2290%29.jpg/250px-Augustus_of_Prima_Porta_%28inv._2290%29.jpg",
      description: "First Roman emperor, marking the transition from the Roman Republic to the Empire."
    },
    {
      name: "Tiberius",
      start: new Date("0014-09-17"),
      end: new Date("0037-03-16"),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/%28Toulouse%29_Tibère_-_Musée_Saint-Raymond_Ra_342_b.jpg/220px-%28Toulouse%29_Tibère_-_Musée_Saint-Raymond_Ra_342_b.jpg",
      description: "Second emperor of Rome, known for his troubled reign and later withdrawal from public life."
    },
    {
      name: "Caligula",
      start: new Date("0037-03-18"),
      end: new Date("0041-01-24"),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Caligula.Carlsberg_Glyptotek.%28cropped%29.jpg/220px-Caligula.Carlsberg_Glyptotek.%28cropped%29.jpg",
      description: "Notorious for his erratic and tyrannical behavior, assassinated after four years in power."
    },
    {
      name: "Claudius",
      start: new Date("0041-01-24"),
      end: new Date("0054-10-13"),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Claudius_crop.jpg/220px-Claudius_crop.jpg",
      description: "Expanded the Roman Empire, including the conquest of Britain, despite initial perceptions of weakness."
    },
    {
      name: "Nero",
      start: new Date("0054-10-13"),
      end: new Date("0068-06-09"),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Nero_Glyptothek_Munich_321.jpg/220px-Nero_Glyptothek_Munich_321.jpg",
      description: "Last of the Julio-Claudian dynasty, remembered for the Great Fire of Rome and his persecution of Christians."
    },
    {
      name: "Galba",
      start:new Date("0068-06-08"),
      end: new Date("0069-01-15"),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/INC-2951-a_Ауреус._Гальба._Ок._68—69_гг._%28аверс%29.png/220px-INC-2951-a_Ауреус._Гальба._Ок._68—69_гг._%28аверс%29.png",
      description: "Briefly ruled during the Year of the Four Emperors, overthrown and murdered."
    },
    {
      name: "Otho",
      start: new Date("0069-01-15"),
      end: new Date("0069-04-16"),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Statue_of_the_emperor_Otho%2C_Ma_1215_%28cropped1%29.jpg/240px-Statue_of_the_emperor_Otho%2C_Ma_1215_%28cropped1%29.jpg",
      description: "Reigned for only a few months before committing suicide after losing a battle."
    },
    {
      name: "Vitellius",
      start: new Date("0069-04-19"),
      end: new Date("0069-12-20"),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Tunis_Bardo_Buste_8.jpg/250px-Tunis_Bardo_Buste_8.jpg",
      description: "Another short-lived emperor of the Year of the Four Emperors, overthrown by Vespasian."
    },
    {
      name: "Vespasian",
      start: new Date("0069-07-01"),
      end: new Date("0079-06-23"),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Vespasian%2C_from_Naples%2C_c._AD_70%2C_Ny_Carlsberg_Glyptotek%2C_Copenhagen_%2813646730625%29.jpg/220px-Vespasian%2C_from_Naples%2C_c._AD_70%2C_Ny_Carlsberg_Glyptotek%2C_Copenhagen_%2813646730625%29.jpg",
      description: "Founder of the Flavian dynasty, known for restoring stability after the civil wars and beginning the construction of the Colosseum."
    },
    {
      name: "Titus",
      start: new Date("0079-06-24"),
      end: new Date("0081-09-13"),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Titus_Ny_Carlsberg_Glyptotek_IN3159.jpg/220px-Titus_Ny_Carlsberg_Glyptotek_IN3159.jpg",
      description: "Remembered for completing the Colosseum and responding to the eruption of Mount Vesuvius."
    },
    {
      name: "Domitian",
      start: new Date("0081-09-14"),
      end: new Date("0096-09-18"),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Domiziano_da_collezione_albani%2C_fine_del_I_sec._dc._02.JPG/220px-Domiziano_da_collezione_albani%2C_fine_del_I_sec._dc._02.JPG",
      description: "Last emperor of the Flavian dynasty, known for his autocratic rule and assassination."
    },
    {
      name: "Nerva",
      start: new Date("0096-09-18"),
      end: new Date("0098-01-27"),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Togato%2C_I_sec_dc._con_testa_di_restauro_da_un_ritratto_di_nerva%2C_inv._2286.JPG/220px-Togato%2C_I_sec_dc._con_testa_di_restauro_da_un_ritratto_di_nerva%2C_inv._2286.JPG",
      description: "Began the tradition of adopting an heir, starting the era of the Five Good Emperors."
    },
    {
      name: "Trajan",
      start: new Date("0098-01-28"),
      end: new Date(Date.UTC(117, 7, 9)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Traianus_Glyptothek_Munich_336.jpg/220px-Traianus_Glyptothek_Munich_336.jpg",
      description: "Expanded the empire to its greatest territorial extent, known for public works and military conquests."
    },
    {
      name: "Hadrian",
      start: new Date(Date.UTC(117, 7, 11)),
      end: new Date(Date.UTC(138, 6, 10)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/München_SMAEK_2019-03-23n.jpg/220px-München_SMAEK_2019-03-23n.jpg",
      description: "Famous for consolidating and securing the empire's borders, including the construction of Hadrian's Wall."
    },
    {
      name: "Antoninus Pius",
      start: new Date(Date.UTC(138, 6, 10)),
      end: new Date(Date.UTC(161, 2, 7)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Antoninus_Pius_Glyptothek_Munich_337_cropped.jpg/220px-Antoninus_Pius_Glyptothek_Munich_337_cropped.jpg",
      description: "Presided over one of the most peaceful and prosperous periods in Roman history."
    },
    {
      name: "Marcus Aurelius",
      start: new Date(Date.UTC(161, 2, 7)),
      end: new Date(Date.UTC(180, 1, 17)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/MSR-ra-61-b-1-DM.jpg/220px-MSR-ra-61-b-1-DM.jpg",
      description: "Philosopher-king, known for his writings 'Meditations' and for defending the empire against invasions."},
    {
      name: "Commodus",
      start: new Date(Date.UTC(180, 3, 17)),
      end: new Date(Date.UTC(192, 11, 31)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Bust_of_Emperor_Commodus%2C_front_-_Getty_Museum_%2892.SA.48%29.jpg/220px-Bust_of_Emperor_Commodus%2C_front_-_Getty_Museum_%2892.SA.48%29.jpg",
      description: "Son of Marcus Aurelius, known for his erratic behavior and self-indulgence, marking the start of Rome’s decline."
    },
    {
      name: "Pertinax",
      start: new Date(Date.UTC(193, 0, 1)),
      end: new Date(Date.UTC(193, 2, 28)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Galleria_degli_Uffizi%2C_Florence_%2819676748662%29.jpg/220px-Galleria_degli_Uffizi%2C_Florence_%2819676748662%29.jpg",
      description: "Brief reign ended by assassination, having tried to restore discipline after Commodus’ excesses."
    },
    {
      name: "Didius Julianus",
      start: new Date(Date.UTC(193, 2, 28)),
      end: new Date(Date.UTC(193, 5, 1)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Buste_de_Didius_Iulianus_02_%28crop%29.jpeg/220px-Buste_de_Didius_Iulianus_02_%28crop%29.jpeg",
      description: "Won the throne by purchasing it, ruling for only a few months before being overthrown."
    },
    {
      name: "Septimius Severus",
      start: new Date(Date.UTC(193, 5, 9)),
      end: new Date(Date.UTC(211, 1, 4)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Septimius_Severus_busto-Musei_Capitolini.jpg/220px-Septimius_Severus_busto-Musei_Capitolini.jpg",
      description: "Founded the Severan dynasty, restored stability after the Year of the Five Emperors."
    },
    {
      name: "Caracalla",
      start: new Date(Date.UTC(211, 1, 4)),
      end: new Date(Date.UTC(217, 3, 8)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/0_Caracalla_-_Museo_Massimo_alle_Terme.JPG/220px-0_Caracalla_-_Museo_Massimo_alle_Terme.JPG",
      description: "Known for the Edict of Caracalla, granting citizenship to all free men in the empire, and for his brutal reign."
    },
    {
      name: "Geta",
      start: new Date(Date.UTC(211, 1, 4)),
      end: new Date(Date.UTC(211, 11, 26)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Geta_%28cropped%29.jpg/150px-Geta_%28cropped%29.jpg",
      description: "Co-emperor with Caracalla, murdered by his brother as part of a power struggle."
    },
    {
      name: "Macrinus",
      start: new Date(Date.UTC(217, 3, 11)),
      end: new Date(Date.UTC(218, 5, 8)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Bust_of_Macrinus_-_Palazzo_Nuovo_-_Musei_Capitolini_-_Rome_2016.jpg/220px-Bust_of_Macrinus_-_Palazzo_Nuovo_-_Musei_Capitolini_-_Rome_2016.jpg",
      description: "First emperor not from the senatorial class, overthrown after only a year."
    },
    {
      name: "Elagabalus",
      start: new Date(Date.UTC(218, 4, 8)),
      end: new Date(Date.UTC(222, 2, 11)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Bust_of_Elagabalus_-_Palazzo_Nuovo_-_Musei_Capitolini_-_Rome_2016.jpg/220px-Bust_of_Elagabalus_-_Palazzo_Nuovo_-_Musei_Capitolini_-_Rome_2016.jpg",
      description: "Known for religious controversies and eccentricities, assassinated by his own soldiers."
    },
    {
      name: "Severus Alexander", 
      start: new Date(Date.UTC(222, 2, 14)), 
      end: new Date(Date.UTC(235, 2, 19)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/Alexander_Severus_Musei_Capitolini_MC471.jpg/220px-Alexander_Severus_Musei_Capitolini_MC471.jpg",
      description: "Last of the Severan dynasty, his assassination marked the beginning of the Crisis of the Third Century."
    },
    {
      name: "Maximinus Thrax", 
      start: new Date(Date.UTC(235, 2, 20)), 
      end: new Date(Date.UTC(238, 5, 10)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Maximinus_Thrax_Musei_Capitolini_MC473.jpg/220px-Maximinus_Thrax_Musei_Capitolini_MC473.jpg",
      description: "A giant in stature, his reign was marked by military campaigns and the start of the Third Century Crisis."
    },
    {
      name: "Gordian I", 
      start: new Date(Date.UTC(238, 3, 22)), 
      end: new Date(Date.UTC(238, 4, 12)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/Gordian1cng80000719_%28obverse%29.jpg/220px-Gordian1cng80000719_%28obverse%29.jpg",
      description: "Ruled briefly during the Year of the Six Emperors, committed suicide after defeat in battle."
    },
    {
      name: "Gordian II", 
      start: new Date(Date.UTC(238, 3, 22)), 
      end: new Date(Date.UTC(238, 4, 12)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Gordiano_II_-_ritratto_da_sesterzio.jpg/250px-Gordiano_II_-_ritratto_da_sesterzio.jpg",
      description: "Co-emperor with his father Gordian I, died in battle against forces loyal to Maximinus Thrax."
    },
    {
      name: "Pupienus", 
      start: new Date(Date.UTC(238, 4, 22)), 
      end: new Date(Date.UTC(238, 7, 29)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Pupienus_Musei_Capitolini_MC477.jpg/220px-Pupienus_Musei_Capitolini_MC477.jpg",
      description: "Co-emperor during the Year of the Six Emperors, assassinated by the Praetorian Guard."
    },
    {
      name: "Balbinus", 
      start: new Date(Date.UTC(238, 4, 22)), 
      end: new Date(Date.UTC(238, 7, 29)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Balbinus_Hermitage.jpg/220px-Balbinus_Hermitage.jpg",
      description: "Co-emperor alongside Pupienus, murdered by the Praetorian Guard after a short reign."
    },
    {
      name: "Gordian III", 
      start: new Date(Date.UTC(238, 7, 29)), 
      end: new Date(Date.UTC(244, 1, 11)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Bust_Gordianus_III_Louvre_Ma1063.jpg/220px-Bust_Gordianus_III_Louvre_Ma1063.jpg",
      description: "Became emperor at age 13, remembered for campaigns against the Sassanid Empire."
    },
    {
      name: "Philip the Arab", 
      start: new Date(Date.UTC(244, 1, 11)), 
      end: new Date(Date.UTC(249, 8, 25)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Portrait_of_Philip_the_Arab._Saint-Petersburg%2C_The_State_Hermitage_Museum_%28cropped%29.jpg/220px-Portrait_of_Philip_the_Arab._Saint-Petersburg%2C_The_State_Hermitage_Museum_%28cropped%29.jpg",
      description: "Known for celebrating Rome's 1000th anniversary, his reign ended in defeat and death in battle."
    },
    {
      name: "Decius", 
      start: new Date(Date.UTC(249, 8, 25)), 
      end: new Date(Date.UTC(251, 5, 1)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Bust_of_Decius_%28loan_from_Capitoline_Museums%29_-_Glyptothek_-_Munich_-_Germany_2017.jpg/220px-Bust_of_Decius_%28loan_from_Capitoline_Museums%29_-_Glyptothek_-_Munich_-_Germany_2017.jpg",
      description: "Known for initiating the first empire-wide persecution of Christians, died in battle against the Goths."
    },
    {
      name: "Trebonianus Gallus", 
      start: new Date(Date.UTC(251, 5, 1)), 
      end: new Date(Date.UTC(253, 7, 1)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/Bronze_statue_of_the_emperor_Trebonianus_Gallus_%28detail%29.jpg/220px-Bronze_statue_of_the_emperor_Trebonianus_Gallus_%28detail%29.jpg",
      description: "Faced invasions and plague during his short reign, eventually assassinated by his own troops."
    },
    {
      name: "Aemilian", 
      start: new Date(Date.UTC(253, 6, 1)), 
      end: new Date(Date.UTC(253, 8, 25)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Aemilian1.jpg/220px-Aemilian1.jpg",
      description: "Briefly seized power through military revolt but was quickly overthrown and killed."
    },
    {
      name: "Valerian", 
      start: new Date(Date.UTC(253, 8, 25)), 
      end: new Date(Date.UTC(260, 5, 22)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/Valerianus_Ny_Carlsberg_Glyptotek_IN3387.jpg/220px-Valerianus_Ny_Carlsberg_Glyptotek_IN3387.jpg",
      description: "Captured by the Persians in battle, the only Roman emperor to die in captivity."
    },
    {
      name: "Gallienus", 
      start: new Date(Date.UTC(253, 8, 1)), 
      end: new Date(Date.UTC(268, 8, 23)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Ritratto_di_gallieno_dalla_casa_delle_vestali.jpg/220px-Ritratto_di_gallieno_dalla_casa_delle_vestali.jpg",
      description: "Co-ruled with his father Valerian, spent his reign defending the empire from invasions and internal strife."
    },
    {
      name: "Claudius Gothicus", 
      start: new Date(Date.UTC(268, 8, 23)), 
      end: new Date(Date.UTC(270, 7, 27)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/ClaudiusGothicusSC265569.jpg/220px-ClaudiusGothicusSC265569.jpg",
      description: "Famed for his victories against the Goths, died from the plague during his reign."
    },
    {
      name: "Quintillus", 
      start: new Date(Date.UTC(270, 7, 27)), 
      end: new Date(Date.UTC(270, 8, 20)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Aureus_Quintillus_%28obverse%29.jpg/250px-Aureus_Quintillus_%28obverse%29.jpg",
      description: "Brief reign, likely murdered or committed suicide after being declared emperor."
    },
    {
      name: "Aurelian", 
      start: new Date(Date.UTC(270, 7, 20)), 
      end: new Date(Date.UTC(275, 10, 25)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/5305_-_Brescia_-_S._Giulia_-_Ritratto_di_Claudio_II_il_Gotico_-_Foto_Giovanni_Dall%27Orto%2C_25_Giu_2011.jpg/250px-5305_-_Brescia_-_S._Giulia_-_Ritratto_di_Claudio_II_il_Gotico_-_Foto_Giovanni_Dall%27Orto_25_Giu_2011.jpg",
      description: "Reunited the fractured empire, built the Aurelian Walls around Rome, assassinated by his own officers."
    },
    {
      name: "Tacitus", 
      start: new Date(Date.UTC(275, 11, 25)), 
      end: new Date(Date.UTC(276, 5, 11)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/EmpereurTacite.jpg/220px-EmpereurTacite.jpg",
      description: "Declared emperor by the Senate, died after ruling for less than a year, likely from assassination."
    },
    {
      name: "Probus", 
      start: new Date(Date.UTC(276, 5, 19)), 
      end: new Date(Date.UTC(282, 8, 25)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Probus_Musei_Capitolini_MC493.jpg/220px-Probus_Musei_Capitolini_MC493.jpg",
      description: "Successfully defended the empire from multiple invasions, killed by his own soldiers."
    },
    {
      name: "Carus", 
      start: new Date(Date.UTC(282, 8, 25)), 
      end: new Date(Date.UTC(283, 7, 1)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Carusinc2955obverse.png/220px-Carusinc2955obverse.png",
      description: "Died mysteriously during a campaign against Persia, possibly struck by lightning."
    },
    {
      name: "Numerian", 
      start: new Date(Date.UTC(283, 6, 1)), 
      end: new Date(Date.UTC(284, 10, 20)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/NumerianusAntoninianus.jpg/220px-NumerianusAntoninianus.jpg",
      description: "Co-emperor with his brother, died under mysterious circumstances, possibly assassinated."
    },
    {
      name: "Carinus", 
      start: new Date(Date.UTC(283, 8, 1)), 
      end: new Date(Date.UTC(285, 8, 1)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Montemartini_-_Carino_1030439.JPG/220px-Montemartini_-_Carino_1030439.JPG",
      description: "Last of the Caran dynasty, assassinated after losing a battle during the chaotic third century."
    },
    {
      name: "Diocletian", 
      start: new Date(Date.UTC(284, 10, 20)), 
      end: new Date(Date.UTC(305, 4, 1)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Istanbul_-_Museo_archeol._-_Diocleziano_%28284-305_d.C.%29_-_Foto_G._Dall%27Orto_28-5-2006_%28cropped%29.jpg/220px-Istanbul_-_Museo_archeol._-_Diocleziano_%28284-305_d.C.%29_-_Foto_G._Dall%27Orto_28-5-2006_%28cropped%29.jpg",
      description: "Stabilized the empire and introduced significant reforms, including the Tetrarchy, before retiring."
    },
    {
      name: "Maximian", 
      start: new Date(Date.UTC(286, 3, 1)), 
      end: new Date(Date.UTC(305, 4, 1)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Musée_Saint-Raymond_-_2017-09-02_-_Inv._Ra_34b_-_4654.jpg/220px-Musée_Saint-Raymond_-_2017-09-02_-_Inv._Ra_34b_-_4654.jpg",
      description: "Co-emperor with Diocletian, helped defend the western empire, forced to retire when Diocletian did."
    },
    {
      name: "Constantius Chlorus", 
      start: new Date(Date.UTC(305, 4, 1)), 
      end: new Date(Date.UTC(306, 6, 25)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Constantius_Chlorus_Ny_Carlsberg_Glyptotek_IN836.jpg/220px-Constantius_Chlorus_Ny_Carlsberg_Glyptotek_IN836.jpg",
      description: "Father of Constantine the Great, co-ruled in the West under the Tetrarchy, died while campaigning in Britain."
    },
    {
      name: "Galerius", 
      start: new Date(Date.UTC(305, 4, 1)), 
      end: new Date(Date.UTC(311, 4, 5)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Romuliana_Galerius_head.jpg/220px-Romuliana_Galerius_head.jpg",
      description: "Known for his role in the persecution of Christians and as part of Diocletian’s Tetrarchy, later issued the Edict of Toleration."
    },
    {
      name: "Constantine the Great", 
      start: new Date(Date.UTC(306, 6, 25)), 
      end: new Date(Date.UTC(337, 4, 22)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Statua_di_Costantino_ai_musei_capitolini.jpg/220px-Statua_di_Costantino_ai_musei_capitolini.jpg",
      description: "First Christian emperor, known for the Edict of Milan and the founding of Constantinople."
    },
    {
      name: "Maxentius", 
      start: new Date(Date.UTC(306, 9, 28)), 
      end: new Date(Date.UTC(312, 9, 28)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Maxentius02_pushkin.jpg/220px-Maxentius02_pushkin.jpg",
      description: "Defeated by Constantine at the Battle of the Milvian Bridge, marking Constantine’s rise to power."
    },
    {
      name: "Licinius", 
      start: new Date(Date.UTC(308, 10, 11)), 
      end: new Date(Date.UTC(324, 8, 19)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Bust_of_Licinius%2C_Kunsthistorisches_Museum.jpg/220px-Bust_of_Licinius%2C_Kunsthistorisches_Museum.jpg",
      description: "Co-emperor with Constantine, defeated in civil war after conflicts over religious policies."
    },
    {
      name: "Constantine II", 
      start: new Date(Date.UTC(337, 8, 9)), 
      end: new Date(Date.UTC(340, 3, 9)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Campidoglio%2C_Roma_-_Costantino_II_cesare_fronte.jpg/220px-Campidoglio%2C_Roma_-_Costantino_II_cesare_fronte.jpg",
      description: "Eldest son of Constantine the Great, ruled parts of the empire, died in battle against his brother Constans."
    },
    {
      name: "Constantius II", 
      start: new Date(Date.UTC(337, 8, 9)), 
      end: new Date(Date.UTC(361, 11, 3)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Bust_of_Constantius_II_%28Mary_Harrsch%29.jpg/220px-Bust_of_Constantius_II_%28Mary_Harrsch%29.jpg",
      description: "Son of Constantine the Great, known for his conflicts with his brothers and his support for Arian Christianity."
    },
    {
      name: "Constans", 
      start: new Date(Date.UTC(337, 8, 9)), 
      end: new Date(Date.UTC(350, 1, 18)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Musée_du_Louvre_-_L%27empereur_Constant_%28Ma_1021%29.jpg/220px-Musée_du_Louvre_-_L%27empereur_Constant_%28Ma_1021%29.jpg",
      description: "Youngest son of Constantine the Great, overthrown and killed by the usurper Magnentius."
    },
    {
      name: "Julian", 
      start: new Date(Date.UTC(361, 10, 3)), 
      end: new Date(Date.UTC(363, 5, 26)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Juliancng8851obverse.jpg/220px-Juliancng8851obverse.jpg",
      description: "Last pagan emperor, known for trying to restore Roman polytheism and his military campaigns against Persia."
    },
    {
      name: "Jovian", 
      start: new Date(Date.UTC(363, 5, 27)), 
      end: new Date(Date.UTC(364, 1, 17)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Solidus_of_Jovian2_%28obverse%29.jpg/220px-Solidus_of_Jovian2_%28obverse%29.jpg",
      description: "Brief reign after the death of Julian, known for restoring Christianity as the state religion."
    },
    {
      name: "Valentinian I", 
      start: new Date(Date.UTC(364, 1, 26)), 
      end: new Date(Date.UTC(375, 10, 17)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Gold_Solidus_of_Valens%2C_Antioch.jpg/220px-Gold_Solidus_of_Valens%2C_Antioch.jpg",
      description: "Co-emperor with his brother Valens, known for defending the western empire from invasions."
    },
    {
      name: "Valens", 
      start: new Date(Date.UTC(364, 2, 26)), 
      end: new Date(Date.UTC(378, 7, 9)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/INC-3015-a_Солид._Валент_II._Ок._364_г._%28аверс%29.png/220px-INC-3015-a_Солид._Валент_II._Ок._364_г._%28аверс%29.png",
      description: "Eastern emperor defeated and killed at the Battle of Adrianople, marking a critical moment in the decline of Rome."
    },
    {
      name: "Gratian", 
      start: new Date(Date.UTC(367, 10, 17)), 
      end: new Date(Date.UTC(383, 7, 25)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Bust_of_Gratian_%28loan_from_Rheinisches_Landesmuseum_Trier%29_-_Glyptothek_-_Munich_-_Germany_2017.jpg/220px-Bust_of_Gratian_%28loan_from_Rheinisches_Landesmuseum_Trier%29_-_Glyptothek_-_Munich_-_Germany_2017.jpg",
      description: "Faced revolts and invasions, assassinated after his rule weakened by internal divisions and usurpers."
    },
    {
      name: "Valentinian II", 
      start: new Date(Date.UTC(375, 7, 28)), 
      end: new Date(Date.UTC(392, 4, 15)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Statue_of_emperor_Valentinian_II.JPG/220px-Statue_of_emperor_Valentinian_II.JPG",
      description: "Ruled the western empire as a child, likely murdered during political struggles for control."
    },
    {
      name: "Eugenius", 
      start: new Date(Date.UTC(392, 7, 22)), 
      end: new Date(Date.UTC(394, 8, 6)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Eugenius_coin_%28transparent%29.png/150px-Eugenius_coin_%28transparent%29.png",
      description: "A usurper supported by the Roman Senate, defeated by Theodosius I at the Battle of the Frigidus."
    },
    {
      name: "Theodosius I", 
      start: new Date(Date.UTC(379, 0, 19)), 
      end: new Date(Date.UTC(395, 0, 17)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Bust_of_Theodosius_I.jpg/220px-Bust_of_Theodosius_I.jpg",
      description: "Last emperor to rule both the eastern and western halves of the empire, made Christianity the official state religion."
    },
    {
      name: "Arcadius", 
      start: new Date(Date.UTC(395, 0, 17)), 
      end: new Date(Date.UTC(408, 4, 1)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Arcadius_Istanbul_Museum.JPG/220px-Arcadius_Istanbul_Museum.JPG",
      description: "First emperor of the Eastern Roman Empire, known for a reign dominated by court intrigues and external threats."
    },    
    {
      name: "Honorius", 
      start: new Date(Date.UTC(395, 0, 17)), 
      end: new Date(Date.UTC(423, 7, 15)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Diptych_of_Honorius_%28head%29_%282%29.jpg/220px-Diptych_of_Honorius_%28head%29_%282%29.jpg",
      description: "Western Roman emperor during the Sack of Rome by the Visigoths, known for his weak rule and reliance on military leaders."
    },
    {
      name: "Theodosius II", 
      start: new Date(Date.UTC(408, 4, 1)), 
      end: new Date(Date.UTC(450, 6, 28)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Theodosius_II_Louvre_Ma1036.jpg/220px-Theodosius_II_Louvre_Ma1036.jpg",
      description: "Known for issuing the Theodosian Code and for his long, relatively peaceful reign over the Eastern Roman Empire."
    },
    {
      name: "Constantius III", 
      start: new Date(Date.UTC(421, 1, 8)), 
      end: new Date(Date.UTC(421, 8, 2)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Constantius_III_diptych.jpg/220px-Constantius_III_diptych.jpg",
      description: "Briefly co-emperor with Honorius, a successful general instrumental in defending the Western Empire from invasions."
    },
    {
      name: "Valentinian III", 
      start: new Date(Date.UTC(425, 9, 23)), 
      end: new Date(Date.UTC(455, 2, 16)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Bust_of_Valentinian_III%2C_Louvre_%28cropped%29.jpg/250px-Bust_of_Valentinian_III%2C_Louvre_%28cropped%29.jpg",
      description: "Reigned during the decline of the Western Roman Empire, assassinated shortly before Rome’s sacking by the Vandals."
    },
    {
      name: "Marcian", 
      start: new Date(Date.UTC(450, 7, 25)), 
      end: new Date(Date.UTC(457, 0, 27)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Gold_Solidus_of_Marcian.jpg/250px-Gold_Solidus_of_Marcian.jpg",
      description: "Eastern Roman emperor who called the Council of Chalcedon, ending the theological disputes over Christ’s nature."
    },
    {
      name: "Petronius Maximus", 
      start: new Date(Date.UTC(455, 2, 17)), 
      end: new Date(Date.UTC(455, 4, 31)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Solidus_of_Petronius_Maximus.png/150px-Solidus_of_Petronius_Maximus.png",
      description: "A short-lived ruler of the Western Roman Empire, killed during chaos that led to the Vandal sack of Rome."
    },
    {
      name: "Avitus", 
      start: new Date(Date.UTC(455, 6, 9)), 
      end: new Date(Date.UTC(456, 9, 17)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Solidus_Avitus_Arles_%28obverse%29.jpg/150px-Solidus_Avitus_Arles_%28obverse%29.jpg",
      description: "A Gallic senator made emperor by the Visigoths, deposed after his defeat in battle against the Vandals."
    },
    {
      name: "Majorian", 
      start: new Date(Date.UTC(457, 3, 1)), 
      end: new Date(Date.UTC(461, 6, 2)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Solidus_Majorian_Arles_%28obverse%29.jpg/150px-Solidus_Majorian_Arles_%28obverse%29.jpg",
      description: "One of the last capable Western Roman emperors, known for his military efforts to defend the empire but ultimately deposed and assassinated."
    },
    {
      name: "Libius Severus", 
      start: new Date(Date.UTC(461, 10, 19)), 
      end: new Date(Date.UTC(465, 7, 15)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Libiusseverus01854obverse.jpg/150px-Libiusseverus01854obverse.jpg",
      description: "A puppet emperor of the Western Roman Empire under the control of the powerful general Ricimer."
    },
    {
      name: "Anthemius", 
      start: new Date(Date.UTC(467, 3, 12)), 
      end: new Date(Date.UTC(472, 6, 11)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Gold_Solidus_of_Marcian.jpg/250px-Gold_Solidus_of_Marcian.jpg",
      description: "Western Roman emperor with Greek origins, known for his failed attempt to repel the Vandals and his eventual assassination."
    },
    {
      name: "Olybrius", 
      start: new Date(Date.UTC(472, 6, 11)), 
      end: new Date(Date.UTC(472, 10, 2)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Tremissis_Olybrius_%28obverse%29.jpg/150px-Tremissis_Olybrius_%28obverse%29.jpg",
      description: "A brief reign as emperor, likely installed by the powerful military leader Ricimer, died soon after ascending to the throne."
    },
    {
      name: "Glycerius", 
      start: new Date(Date.UTC(473, 2, 3)), 
      end: new Date(Date.UTC(474, 4, 6)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Solidus_Glycerius_Ravenna_%28obverse%29.jpg/150px-Solidus_Glycerius_Ravenna_%28obverse%29.jpg",
      description: "Declared emperor by the Roman Senate, deposed by Julius Nepos, later served as a bishop."
    },
    {
      name: "Julius Nepos", 
      start: new Date(Date.UTC(474, 4, 19)), 
      end: new Date(Date.UTC(475, 7, 28)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Solidus_of_Julius_Nepos.png/150px-Solidus_of_Julius_Nepos.png",
      description: "Last legitimate emperor of the Western Roman Empire, overthrown by Orestes and Romulus Augustulus, later ruled from Dalmatia."
    },
    {
      name: "Romulus Augustulus", 
      start: new Date(Date.UTC(475, 9, 31)), 
      end: new Date(Date.UTC(476, 8, 4)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/RomulusAugustus.jpg/150px-RomulusAugustus.jpg",
      description: "The last emperor of the Western Roman Empire, deposed by Odoacer, marking the traditional end of the Western Empire."
    },
    {
      name: "Leo I", 
      start: new Date(Date.UTC(457, 1, 7)), 
      end: new Date(Date.UTC(474, 0, 18)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Leo_I_Louvre_Ma1012_n2_%28cropped%29.jpg/220px-Leo_I_Louvre_Ma1012_n2_%28cropped%29.jpg",
      description: "Known as 'Leo the Great,' reformed the Eastern Roman military and administration, and fostered Byzantine independence from the West."
    },
    {
      name: "Leo II", 
      start: new Date(Date.UTC(474, 0, 18)), 
      end: new Date(Date.UTC(474, 10, 17)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Solidus_of_Leo_II.png/220px-Solidus_of_Leo_II.png",
      description: "Grandson of Leo I, reigned briefly as a child emperor before dying young, with power mostly held by his father, Zeno."
    },
    {
      name: "Zeno", 
      start: new Date(Date.UTC(474, 0, 9)), 
      end: new Date(Date.UTC(475, 0, 9)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Semissis_of_Zeno.png/250px-Semissis_of_Zeno.png",
      description: "Initially emperor of the Eastern Roman Empire, deposed during a rebellion but later restored to power."
    },
    {
      name: "Basiliscus", 
      start: new Date(Date.UTC(475, 0, 9)), 
      end: new Date(Date.UTC(476, 7, 1)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Solidus_of_Basiliscus_and_Marcus.png/383px-Solidus_of_Basiliscus_and_Marcus.png",
      description: "Seized the throne after a coup against Zeno, known for his disastrous policies and eventual overthrow."
    },
    {
      name: "Zeno", 
      start: new Date(Date.UTC(476, 7, 1)), 
      end: new Date(Date.UTC(491, 3, 9)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Semissis_of_Zeno.png/250px-Semissis_of_Zeno.png",
      description: "Regained the throne and ruled during the collapse of the Western Roman Empire, establishing greater stability in the East."
    },
    {
      name: "Anastasius I", 
      start: new Date(Date.UTC(491, 3, 11)), 
      end: new Date(Date.UTC(518, 6, 9)),
      img: "https://upload.wikimedia.org/wikipedia/commons/9/92/Flavius_Anastasius_Probus_01c_%28Anastasius_I%29_%28cropped%29.JPG",
      description: "Reformed the tax system and finances of the Eastern Roman Empire, leading to increased prosperity."
    },
    {
      name: "Justin I", 
      start: new Date(Date.UTC(518, 6, 10)), 
      end: new Date(Date.UTC(527, 7, 1)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Solidus_of_Justin_I_%28obverse%29.jpg/368px-Solidus_of_Justin_I_%28obverse%29.jpg",
      description: "A former soldier who rose to power, strengthened relations with the papacy, and paved the way for his nephew, Justinian I."
    },
    {
      name: "Justinian I", 
      start: new Date(Date.UTC(527, 4, 1)), 
      end: new Date(Date.UTC(565, 10, 14)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Mosaic_of_Justinianus_I_-_Basilica_San_Vitale_%28Ravenna%29.jpg/330px-Mosaic_of_Justinianus_I_-_Basilica_San_Vitale_%28Ravenna%29.jpg",
      description: "One of the greatest Byzantine emperors, known for his legal reforms, military conquests, and the construction of the Hagia Sophia."
    },
    {
      name: "Justin II", 
      start: new Date(Date.UTC(565, 10, 15)), 
      end: new Date(Date.UTC(578, 8, 5)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Solidus_of_Justin_II_%28obverse%29.jpg/330px-Solidus_of_Justin_II_%28obverse%29.jpg",
      description: "Succeeded his uncle Justinian I, struggled to maintain the empire’s stability, leading to increasing invasions and internal strife."
    },
    {
      name: "Tiberius II Constantine", 
      start: new Date(Date.UTC(578, 9, 5)), 
      end: new Date(Date.UTC(582, 7, 14)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Tiberios_II_%28obverse%29.jpg/338px-Tiberios_II_%28obverse%29.jpg",
      description: "Continued Justin II's policies but proved more effective in managing finances and military threats from Persia and the Balkans."
    },
    {
      name: "Maurice", 
      start: new Date(Date.UTC(582, 7, 14)), 
      end: new Date(Date.UTC(602, 10, 27)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Solidus_of_Maurice_%28transitional_issue%29.png/375px-Solidus_of_Maurice_%28transitional_issue%29.png",
      description: "Expanded Byzantine control over the Balkans and fought successful campaigns against Persia before being overthrown and killed."
    },
    {
      name: "Phocas", 
      start: new Date(Date.UTC(602, 10, 27)), 
      end: new Date(Date.UTC(610, 9, 5)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/PhocasNew.png/375px-PhocasNew.png",
      description: "A brutal ruler who came to power through a military coup, his reign was marked by instability and harsh repression."
    },
    {
      name: "Heraclius", 
      start: new Date(Date.UTC(610, 10, 5)), 
      end: new Date(Date.UTC(641, 2, 11)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Heraclius_solidus.jpg/330px-Heraclius_solidus.jpg",
      description: "Transformed the Byzantine Empire by reforming its administration and military, and successfully fought against the Persian Empire."
    },
    {
      name: "Constantine III", 
      start: new Date(Date.UTC(641, 2, 11)), 
      end: new Date(Date.UTC(641, 4, 24)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Solidus_of_Constantine_III_%28west%29.png/330px-Solidus_of_Constantine_III_%28west%29.png",
      description: "Co-emperor with his father Heraclius, ruled briefly before dying, possibly due to illness or poisoning."
    },
    {
      name: "Heraklonas", 
      start: new Date(Date.UTC(641, 2, 11)), 
      end: new Date(Date.UTC(641, 9, 14)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Solidus_Heraclius_sb_767_%28obverse%29.png/330px-Solidus_Heraclius_sb_767_%28obverse%29.png",
      description: "Young son of Heraclius, deposed after only a few months in power during a turbulent period of political unrest."
    },
    {
      name: "Constans II", 
      start: new Date(Date.UTC(641, 9, 14)), 
      end: new Date(Date.UTC(668, 7, 15)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Solidus_Constans_II_%28obverse%29.jpg/330px-Solidus_Constans_II_%28obverse%29.jpg",
      description: "Faced significant challenges from external invasions and internal revolts, moved the capital to Sicily to evade threats."
    },
    {
      name: "Constantine IV", 
      start: new Date(Date.UTC(668, 7, 15)), 
      end: new Date(Date.UTC(685, 9, 14)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Constantine_IV_mosaic.png/330px-Constantine_IV_mosaic.png",
      description: "Successfully defended Constantinople against a major Arab siege, securing his legacy as a strong military leader."
    },
    {
      name: "Justinian II", 
      start: new Date(Date.UTC(685, 9, 14)), 
      end: new Date(Date.UTC(695, 7, 21)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Justinian_ii_%282%29.png/330px-Justinian_ii_%282%29.png",
      description: "Known for his harsh rule and being overthrown twice, his reign marked a decline in Byzantine power and stability."
    },
    {
      name: "Justinian II (Second Reign)", 
      start: new Date(Date.UTC(705, 8, 21)), 
      end: new Date(Date.UTC(711, 12, 11)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Justinian_ii_%282%29.png/330px-Justinian_ii_%282%29.png",
      description: "After regaining the throne, Justinian II's second reign was marked by continued autocratic rule and another revolt that led to his assassination."
    },
    {
      name: "Philippicus Bardanes", 
      start: new Date(Date.UTC(711, 12, 11)), 
      end: new Date(Date.UTC(713, 6, 3)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Solidus_of_Philippicus.png/330px-Solidus_of_Philippicus.png",
      description: "Overthrew Justinian II, but his reign was brief and tumultuous, ending with his deposition due to his religious policies."
    },
    {
      name: "Anastasius II", 
      start: new Date(Date.UTC(713, 6, 4)), 
      end: new Date(Date.UTC(715, 12, 3)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Anastasius_II_sb1464_%28obverse%29.jpg/330px-Anastasius_II_sb1464_%28obverse%29.jpg",
      description: "A reform-minded emperor, Anastasius II tried to stabilize the empire but was overthrown by military revolt after only two years."
    },
    {
      name: "Theodosius III", 
      start: new Date(Date.UTC(715, 12, 4)), 
      end: new Date(Date.UTC(717, 3, 25)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Coin_of_Theodosius_III.png/330px-Coin_of_Theodosius_III.png",
      description: "Reluctantly took the throne after a military rebellion but abdicated in favor of Leo III after a short and ineffective reign."
    },
    {
      name: "Leo III", 
      start: new Date(Date.UTC(717, 3, 25)), 
      end: new Date(Date.UTC(741, 6, 18)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Solidus_of_Leo_III_sb1504.png/330px-Solidus_of_Leo_III_sb1504.png",
      description: "Famous for defending Constantinople from Arab sieges and initiating the iconoclastic movement, which banned the use of religious icons."
    },
    {
      name: "Constantine V", 
      start: new Date(Date.UTC(741, 6, 18)), 
      end: new Date(Date.UTC(775, 9, 14)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Solidus_of_Constantine_V_%28transparent_background%29.png/330px-Solidus_of_Constantine_V_%28transparent_background%29.png",
      description: "A strong military leader and supporter of iconoclasm, Constantine V had significant military successes but faced opposition for his religious policies."
    },
    {
      name: "Leo IV", 
      start: new Date(Date.UTC(775, 9, 14)), 
      end: new Date(Date.UTC(780, 9, 8)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Gold_Solidus_of_Leo_IV.jpg/375px-Gold_Solidus_of_Leo_IV.jpg",
      description: "Known as 'Leo the Khazar,' he attempted to balance religious tensions but died young, leaving his son Constantine VI as heir."
    },
    {
      name: "Constantine VI", 
      start: new Date(Date.UTC(780, 9, 8)), 
      end: new Date(Date.UTC(797, 8, 19)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/INC-3040-r_Солид._Константин_VI_и_Ирина._793—979_гг._%28реверс%29.png/330px-INC-3040-r_Солид._Константин_VI_и_Ирина._793—979_гг._%28реверс%29.png",
      description: "Co-ruled with his mother, Irene, until he attempted to rule alone. His reign ended when Irene overthrew and blinded him."
    },
    {
      name: "Irene of Athens", 
      start: new Date(Date.UTC(797, 8, 19)), 
      end: new Date(Date.UTC(802, 10, 31)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Irene_solidus_sb_1599_%28obverse%29.jpg/330px-Irene_solidus_sb_1599_%28obverse%29.jpg",
      description: "First woman to rule the Byzantine Empire, she restored the veneration of icons but was eventually deposed by Nikephoros I."
    },
    {
      name: "Nikephoros I", 
      start: new Date(Date.UTC(802, 10, 31)), 
      end: new Date(Date.UTC(811, 7, 26)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/INC-1870-a_Солид._Никифор_I_и_его_сын_Ставракий._Ок._803—811_гг._%28аверс%29.png/300px-INC-1870-a_Солид._Никифор_I_и_его_сын_Ставракий._Ок._803—811_гг._%28аверс%29.png",
      description: "Reformed the empire's finances but was killed in battle against the Bulgarians during a military campaign."
    },
    {
      name: "Staurakios", 
      start: new Date(Date.UTC(811, 7, 26)), 
      end: new Date(Date.UTC(811, 10, 2)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/INC-1546-r_Солид_Никифор_I_и_Ставракий_ок._803-811_гг._%28аверс%29.png/375px-INC-1546-r_Солид_Никифор_I_и_Ставракий_ок._803-811_гг._%28аверс%29.png",
      description: "Severely wounded in battle shortly after becoming emperor, Staurakios abdicated after a few months due to his injuries."
    },
    {
      name: "Michael I Rangabe", 
      start: new Date(Date.UTC(811, 10, 2)), 
      end: new Date(Date.UTC(813, 7, 11)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Michael_I%2C_Madrid_Skylitzes_folio_11r.jpg/345px-Michael_I%2C_Madrid_Skylitzes_folio_11r.jpg",
      description: "Supported the veneration of icons but was defeated by the Bulgarians and forced to abdicate after two years."
    },
    {
      name: "Leo V", 
      start: new Date(Date.UTC(813, 7, 11)), 
      end: new Date(Date.UTC(820, 12, 25)),
      img: "https://upload.wikimedia.org/wikipedia/commons/8/89/Leo_V_in_Madrid_Skylitzes.jpg",
      description: "Revived iconoclasm and strengthened the empire's defenses, but was assassinated during Christmas services in 820."
    },
    {
      name: "Michael II", 
      start: new Date(Date.UTC(820, 12, 25)), 
      end: new Date(Date.UTC(829, 10, 2)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Michael_II_in_the_Madrid_Skylitzes.jpg/330px-Michael_II_in_the_Madrid_Skylitzes.jpg",
      description: "Founder of the Amorian dynasty, he sought to reconcile the religious factions but faced rebellions and external threats."
    },
    {
      name: "Theophilos", 
      start: new Date(Date.UTC(829, 10, 2)), 
      end: new Date(Date.UTC(842, 1, 20)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Theophilos_%28cropped%29.jpg/330px-Theophilos_%28cropped%29.jpg",
      description: "A fervent iconoclast and capable military leader, Theophilos fought wars against the Abbasids but died without securing a lasting victory."
    },
    {
      name: "Michael III", 
      start: new Date(Date.UTC(842, 1, 20)), 
      end: new Date(Date.UTC(867, 9, 24)),
      img: "https://upload.wikimedia.org/wikipedia/commons/0/0e/Michael_iii.jpg",
      description: "Known as 'Michael the Drunkard,' his reign saw the end of iconoclasm and the rise of Basil I, who eventually assassinated him."
    },
    {
      name: "Basil I", 
      start: new Date(Date.UTC(867, 9, 24)), 
      end: new Date(Date.UTC(886, 8, 29)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Roman_Emperor_Basil_I.png/330px-Roman_Emperor_Basil_I.png",
      description: "Founder of the Macedonian dynasty, Basil I's reign saw significant reforms and the beginning of the Byzantine Renaissance in art and culture."
    },
    {
      name: "Leo VI", 
      start: new Date(Date.UTC(886, 8, 29)), 
      end: new Date(Date.UTC(912, 5, 11)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Emperor_Leo_VI_detail.jpg/375px-Emperor_Leo_VI_detail.jpg",
      description: "Known as 'Leo the Wise,' he codified Roman law in the 'Basilika' and continued the cultural revival of the empire."
    },
    {
      name: "Alexander", 
      start: new Date(Date.UTC(912, 5, 11)), 
      end: new Date(Date.UTC(913, 6, 6)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/Alexandros_mosaic.jpg/375px-Alexandros_mosaic.jpg",
      description: "Brother of Leo VI, Alexander's brief reign was marked by military failures and internal strife, leading to his sudden death."
    },
    {
      name: "Constantine VII", 
      start: new Date(Date.UTC(913, 6, 6)), 
      end: new Date(Date.UTC(959, 11, 9)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/Constantine_VII_Porphyrogenitus_%282%29.jpeg/330px-Constantine_VII_Porphyrogenitus_%282%29.jpeg",
      description: "An intellectual emperor, Constantine VII was a historian and author who presided over a period of peace and cultural prosperity."
    },
    {
      name: "Romanos I", 
      start: new Date(Date.UTC(920, 12, 17)), 
      end: new Date(Date.UTC(944, 12, 16)),
      img: "https://upload.wikimedia.org/wikipedia/commons/5/56/Romanos_I_in_Madrid_Skylitzes.jpg",
      description: "Romanos I ruled as co-emperor with Constantine VII, securing the empire's borders and enhancing its administration until his eventual deposition by his sons."
    },
    {
      name: "Romanos II", 
      start: new Date(Date.UTC(959, 11, 9)), 
      end: new Date(Date.UTC(963, 3, 15)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Romanos_et_Eudoxie_%28cropped2%29.JPG/330px-Romanos_et_Eudoxie_%28cropped2%29.JPG",
      description: "Romanos II’s reign was brief but witnessed military victories under his generals, including the conquest of Crete."
    },
    {
      name: "Nikephoros II", 
      start: new Date(Date.UTC(963, 3, 15)), 
      end: new Date(Date.UTC(969, 12, 11)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Nikephoros_Phokas.jpg/315px-Nikephoros_Phokas.jpg",
      description: "A military genius, Nikephoros II focused on expanding the empire's borders, but his harsh rule led to his assassination."
    },
    {
      name: "John I Tzimiskes", 
      start: new Date(Date.UTC(969, 12, 11)), 
      end: new Date(Date.UTC(976, 1, 10)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Bamberg_Gunthertuch.jpg/360px-Bamberg_Gunthertuch.jpg",
      description: "A skilled general, John I continued Nikephoros II’s campaigns, securing victories in the east and stabilizing the empire internally."
    },
    {
      name: "Basil II", 
      start: new Date(Date.UTC(976, 1, 10)), 
      end: new Date(Date.UTC(1025, 12, 15)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Basilios_II.jpg/345px-Basilios_II.jpg",
      description: "Known as 'Basil the Bulgar-Slayer,' his long reign saw the expansion of Byzantine territory and the consolidation of imperial power."
    },
    {
      name: "Constantine VIII", 
      start: new Date(Date.UTC(1025, 12, 15)), 
      end: new Date(Date.UTC(1028, 11, 11)),
      img: "https://upload.wikimedia.org/wikipedia/commons/8/88/Constantine_VIII_in_the_Exultet_roll_%282%29.jpg",
      description: "The brother of Basil II, Constantine VIII's reign was largely ineffectual, as he had spent most of his life out of politics."
    },
    {
      name: "Romanos III", 
      start: new Date(Date.UTC(1028, 11, 12)), 
      end: new Date(Date.UTC(1034, 4, 11)),
      img: "https://upload.wikimedia.org/wikipedia/commons/5/5d/Romanos_III_in_Madrid_Skylitzes.png",
      description: "A well-meaning but ineffective emperor, Romanos III’s reign was marked by failed military campaigns and internal strife."
    },
    {
      name: "Michael IV", 
      start: new Date(Date.UTC(1034, 4, 11)), 
      end: new Date(Date.UTC(1041, 12, 10)),
      img: "https://upload.wikimedia.org/wikipedia/commons/b/b0/Michael_IV_the_Paphlagonian_%28cropped%29.jpg",
      description: "Despite poor health, Michael IV was a capable ruler, achieving military successes and stabilizing the empire’s finances."
    },
    {
      name: "Michael V", 
      start: new Date(Date.UTC(1041, 12, 10)), 
      end: new Date(Date.UTC(1042, 4, 20)),
      img: "https://upload.wikimedia.org/wikipedia/commons/5/5f/Michael_V_in_Madrid_Skylitzes.jpg",
      description: "Known as 'Michael the Caulker,' his attempt to rule alone led to his overthrow by Empress Zoe, who had him blinded and deposed."
    },
    {
      name: "Zoe", 
      start: new Date(Date.UTC(1042, 4, 19)), 
      end: new Date(Date.UTC(1042, 6, 12)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Zoe_mosaic_Hagia_Sophia.jpg/330px-Zoe_mosaic_Hagia_Sophia.jpg",
      description: "Empress Zoe ruled jointly with her sister Theodora and later with her third husband, Constantine IX, maintaining political control."
    },
    {
      name: "Constantine IX", 
      start: new Date(Date.UTC(1042, 6, 12)), 
      end: new Date(Date.UTC(1055, 1, 11)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Emperor_Constantine_IX.jpg/330px-Emperor_Constantine_IX.jpg",
      description: "A cultured but ineffective ruler, Constantine IX oversaw the beginning of the empire's decline and increasing internal problems."
    },
    {
      name: "Theodora", 
      start: new Date(Date.UTC(1055, 1, 11)), 
      end: new Date(Date.UTC(1056, 8, 31)),
      img: "https://upload.wikimedia.org/wikipedia/commons/3/37/Theodora_Porphyrogenita_crown-2.jpg",
      description: "The sister of Zoe, Theodora restored stability after Constantine IX’s death and ruled as empress until her own death a year later."
    },        
    {
      name: "Michael VI", 
      start: new Date(Date.UTC(1056, 8, 31)), 
      end: new Date(Date.UTC(1057, 8, 31)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Tetarteron_of_Michael_VI_%28reverse%29.png/330px-Tetarteron_of_Michael_VI_%28reverse%29.png",
      description: "Michael VI's brief reign ended when he was overthrown by Isaac I Komnenos, marking the transition to the Komnenian dynasty."
    },
    {
      name: "Isaac I Komnenos", 
      start: new Date(Date.UTC(1057, 8, 1)), 
      end: new Date(Date.UTC(1059, 12, 25)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/INC-3060-r_Номисма_тетартерон._Исаак_I_Комнин._Ок._1057—1059_гг._%28реверс%29.png/330px-INC-3060-r_Номисма_тетартерон._Исаак_I_Комнин._Ок._1057—1059_гг._%28реверс%29.png",
      description: "Isaac I Komnenos came to power after a military revolt but abdicated after a brief rule, paving the way for the Doukas dynasty."
    },
    {
      name: "Constantine X Doukas", 
      start: new Date(Date.UTC(1059, 12, 25)), 
      end: new Date(Date.UTC(1067, 5, 22)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Constantine_X_full_portrait.jpg/330px-Constantine_X_full_portrait.jpg",
      description: "Constantine X's reign was marked by military decline, and his focus on domestic matters weakened the empire's defenses."
    },
    {
      name: "Michael VII Doukas", 
      start: new Date(Date.UTC(1067, 5, 22)), 
      end: new Date(Date.UTC(1078, 3, 31)),
      img: "https://upload.wikimedia.org/wikipedia/commons/5/5a/Michael_VII_Doukas_from_the_Khakhuli_Triptych.png",
      description: "Michael VII, nicknamed 'Parapinakes,' struggled with inflation and military failures, leading to his eventual abdication."
    },
    {
      name: "Romanos IV", 
      start: new Date(Date.UTC(1068, 1, 1)), 
      end: new Date(Date.UTC(1071, 10, 24)),
      img: "https://upload.wikimedia.org/wikipedia/commons/2/2a/Romanus_IV_coin_crop.png",
      description: "Romanos IV is best known for his defeat at the Battle of Manzikert, which significantly weakened Byzantine control in Anatolia."
    },
    {
      name: "Nikephoros III", 
      start: new Date(Date.UTC(1078, 3, 31)), 
      end: new Date(Date.UTC(1081, 4, 4)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Nikephoros_III.jpg/330px-Nikephoros_III.jpg",
      description: "Nikephoros III’s reign was marked by political instability and he was eventually overthrown by Alexios I Komnenos."
    },
    {
      name: "Alexios I Komnenos", 
      start: new Date(Date.UTC(1081, 4, 4)), 
      end: new Date(Date.UTC(1118, 8, 15)),
      img: "https://upload.wikimedia.org/wikipedia/commons/8/8c/Alexios_I_Komnenos.jpg",
      description: "Founder of the Komnenian dynasty, Alexios I stabilized the empire through reforms and alliances, including the First Crusade."
    },
    {
      name: "John II Komnenos", 
      start: new Date(Date.UTC(1118, 8, 15)), 
      end: new Date(Date.UTC(1143, 4, 8)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Jean_II_Comnene.jpg/330px-Jean_II_Comnene.jpg",
      description: "John II, known as 'John the Good,' was a capable ruler who expanded Byzantine influence and worked to restore its former power."
    },
    {
      name: "Manuel I Komnenos", 
      start: new Date(Date.UTC(1143, 4, 8)), 
      end: new Date(Date.UTC(1180, 9, 24)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Manuel_I_Comnenus.jpg/345px-Manuel_I_Comnenus.jpg",
      description: "Manuel I's reign was marked by ambitious military campaigns and diplomatic efforts, though his policies strained the empire's resources."
    },
    {
      name: "Alexios II Komnenos", 
      start: new Date(Date.UTC(1180, 9, 24)), 
      end: new Date(Date.UTC(1183, 9, 24)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/142_-_Alexios_II_Komnenos_%28Mutinensis_-_color%29.png/330px-142_-_Alexios_II_Komnenos_%28Mutinensis_-_color%29.png",
      description: "Alexios II's short and troubled reign ended with his murder during the coup led by Andronikos I Komnenos."
    },
    {
      name: "Andronikos I Komnenos", 
      start: new Date(Date.UTC(1183, 9, 24)), 
      end: new Date(Date.UTC(1185, 9, 12)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/143_-_Andronikos_I_Komnenos_%28Mutinensis_-_color%29.png/330px-143_-_Andronikos_I_Komnenos_%28Mutinensis_-_color%29.png",
      description: "Andronikos I's tyrannical rule led to widespread discontent, and he was eventually overthrown and executed."
    },
    {
      name: "Isaac II Angelos", 
      start: new Date(Date.UTC(1185, 9, 12)), 
      end: new Date(Date.UTC(1195, 4, 8)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/144_-_Isaac_II_Angelos_%28Mutinensis_-_color%29.png/330px-144_-_Isaac_II_Angelos_%28Mutinensis_-_color%29.png",
      description: "Isaac II's reign saw the empire's decline due to internal strife and external invasions, ending with his deposition by Alexios III."
    },
    {
      name: "Alexios III Angelos", 
      start: new Date(Date.UTC(1195, 4, 8)), 
      end: new Date(Date.UTC(1203, 7, 17)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/145_-_Alexios_III_Angelos_%28Mutinensis_-_color%29.png/330px-145_-_Alexios_III_Angelos_%28Mutinensis_-_color%29.png",
      description: "Alexios III fled the capital during the Fourth Crusade, marking the beginning of the fall of Constantinople to Latin forces."
    },
    {
      name: "Isaac II Angelos (Restored)", 
      start: new Date(Date.UTC(1203, 7, 17)), 
      end: new Date(Date.UTC(1204, 4, 12)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/144_-_Isaac_II_Angelos_%28Mutinensis_-_color%29.png/330px-144_-_Isaac_II_Angelos_%28Mutinensis_-_color%29.png",
      description: "Isaac II was briefly restored to the throne during the chaos of the Fourth Crusade but soon died, leaving his son Alexios IV in charge."
    },
    {
      name: "Alexios IV Angelos", 
      start: new Date(Date.UTC(1203, 7, 18)), 
      end: new Date(Date.UTC(1204, 1, 28)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/146_-_Alexios_IV_Angelos_%28Mutinensis_-_color%29.png/300px-146_-_Alexios_IV_Angelos_%28Mutinensis_-_color%29.png",
      description: "Alexios IV's rule was short-lived, as he struggled to pay off the Crusaders, leading to his overthrow and execution."
    },
    {
      name: "Alexios V Doukas", 
      start: new Date(Date.UTC(1204, 1, 5)), 
      end: new Date(Date.UTC(1204, 4, 13)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/147_-_Alexios_V_Doukas_%28Mutinensis_-_color%29.png/330px-147_-_Alexios_V_Doukas_%28Mutinensis_-_color%29.png",
      description: "Alexios V took power during the final days before Constantinople’s fall to the Crusaders and was captured and executed after the city’s sack."
    },  
    {
      name: "Theodore I Laskaris", 
      start: new Date(Date.UTC(1204, 4, 13)), 
      end: new Date(Date.UTC(1222, 11, 1224)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/148_-_Theodore_I_Laskaris_%28Mutinensis_-_color%29.png/330px-148_-_Theodore_I_Laskaris_%28Mutinensis_-_color%29.png",
      description: "Theodore I Laskaris was the first emperor of the Empire of Nicaea, establishing it as a successor state after the fall of Constantinople during the Fourth Crusade."
    },
    {
      name: "John III Doukas Vatatzes", 
      start: new Date(Date.UTC(1222, 12, 15)), 
      end: new Date(Date.UTC(1254, 11, 3)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/149_-_John_III_Doukas_Vatatzes_%28Mutinensis_-_color%29.png/330px-149_-_John_III_Doukas_Vatatzes_%28Mutinensis_-_color%29.png",
      description: "John III Doukas Vatatzes was a capable and beloved ruler who strengthened the Empire of Nicaea and set the stage for the eventual recapture of Constantinople."
    },
    {
      name: "Theodore II Laskaris", 
      start: new Date(Date.UTC(1254, 11, 3)), 
      end: new Date(Date.UTC(1258, 8, 16)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Theodoros_II_Laskaris.jpg/330px-Theodoros_II_Laskaris.jpg",
      description: "Theodore II Laskaris was an intellectual ruler who faced internal strife but managed to preserve the Empire of Nicaea's influence before his untimely death."
    },
    {
      name: "John IV Laskaris", 
      start: new Date(Date.UTC(1258, 8, 16)), 
      end: new Date(Date.UTC(1261, 7, 25)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/151_-_John_IV_Laskaris_%28Mutinensis_-_color%29.png/330px-151_-_John_IV_Laskaris_%28Mutinensis_-_color%29.png",
      description: "John IV Laskaris was a child emperor who was deposed by Michael VIII Palaiologos after the recapture of Constantinople."
    },
    {
      name: "Michael VIII Palaiologos", 
      start: new Date(Date.UTC(1261, 7, 25)), 
      end: new Date(Date.UTC(1282, 12, 11)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Miniature_of_Michael_VIII.png/330px-Miniature_of_Michael_VIII.png",
      description: "Michael VIII Palaiologos restored the Byzantine Empire by recapturing Constantinople from the Latin Empire, marking the beginning of the Palaiologan dynasty."
    },
    {
      name: "Andronikos II Palaiologos", 
      start: new Date(Date.UTC(1282, 12, 11)), 
      end: new Date(Date.UTC(1328, 5, 24)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Andronikos_II_Palaiologos.jpg/330px-Andronikos_II_Palaiologos.jpg",
      description: "Andronikos II's reign saw a significant decline in the empire’s military strength and financial stability, leading to internal strife and eventual abdication."
    },
    {
      name: "Andronikos III Palaiologos", 
      start: new Date(Date.UTC(1328, 5, 24)), 
      end: new Date(Date.UTC(1341, 3, 15)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Andronikos_III_Palaiologos.jpg/330px-Andronikos_III_Palaiologos.jpg",
      description: "Andronikos III was a dynamic leader who attempted to restore the Byzantine Empire’s fortunes through military reforms and alliances."
    },
    {
      name: "John V Palaiologos", 
      start: new Date(Date.UTC(1341, 3, 15)), 
      end: new Date(Date.UTC(1391, 2, 16)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Restored_mosaic_of_John_V_Palaiologos_%28head%29.jpg/330px-Restored_mosaic_of_John_V_Palaiologos_%28head%29.jpg",
      description: "John V struggled with internal and external pressures during his long reign, including conflicts with the Ottomans and civil wars."
    },
    {
      name: "John VI Kantakouzenos", 
      start: new Date(Date.UTC(1347, 3, 8)), 
      end: new Date(Date.UTC(1354, 12, 10)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/John_VI_Kantakouzenos.jpg/300px-John_VI_Kantakouzenos.jpg",
      description: "John VI, a skilled diplomat and scholar, co-ruled with John V but eventually abdicated and retired to a monastery after losing power."
    },
    {
      name: "Manuel II Palaiologos", 
      start: new Date(Date.UTC(1391, 2, 16)), 
      end: new Date(Date.UTC(1425, 7, 21)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Manuel_II_Palaiologos_%28cropped%29.jpg/330px-Manuel_II_Palaiologos_%28cropped%29.jpg",
      description: "Manuel II's reign was marked by attempts to preserve the empire through diplomacy and alliances, particularly with Western Europe."
    },
    {
      name: "John VIII Palaiologos", 
      start: new Date(Date.UTC(1425, 7, 21)), 
      end: new Date(Date.UTC(1448, 10, 31)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Palaio.jpg/330px-Palaio.jpg",
      description: "John VIII sought Western support against the Ottomans, attending the Council of Florence, though his efforts ultimately failed to secure lasting assistance."
    },
    {
      name: "Constantine XI Palaiologos", 
      start: new Date(Date.UTC(1449, 1, 6)), 
      end: new Date(Date.UTC(1453, 5, 29)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/162_-_Constantine_XI_Palaiologos_%28Mutinensis_-_color%29.png/330px-162_-_Constantine_XI_Palaiologos_%28Mutinensis_-_color%29.png",
      description: "Constantine XI was the last Byzantine emperor, heroically defending Constantinople until his death during its fall to the Ottoman Empire in 1453."
    }
  ];
​
  // historical states' years of existence
  periods[3] = {};
  periods[3].name = "Historical states";
  periods[3].direction = "down";
  periods[3].ranges = [
    {
      x: "Roman Kingdom", 
      start: new Date(Date.UTC(-753)), 
      end: new Date(Date.UTC(-509)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Platner_-_Ancient_Rome_city_growth.jpg/375px-Platner_-_Ancient_Rome_city_growth.jpg",
      description: "The Roman Kingdom is the earliest period of Roman history, traditionally dated from the founding of Rome in 753 BC to the overthrow of the last king in 509 BC, marking the transition from a monarchy to a republic."
    },
    {
      x: "Roman Republic", 
      start: new Date(Date.UTC(-509)), 
      end: new Date(Date.UTC(-27)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Q._Servilius_Caepio_%28M._Junius%29_Brutus%2C_denarius%2C_54_BC%2C_RRC_433-1_reverse.jpg/255px-Q._Servilius_Caepio_%28M._Junius%29_Brutus%2C_denarius%2C_54_BC%2C_RRC_433-1_reverse.jpg",
      description: "The Roman Republic was a period of ancient Roman civilization that began with the overthrow of the Roman monarchy and ended with the establishment of the Roman Empire. It was characterized by a complex system of checks and balances and expansion across the Mediterranean."
    },
    {
      x: "Roman Empire", 
      start: new Date(Date.UTC(-27)), 
      end: new Date(Date.UTC(395)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Better_Imperial_Aquila.png/150px-Better_Imperial_Aquila.png",
      description: "The Roman Empire began with Augustus's rise to power in 27 BC and marked the peak of Roman territorial expansion, wealth, and military dominance. It remained a powerful and influential force until its division into Eastern and Western halves in AD 395."
    },
    {
      x: "Western Roman Empire", 
      start: new Date(Date.UTC(395)), 
      end: new Date(Date.UTC(476)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Western_Roman_Empire_-_400_AD.png/375px-Western_Roman_Empire_-_400_AD.png",
      description: "The Western Roman Empire was the western half of the Roman Empire after its division in 395 AD. It struggled with internal strife and external invasions, leading to its collapse in 476 AD, marking the traditional end of the ancient Roman era."
    },
    {
      x: "Eastern Roman Empire", 
      start: new Date(Date.UTC(395)), 
      end: new Date(Date.UTC(1453)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Justinian555AD.png/375px-Justinian555AD.png",
      description: "The Eastern Roman Empire, also known as the Byzantine Empire, survived for over a millennium after the fall of the Western Empire, preserving Roman law, culture, and Christianity until the fall of Constantinople in 1453."
    }
  ];
​
  // 2) Add moments (events):
  var events = [];
​
  // wars and battles
  events[0] = {};  
  events[0].name = "Wars and Battles";
  events[0].direction = "up";
  events[0].moments = [
    {
      y: "Sack of Rome by Gauls", 
      x: new Date(Date.UTC(-390, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/8/88/La_Bataille_de_l%27allia_-_G.Surand.jpg",
      description: "Gauls under Brennus sacked Rome after the Battle of the Allia, causing major devastation."
    },
    {
      y: "Pyrrhic War", 
      x: new Date(Date.UTC(-280, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Pyrrhic_War_Italy_en.svg/450px-Pyrrhic_War_Italy_en.svg.png",
      description: "King Pyrrhus of Epirus fought costly battles against Rome, leading to the term 'Pyrrhic victory'."
    },
    {
      y: "First Punic War", 
      x: new Date(Date.UTC(-264, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/First_Punic_War_264_BC_v3.png/413px-First_Punic_War_264_BC_v3.png",
      description: "Rome and Carthage clashed for control of Sicily, with Rome emerging victorious."
    },
    {
      y: "Second Punic War", 
      x: new Date(Date.UTC(-218, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Map_of_Rome_and_Carthage_at_the_start_of_the_Second_Punic_War.svg/330px-Map_of_Rome_and_Carthage_at_the_start_of_the_Second_Punic_War.svg.png",
      description: "Hannibal's invasion of Italy, including crossing the Alps, but ending in Carthage's defeat."
    },
    {
      y: "Battle of Cannae", 
      x: new Date(Date.UTC(-216, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/The_Death_of_Paulus_Aemilius_at_the_Battle_of_Cannae_%28Yale_University_Art_Gallery_scan%29.jpg/450px-The_Death_of_Paulus_Aemilius_at_the_Battle_of_Cannae_%28Yale_University_Art_Gallery_scan%29.jpg",
      description: "Hannibal's forces inflicted a devastating defeat on the Romans in one of history's greatest tactical victories."
    },
    {
      y: "Battle of Zama", 
      x: new Date(Date.UTC(-202, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Tunisia_adm_location_map.svg/330px-Tunisia_adm_location_map.svg.png",
      description: "Scipio Africanus defeated Hannibal, ending the Second Punic War and Carthage's dominance."
    },
    {
      y: "Third Punic War", 
      x: new Date(Date.UTC(-149, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/City_of_Carthage_circa_149_BC.png/330px-City_of_Carthage_circa_149_BC.png",
      description: "Rome decisively destroyed Carthage, bringing an end to the Punic Wars."
    },
    {
      y: "Destruction of Carthage", 
      x: new Date(Date.UTC(-146, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Catapulta_by_Edward_Poynter.jpg/450px-Catapulta_by_Edward_Poynter.jpg",
      description: "Rome completely destroyed Carthage, marking its final defeat in the Third Punic War."
    },
    {
      y: "Battle of Actium", 
      x: new Date(Date.UTC(-31, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Medinaceli_Actium_reliefs_06.jpg/450px-Medinaceli_Actium_reliefs_06.jpg",
      description: "Octavian defeated Mark Antony and Cleopatra, leading to the establishment of the Roman Empire."
    },
    {
      y: "Conquest of Britain", 
      x: new Date("0043"),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Roman.Britain.campaigns.43.to.84.jpg/450px-Roman.Britain.campaigns.43.to.84.jpg",
      description: "Rome invaded and began its conquest of Britain under Emperor Claudius."
    },
    {
      y: "Battle of the Teutoburg Forest", 
      x: new Date("0009"),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Epitaph_des_Marcus_Caelius.JPG/420px-Epitaph_des_Marcus_Caelius.JPG",
      description: "Germanic tribes ambushed and destroyed three Roman legions, halting Rome's expansion into Germania."
    },
    {
      y: "Battle of the Milvian Bridge", 
      x: new Date(Date.UTC(312, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Battle_of_the_Milvian_Bridge_by_Giulio_Romano%2C_1520-24.jpg/600px-Battle_of_the_Milvian_Bridge_by_Giulio_Romano%2C_1520-24.jpg",
      description: "Constantine's victory, which led him to become the sole ruler of the Roman Empire and embrace Christianity."
    },
    {
      y: "Battle of Adrianople", 
      x: new Date(Date.UTC(378, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Battle_of_Adrianople_378_en.svg/330px-Battle_of_Adrianople_378_en.svg.png",
      description: "The Visigoths dealt a crushing defeat to the Roman army, marking a turning point in the Empire's decline."
    },
    {
      y: "Sack of Rome by Visigoths", 
      x: new Date(Date.UTC(410, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/Visigoths_sack_Rome.jpg/330px-Visigoths_sack_Rome.jpg",
      description: "The Visigoths sacked Rome, symbolizing the weakening of Roman power in the West."
    },
    {
      y: "Battle of the Catalaunian Plains", 
      x: new Date(Date.UTC(451, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Attila_in_Gaul_451CE.svg/450px-Attila_in_Gaul_451CE.svg.png",
      description: "Roman and Visigoth forces defeated Attila the Hun in Gaul, halting his advance into Western Europe."
    },
    {
      y: "Sack of Rome by Vandals", 
      x: new Date(Date.UTC(455, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Genseric_sacking_rome_456.jpg/450px-Genseric_sacking_rome_456.jpg",
      description: "The Vandals plundered Rome, marking another significant blow to the Western Roman Empire."
    },
    {
      y: "Battle of Pharsalus", 
      x: new Date(Date.UTC(-48, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Battle_of_Pharsalus%2C_48_BC.png/300px-Battle_of_Pharsalus%2C_48_BC.png",
      description: "Julius Caesar's decisive victory over Pompey during the Roman Civil War."
    },
    {
      y: "Battle of Philippi", 
      x: new Date(Date.UTC(-42, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Philippi_location.jpg/300px-Philippi_location.jpg",
      description: "Mark Antony and Octavian defeated Brutus and Cassius, avenging Julius Caesar's assassination."
    },
    {
      y: "Battle of Edessa", 
      x: new Date(Date.UTC(260, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/Naghsh-e_rostam%2C_Irán%2C_2016-09-24%2C_DD_12.jpg/450px-Naghsh-e_rostam%2C_Irán%2C_2016-09-24%2C_DD_12.jpg",
      description: "The Roman army suffered a catastrophic defeat by the Sassanid Persians, and Emperor Valerian was captured."},     
    {
      y: "Byzantine Reconquest of Italy (Gothic War)", 
      x: new Date(Date.UTC(535, 1, 1)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Erster_und_Zweiter_Gotenkrieg.png/450px-Erster_und_Zweiter_Gotenkrieg.png",
      description: "The Byzantine Empire, led by Justinian, launched a campaign to reclaim Italy from the Ostrogoths."
    },
    {
      y: "Lombard Invasion of Italy",
      x: new Date(Date.UTC(568, 1, 1)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Pietro_della_Vecchia_-_Rosamund_forced_to_drink_from_the_skull_of_her_father.jpg/330px-Pietro_della_Vecchia_-_Rosamund_forced_to_drink_from_the_skull_of_her_father.jpg",
      description: "The start of Lombard rule in Italy, reshaping the political landscape of the Italian Peninsula."
    },
    {
      y: "Fourth Crusade and Sack of Constantinople",
      x: new Date(Date.UTC(1204, 4, 12)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/ConquestOfConstantinopleByTheCrusadersIn1204.jpg/450px-ConquestOfConstantinopleByTheCrusadersIn1204.jpg",
      description: "Crusaders captured and looted Constantinople, significantly weakening the Byzantine Empire."
    },
    {
      y: "Treaty of Venice (Fourth Crusade)",
      x: new Date(Date.UTC(1201, 3, 13)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/B_alexander_III2.jpg/330px-B_alexander_III2.jpg",
      description: "This agreement between crusaders and Venice laid the groundwork for the Fourth Crusade."
    }
  ];
​
  // establishments
  events[1] = {};  
  events[1].name = "Establishments";
  events[1].direction = "down";
  events[1].moments = [
    {
      y: "Establishment of Rome", 
      x: new Date(Date.UTC(-753, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Kapitolinische_Wölfin_Museum_Capitolini.jpg/330px-Kapitolinische_Wölfin_Museum_Capitolini.jpg",
      description: "Rome was founded, according to legend, by Romulus and Remus."
    },
    {
      y: "Founding of the Roman Republic", 
      x: new Date(Date.UTC(-509, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Roman_Republic_44_bC.svg/375px-Roman_Republic_44_bC.svg.png",
      description: "Rome transitioned from monarchy to a republican form of government."
    },
    {
      y: "Establishment of the Roman Empire", 
      x: new Date(Date.UTC(-27, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Roman_Empire_Trajan_117AD.png/375px-Roman_Empire_Trajan_117AD.png",
      description: "Augustus became the first emperor, marking the start of the Roman Empire."
    },
    {
      y: "Completion of the Colosseum", 
      x: new Date("0080"),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Roma_PlanFXD.jpg/405px-Roma_PlanFXD.jpg",
      description: "Rome's famous amphitheater was completed and opened for public games."
    },
    {
      y: "Construction of Hadrian's Wall", 
      x: new Date(Date.UTC(122, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Hadrians_Wall_map.svg/375px-Hadrians_Wall_map.svg.png",
      description: "A defensive fortification built to protect Roman Britain from northern tribes."
    },
    {
      y: "Completion of the Pantheon", 
      x: new Date(Date.UTC(126, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Roma_PlanFXD.jpg/405px-Roma_PlanFXD.jpg",
      description: "The Pantheon in Rome, a temple dedicated to all gods, was finished."
    },
    {
      y: "Edict of Caracalla", 
      x: new Date(Date.UTC(212, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Constitutio_Antoniniana.png/330px-Constitutio_Antoniniana.png",
      description: "Granted Roman citizenship to all free men within the empire."
    },
    {
      y: "Diocletian's Reforms", 
      x: new Date(Date.UTC(284, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Istanbul_-_Museo_archeol._-_Diocleziano_%28284-305_d.C.%29_-_Foto_G._Dall%27Orto_28-5-2006_%28cropped%29.jpg/330px-Istanbul_-_Museo_archeol._-_Diocleziano_%28284-305_d.C.%29_-_Foto_G._Dall%27Orto_28-5-2006_%28cropped%29.jpg",
      description: "Diocletian restructured the empire to address internal and external pressures."
    },
    {
      y: "Tetrarchy Established", 
      x: new Date(Date.UTC(293, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Venice_–_The_Tetrarchs_03.jpg/300px-Venice_–_The_Tetrarchs_03.jpg",
      description: "Diocletian split imperial power among four rulers to stabilize the empire."
    },
​
    {
      y: "Edict of Milan", 
      x: new Date(Date.UTC(313, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Constantine_Chiaramonti_Inv1749.jpg/330px-Constantine_Chiaramonti_Inv1749.jpg",
      description: "Issued by Constantine, it granted religious tolerance, especially for Christians."
    },
​
    {
      y: "Council of Nicaea", 
      x: new Date(Date.UTC(325, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Nikea-arius.png/300px-Nikea-arius.png",
      description: "First ecumenical council that established key doctrines of Christianity."
    },
​
    {
      y: "Founding of Constantinople", 
      x: new Date(Date.UTC(330, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Byzantine_Constantinople-en.png/330px-Byzantine_Constantinople-en.png",
      description: "Constantine founded the new capital of the Roman Empire in the East."
    },
    {
      y: "Council of Ephesus", 
      x: new Date(Date.UTC(431, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Concile-Ephese-Fourviere-detail.jpg/525px-Concile-Ephese-Fourviere-detail.jpg",
      description: "An ecumenical council that affirmed the title of Theotokos for Mary."
    },
    {
      y: "Council of Chalcedon", 
      x: new Date(Date.UTC(451, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Fourth_ecumenical_council_of_chalcedon_-_1876.jpg/300px-Fourth_ecumenical_council_of_chalcedon_-_1876.jpg",
      description: "Defined Christ's dual nature, both human and divine, in Christian doctrine."
    },
    {
      y: "First Council of Constantinople", 
      x: new Date(Date.UTC(381, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Homilies_of_Gregory_the_Theologian_gr._510%2C_f_723.jpg/383px-Homilies_of_Gregory_the_Theologian_gr._510%2C_f_723.jpg",
      description: "Expanded on the Nicene Creed and affirmed the Holy Spirit's divinity."
    },
    {
      y: "Establishment of the Ostrogothic Kingdom", 
      x: new Date(Date.UTC(493, 3, 5)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Ostrogothic_Kingdom.png/375px-Ostrogothic_Kingdom.png",
      description: "The Ostrogoths established rule in Italy under King Theodoric."
    },
    {
      y: "Establishment of the Papal States", 
      x: new Date(Date.UTC(754, 7, 1)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Stato_Pontificio_legazioni_1850.svg/375px-Stato_Pontificio_legazioni_1850.svg.png",
      description: "The Papacy gained political control over central Italy, forming the Papal States."
    },
    {
      y: "Concordat of Worms", 
      x: new Date(Date.UTC(1122, 9, 23)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Urkunde_Wormser_Konkordat-bg.png/495px-Urkunde_Wormser_Konkordat-bg.png",
      description: "Agreement resolving the Investiture Controversy between the Papacy and Holy Roman Empire."
    }
  ];
​
  // disasters
  events[2] = {};  
  events[2].name = "Disasters";
  events[2].direction = "down";
  events[2].moments = [
    {
      y: "Assassination of Julius Caesar", 
      x: new Date(Date.UTC(-44, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Vincenzo_Camuccini_-_La_morte_di_Cesare.jpg/375px-Vincenzo_Camuccini_-_La_morte_di_Cesare.jpg",
      description: "Caesar was killed by Roman senators to stop his increasing power."
    },
    {
      y: "Great Fire of Rome", 
      x: new Date("0064"),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Robert%2C_Hubert_-_Incendie_à_Rome_-.jpg/521px-Robert%2C_Hubert_-_Incendie_à_Rome_-.jpg",
      description: "A devastating fire that burned much of Rome, with Emperor Nero blamed."
    },
    {
      y: "Eruption of Mount Vesuvius", 
      x: new Date("0079"),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Destruction_of_Pompeii_and_Herculaneum.jpg/360px-Destruction_of_Pompeii_and_Herculaneum.jpg",
     description: "The eruption buried the cities of Pompeii and Herculaneum under ash."
    },
    {
      y: "Antonine Plague", 
      x: new Date(Date.UTC(165, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/The_angel_of_death_striking_a_door_during_the_plague_of_Rome_Wellcome_V0010664.jpg/390px-The_angel_of_death_striking_a_door_during_the_plague_of_Rome_Wellcome_V0010664.jpg",
      description: "A deadly epidemic, likely smallpox, that devastated the Roman population."
    },
    {
      y: "Crisis of the Third Century", 
      x: new Date(Date.UTC(235, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Map_of_Ancient_Rome_271_AD.svg/450px-Map_of_Ancient_Rome_271_AD.svg.png",
      description: "A period of military, political, and economic turmoil that almost destroyed the empire."
    },
    {
      y: "Plague of Cyprian", 
      x: new Date(Date.UTC(249, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Heiliger_Cyprianus.jpg/225px-Heiliger_Cyprianus.jpg",
      description: "A pandemic that contributed to the empire's instability during the 3rd century."
    },
    {
      y: "Division of the Roman Empire", 
      x: new Date(Date.UTC(395, 0, 0)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Roman_Republic_44_bC.svg/375px-Roman_Republic_44_bC.svg.png",
      description: "The empire was permanently split into Eastern and Western halves."
    },
    {
      y: "Fall of the Western Roman Empire", 
      x: new Date(Date.UTC(476, 9, 4)),
      img: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Invasions_of_the_Roman_Empire_1.png/330px-Invasions_of_the_Roman_Empire_1.png",
      description: "The collapse of the Western Roman Empire, marking the end of ancient Rome."
    }
  ];
​
  return {"periods": periods, "events": events}
  
};
​
/*
  There is a locale mechanism in AnyChart, which is described at https://docs.anychart.com/Common_Settings/Localization.
  A sample locale can be seen here: https://cdn.anychart.com/releases/8.12.1/locales/en-gb.js.
  There is a block of keys that start with timeline_, which are used when the level of zoom changes.
  To show Era designators, we can edit a locale's format property.
  The era designator is also a property. In some locales, it is "AD" (Anno Domini) and "BC" (Before Christ),
  while in others, it is "BCE" (Before Common Era) and "CE" (Common Era).
*/
​
// Custom function to modify locale formats to include an era designator:
function patchDateTimeLocale(){
  // read the current output locale and create a structured clone of it
  var currentOutputLocale =  structuredClone(anychart.format.locales[anychart.format.outputLocale()]);
  // read the formats object to prepare for creating a custom version of the locale
  var dateTimeLocaleFormats = currentOutputLocale.dateTimeLocale.formats;
  // loop through all available format keys to find those related to the current scale
  for (var format in dateTimeLocaleFormats){
    // "timeline_" is the scale we are looking for
    if (format.startsWith("timeline_")){
      // read and loop through an array of format values to insert an era designator
      var formatValues = dateTimeLocaleFormats[format];
      for (var i = 0; i < formatValues.length; i++) {
        // formats are usually represented by strings like "yyyy" or "dd MMMM yy HH:mm.SSS"
        var formatValue = formatValues[i];
        // there are two possible configurations of year representation inside a locale string "yyyy" and "yy"
        // we need to find both versions or neither to correctly modify the locale string
        var index4Y = formatValue.search(/y{4}/g)
        var index2Y = formatValue.search(/y{2}/g)
        // if there is a string representing a "yyyy" year, modify the format to include an era designator
        if (index4Y >= 0) {
          /*
            Create a new string that includes everything before and after the index identified earlier.
            The new string will include an era designator, but ensure the indexes are adjusted correctly,
            as we want to insert the era designator after the part of the string that represents the year.
          */
          var formatValuePatched1 = formatValue.slice(0, index4Y) + "y G" + formatValue.slice(index4Y + 4);
          formatValues[i] = formatValuePatched1;
        // if there is a string representing a "yy" year, modify the format to include an era designator
        } else if (index2Y > -1) {
          var formatValuePatched2 = formatValue.slice(0, index2Y + 1) + "y G" + formatValue.slice(index2Y + 3)
          formatValues[i] = formatValuePatched2
        }
      }
    }
  }
  // add the custom current output locale to AnyChart
  anychart.format.locales["custom"] = currentOutputLocale;
  // set the custom locale as the active locale
  anychart.format.outputLocale("custom");
};
​
// Function to patch the zoom levels on the timeline scale
function patchedZoomLevels(){
  var customZoomLevels = [
    [
      {"unit": "month", "count": 1},
      {"unit": "quarter", "count": 1},
      {"unit": "year", "count": 1}
    ],
    [
      {"unit": "quarter", "count": 1},
      {"unit": "year", "count": 1},
      {"unit": "year", "count": 10}
    ],
    [
      {"unit": "year", "count": 1},
      {"unit": "year", "count": 10},
      {"unit": "year", "count": 50}
    ],
    [
      {"unit": "year", "count": 10},
      {"unit": "year", "count": 50},
      {"unit": "year", "count": 100}
    ],
    [
      {"unit": "year", "count": 50},
      {"unit": "year", "count": 100},
      {"unit": "year", "count": 500}
    ]    
  ];
  return customZoomLevels;  
};

Sample meta

AnyChart Documentation

Additional Axes (Axes and Grids)

Axis Basics (Axes and Grids)

Column Chart (Basic Charts)

Column Chart (Error Chart)

Column Chart (Polar Plot)

Data From JSON (Working with Data)

Data From XML (Working with Data)

Drawing (Drawing Tools and Annotations)

Range Column Chart (Basic Charts)

Series Manipulation (Working with Data)

Stick Chart (Error Chart)

Themes (Appearance Settings)