From d3775a35892612b056760921df270063de79d6ec Mon Sep 17 00:00:00 2001
From: Mikel Aramendia <mikel.aramendia.lacalle@gmail.com>
Date: Fri, 15 Nov 2024 07:24:35 +0100
Subject: [PATCH] Correction on visualization on small screens and added
 Leftfield style

---
 pulseroots.genres.json |  6 ++++++
 script.js              | 43 +++++++++++++++++-------------------------
 2 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/pulseroots.genres.json b/pulseroots.genres.json
index f6afaf4..745f808 100644
--- a/pulseroots.genres.json
+++ b/pulseroots.genres.json
@@ -47,6 +47,12 @@
                         "example": "Autechre - 444",
                         "spotify_track_id": "4WWwTDK9yKj3pizCXX46cY"
                     },
+                    {
+                        "name": "Leftfield",
+                        "description": "Leftfield is a substyle of IDM that incorporates unexpected influences and genre crossovers, such as jazz, rock, or world music. This experimental and unconventional approach allows for unique and surprising compositions, pushing the boundaries of IDM while exploring innovative textures and structures. Leftfield emphasizes the blending of non-traditional rhythms and sounds, offering an unpredictable and original listening experience.",
+                        "example": "The Future Sound of London - Papua New Guinea",
+                        "spotify_track_id": "5zh23oMbATQlWbwEe5U0KG"
+                    },                    
                     {
                         "name": "Skweee",
                         "description": "Skweee is an electronic music genre that originated in Scandinavia, characterized by its quirky, lo-fi sound that combines synth-driven melodies with funky, minimalist beats. Often described as a blend of hip-hop, funk, and electro, skweee features off-kilter rhythms, squelchy basslines, and playful, high-pitched synths that give it a distinctive, chiptune-like feel. The name “skweee” refers to “squeezing” out quirky sounds from synthesizers, creating a raw, stripped-back style. The music often has a laid-back, experimental vibe, balancing between groove and glitch, and is designed more for casual listening than the dancefloor. Skweee’s unique style emerged in the mid-2000s, with labels like Flogsta Danshall and Harmönia leading the genre, giving it a niche following among fans of experimental and underground electronic music.",
diff --git a/script.js b/script.js
index 120ab13..52325e1 100644
--- a/script.js
+++ b/script.js
@@ -80,9 +80,9 @@ function createTree(data) {
       .x(d => d.y)
       .y(d => d.x));
 
-    // Create the nodes
-    const node = svg.selectAll('.node')
-    .data(nodesToShow)
+  // Create the nodes
+  const node = svg.selectAll('.node')
+    .data(nodesToShow) // Bind the filtered data
     .enter()
     .append('g')
     .attr('class', 'node')
@@ -113,16 +113,7 @@ function createTree(data) {
         <iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/${trackId}?utm_source=generator" width="100%" height="160" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
       `;
 
-      // Obtener el ancho de la ventana actual
-      const windowWidth = window.innerWidth;
-
-      // Establecer el ancho máximo del panel de información
-      const maxPanelWidth = Math.min(500, windowWidth * 0.9);
-
-      // Establecer el ancho del panel de información
-      infoPanel.style.width = `${maxPanelWidth}px`;
-
-      // Mostrar el panel de información
+      // Show the info panel
       infoPanel.classList.add('visible');
     });
 
@@ -143,28 +134,28 @@ function showTooltip(event, d) {
     <p><i class="bi bi-hand-index"></i> Click the node to listen the example track.</p>
   `);
 
-  // Animate the tooltip's appearance
-  tooltip.transition()
-    .duration(200)
-    .style('opacity', 0.9);
+ // Animate the tooltip's appearance
+ tooltip.transition()
+ .duration(200)
+ .style('opacity', 0.9);
 
-  // Position the tooltip near the node
-  tooltip.style('left', (event.pageX + 10) + 'px')
-    .style('top', (event.pageY - 28) + 'px');
+// Position the tooltip near the node
+tooltip.style('left', (event.pageX + 10) + 'px')
+ .style('top', (event.pageY - 28) + 'px');
 }
 
 // Function to hide the tooltip
 function hideTooltip() {
-  d3.select('.tooltip').remove();
+d3.select('.tooltip').remove();
 }
 
 // Add the event listeners to the nodes
 node.on('mouseover', (event, d) => {
-  // Check if the screen is small before showing the tooltip
-  if (window.innerWidth < 768) {
-    return;
-  }
-  showTooltip(event, d);
+// Check if the screen is small before showing the tooltip
+if (window.innerWidth < 768) {
+ return;
+}
+showTooltip(event, d);
 });
 
 node.on('mouseout', () => {