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

Problem

How often do you see biographical charts that look 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".

Solution

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 

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)