changed bubble colors to match topic modeling colors

Author: carolinentran

app/src/app/components/ui/themesTransition.tsx

@@ -63,7 +63,7 @@ const ThemesTransition: React.FC = () => {
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
-                fill="currentColor"
+                fill={theme.color} // can change to "currentcolor" to get pink theme color if multicolor is ugly
                 className="w-5 h-5 text-pink-300 group-hover:text-pink-500 transition duration-200"
               >
                 <path d="M12 4.248C8.852-1.154 0 .423 0 7.192c0 4.661 5.571 9.427 12 15.808 6.429-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z" />

app/src/app/components/visualizations/p2/bubble-chart.js

@@ -3,13 +3,23 @@ import * as d3 from "d3";
 
 const HorizontalBarChart = () => {
   const [data, setData] = useState([]);
+  const [topicsData, setTopicsData] = useState([]);
 
   useEffect(() => {
     const fetchData = async () => {
       try {
+        // fetch post data
         const response = await fetch("/data/consolidated_posts.json");
         const json = await response.json();
 
+        // fetch topics data
+        const responseTopics = await fetch(
+          "/data/topic-modeling/results/topics_NMF_15.json"
+        );
+        const topicsJson = await responseTopics.json();
+        console.log("bubble fetched topics: ", topicsJson);
+        setTopicsData(topicsJson);
+
         // Parse and aggregate data
         const parsedData = Object.entries(json)
           .map(([, post]) => ({
@@ -31,10 +41,17 @@ const HorizontalBarChart = () => {
         );
 
         setData(
-          aggregatedData.map(([topic, stats]) => ({
-            topic,
-            ...stats,
-          }))
+          aggregatedData.map(([topic, stats]) => {
+            // find corresponding topic color from topicsJson
+            const topicData = topicsJson.find((t) => t.label === topic);
+            const color = topicData ? topicData.color : "#000000"; // Default to black if no match
+
+            return {
+              topic,
+              ...stats,
+              color, // Add color to each aggregated data entry
+            };
+          })
         );
       } catch (error) {
         console.error("Error fetching data:", error);
@@ -45,6 +62,7 @@ const HorizontalBarChart = () => {
   }, []);
 
   const createBubbleChart = (chartData, containerId) => {
+    console.log("data structure in bubble", data);
     d3.select(`#${containerId}`).select("svg").remove();
 
     const margin = { top: 60, right: 300, bottom: 60, left: 100 };
@@ -155,7 +173,8 @@ const HorizontalBarChart = () => {
       .attr("cx", (d) => xScale(d.numPosts)) // X-axis is number of posts
       .attr("cy", (d) => yScale(d.avgLength)) // Y-axis is average word length
       .attr("r", (d) => sizeScale(d.avgSentiment)) // Bubble size is sentiment
-      .attr("fill", (d) => colorScale(d.topic)) // Color represents topic
+      // .attr("fill", (d) => colorScale(d.topic)) // Color represents topic
+      .attr("fill", (d) => d.color)
       .attr("opacity", 0.5)
       .on("mouseover", (event, d) => {
         tooltip.transition().duration(200).style("opacity", 1);
@@ -218,7 +237,7 @@ const HorizontalBarChart = () => {
         .attr("cx", 10)
         .attr("cy", 20 + i * 20)
         .attr("r", 5)
-        .attr("fill", colorScale(d.topic));
+        .attr("fill", d.color);
 
       legend
         .append("text")