Skip to main content
100%

Generated by XState Viz: https://xstate.js.org/viz

✓ Published0🌍 Public
TToastbroad
Last edited Apr 20, 2022
Created on Apr 19, 2022

This visualization shows a state machine for a personalized insurance recommendation flow, branching based on a user’s employment status and held insurance policies. It uses XState’s `Machine` API to define nested states such as `isEmployed`, `hasBU`, and `isFullyInsured`, with conditional transitions via `cond` guards that check the `context` object for values like `employmentStatus` and the `insurances` array. The example is rendered as an interactive diagram by XState Viz, allowing viewers to step through the logic by sending `NEXT` events. The machine’s final states—like `hasAV`, `hasLiability`, or `isFullyInsured`—represent the resulting recommendation categories.

AI-generated description

Similar vizzes

Loading thumbnail…

Generated by XState Viz: https://xstate.js.org/viz

This example uses XState to model a recommendation flow based on employment status and insurance coverage. A `Machine` defines states for employed and unemployed users, each with nested sub-states for insurance checks. The `context` stores initial data (`employmentStatus` and `insurances`), while guard functions like `isEmployed`, `isUnemployed`, `isFullyInsured`, and `isUninsured` evaluate conditions on `NEXT` events to transition between states. The visualization, generated by XState Viz, renders the statechart with transitions and final states.

TToastbroad
92% match
Loading thumbnail…

Generated by XState Viz: https://xstate.js.org/viz

This visualization shows a finite-state machine for a workstation’s connection and request lifecycle, modeled with XState’s `Machine` API. It begins in a `start` state, transitions through `connection` and `request`, and terminates in a `response` state where various success, cancellation, or error events lead to final states. The code assigns context values like `responseStatus`, `pedId`, and `approvalCode` using `assign` actions, and defines transitions for events such as `CONNECTING`, `PENDING`, `SUCCESS`, and `TIMED_OUT`. The machine is rendered by XState Viz, which visualizes states and transitions from the provided machine definition.

TTimeBandit
68% match
Loading thumbnail…

Generated by XState Viz: https://xstate.js.org/viz

This example shows a finite-state machine for fetching data, with four states—idle, loading, success, and failure—and transitions triggered by FETCH, RESOLVE, REJECT, and RETRY events. The machine uses XState’s `Machine`, `assign`, and `interpret` APIs, with a `context` object tracking retry attempts. It demonstrates how statecharts handle asynchronous flows, incrementing a retry counter on each failed attempt before returning to loading. The visualization is generated by XState Viz, which renders the machine’s structure and event-driven transitions from the provided machine definition.

HHerbCaudill
64% match
Loading thumbnail…

Industry Employment Visualization

This interactive visualization shows the distribution of employment across industries in each U.S. state, using data from the Bureau of Labor Statistics. It uses a bar chart format where each row represents an industry and each bar a state, positioned by the industry’s share of that state’s workforce. The chart is rendered in SVG, with buttons to switch between years (1990 and 2016) and regions (Northeast, Midwest, South, West), highlighting patterns in manufacturing, health care, and construction. The code leverages the D3.js v5 library, specifically `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisTop` to build the axes and grid, with tooltips on hover. Data is loaded from a CSV file and processed via a custom row converter.

AAjayyy
54% match
Loading thumbnail…

Gist ef99831492181718c41fd4331d226a74

This example shows the control flow of an AWS Step Functions state machine that checks a date before deciding whether to update a Fantasy Premier League team. A chain of AWS Lambda functions retrieves player odds and details, calculates transfers, and posts updates to the team. The visualization uses the state machine’s declarative JSON definition to map states and transitions, including a choice point that branches to a success state or continues to further tasks. It relies on the Step Functions API for orchestration, not on a separate plotting library.

CConorAspell
54% match
Loading thumbnail…

Gist 4523b841021e154daebbf9c9bccaae7b

This visualization is a linear flow diagram of an AWS Step Functions state machine that orchestrates a Fantasy Premier League update. It shows three sequential tasks—DateChecker, OddsGetter, and UpdateFPLTeam—each represented as a labeled node with a resource ARN. The diagram uses rectangular and rounded-rectangle shapes connected by arrows to indicate execution order, with the final node marked as terminal. The underlying JSON definition (visible in the accompanying file) defines the state transitions, while the rendered view likely employs a graph layout library such as D3.js or a similar tool to position nodes and edges. The data source is the embedded stateMachine.txt file, which exposes the exact Lambda function names and control flow.

CConorAspell
54% match
Loading thumbnail…

VizHub Runtime State Machine Diagram

This example visualizes the state machine of the VizHub Runtime Environment as an interactive Mermaid diagram, illustrating four states—IDLE, ENQUEUED, PENDING_CLEAN, and PENDING_DIRTY—and their transitions triggered by code-change events and build completion. Built with the Mermaid library (mermaid.render), it uses a stateDiagram-v2 definition embedded directly in an HTML page, with custom CSS and themeVariables for styling nodes, edges, and gray note boxes. The diagram animates through state transitions on load, conveying the runtime’s logic for handling concurrent code changes during builds.

CCurran Kelleher
53% match
Loading thumbnail…

Gist ed5c09d69d4e5d65c6ec5faafaea7e08

This example shows an AWS Step Functions state machine that automates a two-step data pipeline for controlling Fantasy Premier League updates. The workflow first invokes an `oddsGetter` Lambda function to fetch betting odds, then passes the result to a `storeFPLData` Lambda function, which persists the data and ends the process. The visualization uses the Step Functions JSON state machine definition to render the sequential task flow, with explicit `Resource` ARNs linking to the Lambda functions. The graph displays the `StartAt` and `End` states, making the linear execution path and the service integrations clear without showing runtime behavior or intermediate data handling.

CConorAspell
52% match