Event Sequences with Filtering and Interations

100%

Event Sequences with Filtering and Interations

✓ Published2🌍 Public

Last edited Mar 11, 2019

Created on Oct 31, 2018

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.

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

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

91% match

Loading thumbnail…

Event Sequences with Overview

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.

Ffloresh

87% 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…

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

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

79% 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

Loading thumbnail…

Aggregated Event Sequences with Flow Histograms

This example visualizes aggregated event sequences from network connection logs, displaying each sequence as a row of colored blocks in a middle panel alongside attribute histograms on the left and detailed sequence information on the right. Users can filter sequences and events using regular expressions, with matching elements highlighted in green. Clicking events in the detail view builds rules that update the filter. The visualization uses d3.v5 with SVG rendering, employing d3.scaleBand, d3.scaleLinear, d3.axisBottom, d3.axisLeft for histograms, and d3.event handlers for interactivity.

Ffloresh

76% match