BeeswarmChart.vue

<template>
<section id="beeswarm">
    <div id="toggle-container" > 
        <div id="checkbox1-container">
            <input type="checkbox" id="checkbox1" v-model="checkboxStates[0]" @change="handleCheckboxChange(0)">
            <label for="checkbox1">Evidence</label>
        </div>
        <div id="checkbox2-container">
            <input type="checkbox" id="checkbox2" v-model="checkboxStates[1]" @change="handleCheckboxChange(1)">
            <label for="checkbox2">Agreement</label>
        </div>
        <div id="checkbox3-container">
            <input type="checkbox" id="checkbox3" v-model="checkboxStates[2]" @change="handleCheckboxChange(2)">
            <label for="checkbox3">Direction</label>
        </div>
    </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 checkboxStates = ref([false, false, false]);
const checkboxFunctions = [sizeByEvidence, positionByAgreement, sortByDirection];
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: "#625D0B",
    Landtenure: "#5C0601",
    Livingconditions: "#0B4E8B",
    Socioeconomicstatus: "#DC8260",
    Health: "#7F4A89",
    Riskperception: "#249CB1",
    Exposure: "#B47D83"
}

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

// helper function to set up mouse events
function createMouseEvents() {
    const tooltip = d3.selectAll('#beeswarm-chart-container')
    // const tooltip = d3.select("body")
        .append("div")
        .attr("class", "tooltip")
        .style("opacity", 0);

    function handleMouseOver(event, d) {
        tooltip
            .transition().duration(200)
            .style("opacity", 1);
    }

    function handleMouseMove(event, d) {
        const [x, y] = d3.pointer(event); 
        // console.log(x, y);
        tooltip
            .html(`${d.determinant}, Level of Agreement: ${d.level_agreement}`) 
            .style("left", x + "px")
            .style("top", y + "px");
            // console.log("left/X: ", x, " right/Y: ", y);
        d3.selectAll(".bubble")
            .filter(function(e) { return e.dimension !== d.dimension; }) // change the opacity of bubbles that do not have the same dimension as the selected bubble
            .style("opacity", 0.3);
    }

    function handleMouseOut(d) {
        tooltip
            .transition().duration(200)
            .style("opacity", 0);
        d3.selectAll(".bubble")
            .filter(function(e) { return e.dimension !== d.dimension; })
            .style("opacity", 1);
    }

    return {handleMouseOver, handleMouseMove, handleMouseOut}
}

function handleCheckboxChange(index) {
    // Call the corresponding function based on the index
    checkboxFunctions[index](checkboxStates.value[index]);    
}

// call helper function
const { handleMouseOver, handleMouseMove, handleMouseOut } = createMouseEvents();

function createScales(data) {
    // set x axis scale based on level of agreement
    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, 50]);

    return { xScale, radiusScale}
}

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

    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
    const colWidth = width / numCols
    const rowHeight = height / numRows

    categories.forEach((category, index) => {
    let col = index % numCols // Column index
    let row = Math.floor(index / numCols) // Row index

    // Offset columns in the second row
    if (row === 1) {
        col += 0.5 // Offset by half a column width
    }

    // Calculate the center position
    categoryCenters[category] = {
        x: colWidth * col + colWidth / 2,
        y: rowHeight * row + rowHeight / 2
    }
    })

    data.value.forEach((d) => {
    // Add randomness to the initial positions
    const center = categoryCenters[d.dimension]
    d.x = center.x + (Math.random() - 0.5) * 50 // Adjust randomness factor (50 here) as needed
    d.y = center.y + (Math.random() - 0.5) * 50
    })

    // define forces that control the bubbles
    const forceX = d3.forceX((d) => categoryCenters[d.dimension].x).strength(0.2)
    const forceY = d3.forceY((d) => categoryCenters[d.dimension].y).strength(0.1)
    const forceCollide = d3.forceCollide(radius + 2)
    const forceManyBody = d3.forceManyBody().strength(-15) // Adjust the strength as needed

    // add bubbles to the page
    const bubbles = svg
    .selectAll('.bubble')
    .data(data.value)
    .enter()
    .append('circle')
    .attr('class', 'bubble')
    .attr('r', radius)
    .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)
    .restart()

    bubbles
    .on('mouseover', handleMouseOver)
    .on('mousemove', handleMouseMove)
    .on('mouseout', handleMouseOut)

    function ticked() {
    bubbles.attr('cx', (d) => d.x).attr('cy', (d) => d.y)
    }
}

function sizeByEvidence(checked) {
    if (checked){
    const { radiusScale } = createScales(data)
    
    const forceCollide = d3.forceCollide((d) => radiusScale(d.evidence_val) + 2)
    const forceManyBody = d3.forceManyBody().strength(15) // Adjust the strength as needed

    const bubbles = svg.selectAll('.bubble')
        .attr('r', d => radiusScale(d.evidence_val)) // size bubbles based on evidence_val
    
    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)
        .restart()
    
    function ticked() {
        bubbles.attr('cx', (d) => d.x).attr('cy', (d) => d.y)
    }
    } else {
    const radius = 10

    const forceX = d3.forceX((d) => categoryCenters[d.dimension].x).strength(0.2)
    const forceY = d3.forceY((d) => categoryCenters[d.dimension].y).strength(0.1)
    const forceCollide = d3.forceCollide(radius + 2)
    const forceManyBody = d3.forceManyBody().strength(-15) // Adjust the strength as needed
    
    const bubbles = svg.selectAll('.bubble')
        .attr('r', radius)
    
        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)
        .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;
#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;
}
</style>