Sequence explorer - visitor flow (2)
This example visualizes visitor flow through a sequence of events using a Sankey-like diagram, where nodes represent event steps and paths show transitions between them. It highlights specific paths with person icons and colors one node orange via CSS. The visualization uses the sequence-explorer library built on D3 v4, with APIs like `.nodePadding()`, `.particleShape("person")`, and `.correspondingEvents()` to control scaling, particle icons, and percentage calculations. Data is loaded from a JSON file defining node values and named paths, while tooltips show percentages of same-event sequences.
AI-generated descriptionSequence explorer
This example illustrates how to add nodes without paths.
forked from <a href='http://bl.ocks.org/EE2dev/'>EE2dev</a>'s block: <a href='http://bl.ocks.org/EE2dev/25d1162b7d30b443050adbc26598f54f'>Sequence explorer - visitor flow</a>
Changes to the forked version above:
to have a nice scaling of your nodes/paths, you can use sequenceExplorer.chart().nodePadding() instead of creating a dummy path from the event " " to the event " ".
the sequence elements are and should be strings not numbers.
colored one specific node with CSS
to refer to a meaningful denominator for the percentages, specify sequenceExplorer.chart().correspondingEvents([]) the related events. (in this case exclude the dummy events)
to add people icons flowing through certain paths, simply add the corresponding paths to the data with a name and call sequenceExplorer.chart().particleShape("person")
percentages are set to "%sameEvent". Change the percentage to the metric most useful for your application.
Link to sequence explorer on github.