LifeFlow.js
A JavaScript / D3 reimplementation of LifeFlow — an interactive overview of event sequences.
LifeFlow is a visualization technique for summarizing large
collections of event sequences — patient histories, transportation logs,
student trajectories, hurricane tracks — into a single interactive overview.
Rather than showing one timeline per record, it aggregates every record into a
tree of event sequences, where the width of each node reflects how many
records followed that path and the horizontal spacing encodes the typical time
between events. It was developed by
Krist Wongsuphasawat and colleagues
at the University of Maryland
Human-Computer Interaction Lab (HCIL).
This project is my (Sigfried Gold) from-scratch
reimplementation in JavaScript using D3. The original
research tool was a Java desktop application; I wanted a version that ran in the browser
and could be embedded, extended, and combined with other event-data visualizations
(timelines, and eventually an icicle view). It dates to 2013 and not everything I
sketched got finished — see the status note and roadmap below.
These demos use the
HURDAT2 Atlantic hurricane dataset (1851–2012) as
sample data: each hurricane is a "record" and its status changes over time
(Tropical Depression → Tropical Storm → Hurricane → Landfall → …) are the "events."
It's a nice non-medical stand-in for the patient-pathway data LifeFlow was designed for.
HURDAT2 is produced by
NOAA's National Hurricane Center
and is in the public domain.
Demos
-
LifeFlow (full)
interactive
The main LifeFlow chart with the fuller feature set — context menus,
tooltips, and the nvd3-based chart wrapper. Hurricanes aggregated into the
event-sequence tree.
-
Timelines
interactive
The per-record timeline view (one row per hurricane). LifeFlow is built
on top of this — the aggregate tree is derived from the same
timeline data — so this is the complementary "detail" view to LifeFlow's "overview."
Status: I wrote this in
2013, and it shows its age —
it leans on then-current libraries (D3 v3, jQuery 1.9, Underscore, nvd3) and old-school
JavaScript patterns, with no build step or module system. It works but it deserves a
modern overhaul, and the demos are hard to read without explanation. I've started a
punch list of fixes and improvements (legibility, controls, bugs, feature ideas) as a
first round of update requirements:
ISSUES.md.
The original LifeFlow