BeeswarmChart.vue

<template>
    <section id="beeswarm">
        <div id="text1" class="text-container">
            <p>Everyone needs access to clean water. In the western U.S., water insecurity is influenced by a number of social vulnerability indicators. This includes 
                <span class="highlight demographicCharacteristics" id="demographicCharacteristics" >demographic characteristics</span>,
                <span class="highlight health" id="health" >health</span>, 
                <span class="highlight livingConditions" id="livingConditions">living conditions</span>, 
                <span class="highlight socioeconomicStatus" id="socioeconomicStatus" >socioeconomic status</span>,
                <span class="highlight landTenure" id="landTenure" >land tenure</span>,
                <span class="highlight riskPerception" id="riskPerception" >risk perception</span>, and 
                <span class="highlight exposureToStressors" id="exposureToStressors">exposure to stressors</span> (like drought or pollution).
            </p>
        </div>
        <div id="beeswarm-chart-container"></div>
    </section>
</template>
  
<script setup>
import { onMounted, ref, watch } from "vue";
import * as d3 from 'd3';    

// global variables 
const publicPath = import.meta.env.BASE_URL;
const dataSet1 = ref([]); 
const dataSet2 = ref([]); 
const selectedDataSet = ref('dataSet1');
const categoryCenters = {}
let data = dataSet1;
let simulation;

// set up svg
let svg;
const height = 800;
const width = 800;
let margin = {top: 30, right: 20, bottom: 20, left: 30}

// set colors for bubble charts
const dimensionColors = {
    Demographiccharacteristics: "#092836",
    Landtenure: "#2a468f",
    Livingconditions: "#7a5195",
    Socioeconomicstatus: "#1b695e",
    Health: "#ef5675",
    Riskperception: "#ff764a",
    Exposure: "#ffa600"
}

// load data and then make chart
onMounted(() => {
    console.log("component mounted");
    loadDatasets().then(() => {
        if (selectedDataSet.value.length > 0) {
            createBeeswarmChart(selectedDataSet);
        } else {
            console.error('Error loading data:', error)
        }
    });
});

async function loadDatasets() {
    dataSet1.value = await loadData('determinant_uncertainty.csv');
    dataSet2.value = await loadData('indicator_uncertainty.csv')
}

async function loadData(fileName) {
    return await d3.csv(publicPath + fileName, d => { 
        d.level_agreement = +(+d.level_agreement).toFixed(2); 
        d.evidence_val = +d.evidence_val; 
        d.sig_value = +d.sig_value; 
        return d;
    });
};


function createBeeswarmChart() {
    svg = d3
        .selectAll('#beeswarm-chart-container')
        .append('svg') 
        .attr('class', 'beeswarmSvg')
        .attr('width', width)
        .attr('height', height)

    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");

    // set forces
    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')
        .data(data.value)
        .enter()
        .append('circle')
        .attr('class', 'bubble')
        .attr('r', d => radiusScale(d.evidence_val))
        .style('fill', (d) => dimensionColors[d.dimension.replace(' ', '')])

    // run simulation
    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);
    }
}

function positionByAgreement(checked) {
    if (checked) {      
    const { xScale, radiusScale} = createScales(data);

    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", "middle")
        .attr("x", width/2)
        .attr("y", height-10)
        .text("Level of Agreement");
    
    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")

    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);
    }
    } else {

    }  
}

function sortByDirection() {
    const { xScale, radiusScale} = createScales(data);
    
    var yScale = d3.scaleBand()
    .domain(data.value.map(function(d) { return d.sig_name; }))
    .range([margin.top, height])

    const bubbles = svg.selectAll(".bubble")

    // const forceX = d3.forceX(d => xScale(d.level_agreement)).strength(.4);
    const forceY = d3.forceY(d => yScale(d.sig_name)).strength(.4)
    const forceCollide = d3.forceCollide(d => radiusScale(d.evidence_val) + 1); //forceCollide for bubbles sized by evidence_val
    const forceManyBody = d3.forceManyBody().strength(-15); // Adjust the strength as needed
    
    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);
    }
}

</script>
  
<style scoped lang="scss">
$switchWidth: 12rem;
$Demographiccharacteristics: "#625D0B";
$Landtenure: "#5C0601";
$Livingconditions: "#0B4E8B";
$Socioeconomicstatus: "#DC8260";
$Health: "#7F4A89";
$Riskperception: "#249CB1";
$Exposure: "#B47D83";

#toggle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 20px 0; 
}

#checkbox1-container,
#checkbox2-container,
#checkbox3-container {
    display: flex;
    align-items: center;
    margin: 0 10px; 
}

#checkbox1-container label,
#checkbox2-container label,
#checkbox3-container label {
    margin-left: 5px; 
    font-size: 2rem; 
}

#checkbox1,
#checkbox2,
#checkbox3 {
    transform: scale(1.5); /* Adjust the scale to make checkboxes bigger */
    margin-right: 10px; /* Add some space between checkbox and label */
}

.graph-buttons-switch {
    display: flex;
    height: 2.8rem;
    width: $switchWidth * 2.03;
    border-radius: 0.2rem;
    position: relative;
    margin: 0rem 0.5rem 0rem 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0.1rem 0.3rem rgba(0, 0, 0, 0.1), 0 0.1remx rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0.1rem 0.3rem rgba(0, 0, 0, 0.1), 0 0.1rem rgba(255, 255, 255, 0.1);

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */

    @media screen and (max-width: 600px) {
        height: 2.6rem;
    }
}

.graph-buttons-switch-label {
    position: relative;
    z-index: 2;
    float: left;
    width: $switchWidth;
    line-height: 2.4rem;
    text-align: center;
    cursor: pointer;

    @media screen and (max-width: 600px) {
        line-height: 2.2rem;
        width: $switchWidth * 1.02;
    }
}

.graph-buttons-switch-label-off {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

.graph-buttons-switch-label-on {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

.graph-buttons-switch-input {
    display: none;
}

.graph-buttons-switch-input:checked + .graph-buttons-switch-label {
    font-weight: bold;
    -webkit-transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
    -o-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
}

.graph-buttons-switch-input:checked + .graph-buttons-switch-label-on ~ .graph-buttons-switch-selection {
    left: $switchWidth;
}

.graph-buttons-switch-selection {
    display: block;
    position: absolute;
    z-index: 1;
    top: 0.2rem;
    left: 0.2rem;
    width: $switchWidth;
    height: 2.4rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.2rem;
    -webkit-box-shadow: inset 0 0.1rem rgba(255, 255, 255, 0.6), 0 0 0.2rem rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0.1rem rgba(255, 255, 255, 0.6), 0 0 0.2rem rgba(0, 0, 0, 0.3);
    -webkit-transition: left 0.3s ease-out, background 0.3s;
    -moz-transition: left 0.3s ease-out, background 0.3s;
    -o-transition: left 0.3s ease-out, background 0.3s;
    transition: left 0.3s ease-out, background 0.3s;

    @media screen and (max-width: 600px) {
        height: 2.2rem;
    }
}

#beeswarm-chart-container {
    text-align: center;
    position: relative;
}

#beeswarm-chart-container svg {
    max-width: 100%;
    max-height: 100%;
    height: auto; /* Maintain aspect ratio */
    display: inline-block;
}

.bubble {
    stroke: black;
    stroke-width: 2px; 
    fill-opacity: 0.8; 
}

.chart-text {
    user-select: none;
}

.tooltip {
    font-size: 16px;
    background-color: white;
    border: solid;
    border-width: 2px;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
}

text.xLabel  {
    font-weight: 600;
}

.highlight {
    color: white;
    padding: 0.25px 5px;
    border-radius: 10px;
    white-space: nowrap;
}
.demographicCharacteristics {
    background-color: #092836;
}
.landTenure {
    background-color: #2a468f;
}
.livingConditions {
    background-color: #7a5195;
}
.socioeconomicStatus {
    background-color: #1b695e;
}
.health {
    background-color: #ef5675;
}
.riskPerception {
    background-color: #ff6b4a;
}
.exposureToStressors {
    background-color: #ffa600;
}

</style>