Epoque

Epoque is a JavaScript tool aimed at generating historical timelines. Historical data are provided as eras (longer timespans representing dynasties, political regimes, etc.), periods (shorter timespans representing reigns, administrations, etc.), situations (timespans representing wars, crises, etc.) and events (something occurring at a given date).

Gallery

Historical:

Fantasy:

Limitations

• Dates are numbers only
• Situations can not overlap

Usage

<script src="epoque.js"/>

<svg id="epoque"></svg>

<script>
  const options = {
    eras: [
      {text: "Era 1", start: 2000, end: 2025, color: "blue"}
    ],
    periods: [
      {text: "Period 1", start: 2000, end: 2010},
      [text: "Period 2", start: 2010, end: 2025}
    ],
    situations: [],
    events: [
      {text: "Event 1", date: 2018}
    ]
  };
  Epoque(document.getElementById("epoque"), options);
</script>

Options

The following options can be used:

• eras: list of eras, each era being an object with the following attributes:
  • text: name of the era
  • start (mandatory): starting year
  • end (mandatory): ending year
  • url: link to an external resource
  • align: text alignment, can be "start", "middle" or "end" (default: "middle")
  • color: background color
• periods: list of periods, each period being an object with the following attributes:
  • text: name of the period
  • start (mandatory): starting year
  • end (mandatory): ending year
  • url: link to an external resource
  • align: text alignment, can be "start", "middle" or "end" (default: "middle")
• situations: list of situations, each situation being an object with the following attributes:
  • text: name of the situation
  • start (mandatory): starting year
  • end (mandatory): ending year
  • url: link to an external resource
  • align: text alignment, can be "start", "middle" or "end" (default: "middle")
  • color: background color
  • height: whether or not the situation should occupy the full height of the timeline, can be "normal" or "full" (default: "normal")
• events: list of events, each event being an object with the following attributes:
  • text: name of the event
  • date (mandatory): year of the event
  • url: link to an external resource
  • align: text alignment, can be "start" or "end"
• start: starting year (default: earliest date in eras/periods/situations/events)
• end: ending year (default: latest date in eras/periods/situations/events)
• width (mandatory): width of the timeline in pixels
• fontColor: font color (default: black)

Export

The Epoque object provides the following methods for exporting the timeline:

• downloadPNG(filename): downloads the timeline in PNG format
• downloadSVG(filename): downloads the timeline in SVG format