| Cyclical Sankey | Unwrapped | Wrapped | |
|---|---|---|---|
 |
 |
||
Drag your mouse (or finger on a touch screen) over the charts below to see how they wrap around. Source code on github.
Mean rainfall over months of the year since records began.
Having January on the left and December on the right is completely arbitrary.
If we want to look at the summer months (December, January and February) together, we can pan them so the wrap is elsewhere in the year.
We call wrapChart with a "horizontal" pan constraint to limit the panning.
Average traffic volume data at NYC hourly car accidents from 2013 to 2016 by 24-hour.
We call wrapChart with a "horizontal" pan constraint to limit the panning.
Average traffic volume data at NYC hourly car accidents from 2013 to 2016 by 24-hour. The polar chart can be seen as a cylindrical top-projection radial view. By rotating a user can pan to centre and focus on different section of the temporal data.
An Hoby-Dyer Projection
of the world map.
Only horizontal panning makes sense - panning vertically would need to invert the map to keep adjacencies of continents on the earths surface correct.
We call wrapChart with a "horizontal" pan constraint to limit the panning.
The transport map above shows a city loop interconnecting the red and green lines. Such map often shows a cycle interconnecting individual lines.
The map below shows that a cycle wraps around horizontally when laid-out on a cylinder.
If we want to look at the remaining stations of the red line before a transit, we can pan them so the red line starts from the left and wraps around.
Adapted from Metro of Singapore
A 360 degree seamless panoramic view with the tower and river at the centre.
If we want to look at the land and trees together, we can pan them so the wrap is elsewhere in the river.
Adapted from 360 Degree Seamless Panoramic Photos
A cyclical Sankey diagram, laid-out on a cylinder so that the cycle wraps around. Thermodynamic analysis of water injection in a micro gas turbine
| Cyclical Sankey | Unwrapped | Wrapped | |
|---|---|---|---|
|
|
||
Average traffic volume data at Cambridge Street, NSW from 2011 to 2020. By hour (horizontal) and day (vertical).
We specify images for top, bottom, left and right axes and no pan constriant.
Average traffic volume data at NYC hourly car accidents from 2013 to 2016 by 24-hour (horizontal) and 7 days (vertical).
We specify images for top, bottom, left and right axes and no pan constriant.
Average Reddit submissions. By hour (horizontal) and day-of-week (vertical).
We specify images for bottom and left axes and no pan constriant.
We constraint panning on a symmetric matrix to "diagonal" because otherwise we lose the symmetry and get lost. Wrapping helps us see that the ordering of the clusters is rather arbitrary.
From Les Misérables Co-occurrence Matrix
Effects of diagonal panning on an torus-topology matrix.
From Visualize correlation matrix using correlogram
|
Your Outcome:  |
|
|
A directed graph with the special self edges (the draws) mapped to the anti-diagonal. An "antidiagonal" pan constraint keeps those draws where we can easily track them.
Adapted from A Rock, Paper, Scissors, Lizard, Spock Chart In R.
Images Wikimedia: Creative Commons
Wrappable graph on a torus with no pan constriant.
| Graph | Unwrapped | Wrapped | |
|---|---|---|---|
| 50 points |  |
|
|
| MDS | Unwrapped | Wrapped | |
|---|---|---|---|
| 50 points |  |
|
|
| 60 points |  |
|
|
| 70 points |  |
|
A MDS plot can be laid-out on a torus. This example shows a MDS plot based on the hepta data set. The 3-dimension attributes can be converted into a 2D similarity matrix between all pairs of nodes.
The diagrams in the left column show an unwrapped 2D MDS plot of 50-70 points, 7 classifications using a standard force-directed layout method.
The diagrams in the right column show the same plot laid-out on a torus.
Adapted from Benchmark data set from Fundamental Cluster Problem Suite (FCPS)
