sequence explorer - first example

100%

sequence explorer - first example

✓ Published0🌍 Public

Last edited Jan 18, 2017

Created on Jan 18, 2017

This example uses a sequence explorer to visualize changes in categorical flows over time as an animated Sankey diagram. It shows how values move between categories (moods) across sequential years (2000–2003), with node heights scaled by flow magnitude. The chart is built with D3 v4, using the `d3.sankeySeq` extension to manually position nodes along the x-axis via `xScale` and `yScale`. Multiple Sankey diagrams are generated for data subsets (e.g., product type, age group) from a CSV file, with interactive node highlighting and tooltips.

AI-generated description

forked from <a href='http://bl.ocks.org/EE2dev/'>EE2dev</a>'s block: <a href='http://bl.ocks.org/EE2dev/b9a20ef36c2a3caf5d7b0374a2d677a7'>sequence explorer - first example</a>

mit Licensed

Similar vizzes

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

83% match

Loading thumbnail…

sequence explorer - small multiples

This example uses small multiples to compare state sequences across regions and age groups. Each panel shows a horizontal Sankey-style flow from source to target, with line thickness proportional to the value column. Transitions are encoded with color-coded ribbons linking categorical states (weather, sports, health, travel), and the small-multiple layout lets viewers scan differences in flow volume across the United States, India, Germany, and the United Kingdom, split by age bands. Built with D3 v4, it reads the CSV from a gist.

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 - 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 - 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

78% match

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

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

76% 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

76% match