Vithanco

"VGL Guide — Example 20: Timeline"

Estimated reading time: 1 minutes.

Example 20: Timeline

A timeline visualizing events across multiple tracks aligned to a shared time axis:

vgraph myTimeline: Timeline "19th Century Europe" {
    // Time axis
    node t1800: TimePoint "1800" [alignGroup: "1800"]
    node t1850: TimePoint "1850" [alignGroup: "1850"]
    node t1871: TimePoint "1871" [alignGroup: "1871"]
    edge t1800 -> t1850: sequence
    edge t1850 -> t1871: sequence

    // Germany track
    group germany "Germany" {
        node g1: Event "Napoleon defeats Prussia" [alignGroup: "1800"]
        node g2: Event "German Unification" [alignGroup: "1871"]
    }

    // England track
    group england "England" {
        node e1: Event "Industrial Revolution peaks" [alignGroup: "1850"]
        node e2: Event "Franco-Prussian War impact" [alignGroup: "1871"]
    }

    // Cross-track influences
    edge g1 -> g2: influence "led to"
    edge e1 -> e2: influence
    edge e1 -> g2: influence "industrialization enabled"
}

Note: Timelines flow left-to-right. Use alignGroup on nodes to align them at the same rank (same horizontal position). TimePoint nodes are optional — alignGroup alone suffices for alignment. Groups create visual tracks with cluster boxes. Influence edges are dashed and don't affect node positioning (constraint=false). Extend with vnotation for custom event types.