Skip to main content
SimilarExport ZIP
100%

Process Change Visualization

✓ Published0🌍 Public
NNikki-gea
Last edited Aug 28, 2020
Created on Aug 27, 2020
Forked from Blank Canvas

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.

AI-generated description
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
68% match
Loading thumbnail…

Chandrakant Bharatkumar Thakkar

This example visualizes a multi-step process flow as a sequence of connected, color-coded circles arranged on a rectangular canvas. It shows nine distinct process stages, such as “Tech Spec Creation” and “Vendor Onboarding,” organized in a serpentine layout across multiple horizontal sections. The visualization uses D3.js v4 to generate SVG elements, with a custom `d3.arc` for curved connection paths and `d3.line` with a natural curve for the connectors between nodes. Each circle’s fill color reflects its phase (e.g., green, red, gray), and the layout adapts based on the number of process items, placing three activities per line. The chart renders in an HTML page with inline CSS for positioning and includes a Stack Overflow flair image as an external link.

CChandrakantThakkarDigiCorp
68% match
Loading thumbnail…

Fork of Main Viz | Protype Dev

This visualization presents a quadrant-based radar chart focused on risk areas related to health and wellbeing, with interactive SVG circles representing data points. The central chart uses D3 v5's arc generation and scaleLinear functions to create concentric ring structures with color-coded gradients. Data is loaded from an external CSV file containing car production statistics, while additional datapoints.json provides text labels and quadrant assignments. The interface includes a slider for pointer navigation and a bubble chart for supplementary display, all rendered through D3's SVG animation capabilities.

Tt0miwa22
67% match
Loading thumbnail…

Movements/Actions

This example demonstrates interactive SVG animations for exploring user-driven movements and actions. Users can click and hover over rectangular elements to trigger color changes and animated transitions, such as moving a rectangle across the canvas or modifying bar heights and positions. The visualization uses D3 v5 with transitions, event handling, and a JSON data file containing country rankings over time. The code employs `d3.transition`, `d3.easeLinear`, and D3's data-binding methods to update elements dynamically.

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

Changing data

An interactive chart uses D3 to display circles representing two datasets. Clicking a button switches between datasets, triggering D3 transitions that animate the circles to their new positions and radii. The SVG rendering uses D3’s selection, data joins, enter/exit, and transition API to smoothly update the visualization, with a text label that updates accordingly.

SSerhii Ponomarov
66% match
Loading thumbnail…

Fork of Fork of Main Viz | Protype Dev

This example presents a prototype visualization with a central radar chart surrounded by quadrant-based annotations and interactive elements. Using D3.js v5, it renders SVG graphics with linear scales for coordinate mapping, arc generators for circular segments, and custom gradient definitions to color each quadrant. The data is loaded from a CSV file of car productions, while the layout incorporates multiple side panels for supplementary content. The visualization demonstrates advanced SVG manipulation, including axis removal, custom path generation, and gradient styling through D3's selection and data-binding methods.

EErik L
66% match
Loading thumbnail…

preprocess

This interactive D3.js dashboard lets users explore esports performance data through dropdown menus that switch the dataset displayed, comparing agents, maps, and players. It shows scatter plots of selected metrics (e.g., K/D ratio vs. pick rate) and bar charts, with animated transitions on data changes. The example uses D3 v7 APIs like `scaleLinear`, `axisBottom`, and `transition().duration()`, along with local ES6 modules for reusable plotting and dropdown components. Data comes from CSV files loaded via `d3.csv`.

Ddaniel
66% match