Skip to main content
SimilarExport ZIP
100%

Event Sequences with Overview

✓ Published0🌍 Public
Ffloresh
Last edited Mar 12, 2019
Created on Nov 1, 2018

This visualization shows event sequences as a grid of rows, where each row represents a GUI widget hierarchy from root to inner-most child. Clicking a node highlights its sequence and displays a breadcrumb description below the grid. The color legend and dropdown menu allow filtering by cardinality and path. The code uses d3.hierarchy to structure the data, scaleSequential with interpolateRdBu for coloring, and d3.histogram with scaleTime for the vertical time-series overview.

AI-generated description

Each row represents a sequence of GUI widgets from the root widget to the inner-most child widget. Clicking on a node will highlight the event sequence it belongs to and popup a description of the sequence (IDs starting from root to child nodes). Future versions will need a more diverse dataset and scrolling to allow for hundreds of sequences.

MIT Licensed

Similar vizzes

Loading thumbnail…

Event Sequences with Filtering and Interations

This visualization displays GUI widget event sequences as rows of colored rectangles, where each sequence traces a path from a root application to its child widgets. Users can filter by application path and click individual sequences to highlight them and reveal a breadcrumb-style description of the widget IDs. The color of each rectangle encodes the frequency distribution of widget class names across all sequences, computed via d3.hierarchy and rendered with d3.scaleSequential. Interactive elements include a dropdown menu and a color legend, both built with custom D3 modules.

Ffloresh
87% match
Loading thumbnail…

Event Sequences

This visualization displays event sequences as linear streams of small squares, where each sequence represents a path of GUI widget interactions from a root window to a nested element. Clicking a square highlights its entire sequence with a yellow overlay and lists the widget IDs as breadcrumb text below. The tool filters sequences by executable path via a dropdown menu. It uses D3 v5 to load JSON data, build a hierarchical tree from each sequence, and render SVG rectangles for each widget, with click handlers triggering the selection and highlighting logic.

Ffloresh
87% match
Loading thumbnail…

Overview - Compact Event Sequences

This visualization presents a compact overview of event sequences from Windows application activity, where each row represents a single process event chain and each column indicates a UI element change over time. The event data, sourced from `data.json`, includes timestamps, application names like Word and PowerPoint, and window or pane class names. Built with D3 v5, the SVG rendering uses a color scale based on the distribution of pane class names across the dataset to encode recurring patterns. Rows are displayed as sequences of colored rectangles, and hovering over a row highlights that specific event sequence. The code utilizes D3’s `hierarchy` function to structure each event’s nested children and `scaleSequential` with an `interpolateRdBu` color gradient for visual encoding.

Ffloresh
83% match
Loading thumbnail…

Aggregated Event Sequences with GUI Histograms

This example visualizes aggregated GUI event sequences and their attribute distributions. It shows compact event chains alongside histograms for window names, class names, and content types, with interactive brushing and regex-based filtering that highlights matching events in real time. The visualization uses d3.hierarchy to structure data, d3.scaleBand and d3.scaleLinear for the histograms, and d3.event handlers for tooltips. Event sequences are rendered as SVG rectangles, with animation updating counts and matched percentages as users type rules into a text input.

Ffloresh
82% match
Loading thumbnail…

Event Sequences with Map and Histogram Overview

This visualization combines a vertical histogram and two event-sequence views to explore event timelines over time. The histogram, built with `d3.histogram`, `d3.brushY`, and time scales, displays the distribution of event counts per hour, and allows brushing to filter sequences. The compact view and the larger sequence view, both rendered as SVG rectangles using `d3.hierarchy`, show hierarchical event details from CSV data, with the brushed date range controlling which sequences are displayed.

Ffloresh
81% match
Loading thumbnail…

Aggregated Event Sequences with GUI Histograms

This visualization aggregates event sequences from network flow data, showing compact event sequence strips in the center alongside histograms of destination IP, port, and source IP attributes on the left. Users can filter events by typing a regular expression, which highlights matching sequence elements and updates a percentage counter. Selecting a sequence displays its event details, including name, content name, and content type, on the right. The implementation uses d3.hierarchy, d3.scaleBand, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and SVG rendering with tooltips.

Ffloresh
80% match
Loading thumbnail…

Aggregated Event Sequences with Attribute Histograms

This example visualizes aggregated event sequences as horizontal rows of colored rectangles, with adjacent histograms showing the distribution of network attributes like destination IP, port, and source IP. Users can type a regular expression into a text input to highlight matching events in green and display the percentage of matched events. The visualization uses D3 v5 with `hierarchy` for data structuring, and renders SVG elements via `eventSequences`, `compactEventSequences`, and `attributeHistogram` components, which employ `scaleBand`, `scaleLinear`, and `axisLeft` for the histograms. Tooltips appear on hover, and the data comes from a JSON file containing GUI event sequences.

Ffloresh
78% match
Loading thumbnail…

Aggregated Event Sequences with Text Search

This visualization aggregates event sequences from JSON logs, with each row representing a distinct sequence and its count, rendered as a compact striped band. A text input applies a regular expression filter to highlight matching events in green, while clicking a row expands it into a detailed sequence of labeled rectangles. The code uses D3 v5’s `hierarchy` for data nesting and custom SVG rendering, with string-based keys for data joins and a dynamic regex state that triggers re-renders.

Ffloresh
77% match