VisualizationView.vue

<template>
  <section id="visualization">
    <VizTitle />
    <BeeswarmChart /> 
    <NarrativeIntro />
    <InteractiveDendrogram />
    <Maps />
    <Conclusion />
    <AboutTheTeam :data="circleData" />
    <ReferencesSection />
    <AuthorshipSection />
  </section>
</template>

<script setup>
  import VizTitle from '.././components/VizTitle.vue'
  import NarrativeIntro from '.././components/NarrativeIntro.vue'
  import BeeswarmChart from '../components/BeeswarmChart.vue'
  import InteractiveDendrogram from '.././components/InteractiveDendrogram.vue'
  import Maps from '.././components/Maps.vue'
  import Conclusion from '.././components/Conclusion.vue'
  import AboutTheTeam from '../components/AboutTheTeam.vue'
  import ReferencesSection from '.././components/References.vue'
  import AuthorshipSection from '.././components/Authorship.vue'

  const circleData = [
  { name: "Oronde Drakes", link: "https://www.usgs.gov/staff-profiles/oronde-drakes", image: "https://hazards.colorado.edu/api/v2/uploads/avatar/oronde_drakes2-1556849997156.JPG" },
  { name: "Diana Restrepo-Osorio", link: "https://www.usgs.gov/staff-profiles/diana-l-restrepo-osorio", image: "https://d9-wret.s3.us-west-2.amazonaws.com/assets/palladium/production/s3fs-public/styles/staff_profile/public/media/images/Copy%20of%20Restrepo-Osorio_Diana%20L_PA-02473_1702473_027_8x12.jpg?itok=64YcJ9wy" },
  { name: "Kathryn Powlen", link: "https://www.usgs.gov/staff-profiles/kathryn-a-powlen", image: "https://d9-wret.s3.us-west-2.amazonaws.com/assets/palladium/production/s3fs-public/styles/staff_profile/public/media/images/KPowlen_photo.jpg?itok=IufjVCBr" },
  { name: "Megan Hines", link: "https://www.usgs.gov/staff-profiles/megan-k-hines", image: "https://d9-wret.s3.us-west-2.amazonaws.com/assets/palladium/production/s3fs-public/styles/staff_profile/public/thumbnails/image/Hines_Megan_USGS.jpg?itok=mOifmPnR" },
];
</script>

<style lang="scss" scoped>
  #visualization{
    padding: 0rem 0rem 0rem 0rem;

  }
</style>