Toastbroad

@Toastbroad·3 public vizzes

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.

Apr 20, 2022

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.

Apr 20, 2022

Loading thumbnail…

fresh block

Six paragraphs of text render as a static list, each showing a sorted number from the inline array [24, 98, 115, 916, 23, 42] with the message “I’m number d!”. The visualization uses d3.js v4’s selection and data-join pattern: `d3.select("body").selectAll("p").data(...).enter().append("p")`. The array is sorted ascending before binding, so the paragraphs appear in numerical order. The code also adds a click event listener to the document that logs “click” to the console, but no visual response occurs.

Jun 3, 2017