diff --git a/src/components/BeeswarmChart.vue b/src/components/BeeswarmChart.vue
index 8364b5685eb7f4855872d794741fc76ef96eb154..60ff97bfbd86945e2a68099ef64b2ad007792716 100644
--- a/src/components/BeeswarmChart.vue
+++ b/src/components/BeeswarmChart.vue
@@ -150,13 +150,83 @@ function createScales(data) {
 
 function createBeeswarmChart() {
     svg = d3
-    .selectAll('#beeswarm-chart-container')
-    .append('svg') 
-    .attr('class', 'beeswarmSvg')
-    .attr('width', width)
-    .attr('height', height)
+        .selectAll('#beeswarm-chart-container')
+        .append('svg') 
+        .attr('class', 'beeswarmSvg')
+        .attr('width', width)
+        .attr('height', height)
 
-    const radius = 10
+    const xScale = d3.scaleLinear()
+        .domain([40, d3.max(data.value, d => d.level_agreement)])
+        .range([margin.left+ 125, width-100]);
+            
+    // 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, 90]);
+
+    const xAxis = svg.append('g')
+        .attr("transform", "translate(0," + (height - 50) + ")")
+        .call(d3.axisBottom(xScale))
+
+    // add label to x axis
+    svg.append('text')
+        .attr("class", "xLabel")
+        .attr("text-anchor", "start")
+        .attr("x", 10)
+        .attr("y", 20)
+        .text("High level of Agreement");
+
+    svg.append('text')
+        .attr("class", "xLabel")
+        .attr("text-anchor", "start")
+        .attr("x", 10)
+        .attr("y", height-50)
+        .text("Inconclusive");
+    
+    const forceX = d3.forceX(d => xScale(d.level_agreement)).strength(1);
+    const forceY = d3.forceY((height/1.5) - (margin.bottom/2))//.strength(0.1);
+    const forceCollide = d3.forceCollide(d => radiusScale(d.evidence_val) + 2); //forceCollide for bubbles sized by evidence_val
+    const forceManyBody = d3.forceManyBody().strength(-15); // Adjust the strength as needed
+    
+    //const bubbles = svg.selectAll(".bubble")
+
+    const bubbles = svg
+        .selectAll('.bubble')
+        .data(data.value)
+        .enter()
+        .append('circle')
+        .attr('class', 'bubble')
+        .attr('r', d => radiusScale(d.evidence_val))
+        .style('fill', (d) => dimensionColors[d.dimension.replace(' ', '')])
+
+    const simulation = d3
+        .forceSimulation()
+        .force('x', forceX)
+        .force('y', forceY)
+        .force('collide', forceCollide)
+        .force('charge', forceManyBody)
+        .nodes(data.value)
+        .on('tick', ticked)
+        .alpha(0.2)
+
+   /*  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);
+    }
+
+   /*  const radius = 10
     const categories = Array.from(new Set(data.value.map((d) => d.dimension)))
     const numRows = 2 //Math.ceil(Math.sqrt(categories.length)); // Number of rows for grid layout
     const numCols = 4 //Math.ceil(categories.length / numRows); // Number of columns
@@ -220,7 +290,7 @@ function createBeeswarmChart() {
 
     function ticked() {
     bubbles.attr('cx', (d) => d.x).attr('cy', (d) => d.y)
-    }
+    } */
 }
 
 function sizeByEvidence(checked) {