-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
145 lines (145 loc) · 6.08 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Wrappable Vis</title>
<script src="wrapchart.js"></script>
<style>
h1,h2,body {
font-family: Helvetica, Arial, sans-serif;
}
#content {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="content">
<h1>Charts That Wrap Around</h1>
<p> Drag your mouse (or finger on a touch screen) over the charts below to see how they wrap around.
Source code on <a href="https://github.com/tgdwyer/WrappingChart">github</a>.
</p>
<h2>Simple horizontal wrapping - Geographic Projection</h2>
<div id="hobodyer-wrap"></div>
<p>
An <a href="https://en.wikipedia.org/wiki/Hobo%E2%80%93Dyer_projection">Hoby-Dyer Projection</a>
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 <code>wrapChart</code> with a <code>"horizontal"</code> pan constraint to limit the panning.
</p>
<script>
wrapChart("hobodyer-wrap",
"images/hobodyer.jpg",
null,
null,
null,
null,
"horizontal")
</script>
<br>
<h2>Simple horizontal Wrapping Chart, left and bottom axes</h2>
<div id="simpleHorizontalWrap"></div>
<p>
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 <code>wrapChart</code> with a <code>"horizontal"</code> pan constraint to limit the panning.
</p>
<script>
wrapChart("simpleHorizontalWrap",
"images/avgrainfall_chart.png",
null,
"images/avgrainfall_horizontalaxis.png",
"images/avgrainfall_verticalaxis.png",
null,
"horizontal")
</script>
<br>
<h2>Wrappable chart with all axes labels</h2>
<div id="unconstrainedWrap"></div>
<p>
Average traffic volume data at <a href="https://www.rms.nsw.gov.au/about/corporate-publications/statistics/traffic-volumes/aadt-map/index.html#/?z=12&id=100001&tb=0">Cambridge Street, NSW</a> from 2011 to 2020. By hour (horizontal) and day (vertical).
</p>
<p>
We specify images for top, bottom, left and right axes and no pan constriant.
</p>
<script>
wrapChart("unconstrainedWrap",
"images/wrappablenswtraffic.png",
"images/wrappablenswtraffic-xaxis-top.png",
"images/wrappablenswtraffic-xaxis.png",
"images/wrappablenswtraffic-yaxis.PNG",
"images/wrappablenswtraffic-yaxis.PNG")
</script>
<br>
<h2>Vertical pan constraint</h2>
<div id="verticalSankey"></div>
<p>
A cyclical Sankey diagram, laid-out on a cyclinder so that the cycle wraps around.
The original use of Sankey diagrams was to show energy transfer in engines. Such systems often have cycles.
The diagram above opens up the cycle so energy transfer direction is always downwards.
<a href="https://www.sciencedirect.com/science/article/pii/S1876610217305726">Thermodynamic analysis of water injection in a micro gas turbine</a>
</p>
<script>
wrapChart("verticalSankey",
"images/verticalsankeycycle.png",
null,
null,
null,
null,
"vertical")
</script>
<br>
<h2>Diagonal pan constraint</h2>
<div id="symmetricMatrix"></div>
<p>
We constraint panning on a symmetric matrix to <code>"diagonal"</code> because otherwise we lose the symmetry and get lost. Wrapping helps us see that the ordering of the clusters is rather arbitrary.
</p>
<p>
From <a href="https://bost.ocks.org/mike/miserables/">Les Misérables Co-occurrence Matrix </a>
</p>
<script>
wrapChart("symmetricMatrix",
"images/lesmismatrix.png",
"images/lesmismatrix-xaxis.png",
null,
"images/lesmismatrix-yaxis.png",
null,
"diagonal")
</script>
<br>
<h2>Anti-diagonal pan constraint</h2>
<table>
<tr>
<td style="vertical-align:middle;"> <img src="images/rockPaperScissorsLizardSpock-opponentschoice.png" height="390px"></img>
</td>
<td>
<div id="rockPaperScissorsLizardSpock"></div></td>
<td style="font-size: 32pt; text-align: center;"> Your Outcome: <br><img width="200px" src="images/rockPaperScissorsLizardSpock-key.png"></img></td>
</tr>
<tr>
<td></td>
<td style="align-content: center;"> <img src="images/rockPaperScissorsLizardSpock-yourchoice.png" width="390px"></img>
</td>
<td></td>
</tr>
</table>
<p>A directed graph with the special self edges (the draws) mapped to the anti-diagonal. An <code>"antidiagonal"</code> pan constraint keeps those draws where we can easily track them.</p>
<p>Adapted from <a href="https://steemit.com/programming/@dkmathstats/a-rock-paper-scissors-lizard-spock-chart-in-r">A Rock, Paper, Scissors, Lizard, Spock Chart In R</a>.</p>
<p>Images <a href="https://upload.wikimedia.org/wikipedia/commons/8/89/Rock_paper_scissors_lizard_spock.svg">Wikimedia: Creative Commons</a></p>
<script>
wrapChart("rockPaperScissorsLizardSpock",
"images/rockPaperScissorsLizardSpock.png",
"images/rockPaperScissorsLizardSpock-xaxis-top.png",
"images/rockPaperScissorsLizardSpock-xaxis.png",
"images/rockPaperScissorsLizardSpock-yaxis.png",
"images/rockPaperScissorsLizardSpock-yaxis-right.png",
"antidiagonal")
</script>
</div>
</body>
</html>