Timelines on the Internet
I have recently become interested in creating timelines on the Internet. Surely using this great new medium (the Net) there is a revolutionary way of presenting timeline data. So I have been searching around the Internet to see what I can find, and alas, it appears that most timelines are simply a list of dates with the corresponding events. It seems to me that this is a boring way of presenting data and does not harness the power of the Net.
What would you consider the best way of presenting timeline data on the Internet? Is Flash the answer so we can make timelines more interactive? Or has the Internet not evolved enough yet to present data in a new and revolutionary manner?
My early attempts have led me to attempt a Flash solution. What I have done so far can be viewed at (www.websonix.ca/tim/index.html). This is a beginning, but I can’t help but believe that there is so much more that could be done.
Well, first, I think the internet is generally poorly suited to visual communication. Sure, it’s a wonderful thing, but graphics are not its strong point.
I have been known to create drawings over 15′ long to express ideas and convey information, when I needed to. At 600dpi, that is over 100,000 pixels on one axis. On a computer screen, a Flash version of the same thing would need to scroll across over 100 “pages” to get the same amount of pixels. Not only would that take too long, but you lose the ability to take it all in at once.
Of course, I realize you may need to do it on a computer for some particular reason. In that case I suggest looking at Apple’s new OS X interface, especially the way an icon gets bigger when the cursor is placed over it. It is a very smooth and useful effect: the entire toolbar is always shown, but the user’s focus of attention is magnified. There are some animated demo’s on Apple’s website, but using it in person is the only way to understand how well it was implemented.
-dp-
This question represents exactly the wrong way to reason about information displays. It begins by celebrating this week’s technology rather than reasoning about the intellectual problem at hand. You will do better at information design if you first ask “What is the intellectual problem that this display is supposed to help with? What is the thinking task that this display will assist?” The answers to these questions will begin to specify the kinds of evidence and displays that you need.
The computer screen is not very good at displaying a big historical timeline; the low typographic resolution of the screen forces viewers to scroll endlessly through century after century (and, even worse, horizontal scrolling). Perhaps, on the computer screen, time should flow vertically, with events described by lines of horizontal type at each date. On the other hand, it is nice to maintain the time-flowing-left-to-right convention used in excellent timelines (printed, lots of overlapping events, hundreds of events).
For a competent timeline shown on a computer screen, see Google’s summary of the searches of 2001 at https://www.google.com/press/timeline.html
You should find some classic examples of timelines (regardless of the method of display!) and think hard about those examples.
For an excellent timeline, see “Graph of the Day: New York Times, February 6, 2002,” a thread in Ask E.T.:
https://www.edwardtufte.com/217741299/bboard/q-and-a-fetch-msg?msg_id=00006W&topic_id=1&topic=Ask%20E%2eT%2e
Recently the site Accelenation published a timeline of “7 years of 3d graphics,” showing the history of 3d accelerator cards in the PC industry.
I think they did a very good job. It is clear, easy to read, and oriented vertically for easier scrolling.
They even managed to put their site’s name as a watermark that is unobtrusive, yet discourages digital plagerism.
http://accelenation.com/?doc=123&page=1
http://www.pbs.org/wgbh/masterpiece/archive/programs/davidcopperfield
(Click on “A Dickens Timeline”)
http://www.britannica.com/oscars/noFlash.html
http://www.vintagetrends.com/timeline/flash.html
I’m advocating a very pared-down but functional text-only
timeline-format that has the advantage of supporting
hundreds of inline links. My most extreme
example is
this timeline of James Joyce’s life, but if you
explore my site you’ll find a hundred shorter examples.
My ideal is that each item on a timeline should offer at
least one useful link, as a ‘text button’ at the end.
[theory]
To break up the long blocks of text I arbitrarily skip
a line every screen’s worth or so, or I insert lively
pullquotes as short indented texts using BLOCKQUOTE.
See the Google Zeitgeist Timeline 2002 https://www.google.com/press/timeline2002.html.
Google’s widespread international use is interesting, as well as the growth of languages other than English on the internet.
The horizontal scrolling for the timeline continues to work well.
While the horizontal scrolling works, if the design and scrolling were vertical, wheelmouse functiality would make viewing easier. Seems the same data could be presented vertically.
My wife and I are expecting and did a typical search on the web for name ideas. I ran across this site and thought I would share it with this forum. What are the thoughts on interactive data analysis? … being able to manipulate the data and presentation based on simple filtering. Here is the example, though not as complex as the question.
http://babynamewizard.com/namevoyager/lnv0105.html
Thanks,
Jason
P.S. – I enjoyed your class in Scottsdale, AZ
The babynamewizard is fascinatingly addictive. I suspect that it is from a US source and
does not reflect the same distributions as names in the UK. Also, I would be interested to
learn the sample size and the provenance generally. A small point is that the search
facility at the top left was not immediately obvious: the legend underneath it disappears
after the full display has loaded. Otherwise though it is recommended as five minutes fun
for any browser of this forum.
Sparklines?
I’ve enjoyed the Timelines in http://www.eternalegypt.org
Time flows vertically and it is possible to select coarse to fine scales. Selecting specific eras brings up information on artifacts from that period.
— Ravi Narasimhan
For the big historical picture, see Daniel Rosenberg’s The Trouble with Timelines, and Sasha Archibald & Daniel Rosenberg’s Timeline of Timelines (Cabinet magazine, Spring 2004). Among the images on the latter page we find some classics, such as Minard’s 1869 chart of French casualties in Napoleon’s Russian campaign, familiar to all Tufte fans. But there are also some surprises, including a barely legible yet intriguing JPEG of a chart from Joseph Mede’s Key of the Revelation (1626), the remarkable 54-foot Carte chronologique by Jacques Barbeu-Duborg (1753), and the Diagram of the Causes of Mortality by Florence Nightingale (1857). Given the poor reproduction quality, these images are difficult to read clearly. Luckily, Cabinet also appears in paper form.
Here is an unconventional timeline on the internet
(or is it a small multiple?) – A historical sequence of
photos of an Argentinian family.
http://zonezero.com/magazine/essays/diegotime/time.html
(I got to this through:
http://reddit.com )
Here are a number of interesting graphical timeline styles, that can be generated for inclusion in Wikipedia.org articles, using this tool:
http://infodisiac.com/Wikipedia/EasyTimeline/Introduction.htm
see also http://en.wikipedia.org/wiki/Category:Graphical_timelines for in-use examples.
Sid Jacobson and Ernie Colon’s graphic adaptation of the 9/11 Commission Report
begins with four timelines comparing the four hijacked planes on Sept. 11. You can view the
entire book online at Slate. The graphics present pretty strong visual arguments for the failure of
communication on
that day (see especially page 8 of section 1 in the Slate version).
I posted this in Project Management Graphics thread:
…
Some of you may be interested in this application set from some of the folks at MIT:
http://simile.mit.edu/timeline/
It is a set of JavaScripts that allow you to build a customizable timeline with link(s) to XML, JSON, etc. datasets.
It is still somewhat “do-it-yourself” but it seems that it may be useful for generating live timelines/progress charts.
The folks that are developing it are also very good/prompt in answering questions.
Here’s a timeline clock (second one down), among other wonders:
http://beeks.eu/Screensaver.htm
The human genome has, at the highest resolution, some 3 billion letters. There are, however, important features that become relevant when you examine the data at different resolutions. So from the perspective of presenting the data on a screen, presenting the genome is very much like presenting a timeline.
Anyone (biologist or otherwise) can appreciate the features of these two genome browsers. Click around on the options, zoom in and out…
Vertical (at the National Institutes of Health):
http://www.ncbi.nlm.nih.gov/mapview/maps.cgi?taxid=9606&chr=8
Horizontal (at University of California):
http://genome.ucsc.edu/cgi-bin/hgTracks?hgsid=79915483&clade=vertebrate&org=Mouse&db=mm8&position=chr1%3A182%2C163%2C877-182%2C164%2C329&pix=620&Submit=submit&hgsid=79915483
-Tsoni Peled, MD/PhD Student, Albert Einstein College of Medicine
Google Finance shows financial data in a dynamic chart with a timeline across the bottom.
The timeline has a sliding, resizable marker of the slice of data shown above. Links atop the chart “zoom” to other slices. Moving the cursor left and right on the chart allows fine-grained review of the price over time.
Google Finance Beta – S&P 500 Index
http://finance.google.com/finance?cid=626307
The browser delivery mechanism is Flash (Flex).
The Google Finance material linked immediately above needs work. It looks like it was put together with a shovel.
The table at the top is fine but too thin. The graphic is low-resolution, and the lettercode buttons are too big. The links at the right are twitchy, moving around too much as their motion catches the eye. Moving the scroller to the left leads to chaos.
The information is alas segregated by its mode of production: a separate table, another place for words, and a third area for graphics. Evidence doesn’t care what it is.
Graphics on automatic pilot are usually going to have problems since their design cannot be customized to one
particular data set. But there is a long history of displays of financial data of this sort–and many of the competing
displays are better.
In terms of comparative grades, Google News gets an A; this Google Finance architecture a C-.
It may be that there was too much technology-driven design (or perhaps hubris) and not enough financial insight
engaged in creating the architecture.
This may be straying slightly off-topic, but a comment above caught my attention.
“Graphics on automatic pilot are always going to have problems since their design cannot be customized to one particular data set.”
Are you making a statement about the current state-of-the-art in information design, or about the inherent limitations of information design? Many things can now be accomplished by artificial intelligence that were once believed impossible.
For example, choice of scale can be much more intelligently programmed than what is currently available in most business graphics packages, but this is the state-of-the-art and not an inherent limitation in information design. The sparklines threads have evoked some elegant rules-of-thumb for scale that could easily be encoded into a graphics package.
There is an amazing new graphic, a history of the universe, on one 99×68 cm poster.
http://www.timelineposter.com
Daniel Rosenberg, along with Anthony Grafton, has published another collection of timelines in “Cartographies of Time: a history of the timeline”. More information can be found on the Princeton Architectural Press’s website.
I followed Ed Manlove’s suggestion regarding the Cartographies of Time book, really great book! I encourage everyone
to check it out. There are some great examples of what has been attempted in the past.
More recently I have been interested in timelines that show all of history- literally from the Big Bang to the present.
Here are two, the first is static, the second is interactive.
1. Big History Project
(Not to scale)
http://www.bighistoryproject.com/Big-History/Timelines
2. Chronozoom
(To scale, incredibly except for Big Bang)
http://eps.berkeley.edu/~saekow/chronozoom/launch/index.html
Facebook, in my opinion, created a decent approach for web viewing of a
timeline. Its optimized to show a good amount of information while maintaining the timeline metaphor.
https://www.facebook.com/about/timeline
Regards,
Ken
New world history timeline poster, published in 2012:
Available on Amazon.
A much simpler HTML version here: