Design and implementation
- Using the javascript library d3.js
- Show overview first with small multiples
- Global and local scaling
- Display additional node infos
- Vertical paths
- Horizontal and vertical views
- Particle flows
- More to find here
Thanks to the excellent effort Mike Bostock has put in to create a visualization library which is open source, incredibly powerful and comes with so many examples and so much documentation, it just is the obvious choice for implementing modern visualizations.
The starting point of the exploration can be a single sankey. But often it makes sense to create several related sankey charts, each differing by some aspect. For the latter case, the small multiples view offers an overview which serves as an anchor tying all sankey charts together. They help keeping the context when switching from one sankey to another while already showing some high level global patterns.
When different sankey charts are explored with small multiples as the entry point, there are different scales revealing different information. On the one hand, a global scale - relating the frequency of all sankey charts to each other - provides a meaningful view to compare the different charts with each other. On the other hand, when the user decides to explore a single sankey chart, the global scale might result in diminishing sizes - preventing the user to explore the properties of this sankey chart. Then it is useful to revert to a local scale where just the frequencies of this sankey chart are related to each other. While this feature is simple to implement, it turns out to be pretty useful in practice.
The frequency of events are depicted by the height of a rectangle. Often, it is useful to display different properties of these events to increase the exploration space. E.g. if the height of the rectangles relate to the number of people, users, customers entering a certain event, then additional node infos could display different demographic breakdowns of the people. These node infos - representing subsets of the quantity - are visualized as an inner rectangle filling up the outer rectangle.
The choice of the sequence unit granularity has a substantial impact of the resulting visualization. Sometimes a fined-grained granularity (e.g. days) may lead to too many units whereas a coarse granularity (e.g. months) allows more events to happen within that time unit. Then the solution might be to choose the coarse granularity and connect event withing the same unit by vertical paths.
To quickly obtain accurate distributions both of events at the same time or of the same events over time, the user can click on the corresponding label on the x- or y-axis. For the labels on the y-axis, the percentages of the same event at each time point are displayed. If the user selects a label on the x-axis, the existing rectangles are transitioned into a stacked bar chart for that time point. In addition, the labels for each event are transitioned from the y-axis to the bar chart to improve readability. The label transitions consider label proximity to avoid overlap and running off the chart. The concept of the label transitions is explained here and here.
When you present some interesting patterns you found, you can css style the nodes and the paths. In addition, you can select specific paths and let the engine animate a particle flow along the selected paths. The implementation is based on this bl.ock from Elijah Meeks.
You can find more information about the implementation and design choices on github.