cursors

tgdwyer · Apr 13, 2020 · 77e215e · 77e215e
1 parent 6d728f2
commit 77e215e
Show file tree

Hide file tree

Showing 13 changed files with 98 additions and 43 deletions.
diff --git a/images/avgrainfall_chart.png b/images/avgrainfall_chart.png
diff --git a/images/avgrainfall_horizontalaxis.png b/images/avgrainfall_horizontalaxis.png
diff --git a/images/avgrainfall_verticalaxis.png b/images/avgrainfall_verticalaxis.png
diff --git a/images/lesMisMatrix-xaxis.png b/images/lesMisMatrix-xaxis.png
diff --git a/images/lesMisMatrix-yaxis.png b/images/lesMisMatrix-yaxis.png
diff --git a/images/lesMisMatrix.png b/images/lesMisMatrix.png
diff --git a/images/rockPaperScissorsLizardSpock-key.jpg b/images/rockPaperScissorsLizardSpock-key.jpg
diff --git a/images/rockPaperScissorsLizardSpock-opponentschoice.png b/images/rockPaperScissorsLizardSpock-opponentschoice.png
diff --git a/images/rockPaperScissorsLizardSpock-yourchoice.png b/images/rockPaperScissorsLizardSpock-yourchoice.png
diff --git a/index.html b/index.html
@@ -7,70 +7,111 @@
     <title>Wrappable Vis</title>
     <script src="wrapchart.js"></script>
 <style>
-h1 {
+h1,h2,body {
     font-family: Helvetica, Arial, sans-serif;
 }
 </style>
 </head>
 <body>
-    <h1>Wrappable chart with all axes labels:</h1> 
-    <div id="ChartDiv"></div>
-    <br>
-    <h1>Wrappable chart with left and bottom axes only:</h1> 
-    <div id="ChartDiv2"></div>
-    <br>
-    <h1>Horizontal pan constraint:</h1> 
-    <div id="ChartDiv3"></div>
-    <br>
-    <h1>Vertical pan constraint:</h1> 
-    <div id="ChartDiv4"></div>
-    <br>
-    <h1>Diagonal pan constraint:</h1> 
-    <div id="ChartDiv5"></div>
+    <h1>Charts That Wrap Around</h1>
+    <h2>Simple horizontal wrapping, 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>
-    <h1>Anit-diagonal pan constraint:</h1> 
-    <div id="ChartDiv6"></div>
+    <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>
-        chart("ChartDiv",
+        wrapChart("unconstrainedWrap",
             "images/wrappablenswtraffic.png",
             "images/wrappablenswtraffic-xaxis-top.png",
             "images/wrappablenswtraffic-xaxis.png",
             "images/wrappablenswtraffic-yaxis.PNG",
             "images/wrappablenswtraffic-yaxis.PNG")
-        chart("ChartDiv2",
-            "images/wrappablenswtraffic.png",
-            null,
-            "images/wrappablenswtraffic-xaxis.png",
-            "images/wrappablenswtraffic-yaxis.PNG",
-            null)
-        chart("ChartDiv3",
-            "images/sankeycycle.png",
-            null,
-            null,
-            null,
-            null,
-            "horizontal")    
-        chart("ChartDiv4",
+    </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.
+    <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")         
-        chart("ChartDiv5",
-            "images/lesMisMatrix.png",
-            "images/lesMisMatrix-xaxis.png",
+            "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",
+            "images/lesmismatrix-yaxis.png",
             null,
-            "diagonal")       
-        chart("ChartDiv6",
+            "diagonal")   
+    </script>
+    <br>
+    <h2>Anti-diagonal pan constraint</h2> 
+    <table>
+    <tr>
+    <td> <div style="writing-mode: vertical-lr;font-size: 24pt;transform: rotate(180deg);">
+        Opponent's Choice</div>
+        <!-- <img src="images/rockPaperScissorsLizardSpock-opponentschoice.png"></img> -->
+    </td>
+    <td><div id="rockPaperScissorsLizardSpock"></div></td>
+    <td style="font-size: 24pt; text-align: center;"> &nbsp;&nbsp;&nbsp;&nbsp;Your Outcome: <br><img src="images/rockPaperScissorsLizardSpock-key.jpg"></img></td>
+    </tr>
+    <tr>
+    <td></td>
+    <td><div style="font-size: 24pt; text-align: center;">
+        Your Choice</div>
+        <!-- <img src="images/rockPaperScissorsLizardSpock-yourchoice.png"></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> 
+    <script>
+        wrapChart("rockPaperScissorsLizardSpock",
             "images/rockPaperScissorsLizardSpock.jpg",
             null,
             "images/rockPaperScissorsLizardSpock-xaxis.jpg",
             "images/rockPaperScissorsLizardSpock-yaxis.jpg",
             null,
-            "antidiagonal")                
+            "antidiagonal")   
     </script>
 </body>
 </html>
diff --git a/wrapchart.js b/wrapchart.js
diff --git a/wrapchart.js.map b/wrapchart.js.map
diff --git a/wrapchart.ts b/wrapchart.ts
@@ -1,5 +1,5 @@
 type Constraint = "horizontal" | "vertical" | "diagonal" | "antidiagonal"
-async function chart(
+async function wrapChart(
     targetElementSelector:string,
     bodyImageURL: string,
     xAxisTopImageURL: string|null,
@@ -17,6 +17,13 @@ async function chart(
         constructor(imageSrc: string|null, public width: number, public height: number, public horizontal: boolean, public vertical: boolean) {
             this.svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
             this.svg.style.position = 'absolute';
+            this.svg.style.cursor = horizontal && !vertical ? 'ew-resize' 
+                                  : vertical && !horizontal ? 'ns-resize' 
+                                  : panConstraint == 'horizontal' ? 'ew-resize' 
+                                  : panConstraint == 'vertical' ? 'ns-resize' 
+                                  : panConstraint == 'diagonal' ? 'nwse-resize' 
+                                  : panConstraint == 'antidiagonal' ? 'nesw-resize' 
+                                  : 'all-scroll';
             this.svg.setAttribute('viewBox',`0 0 ${width} ${height}`)
             this.svg.setAttribute('width',String(width))
             this.svg.setAttribute('height',String(height))