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 14, 2022

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.

AI-generated description

Similar vizzes

Loading thumbnail…

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

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.

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

Untitled

This interactive stacked bar chart displays unemployment data across U.S. states for different years, with a dropdown menu to select the year and a checkbox to toggle sorting by total value. The visualization uses D3 v5 to render SVG elements with smooth transitions between states, animating bar positions and heights over 750 milliseconds. Data is loaded from a CSV file, and the chart employs d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal to assign category colors. Stacked segments are created using d3.stack, with labels showing each state's total.

Yyc4004
54% match
Loading thumbnail…

Industry Employment Visualization

This interactive visualization shows the distribution of employment across 20 industry sectors for all US states, with horizontal bars representing each state's share of its workforce in each industry. Users can filter by year (1990 and 2016) and highlight four geographic regions via buttons, while hovering reveals state names. The chart uses d3.v5 with SVG rendering, d3.scaleOrdinal for regional colors, and animated transitions when switching datasets. Data comes from the Bureau of Labor Statistics’ Quarterly Census of Employment and Wages.

TThanaporn-sk
53% match
Loading thumbnail…

Pie Chart unemployment across various U.S. states.

This interactive pie chart visualizes the proportion of unemployment across up to 30 U.S. states, with each slice sized by the state’s total unemployment percentage. Hovering a slice expands it and shows a tooltip with the state name, value, and percentage, while clicking a slice displays the selected state below the chart. A legend filters data by region on click and highlights matching slices on hover. Built with D3.js, it uses `pie`, `arc`, `scaleOrdinal`, and `transition.attrTween`-style animations, pulling data from the `@oabouhas/unemployment` package.

Oomniaabouhassan@gmail.com
53% match
Loading thumbnail…

ICE - 7

This interactive scatter plot animates through different attributes of a college dataset, cycling the x-axis among Unemployment_rate, Employed_full_time_year_round, Unemployed, and Employed every 1.9 seconds while the y-axis remains fixed on Employed. Each point represents a major category, colored distinctly by its category, with a reusable scatterPlot module built on D3's scaleLinear, axisLeft, and axisBottom. The SVG visualization, rendered on a wheat background, uses the Share Tech font and updates labels dynamically to reflect the current x-axis metric.

HHarishma Nallala
52% match