Working Sentiments Radar Chart! (In Cool)

src/main/resources/templates/sentimentsRadarChart.ftl

@@ -1,4 +1,4 @@
-<svg id="sentimentsRadarChart" width="1000" height="1000"></svg>
+<svg id="sentimentsRadarChart"></svg>
 <script src="https://d3js.org/d3.v6.min.js"></script>
 <script>
     // Retrieve sentiment values from the passed attribute "sentiment"
@@ -38,6 +38,26 @@
         };
     }
 
+    // Draw the concentric grid (web) lines
+    var gridSteps = 5;  // Number of concentric polygons
+    for (var i = 1; i <= gridSteps; i++) {
+        var step = i / gridSteps;
+        var gridPoints = axes.map(function(d) {
+            var r = step * maxRadius;
+            return polarToCartesian(centerX, centerY, r, d.angle);
+        });
+        svg.append("path")
+            .datum(gridPoints)
+            .attr("d", d3.line()
+                .x(function(d) { return d.x; })
+                .y(function(d) { return d.y; })
+                .curve(d3.curveLinearClosed)
+            )
+            .attr("stroke", "#aaa")
+            .attr("stroke-width", 1)
+            .attr("fill", "none");
+    }
+
     // Draw axis lines and labels
     axes.forEach(function(d) {
         var endPoint = polarToCartesian(centerX, centerY, maxRadius, d.angle);
@@ -80,12 +100,37 @@
         .attr("fill", "blue")
         .attr("fill-opacity", 0.3);
 
-    // Draw circles at each radar point
-    radarPoints.forEach(function(point) {
+    // Create a tooltip div appended to the body and style it
+    var tooltip = d3.select("body").append("div")
+        .attr("id", "tooltip")
+        .style("position", "absolute")
+        .style("background", "#fff")
+        .style("border", "1px solid #ccc")
+        .style("padding", "4px 8px")
+        .style("border-radius", "4px")
+        .style("pointer-events", "none")
+        .style("font-size", "12px")
+        .style("box-shadow", "0px 0px 5px rgba(0,0,0,0.3)")
+        .style("display", "none");
+
+    // Draw circles at each radar point and attach tooltip events
+    axes.forEach(function(d, i) {
+        var point = radarPoints[i];
         svg.append("circle")
             .attr("cx", point.x)
             .attr("cy", point.y)
             .attr("r", 4)
-            .attr("fill", "red");
+            .attr("fill", "red")
+            .on("mouseover", function(event) {
+                tooltip.style("display", "block")
+                    .html(d.axis + ": " + d.value);
+            })
+            .on("mousemove", function(event) {
+                tooltip.style("left", (event.pageX + 10) + "px")
+                    .style("top", (event.pageY - 10) + "px");
+            })
+            .on("mouseout", function() {
+                tooltip.style("display", "none");
+            });
     });
-</script>
+</script>