From 69b48eebd8823eba7ea626932f6857610c73ca2f Mon Sep 17 00:00:00 2001
From: Cee <cnell@usgs.gov>
Date: Sun, 19 May 2024 17:03:40 -0500
Subject: [PATCH] reposition beeswarm placement
---
src/components/Beeswarm.vue | 65 ++++-----------------------------
src/views/VisualizationView.vue | 2 +-
2 files changed, 9 insertions(+), 58 deletions(-)
diff --git a/src/components/Beeswarm.vue b/src/components/Beeswarm.vue
index 6355b34..f1aa6e8 100644
--- a/src/components/Beeswarm.vue
+++ b/src/components/Beeswarm.vue
@@ -1,17 +1,5 @@
<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,
diff --git a/src/views/VisualizationView.vue b/src/views/VisualizationView.vue
index d7a97e5..7586385 100644
--- a/src/views/VisualizationView.vue
+++ b/src/views/VisualizationView.vue
@@ -1,11 +1,11 @@
<template>
<section id="visualization">
<VizTitle />
+ <Beeswarm />
<NarrativeIntro />
<BubbleChart />
<Dendrogram />
<Maps />
- <!-- <Beeswarm /> -->
<ReferencesSection />
<AuthorshipSection />
</section>
--
GitLab