From 01374f414b799a544fe61e4a92121327b9374dcd Mon Sep 17 00:00:00 2001
From: Lalit Somavarapha <lalit.somavarapha@hpe.com>
Date: Wed, 18 Sep 2024 02:48:30 -0700
Subject: [PATCH] style updates

---
 script.js  | 66 ++++++++++++++++++++++++------------------------------
 styles.css | 23 +++++++++++++++++++
 2 files changed, 52 insertions(+), 37 deletions(-)

diff --git a/script.js b/script.js
index babe78a..023524f 100644
--- a/script.js
+++ b/script.js
@@ -375,12 +375,6 @@ function calculateNodeSize(place) {
 function createGraph(data) {
     // Clear previous content
     d3.select("#graph").html("");
-    d3.select("#infoName").text("");
-    d3.select("#infoRating").text("");
-    d3.select("#infoReviews").text("");
-    d3.select("#infoPopular").html("");
-    d3.select("#infoBestReviews").html("");
-    d3.select("#infoWorstReviews").html("");
 
     const width = document.getElementById('graph').clientWidth;
     const height = document.getElementById('graph').clientHeight;
@@ -388,26 +382,34 @@ function createGraph(data) {
     const svg = d3.select("#graph")
         .append("svg")
         .attr("width", width)
-        .attr("height", height)
-        .call(zoom)
-        .append("g");
+        .attr("height", height);
 
-        const simulation = d3.forceSimulation(data)
+    const g = svg.append("g");
+
+    const zoom = d3.zoom()
+        .scaleExtent([0.5, 5])
+        .on("zoom", (event) => {
+            g.attr("transform", event.transform);
+        });
+
+    svg.call(zoom);
+
+    const simulation = d3.forceSimulation(data)
         .force("charge", d3.forceManyBody().strength(-300))
         .force("center", d3.forceCenter(width / 2, height / 2))
         .force("collision", d3.forceCollide().radius(d => calculateNodeSize(d) + 2));
 
-    const nodes = svg.selectAll("circle")
+    const nodes = g.selectAll("circle")
         .data(data)
         .enter()
         .append("circle")
-        .attr("r", d => calculateNodeSize(d) * 1.5)  // Increase node size
+        .attr("r", d => calculateNodeSize(d) * 1.5)
         .style("fill", d => getNodeColor(calculateNodeScore(d)))
         .call(d3.drag()
             .on("start", dragstarted)
             .on("drag", dragged)
             .on("end", dragended));
-    
+
     // Add zoom buttons
     d3.select("#graph")
         .append("div")
@@ -449,32 +451,22 @@ function createGraph(data) {
             .attr("cy", d => d.y);
     });
 
-    
-}
-
-function zoomed(event) {
-    svg.attr("transform", event.transform);
-}
-
-const zoom = d3.zoom()
-    .scaleExtent([0.5, 5])
-    .on("zoom", zoomed);
-
-function dragstarted(event, d) {
-    if (!event.active) simulation.alphaTarget(0.3).restart();
-    d.fx = d.x;
-    d.fy = d.y;
-}
+    function dragstarted(event, d) {
+        if (!event.active) simulation.alphaTarget(0.3).restart();
+        d.fx = d.x;
+        d.fy = d.y;
+    }
 
-function dragged(event, d) {
-    d.fx = event.x;
-    d.fy = event.y;
-}
+    function dragged(event, d) {
+        d.fx = event.x;
+        d.fy = event.y;
+    }
 
-function dragended(event, d) {
-    if (!event.active) simulation.alphaTarget(0);
-    d.fx = null;
-    d.fy = null;
+    function dragended(event, d) {
+        if (!event.active) simulation.alphaTarget(0);
+        d.fx = null;
+        d.fy = null;
+    }
 }
 
 function calculateNodeScore(place) {
diff --git a/styles.css b/styles.css
index 94b5fb9..0f3d2df 100644
--- a/styles.css
+++ b/styles.css
@@ -166,4 +166,27 @@ main {
 
 .tab-content.active {
     display: block;
+}
+
+
+.zoom-buttons {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 1000;
+}
+
+.zoom-buttons button {
+    background-color: rgba(255, 255, 255, 0.7);
+    color: #000;
+    border: none;
+    padding: 5px 10px;
+    margin: 0 5px;
+    cursor: pointer;
+    font-size: 16px;
+    border-radius: 4px;
+}
+
+.zoom-buttons button:hover {
+    background-color: rgba(255, 255, 255, 0.9);
 }
\ No newline at end of file