Reorganize demos

PDBeurope · Apr 29, 2024 · 932dc53 · 932dc53
1 parent f48f5b4
commit 932dc53
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 37 deletions.
diff --git a/demo/demo1.html b/demo/demo1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <title>HeatmapComponent demo 1</title>
+  <script src="https://d3js.org/d3.v6.min.js"></script>
+  <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico">
+  <link rel="stylesheet" type="text/css" href="../build/heatmap-component.css" />
+  <script src="../build/heatmap-component.js"></script>
+</head>
+
+<body>
+  <!-- Your visualization will be placed here -->
+  <div id="app" style="width: 1000px; height: 300px; max-width: 95%; min-width: 400px; border: solid gainsboro 1px;">
+  </div>
+
+  <div id="xminindex">X</div>
+  <div id="xmaxindex" style="text-align: right;">X</div>
+  <div id="xmin">X</div>
+  <div id="xmax" style="text-align: right;">X</div>
+
+  <p style="margin-top: 30px;">
+    Use scroll to zoom, Shift+scroll (or horizontal scroll) to pan.
+  </p>
+  <div style="height: 100vh;"></div>
+
+  <script>
+    HeatmapComponent.demo1('app');
+  </script>
+</body>
+
+</html>
diff --git a/demo/demo2.html b/demo/demo2.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <title>HeatmapComponent demo 2</title>
+  <script src="https://d3js.org/d3.v6.min.js"></script>
+  <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico">
+  <link rel="stylesheet" type="text/css" href="../build/heatmap-component.css" />
+  <script src="../build/heatmap-component.js"></script>
+</head>
+
+<body>
+  <!-- Your visualization will be placed here -->
+  <div id="app" style="width: 1000px; height: 300px; max-width: 95%; min-width: 400px; border: solid gainsboro 1px;">
+  </div>
+
+  <p style="margin-top: 30px;">
+    Use scroll to zoom, Shift+scroll (or horizontal scroll) to pan.
+  </p>
+  <div style="height: 100vh;"></div>
+
+  <script>
+    HeatmapComponent.demo2('app');
+  </script>
+</body>
+
+</html>
diff --git a/demo/demo3.html b/demo/demo3.html
@@ -3,20 +3,23 @@
 
 <head>
   <meta charset="utf-8" />
-  <title>HeatmapComponent demo3</title>
+  <title>HeatmapComponent demo 3</title>
   <script src="https://d3js.org/d3.v6.min.js"></script>
   <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico">
   <link rel="stylesheet" type="text/css" href="../build/heatmap-component.css" />
   <script src="../build/heatmap-component.js"></script>
 </head>
 
 <body>
-  <!-- Your visualization will be placed here -->
   <h1>This demo creates the HeatmapComponent logo</h1>
   <div style="padding: 15px; background-color: white;">
+    <!-- Your visualization will be placed here -->
     <div id="app" style="width: 200px; aspect-ratio: 1; border: none;"></div>
   </div>
-  <script>HeatmapComponent.demo3('app');</script>
+
+  <script>
+    HeatmapComponent.demo3('app');
+  </script>
 </body>
 
 </html>
diff --git a/demo/index.html b/demo/index.html
@@ -3,27 +3,33 @@
 
 <head>
   <meta charset="utf-8" />
-  <title>HeatmapComponent demo</title>
+  <title>HeatmapComponent demos</title>
   <script src="https://d3js.org/d3.v6.min.js"></script>
   <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico">
   <link rel="stylesheet" type="text/css" href="../build/heatmap-component.css" />
   <script src="../build/heatmap-component.js"></script>
+  <style>
+    li {
+      margin-block: 8px;
+    }
+  </style>
 </head>
 
 <body>
-  <!-- Your visualization will be placed here -->
-  <div id="app" style="width: 1000px; height: 300px; max-width: 95%; min-width: 400px; border: solid gainsboro 1px;"></div>
-
-  <div id="xminindex">X</div>
-  <div id="xmaxindex" style="text-align: right;">X</div>
-  <div id="xmin">X</div>
-  <div id="xmax" style="text-align: right;">X</div>
+  <h1>HeatmapComponent demos</h1>
+
+  <ul>
+    <li>
+      <a href="demo1">Demo 1</a>
+    </li>
+    <li>
+      <a href="demo2">Demo 2</a> (big data)
+    </li>
+    <li>
+      <a href="demo3">Demo 3</a> (logo)
+    </li>
+  </ul>
 
-  <p style="margin-top: 30px;">
-    Use Ctrl+scroll to zoom, Shift+scroll to pan, horizontal scroll to pan.
-  </p>
-  <div style="height: 100vh;"></div>
-  <script>HeatmapComponent.demo2('app');</script>
 </body>
 
 </html>
diff --git a/src/heatmap-component/demo.ts b/src/heatmap-component/demo.ts
@@ -3,26 +3,8 @@ import { Heatmap } from './heatmap';
 import { formatDataItem } from './utils';
 
 
-export function demo(divElementOrId: HTMLDivElement | string) {
-    const hm = Heatmap.createDummy(2e5, 20); // Heatmap<number, number, number>
-    hm.setVisualParams({ xGapRelative: 0, yGapRelative: 0 });
-    // hm.setVisualParams({ yGapRelative: 0 });
-    // hm.setColor(Color.createScale([0, 0.5, 1], ['#00d', '#ddd', '#d00']));
-    // hm.setColor(d3.scaleLinear([0, 0.5, 1], ['#00d', '#ddd', '#d00']));
-    hm.render(divElementOrId);
-    // hm.setFilter(d => d > 0.1);
-    // setTimeout(()=> hm.setFilter(undefined), 2000);
-    hm.setZooming({ axis: 'x' });
-    (window as any).hm = hm;
-    // const q = resamplingCoefficients(10, 4, { from: 2.6, to: 10 });
-    // for (let i = 0; i < q.from.length; i++) {
-    //     console.log(q.from[i], q.to[i], q.weight[i]);
-    // }
-    // console.log(sum(q.weight));
-    // benchmarkColor('#caffeeee', 1e7)
-}
-
-export function demo2(divElementOrId: HTMLDivElement | string) {
+/** Demo showing small data with a lot of customizations */
+export function demo1(divElementOrId: HTMLDivElement | string) {
     const items = [
         { col: 1, row: 'A', score: 0.0 },
         { col: 1, row: 'B', score: 0.2 },
@@ -97,6 +79,28 @@ export function demo2(divElementOrId: HTMLDivElement | string) {
     (window as any).hm = hm;
 }
 
+/** Demo showing a big data example (200_000 x 20) */
+export function demo2(divElementOrId: HTMLDivElement | string) {
+    const hm = Heatmap.createDummy(2e5, 20); // Heatmap<number, number, number>
+    hm.setVisualParams({ xGapRelative: 0, yGapRelative: 0 });
+    // hm.setVisualParams({ yGapRelative: 0 });
+    // hm.setColor(Color.createScale([0, 0.5, 1], ['#00d', '#ddd', '#d00']));
+    // hm.setColor(d3.scaleLinear([0, 0.5, 1], ['#00d', '#ddd', '#d00']));
+    hm.render(divElementOrId);
+    // hm.setFilter(d => d > 0.1);
+    // setTimeout(()=> hm.setFilter(undefined), 2000);
+    hm.setZooming({ axis: 'x' });
+    (window as any).hm = hm;
+    // const q = resamplingCoefficients(10, 4, { from: 2.6, to: 10 });
+    // for (let i = 0; i < q.from.length; i++) {
+    //     console.log(q.from[i], q.to[i], q.weight[i]);
+    // }
+    // console.log(sum(q.weight));
+    // benchmarkColor('#caffeeee', 1e7)
+}
+
+
+/** Demo generating the heatmap-component logo */
 export function demo3(divElementOrId: HTMLDivElement | string) {
     const items = [
         { col: 0, row: 0, score: 0.6 },

diff --git a/src/main.ts b/src/main.ts
@@ -1,4 +1,4 @@
 /** Main file for importing `HeatmapComponent` as a dependency */
 
-export { demo, demo2, demo3 } from './heatmap-component/demo';
+export { demo1, demo2, demo3 } from './heatmap-component/demo';
 export { Heatmap } from './heatmap-component/heatmap';