Biographical Charts

The goal of the project is an interactive Biographical Chart, which can display timelines of any group of people (or even objects) in a satisfying manner.

I often teach others (as well as myself) about the history of music: who lived when and where, what kind of music they wrote, the relationship between groups of students and their teachers. Often, I wish to have this kind of information "at a glance" - I just want to see it right in front of me showing all those things in a way that's obvious and easy to follow.

1. The Dream


How often do you see biographical charts that look like this:

or like this:

You do get the timeline  mapped onto the X-axis (horizontal direction), as you might expect, but the Y-axis (the vertical) does not carry any specific meaning, other than creating space for the objects (people) that go onto the timeline. So, you look at this and think, ok, there are a bunch of names, representing individuals who lived during a particular time. You don't get much beyond that, unless the graph also adds more words, stating where the people were born, what they created, who they might had met, and so on. So, you either get not enough information, or "too much information".


So, I thought (and maybe you did, too), why not map the surface of the earth to the Y-axis, showing people's location in time by plotting their lives as polylines (lines made of multiple segments), rather than single horizontal lines/bars?

All we need to do is to "tile" the earth's surface a couple of times, for example:

These tiles can now be arranged along the vertical axis, like this:

There are certainly many other ways to tile the earth. This way seemed useful to me at the time.

You'll notice that the thick gray dotted lines show a "break" between the end of one "north-south" strip and a new north point.

Even with these basic global subdivisions we can already start plotting biographical polylines.

Here is the basic outline of my life:

We can now add some other (mostly fictional) characters to see everything in context:

It's quite easy to see what is happening to each entity. The lines move to different levels depending on when the person moved to a different country.

We need improvements

People usually live in specific cities (often on specific streets), rather than just "countries".

So, to address this, I thought that the best way is to add "constraints", which will keep entities living near each other (same country/city/street) in one block. (See New Zealanders in the link to the HTML file below).

As the amount of people shown on the chart, living in one particular area, increases, so does that area on the chart.

Play with this chart

You can use the embedded HTML page below, or click on the link (Link to the HTML file) below to open the chart example in a separate window:

*Hover the mouse over any line and see the tooltip info (doesn't work with touch devices at the moment)

*Click on a line and you are hyperlinked to the associated website. 

*If you have a mouse with a scrolling wheel, click it, then move the mouse, or click in the chart and use keyboard arrows.

*Use Ctrl-Plus/Minus to zoom in and out (only works if you click on the link, and irrelevant for touch screen devices)

*Notice extra location information in the tooltip and the "area" column at the left (i.e., the address)

Link to the HTML file 

This is just a beginning.

Useful features of this chart would include:

-a search box allowing to highlight a particular line

-a selection rectangle that zooms to a particular area of the chart (less of an issue for touch devices, where zooming is easy)

-connections between individuals shown as "node links" of different colors (for example, pink = married)

-an optional map of the world which shows all chart entities on the actual map for any given point in time


2. The Details

How should we organize the data?

It would be great to see these kinds of charts for any group of people, for any region on earth, at any level of detail. 

The user - you, me, anybody - could go to a webpage, use some interface to select the names of individuals, or countries, or geographic regions, or defined groups (musicians, politicians, engineers, etc) and click "Submit".

After some amount of time (preferably, within a second), the chart similar to the example in the HTML above appears in a view port, or gets downloaded as a file to the user's machine.

Of course, we have to rely on a pre-existing library of data for each individual whose (interactive) polyline we'd like to see - and play with - on this chart.

This library needs to be organized rather efficiently for our chart generation algorithm.

Each meaningful event in a person's/entity's life needs an entry that specifies:

-the date/time of the event

-the geographic location of the event

-the description of the type of event

-more words about the event

-the reference source(s) from which this information came

-other people present in the area during the event (this will help with cross-verification of the certainty)

-degree of certainty for each bit of data (guess). Do we have verifiable proof from multiple sources that Julius Cesar was, in fact, in Rome on June 2nd, 55BC, or is it merely a well-educated guess? (We might end up drawing dashed horizontal lines for such "guesswork").

I use (free) google spreadsheets to organize a lot of my data, so one approach is this:


The LocalArea column contains the information, which, when referenced from another, would allow grouping of local areas intelligently on the Y axis of the chart.

This other table would need to have pipe (|) separated words paired to GPS coordinates (which, in most cases, could be taken from Google Maps).

Finally, the algorithm. 

It could be created in any number of ways (for example, Google Script - based on JavaScript) and used to generate the SVG data (like in the examples) from data tables.

I am looking for people who can support this project in anyway:

-design and code the algorithm

-add to the data by manually typing the information

-create data mining tools that grab the available data on Wikipedia, and convert it into "table" format

In order to start gathering ideas, here is a link to a "brainstorming" doc, where you can type whatever you want (if you are having issues editing in the website, click this link):

(You cannot use a "Del" key to delete a cell - it shifts the page view to the top)