Skip to main content
SimilarExport ZIP
100%

Aggregated Event Sequences with Attribute Histograms

✓ Published1🌍 Public
Ffloresh
Last edited Mar 26, 2019
Created on Mar 11, 2019

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.

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
90% 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
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
87% 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
84% 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
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
78% 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
78% 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
77% match