ISSN 2011-0146

The videogame history timeline

publicado en diseño,general,información,interacción,juegos,visualización,web por mga en January 30, 2010

This is an english translation of a previous post. I believe english readers could be interested in this project.

For a long time I have wanted to do a videogame history timeline. It would combine several of my interests: information visualization, history, time and, of course, videogames. Currently I have a class on videogame history (class blog in spanish) as a lecturer in the Design Department at the Universidad de los Andes and such a timeline would be useful (and neat).

I had the opportunity of creating a history timeline for a client and decided to use that code as the starting point for my timeline. This is why I can now present (drumroll):

The videogame history timeline

The URL is:

clic para ver imagen completa

The timeline showcases eight types of events:

  1. people (birthdates) of relevance: game designers and developers, scientists, artists, entrepreneurs.
  2. business: companies or important business events.
  3. consoles (or hardware such as PCs) where videogames are executed.
  4. games
  5. accessories and controls: peripherals that are connected to consoles.
  6. technologies of importance.
  7. cultural: events that have somehow influenced the world of videogames (books, movies, ideas or theories, etc.).
  8. other events that contextualize what was happening worldwide when the other types of events happened.

Every event can be related to other events in three ways:

  • creation (event A created event B): mostly used to relate a person with the games he/she created
  • inspiration (event A was inspired or is “plainly” related to event B)
  • series (event A precedes event B): for “sequences” of events (eg.: the “Mario” series by Nintendo are assumed to be sequential editions even though they were developed for different consoles)

Presenting this information clearly to the user is rather complicated. Not to say that I am finished with the interface. It still needs work and I want to explore more possibilities.

You need to press SPACEBAR in order to see the relationships between events:

relations between events

Given that you see a lot of relations between events in the default display mode (and even more events are missing from the timeline) I decided to allow the user to turn on/off event types and relation types. This way, if I turn off all events except people and games, I can see the screen with less “noise”:

people and games

It’s difficult (maybe even impossible) to plot all events and relations while completely avoiding superposed lines (or maybe I need to investigate a little more). However, I believe that the current solution is easy to understand once you have played with it for a few minutes (I didn’t set out to create a conventional interface; I wanted to experiment a little).

This is what I see if I turn on series and games:

game series

You can see that Doom II goes after Doom and that there is another later game in the series. Riven goes after Myst, etc.


Users are lazy (okay, all but you) and if they don’t find what they are looking for in a few seconds they will go somewhere else. Also, in large sets of information (even though the timeline currently has only a few hundred events) it is difficult to predict how a user expects to find some particular data point. This is why the timeline has a search box:

search results for "nintendo"

Viva la open source!

In my web developing years I have benefitted from a large amount of open source libraries/programs/content and, every time I can, I try to give something back. In this case I have created a Google Code project so, whoever knows ActionScript 3 and Flash, can take a look and see what benefits he/she can find there (I don’t plan on supporting this code, use under your own risk).

Things to do

The timeline is far from finished. Among the things I want to do:

  • content in spanish: I am using this timeline in my Videogame history class and I want the content to be fully translated
  • complete content: a lot of information is missing or incomplete
  • experiment: this basic information setup can be explored in many different ways
  • share: there is an RSS feed with the whole content so anyone can use it to visualize it (an API would be more elegant) although my current server is a little unsteady at the moment

Technical stuff (and other)

Several people have collaborated, inputting data or with their opinion. Among them: Nicolás Arteaga, Vanessa Gómez, Andrea D’Macedo, Manuel Piñeros, Sebastián Ramírez, Rafael Tudela y Cárlos López. If you want to collaborate or if you find any innaccuracies, please contact me.

If you want to know what powers the timeline: content is fed via Drupal (which works on top of PHP, MySQL and Apache) to which I connect from Flash using AMFPHP (Drupal has a module for AMFPHP which I had to modify a bit). This has the benefit of automagically generating a plain text version of the content. The server is a little bit slow (the whole database is loaded in the first request… that’s why you see the quiz). Any performance ideas are welcome. Keep in mind it is a shared hosting environment.

This project has been supported by Powerflasher, the people behind FDT (the cool software I use to write all the ActionScript you see in Google Code).

15 comentarios to 'The videogame history timeline'

Suscríbase a los comentarios con RSS o TrackBack a 'The videogame history timeline'.

  1. Bruno Fonzi said,

    on January 30th, 2010 at 20:47

    Great initiative!
    We are glad to support this project.
    – The Powerflasher FDT Team

  2. George Profenza said,

    on January 31st, 2010 at 17:28

    Well done!

    Great looking archive!

  3. mga said,

    on January 31st, 2010 at 17:36

    Thanks : )

  4. mga said,

    on February 2nd, 2010 at 00:26

    showcased in

  5. on February 3rd, 2010 at 03:06

    […] bitte statt Werbung und hüpfender Banner Projekte wie dieses: Die Videogame History Timeline von Mauricio Giraldo Arteaga visualisiert in allen erdenklichen Details die Geschichte des Videospiels von Pong bis Little Big […]

  6. on February 3rd, 2010 at 09:32

    […] Videogame Timeline B-Log No Comments The Videogame Timeline is pretty minimally designed yet very cool experimental project by Mauricio Giraldo Arteaga. The […]

  7. mar canet said,

    on February 3rd, 2010 at 10:36

    Amazing work!!

  8. on February 3rd, 2010 at 23:29

    […] it became available to the public (three days ago), the videogame history timeline has had good reception. Videogames definitely […]

  9. JLK said,

    on February 4th, 2010 at 13:43

    Excelente trabajo!
    No encontré a Sir Fred (Micro Gen 1986).

    Se pueden hacer aportes a tu trabajo? Soy gammer de toda la vida y en especial desde que me regalaron mi Timex Sinclair en 1983…fué un camino de ida!

    Saludos y felicitaciones!

  10. mga said,

    on February 4th, 2010 at 14:00


    Puede registrarse en el sitio web. Una vez registrado nos comunicamos para explicarle la dinámica de ingreso de información:

  11. on February 4th, 2010 at 15:11

    […] When you look at the past, you see that its quite an amazing array of people who have shaped the electronic and entertainment industry through their will, sprit and ideas to what it is today. So take a look at the people, events and companies that shaped the industry through a videogame history timeline. More information here. […]

  12. mga said,

    on February 4th, 2010 at 19:08

    Ya está Sir Fred

    Gracias por el tip

  13. JLK said,

    on February 4th, 2010 at 20:00

    Por nada!

    Un placer haber sido de ayuda en este interesante proyecto.


  14. onixa said,

    on February 25th, 2014 at 12:05

    Es realmente una pena que este proyecto ya no este en linea. Es realmente interesante.

  15. mga said,

    on February 25th, 2014 at 19:33

    gracias por el comentario… el problema es que lo hice en Flash y quiero convertirlo a HTML/CSS/SVG pero eso me tomaría mucho tiempo que en este momento no tengo… sin embargo, su comentario me motiva a darle prioridad :)