sequence explorer

100%

sequence explorer - highlight a vertical path

✓ Published0🌍 Public

Last edited Dec 18, 2017

Created on Nov 8, 2016

This example demonstrates how to highlight a vertical path within a sequence explorer visualization, using the D3.js v4 library and the sequence-explorer plugin. It shows a Sankey-style diagram where colored flows and nodes trace a specific sequence—home, account, search, product—through the chart, with the highlighted path emphasized in orange. The data, loaded from a CSV file, contains visit sequences mapped to the required format. The highlight is achieved through CSS styling that targets specific path and rect classes, making the selected vertical route stand out clearly against the rest of the visualization.

AI-generated description

This example shows how display a vertical path and how to highlight this path with css styling.

More examples

Link to sequence explorer on github.

The data is obtained (and mapped to the required format) from the sunburst visualization example from Kerry Rodden.

It is easy to see the pros and cons of these two visualizations for this specific data set.

Similar vizzes

Loading thumbnail…

sequence explorer - highlight path

This example demonstrates how to highlight a specific user navigation path within a sequence explorer visualization, a Sankey-style diagram showing event flows. The visualization displays sequences of events (home, product, search, account, other) as ribbons and nodes, with the highlighted path traced in orange across the chart. The implementation uses the sequence-explorer library built on D3 v4, loading data from a CSV file and customizing the event order and axis label via method chaining. CSS rules style the highlighted path by targeting specific SVG path and rect elements, applying an orange fill and stroke with partial opacity to emphasize the selected flow.

EEE2dev

93% match

Loading thumbnail…

sequence explorer - single chart

The sequence explorer example visualizes user navigation flows as a Sankey-style diagram, mapping event sequences from a CSV file where each row records a transition between steps (e.g., "home" to "product"). It shows the aggregated volume of paths, with the y-axis ordered by event type and the x-axis representing sequence position. The chart is built using D3 v4 and the custom `sequenceExplorer.chart` API, which loads the data from `sc.csv` and applies configuration methods like `.eventOrder()` to reorder categories and `.sequenceName()` to customize tooltip labels. Rendering relies on D3’s selection and data-join mechanics, with the chart appended to a div via `.call(myChart)`. The data originates from Kerry Rodden’s sunburst example, highlighting comparative strengths of sequential flow vs. hierarchical layouts.

EEE2dev

81% match

Loading thumbnail…

Sequence explorer - visitor flow

This example shows a sequence explorer visualization that tracks visitor flow through events, using a Sankey-style diagram where nodes represent event steps and paths represent transitions between them. It demonstrates how to include free-floating nodes by adding an invisible dummy event, here named a space, which appears as a hidden node on the y-axis. The code uses the D3 v4 library with a custom `sequenceExplorer` plugin, loading data from a JSON file where each link specifies source and target event positions. The `eventOrder` API arranges the visible events (C, B, A) while the dummy event is pushed to the top, and CSS rules hide its nodes and paths. A dummy path with a large value ensures proportional scaling of all other nodes and paths.

EEE2dev

80% match

Loading thumbnail…

sequence explorer - with events not connected to the next one

This example shows a sequence explorer visualization where individual events are displayed as horizontal bands that do not connect from one step to the next, emphasizing discrete stages rather than continuous flow. The chart uses D3 v4 and the custom `sequence-explorer.v20.min.js` library, with data loaded from embedded CSV-like text blocks. It renders nodes as rectangles and paths with varying stroke widths based on frequency values, while the CSS rule `path.lsx1.ltx1 { stroke: none; }` hides all vertical segments, making only horizontal transitions visible. The code initializes the chart via `sequenceExplorer.chart().showNodeLabels(false)` and binds it to a `div` using `.call()`, with a sample dataset containing frequencies for drinks like beer and cider across three time steps.

EEE2dev

80% match

Loading thumbnail…

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.

EEE2dev

80% match

Loading thumbnail…

sequence explorer - no web server

This example uses the D3.js v4 library to create an interactive sequence explorer diagram directly from inline CSV data, requiring no web server. The visualization maps multi-step flows across categories (weather, health, sports, travel) and stages (1st through 4th), with ribbons sized by frequency values. The data is embedded in a `<pre>` tag, and the custom `sequence-explorer.v20.min.js` library renders the Sankey-style sequence chart, while the accompanying CSS handles layout and styling. The example demonstrates how to load and visualize hierarchical sequence data with D3 v4 entirely from a local HTML file, making it ideal for offline or standalone use.

EEE2dev

77% match

Loading thumbnail…

Sequence explorer - single chart (with JSON file)

This example demonstrates a single-chart sequence explorer visualization built with D3 v4, loaded from an external JSON file. The chart visualizes sequential event flows, with events ordered along the y-axis using the `eventOrder` method (home, product, search, account, other) and the x-axis labeled as "visit" via the `sequenceName` setting. The JSON data defines a directed graph of transitions between events, with values representing the volume of each step. The visualization is instantiated by calling `sequenceExplorer.chart("sequence1.json")` and rendered into a div in the body. This approach highlights the sequence explorer's ability to depict multi-step event pathways, similar to a sunburst but in a linear, flow-based layout, making it easy to compare pros and cons against alternative visualization methods for the same dataset. The data is derived from Kerry Rodden's sunburst example, and the chart is configured to reorder event categories on the y-axis and customize tooltip labels. The single chart version keeps all event sequences in one view, useful for tracking navigation flows or funnel analysis.This example demonstrates how to create a **single-chart sequence explorer** using D3 v4 and data loaded from an external JSON file. The chart visualizes sequential categorical data—here, sequences of website events such as "home", "product", "search", and "account"—as a Sankey-style flow diagram. Each row represents a step in the sequence, and the width of the links corresponds to the number of visits, making it easy to identify common paths and drop-off points. The code shows how to initialize the chart with a JSON file, customize the event order on the y-axis, and rename the x-axis for tooltips. The data is derived from Kerry Rodden’s sunburst example, allowing for a direct comparison between the two visualization approaches for the same dataset.

EEE2dev

77% match

Loading thumbnail…

Visualizing meetup attendence with sequence explorer

This example uses a sequence explorer to visualize meetup attendance across three consecutive events. The sankey-style diagram, built with D3 v4, tracks member cohorts through states like "joined meetup group," "did not respond," and "responded and showed up" across time. Each flow encodes the number of members transitioning between categories for each meetup, with red highlighting for the "responded but did not show up" category. The sequence explorer layout emphasizes temporal flow and category transitions, making it easy to see how attendee behavior evolves over multiple meetups.

EEE2dev

73% match