reposition beeswarm placement

src/components/Beeswarm.vue

 <template>
 <section id="beeswarm">
-        <div
-            id="title"
-            class="text-container title-text"
-        >
-            <h3 v-html="agVsMunText.title" />
-        </div>
-        <div
-            id="text1"
-            class="text-container"
-        >
-            <p v-html="agVsMunText.paragraph1" />
-        </div>
         <div id="toggle-container" > 
           <div id="checkbox1-container">
               <input type="checkbox" id="checkbox1" v-model="checkboxStates[0]" @change="handleCheckboxChange(0)">
@@ -27,45 +15,16 @@
           </div>
         </div>
         <div id="beeswarm-chart-container"></div>
-        <div
-            id="title2"
-            class="text-container title-text"
-        >
-            <h3 v-html="vulnerabilityText.title" />
-        </div>
-        <div
-            id="text2"
-            class="text-container"
-        >
-            <p v-html="vulnerabilityText.paragraph1" />
-        </div>
-        <div
-            id="text3"
-            class="text-container"
-        >
-            <p v-html="vulnerabilityText.paragraph2" />
-        </div>
-        <div
-            id="text4"
-            class="text-container"
-        >
-            <p v-html="vulnerabilityText.paragraph3" />
-        </div>
     </section>
 </template>
   
 <script setup>
     import { onMounted, ref, watch } from "vue";
     import { isMobile } from 'mobile-device-detect';
-    import * as d3 from 'd3';
-    import agVersusMunicipalText from "./../assets/text/agVsMunicipalText";
-    import socialVulnerabilityText from "./../assets/text/socialVulnerabilityText"
-    
+    import * as d3 from 'd3';    
 
     // global variables 
     const publicPath = import.meta.env.BASE_URL;
-    const agVsMunText = agVersusMunicipalText.agVersusMunicipalText;
-    const vulnerabilityText= socialVulnerabilityText.socialVulnerabilityText;
     const dataSet1 = ref([]); 
     const dataSet2 = ref([]); 
     const selectedDataSet = ref('dataSet1');
@@ -77,9 +36,9 @@
     
     // set up svg
     let svg;
-    const height = 600;
-    const width = 1000;
-    let margin = {top: 100, right: 20, bottom: 20, left: 40}
+    const height = 800;
+    const width = 800;
+    let margin = {top: 30, right: 20, bottom: 20, left: 30}
 
     // set colors for bubble charts
     const dimensionColors = {
@@ -107,8 +66,6 @@
     async function loadDatasets() {
         dataSet1.value = await loadData('determinant_uncertainty.csv');
         dataSet2.value = await loadData('indicator_uncertainty.csv')
-        // console.log(dataSet1.value);
-        // console.log(dataSet2.value);
     }
 
     async function loadData(fileName) {
@@ -160,8 +117,6 @@
     }
     
     function handleCheckboxChange(index) {
-      // console.log(checkboxStates);
-      // console.log(checkboxStates.value[index]);
       // Call the corresponding function based on the index
       checkboxFunctions[index](checkboxStates.value[index]);    
     }
@@ -192,11 +147,7 @@
         .attr('height', height)
 
       const radius = 10
-
       const categories = Array.from(new Set(data.value.map((d) => d.dimension)))
-      // console.log(categories)
-      // const categoryCenters = {}
-
       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
       const colWidth = width / numCols
@@ -397,7 +348,7 @@ $switchWidth: 12rem;
     justify-content: center;
     align-items: center;
     width: 100%;
-    margin: 20px 0; /* Add some margin to give space around the toggle container */
+    margin: 20px 0; 
 }
 
 #checkbox1-container,
@@ -405,14 +356,14 @@ $switchWidth: 12rem;
 #checkbox3-container {
     display: flex;
     align-items: center;
-    margin: 0 10px; /* Add some space between the checkboxes */
+    margin: 0 10px; 
 }
 
 #checkbox1-container label,
 #checkbox2-container label,
 #checkbox3-container label {
-    margin-left: 5px; /* Add space between the checkbox and the label */
-    font-size: 2rem; /* Increase label font size if needed */
+    margin-left: 5px; 
+    font-size: 2rem; 
 }
 
 #checkbox1,

src/views/VisualizationView.vue

 <template>
   <section id="visualization">
     <VizTitle />
+    <Beeswarm /> 
     <NarrativeIntro />
     <BubbleChart />
     <Dendrogram />
     <Maps />
-    <!-- <Beeswarm /> -->
     <ReferencesSection />
     <AuthorshipSection />
   </section>