Update index.html

viz #6

index.html

@@ -103,15 +103,22 @@
         .responsive-iframe-container {
             position: relative;
             width: 100%;
-            padding-top: 56.25%; /* 16:9 aspect ratio */
+            height: 500px; /* Default height */
+            transition: all 0.3s ease;
         }
         .responsive-iframe-container iframe {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          border: 0;
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+        .browser-fullscreen {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            z-index: 9999;
+            background: white;
         }
     </style>
 </head>
@@ -188,7 +195,7 @@
         <p>Explore the community's favourite models, ranging from tasks, likes to downloads, since 2022. What we're seeing: smol models are on the rise.📈👀</p>
         <p><em style="font-size: 0.8em;">💡Tip: Click the small square icon in the top right corner to access full screen view!</em></p>
         <div class="responsive-iframe-container">
-            <button onclick="toggleFullscreen(this.nextElementSibling)" style="position: absolute; top: 10px; right: 10px; z-index: 10; padding: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 4px; cursor: pointer;">⛶</button>
+            <button onclick="toggleBrowserFullscreen(this.parentElement)" style="position: absolute; top: 10px; right: 10px; z-index: 10; padding: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 4px; cursor: pointer;">⛶</button>
             <iframe src="https://aiworld.eu/embed/model/model/treemap" allowfullscreen></iframe>
         </div>
     `,
@@ -196,7 +203,7 @@
         <h2>Fast & Furious model releases</h2>
         <p>This race chart shows cumulative likes for models over the first 48 weeks of 2024, with Meta (US), Stability (UK) and Black Forest Labs (GER) leading the pack.</p>
         <div class="responsive-iframe-container">
-            <button onclick="toggleFullscreen(this.nextElementSibling)" style="position: absolute; top: 10px; right: 10px; z-index: 10; padding: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 4px; cursor: pointer;">⛶</button>
+            <button onclick="toggleBrowserFullscreen(this.parentElement)" style="position: absolute; top: 10px; right: 10px; z-index: 10; padding: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 4px; cursor: pointer;">⛶</button>
             <iframe src="https://aiworld.eu/embed/model/author/racechart" allowfullscreen></iframe>
         </div>
     `,
@@ -204,7 +211,7 @@
         <h2>Zero to One (Million Models)</h2>
         <p>This exponential growth chart tracks the Hugging Face community's journey from just a few thousand models in 2022 to surpassing the million-model milestone today.</p>
         <div class="responsive-iframe-container">
-            <button onclick="toggleFullscreen(this.nextElementSibling)" style="position: absolute; top: 10px; right: 10px; z-index: 10; padding: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 4px; cursor: pointer;">⛶</button>
+            <button onclick="toggleBrowserFullscreen(this.parentElement)" style="position: absolute; top: 10px; right: 10px; z-index: 10; padding: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 4px; cursor: pointer;">⛶</button>
             <iframe src="https://aiworld.eu/embed/model/tag/stacked-model-count-other" allowfullscreen></iframe>
         </div>
     `,
@@ -212,84 +219,106 @@
         <h2>The HF Network: What your likes say about you</h2>
         <p>Network connections between users’ favourite models.</p>
         <div class="responsive-iframe-container">
-            <button onclick="toggleFullscreen(this.nextElementSibling)" style="position: absolute; top: 10px; right: 10px; z-index: 10; padding: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 4px; cursor: pointer;">⛶</button>
+            <button onclick="toggleBrowserFullscreen(this.parentElement)" style="position: absolute; top: 10px; right: 10px; z-index: 10; padding: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 4px; cursor: pointer;">⛶</button>
             <iframe src="https://aiworld.eu/embed/model/model/network-small" allowfullscreen></iframe>
-        </div>    `,
+        </div>    
+        `,
     6: `
-        <h2>Day 6</h2>
-        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
-        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">        `,
+        <h2>33 Months of Models, per Task</h2>
+        <p>Over the last 33 months, over 300k models have been created for 53 specialized tasks. Watch until the end to see which task reigns supreme. 👀 <em>(Hint: this task makes up nearly half the models on the Hub.)</em></p>
+        <div class="responsive-iframe-container">
+            <button onclick="toggleBrowserFullscreen(this.parentElement)" style="position: absolute; top: 10px; right: 10px; z-index: 10; padding: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 4px; cursor: pointer;">⛶</button>
+            <iframe src="https://aiworld.eu/embed/model/pipeline/racechart2" allowfullscreen></iframe>
+        </div>         `,
     7: `
         <h2>Day 7</h2>
-        <p>Like the space to be notified when we release the next data 🤗</p>
+        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
+        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
     `,
     8: `
         <h2>Day 8</h2>
-        <p>Like the space to be notified when we release the next data 🤗</p>
+        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
+        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
     `,
     9: `
         <h2>Day 9</h2>
-        <p>Like the space to be notified when we release the next data 🤗</p>
+        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
+        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
     `,
     10: `
         <h2>Day 10</h2>
-        <p>Like the space to be notified when we release the next data 🤗</p>
+        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
+        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
     `,
     11: `
         <h2>Day 11</h2>
-        <p>Like the space to be notified when we release the next data 🤗</p>
+        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
+        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
     `,
     12: `
         <h2>Day 12</h2>
-        <p>Like the space to be notified when we release the next data 🤗</p>
+        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
+        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
     `,
     13: `
         <h2>Day 13</h2>
-        <p>Like the space to be notified when we release the next data 🤗</p>
+        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
+        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
     `,
     14: `
         <h2>Day 14</h2>
-        <p>Like the space to be notified when we release the next data 🤗</p>
+        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
+        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
     `,
     15: `
         <h2>Day 15</h2>
-        <p>Like the space to be notified when we release the next data 🤗</p>
+        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
+        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
     `,
     16: `
         <h2>Day 16</h2>
-        <p>Like the space to be notified when we release the next data 🤗</p>
+        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
+        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
     `,
     17: `
         <h2>Day 17</h2>
-        <p>Like the space to be notified when we release the next data 🤗</p>
+        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
+        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
     `,
     18: `
         <h2>Day 18</h2>
-        <p>Like the space to be notified when we release the next data 🤗</p>
+        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
+        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
     `,
     19: `
         <h2>Day 19</h2>
-        <p>Like the space to be notified when we release the next data 🤗</p>
+        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
+        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
     `,
     20: `
         <h2>Day 20</h2>
-        <p>Like the space to be notified when we release the next data 🤗</p>
+        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
+        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
     `,
     21: `
         <h2>Day 21</h2>
-        <p>Like the space to be notified when we release the next data 🤗</p>
+        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
+        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
     `,
     22: `
         <h2>Day 22</h2>
-        <p>Like the space to be notified when we release the next data 🤗</p>
+        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
+        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
     `,
     23: `
         <h2>Day 23</h2>
-        <p>Like the space to be notified when we release the next data 🤗</p>
+        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
+        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
     `,
     24: `
         <h2>Day 24</h2>
-        <p>Like the space to be notified when we release the next data 🤗</p>
+        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
+        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
     `
 };
 
@@ -306,6 +335,7 @@
             3: "🏎️<br>Fast & Furious model releases",
             4: "🚀<br>Zero to One (Million Models)",
             5: "🤗<br>What your likes say about you?",
+            6: "🏷️<br>Tasks on tasks on tasks",
             // Add more custom labels as needed
             // 3: "Custom Text",
             // 4: "Another Label",
@@ -341,7 +371,7 @@
 
         // Handle card clicks
         const cards = document.querySelectorAll('.card');
-        const activeDays = [1,2,3,4,5]; // Add the day numbers you want to highlight
+        const activeDays = [1,2,3,4,5,6]; // Add the day numbers you want to highlight
 
         cards.forEach(card => {
             const day = parseInt(card.dataset.day);
@@ -371,14 +401,8 @@
         });
 
         // Add fullscreen function
-        function toggleFullscreen(iframe) {
-            if (iframe.requestFullscreen) {
-                iframe.requestFullscreen();
-            } else if (iframe.webkitRequestFullscreen) { /* Safari */
-                iframe.webkitRequestFullscreen();
-            } else if (iframe.msRequestFullscreen) { /* IE11 */
-                iframe.msRequestFullscreen();
-            }
+        function toggleBrowserFullscreen(container) {
+            container.classList.toggle('browser-fullscreen');
         }
 
         // Add this code after your existing event listeners