change colors

src/Map.jsx

@@ -83,19 +83,6 @@ function MapView() {
       });
     svg.call(zoom);
 
-    /**
-     * Initial zoom.
-     */
-    // const defaultTransform = { k: 1 };
-    // const initialTransform = defaultTransform?.k != null
-    //   ? new ZoomTransform(
-    //     defaultTransform.k ?? 1,
-    //     defaultTransform.x ?? 0,
-    //     defaultTransform.y ?? 0
-    //   )
-    //   : d3.zoomIdentity;
-    // svg.call(zoom.transform, initialTransform);
-
     const xMin = d3.min(data, (d) => d.x);
     const xMax = d3.max(data, (d) => d.x);
     const yMin = d3.min(data, (d) => d.y);
@@ -122,6 +109,11 @@ function MapView() {
         data,
       );
 
+    // Define a color scale for the contours to add visual depth and appeal
+    const colorScale = d3.scaleSequential(d3.interpolateTurbo) // Using d3.interpolateTurbo for vibrant colors
+      .domain([0, d3.max(contourData, d => d.value)]); // Dynamically set the domain based on data density
+
+
     // Define a custom color for the contour lines
 
     const contourLineColor = "rgb(94, 163, 252)";
@@ -134,27 +126,12 @@ function MapView() {
       .append("path")
       .attr("class", "contour")
       .attr("d", d3.geoPath())
-      .style("fill", "none")
+      .style("fill", "lightgreen")
+      .attr("fill", d => colorScale(d.value)) // Apply color based on data density
+
       .style("stroke", contourLineColor) // Set the contour line color to the custom color
       .style("stroke-width", 1);
 
-    /*
-    const circles = svg.selectAll('circle')
-    .data(data)
-    .enter()
-    .append('circle')
-    .attr('cx', (d) => xScale(d.x))
-    .attr('cy', (d) => yScale(d.y))
-    .attr('r', 5)
-    .style('fill', 'lightblue')
-    .on('click', (event, d) => {
-        // Show the content and topic name of the clicked point in the text container
-        setSelectedDocument(d);
-        // Change the color to pink on click
-        circles.style('fill', (pointData) => (pointData === d) ? 'pink' : 'lightblue');
-    });
-    */
-
     const centroids = data.filter((d) => d.x_centroid && d.y_centroid);
     setTopicsCentroids(centroids);
 

src/index.css

@@ -73,7 +73,8 @@ svg {
 }
 
 .scatter-plot-container svg {
-  background-color: #f7f7f7;
+  #background-color: #f7f7f7;
+  background-color: #9bdbfb;
   border: 1px solid #ddd;
   cursor: grab;
 }