November 20th, 2006

Visualizing gaps in time-based lists

As a side prod­uct of my work on web feed visu­al­iza­tion, I made a small com­par­i­son of dif­fer­ent ways to deal with tem­po­ral infor­ma­tion in lists of micro­con­tent, such as e.g. blog entries.

timelines_small1.jpg (larger ver­sion of the image)

1) Ordered list with­out gaps: Clearly, the most space-efficient solu­tion — how­ever, only tem­po­ral order­ing is pre­served and not tem­po­ral struc­ture. It is not visu­ally evi­dent how the items are dis­trib­uted over time.

2) Cal­en­dar: Each time unit (days for exam­ple) has equal space assigned, regard­less if there are items assigned or not. A pre­cise dis­play, how­ever, very space-inefficient, since a lot of the dis­play space is typ­i­cally used for dis­play­ing “nothing”.

3) Accor­dion: Sim­i­lar to cal­en­dar view, but empty time units are dis­played on much less screen estate. This gives a pretty good first-glance impres­sion of large gaps and close-together items. How­ever, depend­ing on the tem­po­ral struc­ture, there might still be large streaks of wasted space for large gaps.

4) Folded gaps: This is the solu­tion I pro­pose (and which I believe is novel. If oth­er­wise, I would be happy about a short notice!): Tem­po­ral gaps are dis­played as if a part of the list was folded to the back of the dis­play. Short gaps have almost the same size as in accor­dion view. Long gaps are larger, but do not grow lin­early, but with the square root of the num­ber of empty time units. Visu­ally, this is jus­ti­fied by intro­duc­ing shad­ing to indi­cate that the “orig­i­nal mate­r­ial” is folded to the back. Fold­ing also pro­vides a plau­si­ble model for inter­ac­tive adjust­ments such as reg­u­lat­ing the gap size.

demonstrator_small1.jpg

To sup­port my argu­ment, I also made small demon­stra­tor based on actual web feed data. It takes a while to load (~700k of data), so please be patient. On the left, you have a menu for select­ing dif­fer­ent feeds. On the right, I drew a con­nec­tion of each item to a cal­en­dar with fancy curved lines. You can adjust the size of the dis­played items with the zoom slider.

Let me know if it works for you — tech­ni­cally and conceptually!

11 Responses to 'Visualizing gaps in time-based lists'

Subscribe to comments with RSS or TrackBack to 'Visualizing gaps in time-based lists'.

  1. Jerry
    November 21st, 2006 at 12:58 am

    Great stuff. Hon­estly! Where can I buy it? Is there a Fire­fox plu­gin? Screw Sage fee­dreader… Best from Paris, J.

  2. […] I found 2 very inter­est­ing exper­i­men­tal demo: “the rela­tional tag cloud” and the “time rela­tional gaps visualizer“. […]

  3. genie
    November 21st, 2006 at 1:09 pm

    very nice idea and realization :)

    but you should make “cal­en­dar” view (left part) click­able. if I know, in which dates user posts, I also want to click-and-view these time frames.

  4. Moritz Stefaner
    November 21st, 2006 at 5:51 pm

    Thanks for your comments!

    @genie: Yes, this was the plan, how­ever, it didn’t work out tech­ni­cally due to the odd code I wrote. Def­i­nitely, the cal­en­dar could be used for scrolling, but maybe also for zoom­ing the list. Right now, it’s only there for com­par­ing the visu­al­iza­tions, not a really func­tional component…

    @daniele, jerry: Thanks for the praise!

  5. fabian
    November 22nd, 2006 at 2:31 pm

    it’s awe­some! :)

  6. […] some of the really cools toys by Moritz Ste­faner , I got par­tic­u­larly inter­ested in his post about visu­al­iz­ing time gaps in data and had a moment of […]

  7. […] http://www.well-formed-data.net  |  Track­back « OSM 2008: A Year of […]

  8. CJ Cenizal
    February 13th, 2009 at 8:51 pm

    You’re doing great work here man! I find your explo­rations inspir­ing and enlight­en­ing. Keep it up.

  9. franbogado
    October 29th, 2009 at 1:30 am

    Cool Where can I get it?

  10. […] Visit the Well-formed data Web­site By admin – Octo­ber 30, 2007 — No com­ments — Posted in Data, Visu­al­iza­tions. — Tagged with Data, visualization, […]

  11. Toll Free
    November 28th, 2009 at 6:35 am

    I go to your web­site from time to time and I just have to men­tion that I like your template!

Leave a Reply