WIP - experimenting with beeswarm

src/components/BubbleChart.vue

@@ -26,7 +26,11 @@
             d.evidence_val = +d.evidence_val; 
             return d;
         });
-        }
+    };
+         
+
+       
+    // }
 
     function createBubbleChart() {
         // ... SVG setup ...
@@ -176,7 +180,6 @@
         function handleMouseMove(event, d) {
             const [x, y] = d3.pointer(event); 
             const containerRect = document.getElementById('chart-container').getBoundingClientRect();
-            console.log(containerRect);
             tooltip
                 .html(`${d.determinant}`)
                 .style("left", (x) + "px")
@@ -193,10 +196,7 @@
             d3.select(this)
                 .style("opacity", 1);
         }
-
-}
-
-
+    }
 
 </script>
   

src/components/BubbleChart2.vue

+<template>
+        <div id="chart-container">
+        </div>
+</template>
+  
+<script setup>
+    import { onMounted, ref } from "vue";
+    import * as d3 from 'd3';
+
+    // global variables 
+    const publicPath = import.meta.env.BASE_URL;
+    const data = ref([]); 
+
+    // load data and then make chart
+    onMounted(() => {
+        loadData().then(() => {
+            if (data.value.length > 0) {
+            createBubbleChart();
+            }
+        });
+    });
+
+    async function loadData() {
+        data.value = await d3.csv(publicPath + 'indicator_uncertainty.csv', d => {
+            d.level_agreement = +d.level_agreement; 
+            d.evidence_val = +d.evidence_val; 
+            return d;
+        });
+    };
+
+    function createBubbleChart() {
+        const height = 400;
+        const width = 1000;
+        let margin = {top: 20, right: 20, bottom: 20, left: 20}
+
+        const categories = Array.from(new Set(data.value.map(d => d.dimension))); // Unique categories
+        
+        const colorScale = d3.scaleOrdinal(d3.schemeDark2)
+            .domain(categories)
+
+        const svg = d3.select("#chart-container")
+            .append('svg')
+            .attr('width', width)
+            .attr('height', height);
+
+        // set x axis scale based on level of agreement
+        const xScale = d3.scaleLinear()
+            .domain([1, d3.max(data.value, d => d.level_agreement)])
+            .range([margin.left, width-margin.right]);
+        
+        // set radius based on evidence value
+        const radiusScale = d3.scaleLinear()
+            .domain([d3.min(data.value, d => d.evidence_val), d3.max(data.value, d => d.evidence_val)])
+            .range([10, 50]);
+
+        // add xAxis g to svg
+        const xAxis = svg.append('g')
+            .attr("transform", "translate(0," + (height - margin.bottom) + ")")
+            .call(d3.axisBottom(xScale))
+
+        // add line that connects bubble to xAxis
+        // const xLine = svg.append("line")
+        //     .attr("stroke","rgb(96, 126,139)")
+        //     .attr("stroke-dasharray", "1,2");
+
+        const bubbles = svg.selectAll(".bubble")
+            .data(data.value)
+            .enter().append("circle")
+            .attr("class", "bubble")
+            .attr('r', d => radiusScale(d.evidence_val))
+            .style('fill',  d => colorScale(d.dimension));
+
+        // run force simulation
+        const simulation = d3.forceSimulation()
+            // .force("x", forceX)
+            // .force("y", forceY)
+            // .force("collide", forceCollide)
+            // .force("charge", forceManyBody)
+            .nodes(data.value)
+            .on("tick", ticked)
+            .alpha(.2)
+            .restart();
+
+        function ticked() {
+            bubbles
+                .attr("cx", d => d.x)
+                .attr("cy", d => d.y);
+        }
+
+        // create tooltip
+        const tooltip = d3.select("#chart-container")
+            .append("div")
+            .attr("class", "tooltip")
+            .style("opacity", 0);
+       
+    }
+
+
+</script>
+  
+<style scoped lang="scss">
+.bubble {
+    stroke: black; /* Dark outline */
+    stroke-width: 2px; /* Thicker outline */
+    fill-opacity: 0.8; /* Higher fill opacity */
+}
+
+#chart-container {
+    text-align: center;
+    position: relative;
+}
+
+#chart-container svg {
+    max-width: 100%;
+    max-height: 100%;
+    height: auto; /* Maintain aspect ratio */
+    display: inline-block;
+}
+
+.chart-text {
+    user-select: none;
+}
+
+</style>
+
+  
\ No newline at end of file

src/views/VisualizationView.vue

@@ -3,6 +3,7 @@
     <VizTitle />
     <Maps />
     <Dendrogram />
+    <BeeswarmChart2 />
     <BeeswarmChart />
     <ReferencesSection />
     <AuthorshipSection />
@@ -13,7 +14,8 @@
   import VizTitle from '.././components/VizTitle.vue'
   import Maps from '.././components/Maps.vue'
   import Dendrogram from '.././components/Dendrogram.vue'
-  import BeeswarmChart from '../components/BubbleChart.vue';
+  import BeeswarmChart2 from '../components/BubbleChart2.vue';
+  import BeeswarmChart from '../components/BubbleChart.vue'
   import ReferencesSection from '.././components/References.vue'
   import AuthorshipSection from '.././components/Authorship.vue'
 </script>