Skip to main content
SimilarExport ZIP
100%

Drift Inspector

✓ Published1🌍 Public
NNikki-gea
Last edited Sep 6, 2020
Created on Sep 5, 2020
Forked from Cars Report

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.

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
92% match
Loading thumbnail…

Drift Inspector

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.

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
66% 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
58% match
Loading thumbnail…

Project Report

This example renders a text-based project report from JSON data about project activities. It uses JavaScript promises and DOM manipulation to load the data and display a filtered list of activities with durations of 80 days or less. The code filters activities, formats each one with its ID, name, duration, and critical status, then inserts the result into an HTML page styled with Ubuntu font. The visualization demonstrates a simple data-processing pipeline using standard JavaScript APIs rather than specialized visualization libraries.

RRubens
57% 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
56% 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
55% match
Loading thumbnail…

Cars Report

This example demonstrates a text-based report generated from a small in-memory dataset of cars, filtering and formatting entries based on price. It shows how JavaScript modules and promises structure asynchronous data loading and report generation. The page initially displays “Loading…” and then uses `getCars()` with a simulated delay to fetch parsed JSON data, followed by `generateReport()` and `formatCar` to create formatted lines. D3 v6 is included but not used, while the core logic relies on native array methods like `filter`, `map`, and `join`. The final output appears as a large custom-styled `<pre>` element.

IImmaculata-Mary Muoghalu
55% match