Reducing SnapshotsTemporal Network Visualization

What This Tool Does ​

This application visualizes temporal network data—datasets where entities interact over time (e.g., contact networks, communication logs, transaction records).

The tool divides the data into time windows, creates a network snapshot for each window, and uses UMAP to project these snapshots into 2D. The result is a scatter plot where each point represents a network state at a specific time. Points that are close together have similar network structures.

Data Pipeline ​

1. Discretization — The input CSV is divided into overlapping time windows. Each window becomes a snapshot.
2. Graph Construction — For each snapshot, a weighted undirected graph is built. Edge weights represent interaction frequency.
3. Vectorization — Graphs are converted to vectors by flattening their adjacency matrices.
4. Dimensionality Reduction — UMAP projects these high-dimensional vectors into 2D coordinates.

How to Use ​

• Pan and Zoom: Drag to pan, scroll to zoom in the projection view.
• Click a Point: Opens the snapshot view showing the network graph at that time.
• Click a Node: In the snapshot view, clicking a node highlights its activity across time in the projection view.
• Enable Brush: Click the brush icon (top-left) to enter selection mode. Drag to select multiple snapshots.
• View Analytics: When snapshots are selected, the analytics panel shows metrics like average degree, density, and top nodes.
• Stability Chart: Hover to see exact values. Click to jump to that snapshot.
• Controls Drawer: Click the settings icon to adjust time window, overlap, and color property.

Implementation ​

Architecture ​

The main thread handles rendering. A Web Worker performs the CPU-intensive pipeline (discretization, vectorization, UMAP). State signals synchronize the projection view, snapshot graph, stability chart, and analytics panel.

Configuration ​

To use a custom dataset, create a public/config.js file:

export default {
  url: "/your-data.csv",
  fields: {
    timestamp: "time",
    source: "from",
    target: "to",
  },
  visuals: {
    colorBy: [
      { label: "Type", value: "type", type: "categorical" }
    ],
    tooltipFields: ["type"],
  },
  timeFormat: "JS",
  initialConfig: {
    timeWindow: 3600000,
    alpha: 0.8,
    colorProperty: "type",
  },
};

The CSV must have columns for timestamp, source node, and target node. Additional columns can be used for coloring and tooltips.

References ​

Paper ​

Reducing Snapshots for Temporal Network Visualization
This tool implements techniques based on the research paper:

van den Elzen, S., & van Wijk, J. J. (2016). Reducing Snapshots to Points: A Visual Analytics Approach to Dynamic Network Exploration. IEEE Transactions on Visualization and Computer Graphics.
DOI: 10.1109/TVCG.2015.2468078

Libraries ​

• UMAP Algorithm: McInnes, L., Healy, J., & Melville, J. (2018). arXiv:1802.03426
• D3.js: d3js.org
• Default Dataset: SocioPatterns High School Contact Network — sociopatterns.org
• umap-js: github.com/PAIR-code/umap-js