Merge pull request #99 from Carifio24/exporter-examples

Add more examples of exported graphs

docs/assets/css/main.css

@@ -3236,15 +3236,25 @@
   max-height: 300px;
 }
 
-#airplanes-container {
+.example-container {
   overflow: hidden;
   width: fit-content;
   margin: auto;
 }
 
-#airplanes {
+.example-iframe {
   height: 400px;
-  width: 605px;
+  width: 610px;
+}
+
+.flex-row {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 2em 5px;
 }
 
 

docs/index.html

@@ -112,10 +112,45 @@ <h3>Supported viewers</h3>
         <li>Several of the glue-jupyter bqplot viewers: scatter, image, profile, and histogram</li>
       </ul>
 
-      <h3>Example</h3>
-      <p>The figure below is an example of an interactive Plotly graph that was exported directly from glue!</p>
-      <div id="airplanes-container">
-        <iframe id="airplanes" src="airplanes.html" scrolling="no"></iframe>
+      <h3>Examples</h3>
+      <p>The examples below are all interactive Plotly graphs that were exported directly from glue! Each graph is labeled with the glue viewer that it was exported from.</p>
+      <div class="flex-row 200%">
+        <div class="box highlight">
+          <h3>2D Scatter</h3>
+          <div class="example-container">
+            <iframe class="example-iframe" src="airplanes.html" loading="lazy" scrolling="no"></iframe>
+          </div>
+        </div>
+        <div class="box highlight">
+          <h3>Histogram</h3>
+          <div class="example-container">
+            <iframe class="example-iframe" src="airplanes_histogram.html" loading="lazy" scrolling="no"></iframe>
+          </div>
+        </div>
+        <div class="box highlight">
+          <h3>Image</h3>
+          <div class="example-container">
+            <iframe class="example-iframe" src="w5_image.html" loading="lazy" scrolling="no"></iframe>
+          </div>
+        </div>
+        <div class="box highlight">
+          <h3>3D Scatter</h3>
+          <div class="example-container">
+            <iframe class="example-iframe" src="airplanes_3d.html" loading="lazy" scrolling="no"></iframe>
+          </div>
+        </div>
+        <div class="box highlight">
+          <h3>Profile</h3>
+          <div class="example-container">
+            <iframe class="example-iframe" src="profile.html" loading="lazy" scrolling="no"></iframe>
+          </div>
+        </div>
+        <div class="box highlight">
+          <h3>Dendrogram</h3>
+          <div class="example-container">
+            <iframe class="example-iframe" src="w5_dendro.html" loading="lazy" scrolling="no"></iframe>
+          </div>
+        </div>
       </div>
     </section>
 
@@ -129,7 +164,7 @@ <h2>Chart Studio Exporter</h2>
         </section>
         <section class="6u 12u(narrower)">
           <p>Watch a video demonstrating the Chart Studio exporter in action:</p>
-          <iframe width="560" height="315" src="https://www.youtube.com/embed/-jqB7whGuvs?si=Zm1sssNSKqEN36X9" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+          <iframe width="560" height="315" src="https://www.youtube.com/embed/-jqB7whGuvs?si=Zm1sssNSKqEN36X9" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allow="fullscreen"></iframe>
         </section>
       </div>
     </section>