Drift Inspector

100%

Drift Inspector

✓ Published0🌍 Public

Last edited Sep 27, 2020

Created on Sep 21, 2020

Drift Inspector visualizes event log traces to identify process deviations. It displays a scrollable list of detected drifts on the left, each showing a trace’s start and end timestamps, while the right panel reveals detailed change information, including the activity sequence and duration, upon clicking a drift. The example demonstrates JavaScript object and array manipulation by fetching trace data from a `traces.json` file using the Fetch API and rendering results with jQuery event handlers and DOM updates.

AI-generated description

An example tutorial of how to use JavaScript objects, arrays, and modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Drift Inspector

Drift Inspector visualizes process drift by listing event traces and their activity sequences, flagging those with fewer than ten activities as potential deviations. It shows trace metadata such as timestamps, durations, and activity order, and reveals the expected process rules upon selection. The interface uses jQuery for click handling and DOM updates, with a custom JavaScript fetch call to load trace data from a JSON file, displaying results across three styled panels.

NNikki-gea

93% match

Loading thumbnail…

Drift Inspector

Drift Inspector displays a text-based report of process traces, highlighting deviations in activity sequences and timestamps. The visualization filters incoming data to show only traces with fewer than eleven activities, then formats each entry with a sequential "Drift" label and the trace's start and end times. It uses JavaScript modules to load JSON data via `getData`, transform it with `formatData`, and generate the final report with `generateReport`. The interface presents the output in a left-aligned panel, with hover effects changing the text color to blue.

NNikki-gea

90% match

Loading thumbnail…

Process Change Visualization

This interactive application lets users explore process changes through a central visualization and two specialized inspectors. The main visualization and the activity and drift inspectors are accessed via prominent buttons on the landing page, with the overall layout styled through a fixed-position CSS. Built with D3.js (v5) and rendered as an SVG, the application's core `index.js` script manipulates the SVG canvas by setting its dimensions and appending a rounded rectangle. The interface provides navigation but does not reveal the underlying data or the specific visual encodings of the process changes themselves.

NNikki-gea

64% match

Loading thumbnail…

Main visualization

This visualization displays traces over time as a vertical timeline, with each trace’s duration represented by a black horizontal bar positioned by start time. Background rectangles color-code traces by sequence length, while clicking a bar opens a popup showing trace details. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` to render SVG rectangles, with axes and popup interactivity driven by `axisBottom`, `axisLeft`, and DOM event handlers. Data comes from a CSV file containing trace numbers, start/end times, and activity sequences.

NNikki-gea

56% match

Loading thumbnail…

https://jsfiddle.net/developit/q435c6mL/

This example implements a live DOM audit logger that intercepts and records modifications to page elements as they occur. It demonstrates real-time logging of property changes (textContent, innerHTML, className) and node insertions/removals, displaying a formatted trail of each operation with previous and current values. The visualization uses the DOMAuditLogger library, which patches native Element and Node prototype methods to capture events, and renders the audit entries in a scrolling view with color-coded message types.

JJastor11

56% match

Loading thumbnail…

Main visualization

This visualization displays trace data from a manufacturing process as a time-series chart. Black horizontal bars represent individual trace durations, while colored background rectangles indicate the trace’s activity sequence length, using red for longer sequences and blue for shorter ones. Clicking a bar reveals a popup with trace details. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`, rendering SVG elements from a CSV file.

NNikki-gea

54% match

Loading thumbnail…

Main visualization

This visualization shows trace logs from a system, plotting each trace's duration on the y-axis against its start time on the x-axis. It uses a time-based x-scale and a linear y-scale to position black bars representing individual traces, which are overlaid on colored background rectangles that cluster traces based on the length of their activity sequences. Clicking a bar triggers a popup displaying the trace's number, start and end times, and duration. The implementation uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `csv`, and `select`, rendering directly to SVG.

NNikki-gea

54% match

Loading thumbnail…

Script using Intersection Observer API

This example demonstrates a scroll-tracking interaction that classifies entry and exit directions for target elements as the user moves up or down a page. It uses the browser’s Intersection Observer API within a D3.js selection loop to monitor each element’s vertical position and intersection ratio relative to the viewport. The script logs distinct states like “down enter” and “up leave” to the console, accounting for page-load initialization through a counter that defers logging until all observed elements have been registered. The visualization relies solely on DOM elements selected via the `.box` class, with no external dataset.

HHirosaji

54% match