Skip to main content
SimilarExport ZIP
100%

Aggregated Event Sequences with GUI Histograms

✓ Published1🌍 Public
Ffloresh
Last edited Sep 23, 2019
Created on Mar 12, 2019

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.

AI-generated description
MIT Licensed

Similar vizzes

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
91% 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
89% 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
85% 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
83% match
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
82% 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
82% 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
81% 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
81% match