Skip to main content
SimilarExport ZIP
100%

Event Sequences with Map and Histogram Overview

✓ Published0🌍 Public
Ffloresh
Last edited Feb 8, 2019
Created on Jan 25, 2019

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.

AI-generated description
MIT Licensed

Similar vizzes

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
83% 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
82% 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
81% 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
81% 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
80% 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
76% 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
76% 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
75% match